设计师深度修炼—淘宝改版赏析
淘宝改版
近期淘宝有了较大的改版，本次在分析淘宝改版的基础上，通过几个关键页面的分析对比淘宝、京东、苏宁易购三大综合类电商平台的产品设计，希望此篇文章能让大家对电商类 App 的产品设计有更深的认识。前阵子淘宝进行了改版，这次改版循序渐进，并做了较多的A/B测试。
1.主要改版页面
上图是淘宝几个主要改版页面。从视觉上看，很明显的大圆角卡片、去线条，整体风格统一轻质化。卡片使信息更加聚焦，模块感更强；圆角卡片本身也比原先的卡片式增加了更多细节；大圆角卡片亲和力高，更加活泼，也符合淘宝人群的定位。
上图为5个tab的页面，这次统一了头部的颜色，强调了品牌，统一性方面也得到了提升。
以下是从单个页面的角度进行改版分析。
2.个人首页
（旧版图为除夕的截图，颜色方面先不讨论哈）
新版的卡片式很突出，去掉了大部分的线条，转而用块面来代替线条表达层级关系。
88会员和最新物流这两块内容滚动呈现，真正是动效解决问题，从时间轴来解决信息量大而空间局限的问题，同时动态效果增加了用户吸引度。
在测试版中，这个页面主要看到两个点的变化，一个是 icon 改为原来的填充式，一个是动效滚动的节奏。
动效滚动是上面说的88会员和最新物流，7.7.2版本里两个滚动是同时进行的，而7.7.8的测试版中两个滚动是错开的。上下同时滚动会让人有些混乱，会让人认为这两块的信息是相互关联的。
3.店铺首页
这一块做的 A/B 测试。店铺页面的改动较大，导航做了较大调整。新版将常用操作和重要功能放到了底部固定；二级导航中的内容让商家自定义选择，从而满足不同店铺的需求；新版一级二级导航较旧版层级关系明确了许多。
4.物流详情
这一块可以说是样式上的大改。用可视化来表现包裹正处的位置以及即将进行的操作，增强用户感知（降低理解难度），进一步提升对商品信息的把控感。
物流详情页除了样式的巨大变化，还有一个特点就是场景化细分，不同的场景做出了差异化。例如仅仅是物流详情页，根据不同的场景：发货未揽件-已揽件未配送-快递员配送中-到达菜鸟驿站/其他快递点-已签收等，页面突出的信息均有所区别。已揽件时突出快递信息，配送时突出配送员信息等。
5.动效
这两张图都是店铺页面顶部的动效，当用户向下滑动页面时，顶部的信息会出现变化，也算是细分场景的一种，通过动效的方式完美过渡，过渡的流畅感会让用户对该平台增加些许好感。
总结来看，淘宝改版的设计角度可以总结为：设计追随目标，品牌、会员突出，追随设计趋势，细分场景，可视化展现和流畅动效。另外淘宝对设计、测试的态度上来说，设计解决实际问题，设计需要验证，测试要严谨。
淘宝与其他竞品
这里只选了京东和苏宁易购两个与淘宝进行了几个关键页面比较，以下主要从视觉的角度谈一下有哪些问题，这里几乎不牵扯业务、页面跳转等问题。
1.首页
淘宝：整体看起来没有什么硬伤，没有用卡片风格。
京东：这边也是继淘宝改版后不久改版上线。这边首屏的 icon 这一块的卡片式生硬，大有为了卡片而卡片既视感，京东秒杀这块的整齐度不高，也有些左重右轻。”每日逛“这种装饰性较强的风格也与整体卡片式简洁风格不符。”东家小院“楼层次级标题的颜色跳跃，大有喧宾夺主之感。
苏宁易购：这次目前还没有改版。掌上抢这楼层整齐度不高，和京东类似，同时缺少层次感，部分有渐变部分没有，非常不统一。”逛实惠“楼层视觉不平衡，而且信息层级很有问题。
2.搜索结果页
风格：淘宝这页用了无框设计，省去了中间的分割线，商品图片尺寸较大；从左到右，图片尺寸越来越小，分割线从无到细到粗，整体效果上淘宝和京东效果比易购的好。
标签：在标签的处理上，易购的标签非常强，在页面上非常突出，喧宾夺主；京东的标签弱化，与淘宝类似，但完全不同类的标签样式相同（秒杀与自营），会让人觉得有些混乱。
图文编排：淘宝和京东都没有硬伤，比较和谐，但易购的图片和文字大小间距比例不和谐，图片与线框无论在视觉效果上还是像素上都没有对齐；易购底部没有适配爱疯X。
3.分类页
风格：淘宝用了明显的卡片，去线条；而京东也用了卡片，卡片感微弱，是为了统一性而做；易购仍然是线框区分，整体区分效果不佳。
品牌：淘宝和京东在文字的处理上没有用更多的色彩，而易购的色彩运用得非常多，削弱品牌感，且没有带来任何优势。
4.商品详情页
此页面我仅从节奏感这一个角度来看，上图已经标出了每个页面的节奏感给我的感受。淘宝整体的节奏感比较好，轻重缓和；京东和易购在节奏感上做的都有些问题，重节奏之间无轻节奏的调和会缺乏呼吸感。有关节奏感的问题我们以后可以单独做个番外来讲。
5.购物车
风格效果：淘宝没有用卡片风格；京东用了卡片，导致大量留白，同时没有带来任何优势，苏宁易购整体稍显拥挤，没有亮点。
图文编排：淘宝整体非常和谐；京东图片均使用了白底，这点很好保持了统一性；京东使用了大量的设计细节，字号、粗细、字体、颜色等等非常丰富，但整体效果并没有很理想，稍显琐碎与凌乱；苏宁易购的文字大小与间距处理不和谐而带来拥挤感。
其他细节：京东标签不同于搜索结果页的弱化，而是非常强化，导致视觉焦点混乱，个别按钮非常小，操作不便；易购标签处理上比京东收敛；易购底部 tab 与其他部分没有区分，浮框像广告，效果不佳，数量修改框的描边太硬，比例不和谐。
6.个人首页
整体风格：淘宝和京东都是明显的卡片式，苏宁易购是广义上的卡片式。
这里主要说一说易购的问题：首屏出现“我的专场”的大片不平衡色块非常不合适，部分 icon 效果不佳，另外有一些内容上的 bug。
7.订单
淘宝和京东的订单页个人认为没有什么硬伤，淘宝有个适配的问题。苏宁易购的问题比较多，首先是顶部“常购清单”中没有商品的 bug，然后是图片与购物车等地方的风格不符，商品之间分割线有时有有时无，间距有问题等等。
综合上面具体页面的分析可以看出淘宝在 UI 设计上的优势：追随设计趋势；统一性；排版和谐等。
关于统一性这一点，可能有人说京东做的更好，因为它几乎所有页面都用了卡片风，而淘宝没有。个人认为，设计风格是次于设计目标的，如果这种设计风格不能很好满足该页面的设计目标，建议还是以设计目标为重；如果仍然强制使用该风格的话，会得不偿失。淘宝的做法是把卡片这种风格归类为轻质化风格，除了卡片以外，还有去线条、色块等等设计语言，因此并非强调一定要使用卡片形式。