2018-6-4 资深UI设计者
电商类 App 是日常使用频次非常高的应用，它们的每一次更新改版不仅是业务的拓展、用户需求的满足，同时也是消费趋势的引领与跟随。
近期淘宝 App 的许多页面都有了较大的改动，在分析淘宝改版的基础上，通过几个关键页面的分析对比淘宝、京东、苏宁易购三大综合类电商平台的产品设计，希望此篇文章能让大家对电商类 App 的产品设计有更深的认识。
前阵子淘宝进行了改版，这次改版循序渐进，并做了较多的 A/B 测试。
1. 主要改版页面
上图是淘宝几个主要改版页面。从视觉上看，很明显的大圆角卡片、去线条，整体风格统一轻质化。大圆角卡片追随了 iOS11 的风格（App Store 中尤为突出），卡片使信息更加聚焦，模块感更强；圆角卡片本身也比原先的卡片式增加了更多细节；大圆角卡片亲和力高，更加活泼，也符合淘宝人群的定位。
上图为5个 tab 的页面，这次统一了头部的颜色，强调了品牌，统一性方面也得到了提升。
以下是从单个页面的角度进行改版分析。
2. 个人首页
△ 旧版图为除夕的截图，颜色方面先不讨论
新旧版本的对比，可以看出88会员、卡券包优先级提高，会员信息更加集中、突出。这也印证了这两年会员机制的火热，拉新成本和难度都越来越高的情况下，巩固老用户才能带来更多的价值。
新版的卡片式很突出，去掉了大部分的线条，转而用块面来代替线条表达层级关系。
「我的订单」部分 icon 样式发生了变化（7. 7. 2 版），从填充式转变为线条式，突出了 icon 右上角的数字，但这一点在测试版本中又改回来了（后面讨论）。
88会员和物流这两块内容滚动呈现，真正是动效解决问题，从时间轴来解决信息量大而空间局限的问题，同时动态效果增加了用户吸引度。
在测试版中，这个页面主要看到两个点的变化，一个是 icon 改为原来的填充式，一个是动效滚动的节奏。
icon 的问题个人猜想是因为体量与重要性、位置的问题，线条式的体量弱于填充式。在「我的淘宝」页面中，最重要的信息是「我的订单」，因此需要一定的突出。另外在测试版里，「我的订单」的上面固定的广告位放置了旅行青蛙的广告，此位置的突出性导致其弱化了底下的「我的订单」，占用了原先「我的订单」的 C 位，因此测试版考虑到更全的场景（有广告），从而将 icon 的样式换回了体量大的填充式。
动效滚动是上面说的88会员和物流，7. 7. 2版本里两个滚动是同时进行的，而7. 7. 8的测试版中两个滚动是错开的。上下同时滚动会让人有些混乱，会让人认为这两块的信息是相互关联的。
3. 店铺首页
这一块做的 A/B 测试。店铺页面的改动较大，导航做了较大调整。新版将常用操作和重要功能放到了底部固定；二级导航中的内容让商家自定义选择，从而满足不同店铺的需求；新版一级二级导航较旧版层级关系明确了许多。
再来说说这次的 A/B 测试，这次的测试时间比较长（从7. 7. 2到目前的7. 8. 2都在，目测到8. 0应该会给出一个结果）。店铺页在导航上的大改动，会在一定程度上对已经形成习惯的老用户造成冲击，对页面重新适应和学习，有点类似于前摄抑制（在认知心理学上指之前学习过的材料对保持和回忆以后学习的材料的干扰作用）。新版设计的目的一是方便用户初期快速学习，二是中后期快速使用。对于中后期的快速使用就需要一段时间的铺垫来获得数据。该次测试应该是区分各种不同的用户，简单来说测试新用户、老用户分别对于新旧版本的学习，以及他们对新版本熟悉之后的使用。
4. 物流详情
这一块可以说是样式上的大改。用可视化来表现包裹正处的位置以及即将进行的操作，增强用户感知（降低理解难度），进一步提升对商品信息的把控感。比原先仅仅是文字展示而言生动了许多，样式接近外卖等待中的订单页面。可视化固然可以展示更多的信息，但是在用户非训练的情况下信息传递的速度未必比文字要更快，不同的人对图形的理解也会有所偏差。不过介于外卖 App 的页面已经对很多用户进行了教育，相信这种理解上不会有太大难度。但是依然要在后续优化中逐渐突出信息的重点。
物流详情页除了样式的巨大变化，还有一个特点就是场景化细分，不同的场景做出了差异化。例如仅仅是物流详情页，根据不同的场景：发货未揽件 – 已揽件未配送 – 快递员配送中 – 到达菜鸟驿站/其他快递点 – 已签收等，页面突出的信息均有所区别。已揽件时突出快递信息，配送时突出配送员信息等。
从场景细分做差异化，让用户获取当前最需要的信息这件事的出发点无疑是很好的，但是从上图中，仅是快递信息这一类信息，就出现了三种样式（如上图），并且位置也不统一。如果用户是购买了几件不同店家的商品，这时快递员打电话来说我是XX快递的，快递给你放在了某某地方，这时我想知道这是啥商品的时候，于是我就打开了物流详情，来找快递信息，发现快递信息居然不在原来的地图底下了，找了好一会才发现放到了快递员下方。这个例子也就是说在非常见场景下获取某个信息时可能需要付出额外的学习成本。
不过在7. 7. 8的测试版本中，又将快递信息的样式减为两种，算是一种妥协。本人认为，场景细分出发点是好的，但在样式和位置两点中，最好至少有一点是固定不变的，这样才不会过多增加用户的学习成本，也能涵盖一些小概率场景。
5. 动效
这两张图都是店铺页面顶部的动效，当用户向下滑动页面时，顶部的信息会出现变化，也算是细分场景的一种，通过动效的方式完美过渡，过渡的流畅感会让用户对该平台增加些许好感。
我的淘宝这一页的动效解决问题在上面有说到，右边的有好货页面，当用户在滑动页面时，攻略推荐一栏的图片有依次展现的效果，吸引眼球，小有惊喜。
总结来看，淘宝改版的设计角度可以总结为：设计追随目标，品牌、会员突出，追随设计趋势，细分场景，可视化展现和流畅动效。另外淘宝对设计、测试的态度上来说，设计解决实际问题，设计需要验证，测试要严谨。
这里只选了京东和苏宁易购两个与淘宝进行了几个关键页面比较，以下主要从视觉的角度谈一下有哪些问题，这里几乎不牵扯业务、页面跳转等问题。
1. 首页
淘宝：整体看起来没有什么硬伤，没有用卡片风格。
京东：这边也是继淘宝改版后不久改版上线。这边首屏的 icon 这一块的卡片式生硬，大有为了卡片而卡片既视感，京东秒杀这块的整齐度不高，也有些左重右轻。「每日逛」这种装饰性较强的风格也与整体卡片式简洁风格不符。「东家小院」楼层次级标题的颜色跳跃，大有喧宾夺主之感。
苏宁易购：目前还没有改版。掌上抢这楼层整齐度不高，和京东类似，同时缺少层次感，部分有渐变部分没有，非常不统一。「逛实惠」楼层视觉不平衡，而且信息层级很有问题。
2. 搜索结果页
风格：淘宝这页用了无框设计，省去了中间的分割线，商品图片尺寸较大；从左到右，图片尺寸越来越小，分割线从无到细到粗，整体效果上淘宝和京东效果比易购的好。
标签：在标签的处理上，易购的标签非常强，在页面上非常突出，喧宾夺主；京东的标签弱化，与淘宝类似，但完全不同类的标签样式相同（秒杀与自营），会让人觉得有些混乱。
图文编排：淘宝和京东都没有硬伤，比较和谐，但易购的图片和文字大小间距比例不和谐，图片与线框无论在视觉效果上还是像素上都没有对齐；易购底部没有适配 iPhone X。
3. 分类页
风格：淘宝用了明显的卡片，去线条；而京东也用了卡片，卡片感微弱，是为了统一性而做；易购仍然是线框区分，整体区分效果不佳。
品牌：淘宝和京东在文字的处理上没有用更多的色彩，而易购的色彩运用得非常多，削弱品牌感，且没有带来任何优势。
4. 商品详情页
此页面我仅从节奏感这一个角度来看，上图已经标出了每个页面的节奏感给我的感受。淘宝整体的节奏感比较好，轻重缓和；京东和易购在节奏感上做的都有些问题，重节奏之间无轻节奏的调和会缺乏呼吸感。
5. 购物车
风格效果：淘宝没有用卡片风格；京东用了卡片，导致大量留白，同时没有带来任何优势，苏宁易购整体稍显拥挤，没有亮点。
图文编排：淘宝整体非常和谐；京东图片均使用了白底，这点很好保持了统一性；京东使用了大量的设计细节，字号、粗细、字体、颜色等等非常丰富，但整体效果并没有很理想，稍显琐碎与凌乱；苏宁易购的文字大小与间距处理不和谐而带来拥挤感。
其他细节：京东标签不同于搜索结果页的弱化，而是非常强化，导致视觉焦点混乱，个别按钮非常小，操作不便；易购标签处理上比京东收敛；易购底部 tab 与其他部分没有区分，浮框像广告，效果不佳，数量修改框的描边太硬，比例不和谐。
6. 个人首页
整体风格：淘宝和京东都是明显的卡片式，苏宁易购是广义上的卡片式。
这里主要说一说易购的问题：首屏出现「我的专场」的大片不平衡色块非常不合适，部分 icon 效果不佳，另外有一些内容上的 bug。
7. 订单
淘宝和京东的订单页个人认为没有什么硬伤，淘宝有个适配的问题。苏宁易购的问题比较多，首先是顶部「常购清单」中没有商品的 bug，然后是图片与购物车等地方的风格不符，商品之间分割线有时有有时无，间距有问题等等。
综合上面具体页面的分析可以看出淘宝在 UI 设计上的优势：追随设计趋势、统一性、排版和谐等。
关于统一性这一点，可能有人说京东做的更好，因为它几乎所有页面都用了卡片风，而淘宝没有。个人认为，设计风格是次于设计目标的，如果这种设计风格不能很好满足该页面的设计目标，建议还是以设计目标为重；如果仍然强制使用该风格的话，会得不偿失。淘宝的做法是把卡片这种风格归类为轻质化风格，除了卡片以外，还有去线条、色块等等设计语言，因此并非强调一定要使用卡片形式。