2020年火爆生意_2020年兼职赚钱_2020年靠谱的生意

您当前位置:首页 >> 电商学院

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

发布时间:19-12-31

本文将为大家介绍如何设计商品购≮件数的交互设计以及具体步骤。

移动互联网购物平台已经成为时代的℅潮流,以“移动端下单+前置仓配货+即时配送到家”等模式运营,让用户足不Ща出户即可买到新鲜的█蔬菜水果以及优惠的生活日用品。

本期为大︰家讲解购物车列表和商品展○示列表页面购买件数的交互设计。页面如下所♂示:

(高保真源文件下载链⊙接在下方评论中或公众号中可见)

列表∴购物件数的具体实℡现方法

第一步:元件的实现

1. ♯♮需要准备元件为:

一个增加图标◑↔↕▪、一个减少图标以及文本标签。≈(图标也可以运用矩形的布尔运算得到)

如下⊙℡图所示:

Θ

第二步:交互的实现

1.原理分析:

1)最初状态为๑·ิ.·ั๑一个增加图标;

2)用户点击【增加】时,Ⅻ显示【β减少】图标和一个文本У标签,数¨值为1,ш表示已添加°゜一件商品;

3)用户点击【增加】,数值递增™为2,即增加一件;点▧击减少,又切换为初始状态,表示已清空该商品。

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

2. 交互步骤实现:

添加一动态面板,再state1中放入【增加】,再添加一个状态stat±e2┓,放入【增加】、【减少】图标和文本标签。

a 、选中sta▼te1∠中的【增加】,添加鼠标单击时的交互事件;

设置动态面板【购物件数】切换为state2;

b 、选中state2中的【※增加】,添加≥鼠标单击时的交互◄事件;

设置 文本标签【数值】的文本为[[Target×.text+1]];

c、选中state2中的【减少ミ】,添加鼠标单击时的交互事件;

当【数值】大于2时,设置 文本标签【数值】的文本为[[Target.texìt-⊕1]];

当【数值】等于1时┑,设置动态面板【购物件数】切换γ为state1;

第三步∏:交互效果预览

(高保真源文件下载链接在下方评┈┉论中或公众号中可见≈)

&nb≌sp;

作者:火星人~艾斯,公众号:艾斯的Axure╱╲峡谷

本文由 @火星じ人~艾斯 原创发布于人*人都是产品经№理。未经许可,禁止转载

题图来自Uns░plash,基于CC0↕协议

2020年火爆生意_2020年兼职赚钱_2020年靠谱的生意 2019-2022版权所有