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教程】页面属性

    每个页面都具有独自的属性,通过页面属性对话框可以设置 页面的背景、统一字号以及相应平台的页面尺寸等。 打开需要添加或者查看备注信息的页面,在页面节点上面鼠标右击, 弹出菜单中选择“页面属性”一项,如下图:…

    Mockplus 2015-08-31
  • Axure RP 8.0 + 汉化包下载

    官方下载地址: FOR WINDOWS BETA FOR Mac BETA 网盘下载地址: Win版下载地址 Mac版下载地址 Axure RP 8.0 汉化包下载: Win自动汉化Axure RP 8.0 安装文件 通用Axure RP 8.0 汉化文件 注意:Win自动汉化程序只支…

    2015-08-24
  • Axure中文教程:注释功能

    AxureRP将交互与注释说明功能放在了一个面版上,同时又针对整个页面有一个交互与注释说明。交互功能设置的是用户通过不同方式触发页面中元素或者载入页面时,发生的交互动作。而注释说明则用文字详细说明对应元素的细节或页面的说明。由于针对整个页面的说明和交互,与针对页面中某个元素的说明与交互在文档表现和生成的不同,而被分开,但是他们的实际功能是一致的,可以一起来说。这里主要讲述annotations,即注释说明,这个部分主要应用于后期的产品规格说明书的生成,详细可参见《AxureRP教程–生成规格说明书》。

    2015-01-01
  • Axure中文版使用指南 PPT

    slideshare被和谐了,原来的PPT看不到了。大家移步到百度文库看吧。这个视频教程适合新手阅读,可以让你快速了解Axure RP.

    2015-01-01
  • 【Mockplus教程】Windows上安装Mockplus

    进入摩客官网桌面端下载页面,选择对应的版本(windows/MAC)下载。 下载完成后,即可按照向导开始安装。 windows安装的整个过程见下方视频:  

    2015-08-12
  • 简单易用的交互设计工具:摩客串串Chinco

    今天给大家介绍一款简单实用的原型交互演示设计工具—摩客串串Chinco。 为什么要介绍这款产品呢? Chinco是继国产原型设计软件Mockplus之后,由摩客团队独立设计开发又一个面向设计师的产品,主要使用者就是咱们的UI…

    2016-01-06
  • Axure rp 6.5的软件安装、汉化与注册

    第一步:从网络上下载axure安装程序到本地电脑、汉化语言包、注册码,双击安装程序,如图:

    2015-01-01
  • 『交互设计经验分享』信息交互设计金字塔法则

    本文由卓衡科技运营总监刘鹏分享。文中刘鹏讲述了他们在创业过程中总结出的交互设计的金字塔法则。 金字塔方法这个说法来源于美国著名的现代管理咨询公司麦肯锡。大致的意思就是:任何事情都能归纳出一个中心点,而…

    2015-01-27
  • 【Mockplus教程】界面闪烁花屏怎么办?

    在个别笔记本电脑上,运行Mockplus桌面版出现软件界面闪动或者界面出现黑色块。 在这种情况下,请更新您的显卡驱动程序,问题一般可解决。 或者,如果你有多个显卡,尝试切换到集成显卡。 如何切换显卡:http://ask…

    Mockplus 2015-08-12
  • [自译]我们如何使用原型,原型又如何让我们更加高效

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

    2016-09-08