axure商城

Axure案例:电商网站下拉搜索框的制作

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案例:电商网站下拉搜索框的制作

本文转载自:http://blog.sina.com.cn/s/blog_13e3b11620102vlhj.html

给TA打赏
共{{data.count}}人
人已打赏
案例教程

使用Axure制作手机顶部状态栏上下滑动效果

2015-2-12 12:40:17

基础教程案例教程

Axure学习笔记:手机APP微信读书原型设计

2015-9-21 15:47:11

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索