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

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

2.鼠标悬停后的效果:字体低色为粉色

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

3.动态面板(未上图)

先来看下所有元件,如下图:
axure实例教程  鼠标悬停+动态面板结合使用

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

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

原型下载地址:  http://pan.baidu.com/s/1dD6FnUT

转载请注明:木卫艾欧网 » axure实例教程 鼠标悬停+动态面板结合使用

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/2446/

(0)
iouedioued
上一篇 2014-12-31 17:00
下一篇 2014-12-31 19:00

相关推荐

  • 交互设计-网站页面视差效果(Axure RP 7.0 源码下载)

    很多(想)学习Axure的朋友,都是伸手党,这是一条不争的事实,直接拿过来省事又省时;
    能真正学会并驾驭这款软件的毕竟是少数(其他软件也一样,这似乎是一条无法打破的规律),不过金乌老师还是希望想使用这款工具帮你应付差事(实现梦想)的小伙伴儿们加油,自学是很辛苦的,只有经历了挫败、枯燥、郁闷的适应期才能真正适应并喜欢上自学这种方法,不积跬步无以至千里。

    IxD案例 2015-01-05
  • Justinmind权威指南:基础-Justinmind 6.x工作界面与机制

    ​这一篇也是仅作了解熟悉,方面大家后面快速上手,先来看一看工作界面以及各个功能的入口。然后再来了解一下工作方式。 Justinmind的主界面简介 主要分为几个区域:导航栏、工具属性栏、元件区、交互事件区、数据源…

    2015-08-05
  • 002.认识Axure的软件界面

    Axure的软件界面总的来说,可以分为9大模块 1. 菜单栏:和大部分的软件界面一样,都是一些常规的文件、编辑、视图…… 2. 工具栏:是页面进行编辑的一些快捷操作,主要有字体设置、大小设置、页面显示大小和Axure本身…

    原型设计教程 2014-09-12
  • Justinmind 2015年更新回顾

      2015年是激动人心的一年!今年,我们已经推出了许多新的功能,为您带来一个更美好的原型开发工具。下面,我们回顾下2015年justinmind的改进。                 &nb…

    2016-01-06
  • 苹果用户怎么部署Axure环境-imac&axure

    iMac安装各种必备软件,当然少不了Axure这个吃饭的软件 下载地址在页面底部 ★ 汉化方法: 首先退出正在运行中的 Axure (如果您正在使用). 将 lang.rar 文件解压, 得到 default 文件. ★ Windows版 ① 复制 default 文…

    2014-12-10
  • 移动导航设计详解-交互基础

    在移动端,导航是APP最重要的区别。本文分析了使用频率较高的移动导航设计的应用场景及优劣势,有以下几类: 1. Tab导航 Tab 导航分上下两种。是最常用的导航形式。 很多iOS应用,采用这种导航。比如:istegrame(…

    2014-12-04
  • 交互设计师成长分为三个阶段

    提起交互设计,它既没有界面视觉设计绚丽,也没有用户体验设计有趣,看起来枯燥乏味,学起来复杂难懂,但它却是整个产品流程中最核心的部分之一。一个牛X的交互设计师是睥睨天下的,无论薪资还是技术。(以上海地区为例)但在通往牛X的路上……很多人还没开始就放弃了经常会有人说交互设计好像已经趋于饱和,现在从事这个行业没机会了。照这么说,公务员是我见过的饱和度最高的行业了,但每年还是有那么多人争得头破血流要为人民服务。就像金字塔一样,往往最底层的那一部...

    2018-04-18
  • Justinmind6.6版本下载和中文汉化包下载

    Justinmind已更新至6.6版本啦,中文汉化包由小楼老师原创制作,在这里小编整理出来提供大家下载,仅供学习交流使用哦。 Justinmind V6.7已经更新了,请移步:Justinmind V6.7新功能简介和下载链接 下载地址: Justi…

    JustinMind 2015-06-25
  • [自译]我们如何使用原型,原型又如何让我们更加高效

    原型是至关重要的,它能够帮助你的团队创造出最好的产品。它是一个机会来试验你的想法,并转化为有形的状态,你可以继续测试或者展开。当你的原型失败之后,你也会很软着陆-这里还有很多机会去迭代和改进。

    2016-09-08
  • 设置交互要多久?最快只需三秒!

    原型设计分为两种,一种是静态的线框图,我们一般叫wireframing;另一种是动态的原型,一般叫作prototyping。目前在prototyping设计中涉及到的交互主要分为三种:页链接、交互状态和组件之间的交互。而动态原型的设…

    2023-03-03