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

相关推荐

  • 新书:JUSTINMIND权威指南 作者:阿西UED

    《Justinmind权威指南》是国内第一部专著介绍Justinmind交互式原型设计的技术与技巧,讲述如何从确切的需求和期望出发,用最简单的方法创建易用、有效而且让用户愉悦的原型设计。书中从软件基础组件、工作方式、跨…

    2015-07-31
  • 干货:关于响应式布局

    【导读】响应式布局是在如今屏幕尺寸越来越多样化趋势下的解决之道,但是该如何去做响应式布局呢? 在谈响应式布局前,我们先梳理下网页设计中整体页面排版布局,常见的主要有如下几种类型: 布局类型

    2015-03-19
  • 【Mockplus教程】为什么删除多个页面的时候会有提示,如何取消提示?

    为了防止误操作,在删除三个及以上页面的时候,Mockplus默认会给出输入“delete”字符 完成删除的确认提示,如下图: 要去掉这个提示,在设置中去掉这个选项即可,如下图:      

    2015-08-17
  • 在手机上演示axure原型

    AXSHARE APP发布啦,以后大家的原型可以通过这款APP进行预览演示咯。小编迫不及待的体验了一下这款APP。 要使用这款APP,首先需要有axshare的账号。账号注册地址:https://share.axure.com/ 然后在手机上下载AxShar…

    2015-05-28
  • [Mockplus教程]创建

    新建页面可以使用三种方式来实现: 1 点击右边页面树顶部的“+”按钮; 2 在右边页面面板空白处右击,在弹出菜单中选择“新建页面”; 3 直接使用快捷键Ctrl+Enter(MAC系统为Command+Enter)。 下面为三种方式新建页面…

    Mockplus 2015-09-18
  • AxureRP8从8.0.0.3318改变了授权验证,教师与学生可以申请免费 key!

    #交互学堂##Axure#RP8.0.0.3318更改授权验证机制,旧的授权名以及密码将会失效。 划重点:个人用户除了购买正版软件,也可以暂时维持当前版本不做升级,当然这也是以失去软件的稳定性为代价。这也就意味着一段时间…

    2016-10-31
  • 【Axure原型设计】手机APP微信读书原型设计

    最近在学Axure,周末做了个案例练练手,选了腾讯新出的微信读书,主要考虑这是1.0版,所以功能不是那么复杂。做完之后回顾了一下自己的制作过程,既算是做一个总结,也希望能给同样正在学习的新手带来一点帮助。就…

    2015-10-14
  • 成为设计师不是不可能!

      前言:本文译自国外高质量问答社区Quora,原文作者Karen X. Cheng,原是微软Excel的项目经理,后通过自学转型成为设计师。她讲述的自学过程详实细致且条理有序,读完会发现与想象中的大不一样,对于想自学设…

    2015-04-01
  • 交互设计前的预备知识

    进行交互设计之前需要一些预备知识: 预备知识一:能看懂思维导图:下图是艾欧学堂的思维导图 在思维导图中可以清晰明确的看到我们的栏目规划,和内容方向那么原型设计基于此开展设计,如果有一份完整的需求说明书…

    原型设计教程 2014-09-27
  • 从三个方面简析设计中的用户友好

    随着用户体验重要性的不断提高,用户友好的概念也得到了越来越多的重视。那么如何在设计中体现出用户友好呢?熊先生觉得,有三点内容是比较重要的: 整个界面的一致性抓住用户特点更容易获得帮助 因为最近使用Mockp…

    2023-03-03