Axure RP Pro 7.0苏宁易购式标签切换效果教程
转:http://jingyan.baidu.com/article/7082dc1c4f0a11e40a89bdac.html
页面标签切换效果,几乎是所有大网站(尤其是电商类网站)标配的交互方式;
之所以应用如此普遍,关键在于网站首屏展示区,是寸土寸斤的黄金区域;标签切换可以让更多内容在同一块地方展示;相当于两块同样面积的地皮,一个盖平房,一个盖楼房,土地利用率自然不可同日而语;
本教程是仿造苏宁易购网站标签切换效果,为了就是切合实际,让你能将Axure技术与最前沿的应用场景结合起来,当你需要制作标签切换交互效果时,可以先制作内容,然后再实现交互功能;
工具/原料
- Axure RP Pro 7.0版本软件
方法/步骤
新建动态面板:向编辑窗口拖入一个动态面板,并将长和宽设置为299*121;
动态面板命名:鼠标右击动态面板,点选“管理面板状态”,在弹出框新建3个动态面板,分别命名为:“促销”、“公告”、“论坛”;
编辑动态面板:在Axure右下方的部件管理(也有汉化版称为元件管理),依次右击“促销”、“公告”、“论坛”,并在弹出菜单中点选编辑;
这时会有三个待编辑的空白标签页面,而每个页面代表一种状态,即是每个标签及其所代表的内容;
编辑动态面板内容:在名为“促销”动态面板标签页,拖入3个矩形,在每个矩形内填入名称,由于当前要展示的为促销信息,因此将“促销”二字加粗;同样,针对“公告”、“论坛”亦如是;
增加标签对应内容:在“促销”标签页内,增加列表信息内容,合计有6条;针对“公告”、“论坛”亦如是;
增加切换动作:在“促销”标签下,鼠标单击“公告”,在Axure右边“部件交互与注释”模块,双击“鼠标移入时”选项,在弹出的“用例编辑器”中点击“设置面板状态”,并依次选择状态名为“公告”的动态面板;
同样,对于“论坛”标签也如此操作;代表了在促销展示效果下,可以切换到“公告”标签页,也可以切换到“论坛”标签页
完成切换动作设置:在“公告”标签下,对“促销”和“论坛”两个标签设置动作,同样,在“论坛”标签下,对“公告”和“促销”设置动作,从而完成3个展示效果的切换操作设置;
完成以上操作,并保存后,按发布快捷建“F5”,即可在浏览器中看到标签切换效果了,你会发现你亲手制作完成的效果,与苏宁网站上的一模一样,不分真假!好好给自己庆祝一下吧!
END
注意事项
- 3个切换效果对应着3个动态面板,每个动态面板对应各个标签下的展示内容
- 一般情况下,还需要再加一个默认状态的页面。
Axure RP Pro 7.0苏宁易购式标签切换效果教程的更多相关文章
- axure rp pro 7.0(页面原型工具)
axure rp pro 7.0 下载连接:地址
- Axure RP Pro 7.0
Axure RP Pro专为Rapid Prototype Design而生,它可以辅助产品经理快速设计完整的产品原型,并结合批注.说明以及流程图.框架图等元素将产品完整地表述给各方面设计人员,如UI ...
- [工具推荐]005.Axure RP Pro 7.0模拟C#TAB控件
有一次,主管安排我写一个项目的原型,但是项目中涉及到了Tab控件,在Axure中的控件中找了一番,没有找着Tab控件.那么我们只能换种法子来实现它了,我们用到了Dynamic Panel来模拟. 1. ...
- axure rp pro 8.0 注册码
激活码:(亲测可用) 用户名:aaa 注册码:2GQrt5XHYY7SBK/4b22Gm4Dh8alaR0/0k3gEN5h7FkVPIn8oG3uphlOeytIajxGU 用户名:axureuse ...
- Axure RP Pro 7.0 注册码
用户名:aaa注册码:h624pifAqt7It5e8boKkML+Y4RjDX5xknP4k7QktJYQoxsvv7VUS7hBCv/2ef45P
- axure rp pro 6.5
现在地址:http://www.xdowns.com/soft/1/95/2012/Soft_94434.html Axure6.5正式版推出了,大大改善了用户体验以及修复了很多6.0上的bug. 而 ...
- Axure快捷键大全 Axure RP Pro 6.5快捷键
习惯用Axure快捷键会让你做原型的时候更得心应手.Axure中文网总结了常用的一些快捷键分享给大家 . Axure RP Pro 6.5快捷键大全,如有疏漏,欢迎补充. 基本快捷键: 打开:Ct ...
- Axure RP Pro 6.5 正式版发布,新功能介绍,
转:http://www.babesun.com/blog/page/5 2012-4-19,Axure公司发布了Axure RP Pro 6.5 正式版.网上高手发现了Axure支持多语言文件,以此 ...
- jQuery仿苏宁易购导航
最近看了些网上的各类导航网站源码,自己学习制作了一个仿苏宁易购的导航栏 jQuery部分代码 $(function(){ $(".CategoryTree>ul>li" ...
随机推荐
- expdp和impdp快速导出导入,不用创建虚拟目录
expdp 和impdp不用创建虚拟目录:在cmd直接 expdp 用户名/密码 回车 就导出了,(如果提示输入用户名和密码就输入).再将导出的文件放在oracle默认的dpdump文件夹里面,然 ...
- 【 总结 】Tcp Keepalive 和 HTTP Keepalive 详解
TCP Keepalive Tcp keepalive的起源 双方建立交互的连接,但是并不是一直存在数据交互,有些连接会在数据交互完毕后,主动释放连接,而有些不会,那么在长时间无数据 ...
- webpack中的output.filename 和output.chunkFilename
filename应该比较好理解,就是对应于entry里面生成出来的文件名.比如: { entry: { "index": "pages/index.jsx" } ...
- jquery----数据增删改
简单版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- js计时器 setInterval与clearInterval
var timer = setInterval(函数, 毫秒数) 功能:每隔对应的毫秒数执行一次函数. 返回值:系统没启动一个定时器,就会给一个标识,返回值就是这个定时器的编号. clearInter ...
- easyUI拖动课程进课程表
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>拖动 ...
- python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)
昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...
- 成员变量传参,jion方法的使用
package charpter06; //MyThread02和MyThread01两个类 相互调用的结果public class MyThread01 extends Thread { // 用全 ...
- Spring的控制反转和依赖注入
Spring的官网:https://spring.io/ Struts与Hibernate可以做什么事? Struts, Mvc中控制层解决方案 可以进行请求数据自动封装.类型转换.文件上传.效验… ...
- C. 【UNR #2】黎明前的巧克力
题解: 不会FWT,只能水40分了 首先,要观察出的性质就是: 选出的集合要满足所有数亦或等于0,而在其中任选子集都可以满足条件,答案就等于sigma(2^size(s)) 这样dp一波显然就可以O( ...