- 1、本文档共5页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
3 小时学会Axure 产品经理原型设计系列教程-实战篇
3 小时学会Axure 图文教程案例篇
——05 下拉列表联动效果
作者:张晓
在一些旅游、票务定制的网站上定制行程时,需要用户录入出发地、日期、目的地等信
息,相对于手工输入的方式,使用下拉列表来让用户进行选择无疑是一种更好的用户体验,
这节课我们就来实现这样的一个Axure 的交互案例。
一、下拉列表联动效果
原型软件:Axure RP Pro 7.0 中文汉化版
实例描述:用户在下拉列表中选择一个其中选项,即显示用户选择项所对应的的文本内容。
二、交互设计步骤
(一)设计思路:使用“下拉列表(Droplist )”控件(Widgets ,也称元件/控件)的“选
项改变时”用例,当改变了选项时,设置结果标签内容为选中项的值。
(二)实现步骤
STEP1 :完成控件的布局、命名。将标签(Label )、下拉列表(Droplist )控件拖入
主工作区(Wireframe Pane ,也称线框图面板),对控件命名,并将用于显示选择结果的
标签设置为隐藏。
1
3 小时学会Axure 产品经理原型设计系列教程-实战篇
STEP2 :设置下拉框选项列表。双击下拉列表(Droplist )控件,打开“编辑选项”对
话框,新增列表选项。
完成下拉列表选项后,下拉列表控件会默认显示第一个选项内容。
2
3 小时学会Axure 产品经理原型设计系列教程-实战篇
STEP3 :设置下拉列表的交互用例。
(1 )单击下拉列表按钮控件,在【控件交互和注释面板中】双击“选项改变时”用例;
(2 )设置动作。在用例编辑器对话框中依次编辑【设置文本】、【显示/隐藏】动作。
其中:
【设置选择/选中】动作:选择用于显示结果的“提示语”标签控件,并将其值设为“选择
下拉框的选中项值”。
3
3 小时学会Axure 产品经理原型设计系列教程-实战篇
【显示/隐藏】动作:选择“提示语”标签控件,将其设为显示。
最终的原型演示效果如下:
4
3 小时学会Axure 产品经理原型设计系列教程-实战篇
1、选择”马云“:
2、选择”张晓“:
三、下节课程预告
Axure 案例图文教程:第06 节 制作tab 页签效果
谢谢!
5
文档评论(0)