电类 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 设计上的优势：追随设计趋势、统一、排版和谐等。
关于统一性这一点，可能人京东的好，因它几乎所页面都用了卡片风，淘宝。人认，设风格次于设目标的，如果这种设风格不能很好满足该页面的设目标，建议还以设目标重；如果仍然强制使用该风格的话，会得不偿失。淘宝的法把卡片这种风格归类轻质化风格，除了卡片以外，还去线条、色块设语言，因此并非强调一使用卡片形式。
会更新一些有关体验计的文章或者其有的没的~欢迎交流~
注作者的微信公众号：「404FoundSpace」
浙公网安备33011002017549号