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

相关推荐

  • Mockplus原型交互跟我做之2- 旋转的风车

    再来看一个小例子,我们做一个旋转的风车。蛮漂亮,是吧? 这里只用到“旋转”交互命令。

    2016-01-18
  • 需求与原型之间有堵墙

    从最初的一个产品概念到最终的产品上线,中间凝聚着一个IT团队的心血和付出。产品经理作为其中的主导者,在一定程度上影响着产品的成败和优劣。在整个产品研发流程中,每一环节都需要产品经理稳扎稳打的来推动项目…

    2016-11-01
  • 学习AxureRP的成长之路

    原文作者@朱军华Ronzhu , 本文借用官网的描述定义,介绍了在学习AxureRP过程当中所要经历的各个阶段,也结合了作者自身学习AxureRP使用的经验,讲一下在各个阶段中的一些学习方法和经验总结,以帮助刚开始学习使用…

    2014-09-06
  • 关于使用Principle的一些小建议

    在日常的设计工作中,难免会遇到一些制作可交互原型的工作。可交互的原型对比于静态原型来说,直观是最大的优点。其次,在研究一些动效的时候,直接调好参数给工程师,会比口述来得更加简单粗暴,效率更好。现在的…

    2016-10-28
  • 【译】Axure RP 8 Beta 官方教程 - 钢笔工具

    From: Learn Axure RP 8 Beta: Pen Tool(http://www.axure.com/c/blog/160-learn-axure-rp-8-beta-pen-tool.html)   Axure RP 8 引入了一个新的钢笔工具功能用来绘制自定义形状。自定义形状是基于矢量的,这…

    2015-09-08
  • 001.Axure rp 6.5的软件安装、汉化与注册

    第一步:从网络上下载axure安装程序到本地电脑、汉化语言包、注册码,双击安装程序,如图:                     第二步:安装过程截图乱码的情况是正常的 &nbs…

    2014-09-09
  • 交互设计的背景

    交互设计的概念上一章节已经讲过了,我们还是需要进一步了解什么交互设计的发展背景,为什么会出现这个行业? 说起来还很有意思的,我们的互联网时代发展有这么几个阶段: 1.网页设计-美工时代 注重模板设计,信息…

    2014-09-23
  • JUSTINMIND权威指南:前言

    ​来说一说为什么要写这本JUSTINMIND相关的书籍,此前我做交互设计的时候,有一次遇到一个特别的APP项目,这个项目的BOSS要求给拿出一个高保真的原型给他演示,我们项目组就问我怎么才能做出一个可以演示的高保真原…

    JustinMind 2015-07-31
  • 照虎画虎——简单WeUI模板UX设计学习

    艺术虽然分为独立的各个领域,但是总有相通之处。UI/UX设计也是一种艺术,就像美术一样,UI/UX的设计也需要大量的临摹其他优秀作品来提高自己的水平。不过俗话说:“照猫画虎”,如果你临摹的对象不合适,很有可能只…

    2023-03-03
  • 在熟练使用2B铅笔前,请不要打开Axure

    在互联网产品领域,Axure已成为产品经理、产品设计师以及交互设计师的必备工具,从某种程度讲,Axure帮助我们建立低保真模型,便于与用户的需求验证,也帮助我们构思交互细节,使前端和开发人员更容易理解我们的产品;但从另一方面讲,Axure绑架了我们的思维,让很多产品经理和设计师养成了“无Axure不设计”的恶习,忽略了用户故事、功能规格和信息架构,甚至走入“为了用Axure而用的误区”,导致了资源的大量浪费和产品的硬伤。因此,提醒为Axure着迷的产品经理:在熟练使用2B铅笔前,请不要打开Axure。

    2015-01-01