使用Axure实现电商产品列表复杂原型

1、使用Axure实现电商产品列表复杂原型在原型图制作中，经常需要制作一些数据可变的原型。 例如，搜索查找时的 模糊匹配，管理平台中商品的添加与删除，状态发表时文字输入的字数统计。 在 Axure7.0之前需要实现这些功能十分复杂，并且要配合大量的动态面板。Axure7.0版本开始增加了中继器元件，该元件功能强大，是一个数集的容器， 中继器一共有11个动作，其中包括6个中继器动作和5个数据集动作，在原型 制作中可以导入图片和数据，在交互上它可以实现新增行、删除行、标记行、排 序，筛选等。配合函数使用，中继器可以实现的高级交互效果更多。1.1产品列表案例完成效果本案例最终可以实现对商品列表进行增删改

2、查的操作，也可以进行排序，页面效果如图4.1所示图4.1产品列表技能分析中继器与条件判断的结合。案例实现 实现步骤与讲解步骤1 :产品页面搭建本案例中产品列表是由中继器元件搭建的，中继器的使用方法与动态面板略 有不同。中继器是数据集，是对数据库的模拟，先制作数据排版结构，然后插入 数据即可将想要的效果表现出来，并不需要依次制作所有的数据展示模块， 如图 4.2所示。图4.2中继器的数据排版结构向页操作区拖入中继器元件，在右侧的属性栏中增加了一项中继器独有的 每项加载时”事件及中继器数据表，如图4.3所示。图4.3中继器的独有事件双击进入中继器面板，此时面板中只有一个矩形元件（无用途，直接删去）

3、，如图4.4所示。tP3gel图4.4中继器内部样式向面板中添加所需要的元件（文本元件设置为只读”）。由上向下命名为name、price、Pro、img。其中，name、price 为单行文本元件（单行文本元件 不能对文本进行换行），Pro为多行文本元件，如图4.5所示。产品图片0J - L L L名称价格r笥介图4.5中继器中的排版样式在软件右侧的中继器数据表中新增列， 并为新增列命名（中继器中的列名不可以使用中文字符，否则会使设置无效），同时填入所需的数据值，如图 4.6所7 +红器IDnarriprttFrokTig1卷番奉累500等关三翥,金刍工呈丹身且三辞.TB1GD6U.YX2&.

4、54J三畀之三.三和文金左妲无素.TB2D7EpgFAXi-3499雪器丰富.含有K量的SSSjB表.TE2r-qOuJtK 4不3 S3首弄三空 芝白,，尚祥追无素.TEZSGfJKifiK5799首养丰亩.含有K4强.U=337416284 4a首元旧5 55冷胃畜,言有万及的8用元字.55759 8_1jhc 7=5 55淅丰吉-自营K01福湿元素.-J叫占aMg身1299=,含G后而强元事.小苴RH拜jpg I3订的T*11.W烹养幸宫.10匚星军垄690昔羡工录.台育K量力予斫暴.红星羊Rjcc二一后弯;岩社自身我生一图4.6列名及数据其中，img列的图片采用右击导入方式实现，如图

5、4.7所示。T日 1 TCEH rw -ATB2引用更面TB2导入图片TBZ图4.7图片的导入数据插入完成后，为中继器添加 每项加载时”事件。设置文本，选中“name（文本框）”复选框，设置文本框的值为I。设置文本，选中“ price文 本框）”复选框，设置文本框的值为Item.price。设置文本，选中“ PrO文本框）” 复选框，设置文本框的值为Item.Pro。设置图片，选中“piC图片）”复选框， 设置Default值为litem.img （注：Item函数返回指定集中的元组），如图4.8所图4.8设置加载时事件文本值的设置方法：以“name文本框）”为例。单击仪图标，

