购物车功能已经成为各类电商系商品的一个基础功能，那么关于购物车页面的一些交互功能，如何通过原型设计去完成呢？本文以京东购物车为实例，将重点讲述关于购物车页面的交互用例设计。

演示地址：http://ggi20l.axshare.cn/#g=1&p=购物车

观察交互

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

• 全选：点击全选按妞时，所有商品被选中
• 数量：点击加号，数量+1，点击减号，数量减1
• 小计：每个商品的小计价格，随着数量的变化而自动计算金额，即小计=商品单价*数量
• 总数量（数量总计）：总计的数量等于所有选中商品的数量之和
• 总价（金额总计）：总计金额等于所有商品的小计金额之和
• 删除：页面弹出确认信息

设计思路

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