Axure教程:计数器的实战应用场景 —— 商品购件数

2020-02-09 投稿人 : www.hebeihongye.com.cn 围观 : 1040 次

本文将介绍如何设计购买商品数量的交互设计及具体步骤。

移动互联网购物平台已经成为时代潮流。它以“移动终端订单、预仓储配送和即时送货上门”等模式运行,允许用户无需出门即可购买新鲜蔬菜、水果和优惠日用品。

这个问题解释了购物车列表的交互设计和在商品显示列表页面上购买的商品数量。页面如下:

列表中购物项目数量的具体实现方法步骤1:组件

1的实现。要准备的组件有:

一个增加图标、一个减少图标和一个文本标签。(图标也可以通过矩形的布尔运算获得)

如下图所示:

步骤2:交互的实现

1。原理分析:

1)初始状态是添加的图标;

2)当用户点击“添加”时,显示“减少”图标和文本标签,值为1,表示商品已经添加。

3)用户点击“添加”,值增加到2,即增加一个。单击减少并再次切换到初始状态,表示商品已被清空。

接下来,上述交互效果可以通过切换动态面板来实现。

2。交互式步骤的实现:

添加动态面板,将[添加]添加到状态1,添加状态2,并添加[添加],[减少]图标和文本标签。

a .在状态1中选择“[添加”,在单击鼠标时添加交互事件;

将动态面板“[购物商品数量”设置为状态2;

b,在状态2中选择“[添加”,在单击鼠标时添加交互事件;

将文本标签“[值”的文本设置为[[[目标文本1]];];

c,在状态2中选择“[减少”,以在单击鼠标时添加交互事件;

当[值]大于2时,将文本标签“[值”的文本设置为[[目标。文本-1]];

当[值]等于1时,将动态面板“[购物商品数量”设置为状态1;

步骤3:交互式效果预览