Axure教程:计数器的实战应用场景 —— 商品购件数 获赏10金币 案例教程 基础教程

艾斯的axure峡谷 普通用户 2020-4-17 1627

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


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

为大家讲解购物车列表和商品展示列表页面购买件数的交互设计。页面如下所示:(高保真源文件下载链接在下方评论中或公众号中可见)

第一步:元件的实现

1. 需要准备元件为:

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

如下图所示:

第二步:交互的实现

1. 原理分析:

1)最初状态为一个增加图标;

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

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

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

2. 交互步骤实现:

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

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

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

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

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

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

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

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

第三步:交互效果预览



登录后回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (2)
  • 沈十三 管理员 2020-4-18
    0 引用 3
    感谢分享,已获得10金币奖励!如果附带案例源文件教程效果会更好!
  • 影子111 普通用户 2020-4-17
    0 引用 2
    非常好
返回