转:http://jingyan.baidu.com/article/7082dc1c4f0a11e40a89bdac.html

页面标签切换效果,几乎是所有大网站(尤其是电商类网站)标配的交互方式;

之所以应用如此普遍,关键在于网站首屏展示区,是寸土寸斤的黄金区域;标签切换可以让更多内容在同一块地方展示;相当于两块同样面积的地皮,一个盖平房,一个盖楼房,土地利用率自然不可同日而语;

本教程是仿造苏宁易购网站标签切换效果,为了就是切合实际,让你能将Axure技术与最前沿的应用场景结合起来,当你需要制作标签切换交互效果时,可以先制作内容,然后再实现交互功能;

工具/原料

  • Axure RP Pro 7.0版本软件

方法/步骤

  1.  

    新建动态面板:向编辑窗口拖入一个动态面板,并将长和宽设置为299*121;

  2.  

    动态面板命名:鼠标右击动态面板,点选“管理面板状态”,在弹出框新建3个动态面板,分别命名为:“促销”、“公告”、“论坛”;

  3.  

    编辑动态面板:在Axure右下方的部件管理(也有汉化版称为元件管理),依次右击“促销”、“公告”、“论坛”,并在弹出菜单中点选编辑;

    这时会有三个待编辑的空白标签页面,而每个页面代表一种状态,即是每个标签及其所代表的内容;

  4.  

    编辑动态面板内容:在名为“促销”动态面板标签页,拖入3个矩形,在每个矩形内填入名称,由于当前要展示的为促销信息,因此将“促销”二字加粗;同样,针对“公告”、“论坛”亦如是;

  5.  

    增加标签对应内容:在“促销”标签页内,增加列表信息内容,合计有6条;针对“公告”、“论坛”亦如是;

  6.  

    增加切换动作:在“促销”标签下,鼠标单击“公告”,在Axure右边“部件交互与注释”模块,双击“鼠标移入时”选项,在弹出的“用例编辑器”中点击“设置面板状态”,并依次选择状态名为“公告”的动态面板;

    同样,对于“论坛”标签也如此操作;代表了在促销展示效果下,可以切换到“公告”标签页,也可以切换到“论坛”标签页

  7.  

    完成切换动作设置:在“公告”标签下,对“促销”和“论坛”两个标签设置动作,同样,在“论坛”标签下,对“公告”和“促销”设置动作,从而完成3个展示效果的切换操作设置;

    完成以上操作,并保存后,按发布快捷建“F5”,即可在浏览器中看到标签切换效果了,你会发现你亲手制作完成的效果,与苏宁网站上的一模一样,不分真假!好好给自己庆祝一下吧!

    END

注意事项

  • 3个切换效果对应着3个动态面板,每个动态面板对应各个标签下的展示内容
  • 一般情况下,还需要再加一个默认状态的页面。

Axure RP Pro 7.0苏宁易购式标签切换效果教程的更多相关文章

  1. axure rp pro 7.0(页面原型工具)

    axure rp pro 7.0 下载连接:地址

  2. Axure RP Pro 7.0

    Axure RP Pro专为Rapid Prototype Design而生,它可以辅助产品经理快速设计完整的产品原型,并结合批注.说明以及流程图.框架图等元素将产品完整地表述给各方面设计人员,如UI ...

  3. [工具推荐]005.Axure RP Pro 7.0模拟C#TAB控件

    有一次,主管安排我写一个项目的原型,但是项目中涉及到了Tab控件,在Axure中的控件中找了一番,没有找着Tab控件.那么我们只能换种法子来实现它了,我们用到了Dynamic Panel来模拟. 1. ...

  4. axure rp pro 8.0 注册码

    激活码:(亲测可用) 用户名:aaa 注册码:2GQrt5XHYY7SBK/4b22Gm4Dh8alaR0/0k3gEN5h7FkVPIn8oG3uphlOeytIajxGU 用户名:axureuse ...

  5. Axure RP Pro 7.0 注册码

    用户名:aaa注册码:h624pifAqt7It5e8boKkML+Y4RjDX5xknP4k7QktJYQoxsvv7VUS7hBCv/2ef45P

  6. axure rp pro 6.5

    现在地址:http://www.xdowns.com/soft/1/95/2012/Soft_94434.html Axure6.5正式版推出了,大大改善了用户体验以及修复了很多6.0上的bug. 而 ...

  7. Axure快捷键大全 Axure RP Pro 6.5快捷键

    习惯用Axure快捷键会让你做原型的时候更得心应手.Axure中文网总结了常用的一些快捷键分享给大家 . Axure RP Pro 6.5快捷键大全,如有疏漏,欢迎补充. 基本快捷键:   打开:Ct ...

  8. Axure RP Pro 6.5 正式版发布,新功能介绍,

    转:http://www.babesun.com/blog/page/5 2012-4-19,Axure公司发布了Axure RP Pro 6.5 正式版.网上高手发现了Axure支持多语言文件,以此 ...

  9. jQuery仿苏宁易购导航

    最近看了些网上的各类导航网站源码,自己学习制作了一个仿苏宁易购的导航栏 jQuery部分代码 $(function(){ $(".CategoryTree>ul>li" ...

随机推荐

  1. expdp和impdp快速导出导入,不用创建虚拟目录

    expdp 和impdp不用创建虚拟目录:在cmd直接   expdp 用户名/密码 回车 就导出了,(如果提示输入用户名和密码就输入).再将导出的文件放在oracle默认的dpdump文件夹里面,然 ...

  2. 【 总结 】Tcp Keepalive 和 HTTP Keepalive 详解

    TCP Keepalive Tcp keepalive的起源          双方建立交互的连接,但是并不是一直存在数据交互,有些连接会在数据交互完毕后,主动释放连接,而有些不会,那么在长时间无数据 ...

  3. webpack中的output.filename 和output.chunkFilename

    filename应该比较好理解,就是对应于entry里面生成出来的文件名.比如: { entry: { "index": "pages/index.jsx" } ...

  4. jquery----数据增删改

    简单版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. js计时器 setInterval与clearInterval

    var timer = setInterval(函数, 毫秒数) 功能:每隔对应的毫秒数执行一次函数. 返回值:系统没启动一个定时器,就会给一个标识,返回值就是这个定时器的编号. clearInter ...

  6. easyUI拖动课程进课程表

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>拖动 ...

  7. python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  8. 成员变量传参,jion方法的使用

    package charpter06; //MyThread02和MyThread01两个类 相互调用的结果public class MyThread01 extends Thread { // 用全 ...

  9. Spring的控制反转和依赖注入

    Spring的官网:https://spring.io/ Struts与Hibernate可以做什么事? Struts, Mvc中控制层解决方案 可以进行请求数据自动封装.类型转换.文件上传.效验… ...

  10. C. 【UNR #2】黎明前的巧克力

    题解: 不会FWT,只能水40分了 首先,要观察出的性质就是: 选出的集合要满足所有数亦或等于0,而在其中任选子集都可以满足条件,答案就等于sigma(2^size(s)) 这样dp一波显然就可以O( ...