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

(完整word版)使用Axure实现电商产品列表复杂原型(完整word版)使用Axure实现电商产品列表复杂原型(完整word版)使用Axure实现电商产品列表复杂原型使用Axure实现电商产品列表复杂原型在原型图制作中,经常需要制作一些数据可变的原型.例如，搜索查找时的模糊匹配，管理平台中商品的添加与删除,状态发表时文字输入的字数统计.在Axure7。0之前需要实现这些功能十分复杂，并且要配合大量的动态面板.Axure7.0版本开始增加了中继器元件，该元件功能强大,是一个数集的容器，中继器一共有11个动作，其中包括6个中继器动作和5个数据集动作,在原型制作中可以导入图片和数据，在交互上它可以实现新增行、删除行、标记行、排序，筛选等。配合函数使用，中继器可以实现的高级交互效果更多。产品列表案例完成效果本案例最终可以实现对商品列表进行增删改查的操作，也可以进行排序,页面效果如图4。1所示。图4。1产品列表技能分析中继器与条件判断的结合。案例实现实现步骤与讲解步骤1:产品页面搭建本案例中产品列表是由中继器元件搭建的，中继器的使用方法与动态面板略有不同。中继器是数据集，是对数据库的模拟，先制作数据排版结构，然后插入数据即可将想要的效果表现出来，并不需要依次制作所有的数据展示模块，如图4.2所示。图4。2中继器的数据排版结构向页操作区拖入中继器元件，在右侧的属性栏中增加了一项中继器独有的“每项加载时"事件及中继器数据表，如图4.3所示。图4。3中继器的独有事件双击进入中继器面板,此时面板中只有一个矩形元件（无用途，直接删去），如图4.4所示。图4。4中继器内部样式向面板中添加所需要的元件（文本元件设置为“只读”)。由上向下命名为name、price、Pro、img。其中,name、price为单行文本元件（单行文本元件不能对文本进行换行），Pro为多行文本元件，如图4。5所示.图4。5中继器中的排版样式在软件右侧的中继器数据表中新增列，并为新增列命名（中继器中的列名不可以使用中文字符，否则会使设置无效)，同时填入所需的数据值，如图4.6所示。图4.6列名及数据其中，img列的图片采用右击导入方式实现,如图4.7所示。图4。7图片的导入数据插入完成后,为中继器添加“每项加载时"事件。设置文本，选中“name（文本框）”复选框，设置文本框的值为Item.name。设置文本，选中“price（文本框）"复选框，设置文本框的值为Item。price。设置文本，选中“Pro（文本框）”复选框,设置文本框的值为Item。Pro.设置图片，选中“pic（图片）"复选框，设置Default值为Iitem。img（注：Item函数返回指定集中的元组），如图4。8所示。图4。8设置加载时事件文本值的设置方法：以“name（文本框)”为例。单击图标,弹出“编辑文本”对话框.单击“插入变量或函数”，单击“中继器/数据集"，选择Item.name。单击“确定”按钮，完成文字值的设置，如图4.9所示。图4.9文字值函数的设置文本值设定后对各项数据的页面总体排列样式进行设置，主要是对布局、是否分页、间距进行设置，如图4.10所示。图4。10样式设置设置完成后即可在页面中看到产品列表效果，如图4。11所示。图4。11数据的页面展示样式步骤2:产品的新增制作数据输入的文本输入框，分别命名为z_name、z_price、z_pro、z_img，选中4个输入框和对应文本，右击转换为动态面板,命名为“数据”，设置为隐藏。制作“新增”按钮，右击转换为动态面板，命名为“新增"。添加状态2，制作同样式的按钮“保存”。新增模块的样式如图4.12所示。图4。12数据新增的样式设置交互事件。在录入商品信息时，名称和价格不能为空。设置文本提示，命名为“提示1”。将提示内容“产品名称和价格不能为空”设置为隐藏.添加名称文本框的失去焦点时事件，设置判断条件为“如果文字元件为空时"，设置新态面板“增动"中按钮“保存"的状态为“禁用”.显示提示，等待1000毫秒,隐藏提示,设置动态面板“新增"中按钮“保存”的状态为“启动"，如图4.13所示(价格文本框的设置方法与此相同）。图4。13文本元件为空时的设置图片文本框的设置。在属性栏中将图片文本框的类型设置为文件.设置动态面板“新增”的交互事件。为状态1中的按钮“新增”添加鼠标单击时事件，显示动态面板“数据",设置动态面板“新增”的状态为状态2，如图4。14所示。图4.14按钮“新增”的状态设置为状态2中的按钮“保存”设置鼠标单击时事件。如果文本元件z_name与z_price为空，禁用动态面板“新增”中的按钮“保存”。显示提示文字，等待1000毫秒，隐藏提示文字,启用动态面板“新增”中的按钮“保存”,如图4。15所示。图4.15文本元件为空时的设置