大胆人体艺术

株洲最专业的CAD培训学校 新科20年教学
  • QQ咨询

  • 在线咨询
  • 点击这里给我发消息
  • 点击这里给我发消息
  • 点击这里给我发消息
  • 点击这里给我发消息

大胆人体艺术

免责声明-|:本站作品均来自网友分享或互联网-|,若您发现本站存在您非授权的原创作品请第一时间联系本站删除-|,本站享有代替本站作者维权的权力-|-|。

      
课程搜索:
设为首页 加入收藏

  你现在的位置:首页  >>  新闻动态
株洲国际UI设计班 电商购物车设计
  来源:新科IT培训学校  发布时间:2018-09-06 11:50:57

观察交互

通过观察,不难发现京东购物车页面主要有以下交互:

1)全。旱慊魅“存な,所有商品被选中

2)数量:点击加号,数量+1,点击减号,数量减1

3)小计:每个商品的小计价格,随着数量的变化而自动计算金额,即小计=商品单价*数量

4)总数量(数量总计):总计的数量等于所有选中商品的数量之和

5)总价(金额总计):总计金额等于所有商品的小计金额之和

6)删除:页面弹出确认信息


设计思路

前面我们已经列出了所有的交互现象,针对上述的交互效果,现在我们逐一进行设计思路分析,并分解用例中的动作配置。

01 全选

当全选复选框被选中时,则所有商品前的复选按钮被选中;全选按钮取消选中时,所有商品均取消选中(假设之前均处于选中状态),用例配置截图如下:

02 数量

为数量两侧的“+”和“-”设置鼠标单击用例

“+”鼠标单击时,数量文本框内容自动+1

“-”鼠标单击时,当数量文本内容>1时,数量文本框内容自动-1;否则,数量文本框内容为0

相关的用例动作配置如下图所示:

03 小计金额(单个商品)

为小计文本标签设置载入时事件用例,小计金额=单价(text文本)*数量(text文本)

为数量文本框设置文本改变时事件用例,自动触发小计金额载入时事件

相关的用例动作配置如下图所示:

04 数量总计

案例中购物车有3件商品,为总数量设置载入时事件。当三件商品都被选中时,总数量等于3件商品的数量之和;当有其中两件商品被选中时,则总数量等于选中的两件商品数量之和;如果没有选中商品,则总数量等于0。

为数量文本框设置文本改变时事件,自动触发总数量载入时事件

相关的用例配置示意图如下:

05 总价(总金额)

案例中购物车有3件商品,为总价(总金额)设置载入时事件。当三件商品都被选中时,总价等于3件商品的价格之和;当有其中两件商品被选中时,则总价等于选中的两件商品价格之和;如果没有选中商品,则总价等于0。

为数量文本框设置文本改变时事件,自动触发总价载入时事件。

相关的用例配置示意图如下:

06 删除

为删除文本设置鼠标单击事件,显示确认弹框,显示时伴有灯箱效果。为确认弹框中的确认、取消和关闭按钮,分别设置鼠标单击事件,隐藏确认弹框。(确认弹框默认隐藏)相关用例配置如下图所示:

到这里,购物车页面中所有的交互用例都已经完成了设置,点击预览查看交互效果。如果大家对电商类交互设计感兴趣,不妨支持下我的原型作品:电商Web端通用交互原型