axure实例教程 鼠标悬停+动态面板结合使用

axure商城

鼠标悬念时改变原状态,如加底色/字体颜色改变等交互在axure中是非常容易实现的,本原型中结合了鼠标悬念和动态面板的使用。上图片啦:
1.鼠标悬停前效果
axure原型 <wbr> <wbr>鼠标悬停+动态面板结合使用
2.鼠标悬停后的效果:字体低色为粉色
axure原型 <wbr> <wbr>鼠标悬停+动态面板结合使用

3.动态面板(未上图)

先来看下所有元件,如下图:
axure原型 <wbr> <wbr>鼠标悬停+动态面板结合使用

整理清楚所有元件,现在开始做原型,开始着手做原型啦
1.建立背景矩形
拉一个矩形出来,宽:910,高:480,填充颜色:灰色
2.装饰条形
矩形,宽:150,高:5,无边框,填充颜色:橙色
3.今日团矩形
矩形,宽:150,高:37,无边框,填充颜色:粉色,文字:今日团
4.分类背景框
矩形,宽:150,高:250,无边框,填充颜色:白色 
5.分类矩形
矩形,宽:50,高:30,无边框,填充颜色:无色 ,字体:女装,同样设置其它分类
6.NEW矩形
拉一个矩形框出来,填充颜色:红色,字体颜色:白色,字为:NEW!,鼠标点矩形右键,选择【选择形状】---【向右对话气泡】,如图
axure原型 <wbr> <wbr>鼠标悬停+动态面板结合使用7.鼠标悬念,字体显示为粉色
a.拉矩形框,设置无边框,无填充颜色,建立12个分类
b.选择分类矩形,点鼠标右键,选择【交互样式】,设置鼠悬停交互,如下图
axure原型 <wbr> <wbr>鼠标悬停+动态面板结合使用
8.动态面板
a.拉一个动态面板,并添加12种状态,为每个分类添加一个对应的状态,设置12个状态是为了,点击不同的分类,显示不同的内容;对每个状态添加不同的图片
b.设置分类与动态面板状态对应,如设置“家居“分类与动态面板中的状态对应
b1.点击“家居”分类,在交互中添加“鼠标单击时”的用例,如下图
axure原型 <wbr> <wbr>鼠标悬停+动态面板结合使用

axure原型 <wbr> <wbr>鼠标悬停+动态面板结合使用
对每一个分类设置好动态面板应对的状态即可。
9.预览,按F5,预览原型

原型下载地址:  2018102201341150

本文由 Axure中文网 作者:Axure中文网 发表,其版权均为 Axure中文网 所有,文章内容系作者个人观点,不代表 Axure中文网 对观点赞同或支持。如需转载,请注明文章来源。
10

评论:

3 条评论,访客:3 条,站长:0 条

0%好评

  • 好评:(0%)
  • 中评:(0%)
  • 差评:(0%)

最新评论

  1. 侯藤寻
    侯藤寻发布于: 

    如何让第一个分类在点击后再出现图片,我生成预览第一个分类图片直接就显示在旁边了

    • 劉趫
      劉趫发布于: 

      在已完成的基础上.在动态面板里添加一个新状态,置顶到最上面即可.

发表评论