6、弹出编辑文本对话框。单击 插入变量或函数”，单击中继器/数据集”，选才 I单击 确定”按钮，完成文字值的设置，如图4.9所示图4.9文字信函数的设置文本值设定后对各项数据的页面总体排列样式进行设置，主要是对布局、是否分页、间距进行设置，如图4.10所示。布局垂直 3水平图4.10样式设置设置完成后即可在页面中看到产品列表效果，如图4.11所示。名称忙后土优价格5.D0简介里捧土国.宜由人员的母母三堂.耀昆自 患眇律塞初学三产品图片1 /1名称价格6.5D筒介必用i豆.玄刍1量的多量无市；贮身 （I所案,春初学互产品图片图4.11数据的页面展示样式步骤2:产品的新增制作数据输入的

7、文本输入框，分别命名为z_name、z_price、z_pro、z_img ,选中4个输入框和对应文本，右击转换为动态面板，命名为 数据”，设置为隐 藏。制作新增按钮，右击转换为动态面板，命名为 新增”。添加状态2,制作 同样式的按钮保存”。新增模块白样式如图4.12所示。刍称价格简介图片I 京一|图4.12数据新增的样式设置交互事件。在录入商品信息时，名称和价格不能为空。设置文本提示，命名为 提示1”。将提示内容 产品名称和价格不能为空”设 置为隐藏。添加名称文本框的失去焦点时事件，设置判断条件为 如果文字元件为空时, 设置新态面板增动”中按钮保存”的状态为禁用”。显示提示，等待1000毫秒

8、， 隐藏提示，设置动态面板 新增”中按钮 保存”的状态为启动”，如图4.13所示（价 格文本框的设置方法与此相同）图4.13文本元件为空时的设置图片文本框的设置。在属性栏中将图片文本框的类型设置为文件。设置动态面板 新增”的交互事件。为状态1中的按钮 新增”添加鼠标单击时事件，显示动态面板 数据”，设置动态面板 新增”的状态为状态2,如图4.14所图4.14按钮 新增”的状态设置为状态2中的按钮保存”设置鼠标单击时事件。如果文本元件 z_name与z_price为空，禁用动态面板 新增”中的按钮 保存”。显示提示文字，等待1000毫秒，隐藏提示文字，启用动态面板新增”中的按钮 保存”，如图4.

9、15所示图4.15文本元件为空时的设置如果文本元件z_name与z_price都不为空，设置添加行1为中继器，隐藏 动态面板 数据”。设置动态面板 新增”为状态1,如图4.16所示图4.16文字元件都不为空时的设置其中，添加行1为中继器的设置如图4.17所示。单击 中继器 数据集 添加 行选中（中继器）”复选框。单击 添加行按钮，弹出添加行到中继器对话框。 单击仪弹出变量 编辑值”对话框。添加局部变量 LVAR1,为文字元件z_name 的值。插入局部变量LVAR1,单击 确定”按钮。甲M0；、需白单击时:用恻芯* .2上云擢/ L打关会汇I上在*门唯5 的肺疝淤产：S1 哂本 自上口事小疑抽

10、* Q他”* if Trwt?:SW电有通为口让It雅,匚早归会在谢二0manepflCAPiatong正匚那R11 fnbtLlWRU fxtsfX TB21EwqXYnA 占txtnF方-aS回期占占传学&等到BMEBVIETT中.岫c ；*堂*flgnLuzMr3眸痂frWPnUMmi1.0 ；同心总将阿面8%砧明一回印的町:Wk gBHkM宝回苞方当丽电WAIJ1元斗文*iit_nane,MTF下苒刑旨由二市人正工1号吟号 中r，f.早，照1 cr归不允消红格.图4.17文本变量的添加Price列与Pro列的添加方式同name歹！J,为img列选择导入图片，单击 确 定”按钮完成添加。

11、最终效果，如图 4.18所示。名林价情简介图片但二君一 |加|产展包.谎椅陆必加不邂，受图4.18数据添加的最终效果步骤3:产品信息的修改在中继器内部添加单行文字元作为新价格输入框，命名为price。添加多行文字元件作为商品简介输入框，命名为 pro_n 0添加单行文字作为提示语，元 件命名为提示2,文字内容为 商品价格必填，不能为空”。添加一个按钮，转换 为动态面板，命名为 修改”（页面效果如图4.19所示）。双击动态面板 修改”， 新增状态2,进入状态2,添加两个按钮：保存，取消。图4.19修改界面制作。设置文本元件price_n、pro_n、提示2为隐藏。为动态面板修改状态1中的修改”按

