Axure中继器商品管理列表框交互设计操作实例

0 2021-06-02 17:02 内容校对:盖帽老弟
收藏(0) 共有 50 人学习了本教程

本教程被收录到了 Axure常用页面交互设计课程 , 开始你的系统性学习吧!

《Axure中继器商品管理列表框交互设计操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,交互产品,列表组件,界面组成等多维度案例或实操来进行更多的学习;此教程是由zilin在2021-06-02发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。

今天给大家带来了axure中继器列表框交互设计的操作实例,中继器是个好东西,现在以商品管理为例子,来说明中继器怎么使用。在这个商品管理列表里面,我们要实现商品信息的分页展示、新增、修改、删除和排序功能。详情往下看:

我们先看看最终实现的效果:

Axure中继器商品管理列表框交互设计操作实例

需求分析

在上面的例子,我们需要实现如下几个效果:

  1. 能够分页显示商品列表,每页显示5个商品;
  2. 店家新增按钮,能够新增商品;
  3. 点击价格排序,能够按照价格排序,并且升序、降序可以自动切换;
  4. 点击修改,能够在弹出页面展示所选中的商品信息,修改完成以后,点击保存按钮,修改的数据能够保存;
  5. 点击删除按钮,能够删除所选的记录。

原型设计

(1)我们先在画布区拖入一个中继器,并且命名该中继器是datalist,然后在中继器里面增加增加6个列,分别是编号、商品名称、价格、库存以及两个操作列。

(2)设置中继器对应的数据集合,该数据集包含4个列,分别是code、name、price、num,分别对应商品编号、商品名称、价格和库存,然后录入模拟数据。

Axure中继器商品管理列表框交互设计操作实例

(3)在左上角 拖入两个按钮,分别是新增和 价格排序。

(4)在有下方拖入两个文字标签,分别改成上一页、下一页。

(5)制作新增弹出窗口,在画布里面拖入4个输入框及对应的文字标签,并且拖入保存和关闭按钮,把这些元件选中,转换为动态面板,设置为隐藏状态,并且命名该动态面板为add。

Axure中继器商品管理列表框交互设计操作实例

(6)类似步骤5,制作修改弹出窗口,但是要注意,在修改窗口里面,编号输入框为禁用(一般来说,编号不能修改)。

Axure中继器商品管理列表框交互设计操作实例

通过上面的6个步骤,我们已经完成了原型的设计。

交互设计

(1)设置数据加载:首先我们要做数据初始化,选择中继器的【每项载入】事件,在每项载入的时候,设置中继器的列表里面的值。

Axure中继器商品管理列表框交互设计操作实例

(2)设置分页显示:选中中继器,在样式里面选择分页显示,每页5条记录就可以。

Axure中继器商品管理列表框交互设计操作实例

(3)设置翻页:选中 上一页,选择【点击】事件 , 然后选择中继器动作的【设置当前显示页】事件,并把页面设置为【previous】。

下一页类似,不同的地方在选择页面设置为【next】。

(4)新增按钮:点击新增按钮,把隐藏的动态面板add显示出来就可以了,即选择新增按钮的【点击】事件,触发元件的【显示】事件。

(5)新增保存:点击新增保存的时候,需要做两件事情:

  • 把录入的数据保存到数据中继器对应的数据源;
  • 关闭新增弹窗。

对于A,使用中继器的新增记录动作完成;对于B,使用隐藏该动态面板动作实现。

Axure中继器商品管理列表框交互设计操作实例

(6)修改数据:修改数据与新增数据类似,但是有一点差别,就在弹出的修改窗口里面,要显示对应修改记录,这里需要在显示修改窗口之前,对修改窗口里面的数据进行赋值。

Axure中继器商品管理列表框交互设计操作实例

(7)修改保存:修改保存与新增保存类似,都要完成两个动作:

  • 把修改的数据保存到数据中继器对应的数据源;
  • 关闭新增弹窗 。

对于A,使用中继器的修改记录动作完成;对于B,使用隐藏该动态面板动作实现。

Axure中继器商品管理列表框交互设计操作实例

(8)删除:删除相对简单,直接通过删除按钮的点击事件,触发中继器的删除动作即可。

Axure中继器商品管理列表框交互设计操作实例

(9)排序:排序功能是通过中继器里面的添加排序事件类完成的,即设置排序按钮的点击事件,从而触发中继器添加排序的动作。这里要注意一点,因为每点击一下排序按钮,是按照升序降序切换的,所以排序要选切换。

以上就是Axure中继器商品管理列表框交互设计全部内容介绍了,关于更多axure9教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。

0

赠人玫瑰,手有余香

本内容由zilin原创发布,小编仅对内容版式进行调整,如有侵犯你的权利,请联系我们。

如果你觉得好,你可以将本课程转发给你的朋友!

参与评论
验证码

输入的验证码不正确

0/10000

评论区

暂无评论

zilin

阿里巴巴UI设计师——你的想像,世界的模样。

共发布了870个文章 共获得46个赞

最新发布的教程

查看更多此作者的教程
用户给我们的评价
北极熊素材库累计为超过1000+家中小企业提供服务
欢迎来到北极熊素材库

使用微信扫码登录

使用账号密码登录

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

立即注册 | 找回密码

登录失败

注册及代表同意 网站协议
扫码登录及代表同意 网站协议

请输入用户名,6-15个字符

请输入绑定的邮箱

验证码

输入的验证码不正确

登录失败

提示信息

内置密码的链接已通过Emall 发送到你的邮箱中,请在三天内修复密码。

3秒后,将关闭此窗口 立即关闭

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

二次密码不一致

请输入正确的邮箱

验证码

输入的验证码不正确

注册失败

您还不是我们的VIP会员

成为我的的VIP会员
即可享受6大特权并免费高速下载数以万计的设计素材,助力您的工作和学习

立即升级VIP会员