相关阅读
其他
【评测】新版淘宝设计 对比京东、苏宁易购竞品比较
导读
近期淘宝 App 的许多页面都有了较大的改动，在分析淘宝改版的基础上，通过几个关键页面的分析对比淘宝、京东、苏宁易购三大综合类电商平台的产品设计，希望此篇文章能让大家对电商类 App 的产品设计有更深的认识。
电商类 App 是日常使用频次非常高的应用, 它们的每一次更新改版不仅是业务的拓展、用户需求的满足，同时也是消费趋势的引领与跟随。
其中，手机淘宝作为一款电商购物类的软件，其丰富的功能能够很好的满足不同消费人群的购物需求。
手机淘宝旨在满足不同用户的购物需求，其中聚合了大量的功能。倾向于购买高端品质产品的用户可以使用其中的天猫模块，虽然价格相对比较贵，但是商品以及商家的信誉比较有保障，能够买到放心的产品。
倾向于便宜优惠且时间不是很紧迫的用户可以着重关注手机淘宝的聚划算模块，在该模块中，可以限时抢购一些不错的商品但是需要注意：聚划算的随机性很强， 用户不一定能够在其中找到自己喜欢的产品。
针对购买进口产品的用户还有专门的天猫国际模块，天猫国际是进口产品的集中卖场，在这里可以选购来自世界不同国家的商品。此外，还有拍卖功能，在这里用户可以使用竞价的方式来拍得产品。
当然淘宝的功能并不止于以上几点，还有外卖以及生活服务等多个方面。
（手机淘宝产品结构图）
手机淘宝的主要功能区分为五个区域，即首页、微淘、消息、购物车、我的淘宝这五个区域。
手机淘宝的功能非常多，仅使用摄像头就可以完成至少三种不同的工作。此外手机淘宝首页中提供了天猫、聚划算、天猫国际、外卖、天猫超市等不同类型购物平台的入口，让手机淘宝成为了一个大型的聚合软件。
通过手机淘宝可以跳转到天猫中，但是天猫没有跳转到手机淘宝的功能。如果用户安装了天猫app跳转之后则会直接打开该软件；如果用户没有安装该软件，则会在手机淘宝中打开一个简单的天猫模块。
淘宝改版
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 测试。店铺页面的改动较大，导航做了较大调整。新版将常用操作和重要功能放到了底部固定；二级导航中的内容让商家自定义选择，从而满足不同店铺的需求；新版一级二级导航较旧版层级关系明确了许多。
4.物流详情
这一块可以说是样式上的大改。用可视化来表现包裹正处的位置以及即将进行的操作，增强用户感知（降低理解难度），进一步提升对商品信息的把控感。比原先仅仅是文字展示而言生动了许多，样式接近外卖等待中的订单页面。可视化固然可以展示更多的信息，但是在用户非训练的情况下信息传递的速度未必比文字要更快，不同的人对图形的理解也会有所偏差。不过介于外卖 app 的页面已经对很多用户进行了教育，相信这种理解上不会有太大难度。但是依然要在后续优化中逐渐突出信息的重点。
物流详情页除了样式的巨大变化，还有一个特点就是场景化细分，不同的场景做出了差异化。例如仅仅是物流详情页，根据不同的场景：发货未揽件-已揽件未配送-快递员配送中-到达菜鸟驿站/其他快递点-已签收等，页面突出的信息均有所区别。已揽件时突出快递信息，配送时突出配送员信息等。
从场景细分做差异化，让用户获取当前最需要的信息这件事的出发点无疑是很好的，但是从上图中，仅是快递信息这一类信息，就出现了三种样式（如上图），并且位置也不统一。如果用户是购买了几件不同店家的商品，这时快递员打电话来说我是XX快递的，快递给你放在了某某地方，这时我想知道这是啥商品的时候，于是我就打开了物流详情，来找快递信息，发现快递信息居然不在原来的地图底下了，找了好一会才发现放到了快递员下方。这个例子也就是说在非常见场景下获取某个信息时可能需要付出额外的学习成本。
5.动效
当用户向下滑动页面时，顶部的信息会出现变化，也算是细分场景的一种，通过动效的方式完美过渡，过渡的流畅感会让用户对该平台增加些许好感。
我的淘宝这一页的动效解决问题在上面有说到，右边的有好货页面，当用户在滑动页面时，攻略推荐一栏的图片有依次展现的效果，吸引眼球，小有惊喜。
总结来看，淘宝改版的设计角度可以总结为：设计追随目标，品牌、会员突出，追随设计趋势，细分场景，可视化展现和流畅动效。另外淘宝对设计、测试的态度上来说，设计解决实际问题，设计需要验证，测试要严谨。
淘宝与其他竞品
1.首页
淘宝：整体看起来没有什么硬伤，没有用卡片风格。
京东：这边也是继淘宝改版后不久改版上线。这边首屏的 icon 这一块的卡片式生硬，大有为了卡片而卡片既视感，京东秒杀这块的整齐度不高，也有些左重右轻。”每日逛“这种装饰性较强的风格也与整体卡片式简洁风格不符。”东家小院“楼层次级标题的颜色跳跃，大有喧宾夺主之感。
苏宁易购：这次目前还没有改版。掌上抢这楼层整齐度不高，和京东类似，同时缺少层次感，部分有渐变部分没有，非常不统一。”逛实惠“楼层视觉不平衡，而且信息层级很有问题。
2.搜索结果页
风格：淘宝这页用了无框设计，省去了中间的分割线，商品图片尺寸较大；从左到右，图片尺寸越来越小，分割线从无到细到粗，整体效果上淘宝和京东效果比易购的好。
标签：在标签的处理上，易购的标签非常强，在页面上非常突出，喧宾夺主；京东的标签弱化，与淘宝类似，但完全不同类的标签样式相同（秒杀与自营），会让人觉得有些混乱。
图文编排：淘宝和京东都没有硬伤，比较和谐，但易购的图片和文字大小间距比例不和谐，图片与线框无论在视觉效果上还是像素上都没有对齐；易购底部没有适配爱疯X。
3.分类页
风格：淘宝用了明显的卡片，去线条；而京东也用了卡片，卡片感微弱，是为了统一性而做；易购仍然是线框区分，整体区分效果不佳。
品牌：淘宝和京东在文字的处理上没有用更多的色彩，而易购的色彩运用得非常多，削弱品牌感，且没有带来任何优势。
4.商品详情页
此页面我仅从节奏感这一个角度来看，上图已经标出了每个页面的节奏感给我的感受。淘宝整体的节奏感比较好，轻重缓和；京东和易购在节奏感上做的都有些问题，重节奏之间无轻节奏的调和会缺乏呼吸感。有关节奏感的问题我们以后可以单独做个番外来讲。
5.购物车
风格效果：淘宝没有用卡片风格；京东用了卡片，导致大量留白，同时没有带来任何优势，苏宁易购整体稍显拥挤，没有亮点。
图文编排：淘宝整体非常和谐；京东图片均使用了白底，这点很好保持了统一性；京东使用了大量的设计细节，字号、粗细、字体、颜色等等非常丰富，但整体效果并没有很理想，稍显琐碎与凌乱；苏宁易购的文字大小与间距处理不和谐而带来拥挤感。
其他细节：京东标签不同于搜索结果页的弱化，而是非常强化，导致视觉焦点混乱，个别按钮非常小，操作不便；易购标签处理上比京东收敛；易购底部 tab 与其他部分没有区分，浮框像广告，效果不佳，数量修改框的描边太硬，比例不和谐。
6.个人首页
整体风格：淘宝和京东都是明显的卡片式，苏宁易购是广义上的卡片式。
这里主要说一说易购的问题：首屏出现“我的专场”的大片不平衡色块非常不合适，部分 icon 效果不佳，另外有一些内容上的 bug。
7.订单
淘宝和京东的订单页个人认为没有什么硬伤，淘宝有个适配的问题。苏宁易购的问题比较多，首先是顶部“常购清单”中没有商品的 bug，然后是图片与购物车等地方的风格不符，商品之间分割线有时有有时无，间距有问题等等。
综合上面具体页面的分析可以看出淘宝在 UI 设计上的优势：追随设计趋势；统一性；排版和谐等。
关于统一性这一点，可能有人说京东做的更好，因为它几乎所有页面都用了卡片风，而淘宝没有。个人认为，设计风格是次于设计目标的，如果这种设计风格不能很好满足该页面的设计目标，建议还是以设计目标为重；如果仍然强制使用该风格的话，会得不偿失。淘宝的做法是把卡片这种风格归类为轻质化风格，除了卡片以外，还有去线条、色块等等设计语言，因此并非强调一定要使用卡片形式。（来源：人人都是产品经理 文/米可）
》》点击“阅读原文”，进入C2C电商网
【重磅】传腾讯领投拼多多30亿美元融资 估值接近150亿美金
【重磅】阿里推“淘宝特价版”APP 是“消费分级”还是宣战拼多多？
点击关键词 看独家原创文章
点击关键词 看权威行业报告
电子商务研究中心
【我们】电子商务研究中心（微信ID：i100EC），运营国内领先电商资讯智库门户100EC.CN
【投稿】news@netsun.com
【合作】微信：www-100ec-cn
【授权】请加微信：JL24on
近200000电商人正关注我们公众号
注意：现在公众号有置顶功能了，大家把微信更新到最新版本，点开“电子商务研究中心”公众号，点“置顶公众号”键，就可以将我们置顶了。此外，您还可以将电子商务研究中心添加到桌面，这样，您就可以第一时间发现我们。