12、钮添加鼠标单击时事件：显示文本元件price_n与pro_n ,设置动态面板 修改”的状态为状态2。为动态面板修改状态2中的保存”按钮添加鼠标单击时事件：如果文字元 件price_n的值为空，设置动态面板 修改“中保存”按钮为禁用状态。显示文本 元件提示2；等待1000毫秒，隐藏文本元件 提示2；设置动态面板 修改”中保存”按钮的状态为启用，隐藏文本元件 提示2；如图4.20所示图4.20当文字元件price_n为空时保存”按钮的设置如果文字元件price_n不为空，标记行，选中中继器复选框，选中 This单 选按钮。更新行，选中中继器复选框，选中 巴标记”单选按钮，选择列price, Val

13、ue函数设为局部变量“LVAR1（声明局部变量LVAR1为文本元件price_n ）。 更新行，选中中继器复选框，选中 巴标记”单选按钮，选择列pro, Value函数设 为局部变量“LVAR1（声明局部变量LVAR1为文本元件pro_n ）。取消标记，选 中中继器”复选框，选中This单选按钮。设置动态面板 修改”的状态为状态1, 如图4.21所示。图4.21当文字元件price_n不为空时保存”按钮的设置为动态面板修改状态2中的取消”按钮添加鼠标单击时事件：设置文本元件pro_n与price_n为隐藏，设置动态面板 修改”为状态1,如图4.22所示图4.22单击取消”按钮时的交互设置最终效

14、果图如图4.23所示名称 价格 简介普仁塞r含有N星的渥元.索r ；豆足身 休听室,套过皆复产品图片保存 国向图4.23修改功能最终效果步骤4:产品信息的删除在中继器页面右下角添加删除按钮，设置鼠标单击时交互事件：删除行，选中中继器”复选框，选择“ThiSI选按钮，如图4.24所示图4.24删除按钮的交互设置步骤5:产品信息的查询在产品列表右上部应用文本元件制作文本输入框 查找（提示内容为：请输入产品名称）和按钮搜索”。设置搜索”按钮的单击交互事件：如文本元件 查找 不为空时，如图4.25所示图4.25文本元件查找”不为空添加筛选，选中中继器和移除其他筛选复选框，设置名称为产品”，设置条件为：

15、中继器中的产品名与查找框中的文字相同，如图 4.26所示图4.26查找框不为空时搜索”按钮的交互设置设置条件：如文本元件 查找”为空时。设置交互为移除筛选，选中 中继器和移除全部筛选”复选框，如图4.27所示。图4.27查找框为空时 搜索”按钮的交互设置通过步骤5的设置即可完成查找功能的实现。步骤6:产品信息的排序制作两个按钮：默认排序，价格从低到高。将 价格从低到高”按钮转化为动 态面板，命名为 排序”，双击动态面板，添加状态2,再添加按钮 价格从高到低 到状态2。设置默认排序”按钮的鼠标单击时事件，移除筛选，选中 中继器”和移除全 部排序”复选框，如图4.28所示。图4.28按钮默认排序”

16、的交互设置进入动态面板排序状态1页面，设置价格从高到低”按钮的鼠标单击事件为：添加排序，选中 中继器”复选框，设置名称为降序排列二属性为price ,排序类型为Number,顺序为降序”。设置动态面板排序”的状态为 状态2，如图4.29所示。图4.29价格从高到低”按钮的交互事件进入动态面板 排序”的状态2页面，设置 价格从低到高”按钮的鼠标单击事 件为：添加排序，选中 中继器”复选框，设置名称为 升序”，属卜t为price,排序 类型为Number,顺序为 升序”。设置动态面板 排序”的状态为 状态1”,如图4.30 所示。图4.30价格从低到高”按钮的交互事件步骤7:产品信息的翻页制作两个按钮 上一页”和下一页”。为上一页”按钮添加鼠标单击时事件：设置当前显示页面，选中 中继器”复