购物车功能已经成为各类电商系商品的一个基础功能,那么关于购物车页面的一些交互功能,如何通过原型设计去完成呢?本文以京东购物车为实例,将重点讲述关于购物车页面的交互用例设计。
通过观察,不难发现京东购物车页面主要有以下交互:
前面我们已经列出了所有的交互现象,针对上述的交互效果,现在我们逐一进行设计思路分析,并分解用例中的动作配置。
当全选复选框被选中时,则所有商品前的复选按钮被选中;全选按钮取消选中时,所有商品均取消选中(假设之前均处于选中状态)。
用例配置截图如下:
为数量两侧的“+”和“-”设置鼠标单击用例:
相关的用例动作配置如下图所示:
为小计文本标签设置载入时事件用例,小计金额=单价(text文本)*数量(text文本)。
为数量文本框设置文本改变时事件用例,自动触发小计金额载入时事件。
相关的用例动作配置如下图所示:
案例中购物车有3件商品,为总数量设置载入时事件。当三件商品都被选中时,总数量等于3件商品的数量之和;当有其中两件商品被选中时,则总数量等于选中的两件商品数量之和;如果没有选中商品,则总数量等于0。
为数量文本框设置文本改变时事件,自动触发总数量载入时事件。
相关的用例配置示意图如下:
案例中购物车有3件商品,为总价(总金额)设置载入时事件。当三件商品都被选中时,总价等于3件商品的价格之和;当有其中两件商品被选中时,则总价等于选中的两件商品价格之和;如果没有选中商品,则总价等于0。
为数量文本框设置文本改变时事件,自动触发总价载入时事件。
相关的用例配置示意图如下:
为删除文本设置鼠标单击事件,显示确认弹框,显示时伴有灯箱效果。为确认弹框中的确认、取消和关闭按钮,分别设置鼠标单击事件,隐藏确认弹框(确认弹框默认隐藏)。
相关用例配置如下图所示: