【体验细节】美团外卖中的悬浮购物车图标

最近发现一个美团外面中的细节，页面中右下角的购物车图标，觉得设计得挺巧妙挺用心。

首先，美团外卖 App 没病有把购物车功能放在底部 Tabbar 上，而是采用了悬浮按钮的形式。我们知道悬浮按钮一般作为页面中一个很重要的存在，一般用于非常重要的功能入口或者对用户的引导，比如引导用户发布、分享、拍照等等。而这里美团却将并不是最重要功能的购物车做成了悬浮按钮的样式，为了不喧宾夺主，同时不影响用户的正常操作和视觉焦点，他们采用了几种设计：

• 弱化购物车Icon 的颜色，没有采用很抢眼的颜色。

• 购物车 Icon 在页面滑动时半隐藏。

• 购物车 Icon 在页面滑动时透明度降低。

  
  美团购物车 icon.gif

通过这几点设计，App 中的购物车图标一般情况下不会分散用户的注意力，不会妨碍用户正常的浏览，同时当我们想要查看购物车的时候，却知道它一直在屏幕的右下角。