Axure RP Pro 7.0苏宁易购式标签切换效果教程

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

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

 

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

 

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

工具/原料

  • Axure RP Pro 7.0版本软件

方法/步骤

  1.  

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

    Axure RP Pro 7.0苏宁易购式标签切换效果教程
  2.  

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

    Axure RP Pro 7.0苏宁易购式标签切换效果教程
  3.  

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

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

    Axure RP Pro 7.0苏宁易购式标签切换效果教程
  4.  

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

    Axure RP Pro 7.0苏宁易购式标签切换效果教程
  5.  

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

    Axure RP Pro 7.0苏宁易购式标签切换效果教程
  6.  

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

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

    Axure RP Pro 7.0苏宁易购式标签切换效果教程
    Axure RP Pro 7.0苏宁易购式标签切换效果教程
  7.  

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

     

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

    Axure RP Pro 7.0苏宁易购式标签切换效果教程
    END

注意事项

  • 3个切换效果对应着3个动态面板,每个动态面板对应各个标签下的展示内容
  • 一般情况下,还需要再加一个默认状态的页面。
posted @ 2015-06-11 00:43  ygm900  阅读(664)  评论(0编辑  收藏  举报