14 购物车图标设计

“购物车”对于消费类App来说是一个非常重要的功能，目前大部分消费类App都将购物车图标放在底边的工具栏当中。在使用消费类App的过程中，顾客会首先将有意向购买的商品添加到购物车里，然后到购物车里查看并确认所需要购买的商品，并进行同类商品的比较，查看商品的优惠活动，最后下单，完成购买。

视频演示

◎ 元素提炼

购物车图标来自现实生活中的超市购物车，图形语义最初可以追溯到旧式手推车，所以购物车图标的形态和真实的购物车非常相似。扁平图标流行之后，设计师将购物车图标的形态进行了简化。

◎ 结构分析

在消费类App中，购物车图标中购物车的形态几乎是相同的，即由一个把手、一个车筐和两个轮子构成。

◎ 设计思路

就原始的购物车形态来说，购物车本身的结构和线条都较复杂。购物车图标的绘制需要有所取舍，可以运用“一点设计”技巧，删除车筐的网格线，并将车筐的底线倾斜，在转折处加上圆角。中间的风格化虚线既可以表示“车里有商品”的含义，也能增强车筐的立体感。

◎ 绘制过程

01　确定购物车的整体形态。先画车筐，然后画出表示购物车把手的斜线和表示底座的直线，再将两条线之间的圆角补齐。绘制圆角时注意圆角的大小。

02　添加车轮，并在车筐内补充一条风格化虚线。绘制时，注意车轮的位置和大小要合适。