彩票走势图

Axure应用实例:电商网站下拉搜索框的制作

转帖|行业资讯|编辑:郝浩|2015-12-29 12:01:22.000|阅读 983 次

概述:Axure应用实例电商网站的搜索框,对商品、店铺和卖家进行搜索。切换下拉框中的内容时,切换到不同的搜索输入框,样式也相应改变,下面通过设置下拉列表框“选中项于”逻辑条件,实现上述交互效果。Axure选中项值用例条件,设置选中项值的基本逻辑表达式为:如果“选中项值”等于“值”,那么执行动作,选中项值对应部件:下拉列表框

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

Axure案例应用

电商网站的搜索框,对商品、店铺和卖家进行搜索。切换下拉框中的内容时,切换到不同的搜索输入框,样式也相应改变,下面通过设置下拉列表框“选中项于”逻辑条件,实现上述交互效果。

Axure选中项值用例条件

设置选中项值的基本逻辑表达式为:如果“选中项值”等于“值”,那么执行动作

选中项值对应部件:下拉列表框

逻辑条件设置灵活,分别可以设为:

-值1:选中项值:可以设置部件

-运算符号:可以设置为:等于、不等于、小于、大于、小于或等于、大于或等于、包含、不包含、是、不是

-值2:可以设置为值、变量值、部件值、变量及部件值长度、动态面板状态

Axure制作原型:步骤1

拖入一个下拉列表框,双击“下拉列表框”,打开编辑选项窗口,点击“+”号,添加3个列表值:商品、店铺、卖家,在部件交互和注释命名名称为:搜索条件。

Axure应用实例

步骤2

拖入2个矩形到编辑页面,设置矩形大小:h:35,一个放到最下面,做为搜索框的背景,另一个做为搜索按钮,编辑矩形文本为:搜索。设置2个矩形边框颜色:红色;搜索按钮填充颜色:红色

Axure应用实例

步骤3

拖一个文本框(单行)到编辑页面,设置位置与大小:w:407 h:31;将文本框放到下拉列表框的后面。在部件属性和样式窗口:勾选隐藏边框。设置提示文字为:请搜索商品名称;部件交互和注释窗口,设置部件名称为:商品。

Axure应用实例

步骤4

选中步骤2-3中制作的部件,右键快捷菜单选择:转换为动态面板

Axure应用实例

步骤5

双击动态面板,点击“新增”按钮,添加2个状态,编辑3个状态名称为:商品、店铺、卖家,点击“编辑全部状态”按钮,打开3个状态的编辑页面

Axure应用实例

步骤6

复制“商品”编辑状态中的部件,分别粘贴到“店铺”、“卖家”编辑页面中,修改矩形的边线及填充颜色,文本框(单行)中的提示文本

Axure应用实例

步骤7:设置下拉选择框“选项改变时”事件

选中“搜索条件”下拉列表框,双击“选项改变时”事件,打开用例编辑器,编辑用例1:

用例1:

第一步:用例说明,点击“编辑条件”按钮,打开条件生成器,编辑逻辑条件为:如果搜索条件选中项等于: “商品”

第二步:点击新增动作,选择“设置面板状态”动作

第四步:勾选区域前复选框,设置选择状态为:商品

点击“确定”,关闭用例编辑器

Axure应用实例

步骤8

继续双击“选项改变时”事件,重复步骤6,添加用例2、用例3:

用例2:第一步逻辑条件设置,设置逻辑条件为:如果搜索条件选中项等于: “店铺”;第四步,设置选择状态为:店铺

用例3:第一步逻辑条件设置,设置逻辑条件为:如果搜索条件选中项等于: “卖家”;第四步,设置选择状态为:卖家

Axure应用实例

步骤9

生成原型,查看效果

Axure应用实例

 

本文转载自

 


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP