今年8月去杭州参加了U DESIGN WEEK，对《淘宝2022设计背后的故事》记忆深刻，正好上周我们组内的小伙伴@馨怡重新整理了当时主讲人分享的PPT，在组内进行了再分享,所以我就借用她整理的PPT,和大家聊一聊淘宝设计背后——淘宝设计师的思考和方案，并总结一下，作为普通设计师,咱们可以从中学到哪些设计思维和方法。主讲人开篇就定义了淘宝设计的关键词：体验简化，去冗出新。太阳底下无新鲜事，经过十几年的积累沉淀，设计其实也从蛮荒时代步入了成熟期，经典的设计方法论相信大家经过小课堂的学习，基本上也混了个耳熟，所以大家不要期待在这些行业大会上，有什么惊世骇俗，横空出世的新方法来解决大家的日常问题。反而我们应该静下心来，围绕着用户需求和产品目标，对司空见惯的产品设计不断追问、反思、挑战、探索…，用经典的方法也能创造巨大的设计价值。作为一个平台型产品，淘宝主要从消费者、商家和平台三个角度来考虑设计目标（只要是平台型产品，都可以借鉴这个思考逻辑哦~）：▲图1 平台型产品的思考逻辑
这三点中，消费者体验是基石，所以咱们先从消费者体验开始讲起。主讲人把消费者体验细分为三种：过程体验、内容体验和附加体验（这个思路大家也可以借鉴哦）对应到淘宝设计上分别是：购买体验、商品体验和人群体验。下面我们逐一来看。经过设计师自我走查和用户调研反馈，设计师梳理出来的购买体验问题包括：导航不统一、各业务闭环繁琐、链路节点多、弹窗干扰大以及用户没有预期去哪儿？▲图2 淘宝购买体验问题
针对每类问题，淘宝设计师分别制定了对应的设计策略：其实看到这里，我对淘宝设计师的策略总结能力也有一些疑问，因为5条策略并做到MECE(互相独立，完全穷尽)，而且单条的逻辑性也有些问题，你发现了吗？①和⑤讲的都是导航问题，③和④将的都是弹窗问题，②链路闭环写个轻浮层也有些牵强。所以呢，作为设计师，我们在看大厂的文章（包括我的）时，也要带着批判性思维，选择性的吸收，不要盲目的套用，否则就有可能出现我们上堂课所讲的反面案例。那每条策略里有哪些是值得我们学习的呢？我们继续来看：
线下场景中，导购方式一直在不断发展、丰富，但淘宝线上的购物动线，却好几年一成不变，一直延续着逛/发现→挑选决策→购买支付的流程。▲图3 淘宝购物动线
用户线上购物真的是这样进行的吗？淘宝设计师进行用户路径分析，发现发现很多用户的购买行为，并非我们理想的线性向前，而是往返跳转的：▲图4 真实用户的消费链路
用户为什么会在前后页面往返浏览呢？说明页面在用户发现和决策商品上的信息传达还不够清晰，有优化的空间。再从商家的ROI来看，商家在淘宝店铺中，花了大量的资金投入在商品详情图和店铺上，但消费者的消费深度却变浅了，往往消费了首屏就走，根本没进行深度浏览，那商家重金投入的详情图和店铺就白白浪费了资源。▲图5 商详页的消费数据
最后，从平台数据进行分析，我们发现用户在淘宝内种草习惯逐渐减弱，很多用户的直接购买行为显著（在其他地方被种草，过来直接购买），商详页的人均浏览次数IPV下降趋势明显：
▲图6 商详页IPV趋势
因此，基于这三点发现，淘宝的设计师准备聚焦核心内容：商品发现页和详情页，以让用户便捷浏览和切换为目标，开始了一系列尝试。以淘宝首页推荐为例，用户点击相似的卡片入口，会有很多种承接页面，每个页面设计都完全不同，用户进入之后很容易因为陌生而迷失进而放弃。▲图7 商品详情页的现状
那怎么办呢？为了不让用户迷失，淘宝的设计师先是对推荐页卡片进行了调整，秉持着内外一致性的原理，将推荐卡片和最终的承接页做了一致性处理，让用户在进入承接页之前，就对承接页的形态有了心理预期，然而这样改版的结果是承接页的渗透数据却下跌了，未达到产品预期。
历史数据证明，当推荐卡片类似于商品卡片时，渗透率数据往往是最好的，既然无法改变推荐卡片的形态，又希望用户进入承接页不迷失，淘宝的设计师就对千差万别的承接页动刀了，这个改动是非常大胆的，牵涉的业务方很多，内部阻力也比较大，但他们最终说服了项目组进行尝试，把所有的承接页也统一按照商品详情页的结构进行调整，把以前纷繁复杂的承接页统一成了相似的页面结构，让用户进入到任何一个承接页都能够按照熟悉的方式浏览和操作，最小化了用户的认知和操作成本。
▲图8 统一承接模式
这是让我比较佩服的一点，设计师们经常会遇到改版阻力，特别是在改版失败的情况下，还敢于坚持、持续尝试、争取机会，直到拿到好结果是非常难得的，否则很多好想法就永远停留在了设计师的脑海里。
再来看一下下单流程，借用淘宝设计师形象的总结：买就一个字，却要点很多次。
用户决定购买后，还要经历5个页面，N个步骤才能最终完成下单。
▲图9 淘宝下单流程
用户如果要退换货，那就更麻烦了，大家可以简单看一下以下界面：
▲图10 淘宝退换货流程
淘宝设计师仔细的分析了这两个流程，并将流程中的体验问题归纳总结如下：
▲图11 淘宝下单和退换货问题总结
基于这些问题，淘宝设计师将购买链路进行了大幅度的简化，合并并统一同类内容，让购买更加便捷：
① 详情页下单链路合并，一键支付：
▲图12 详情页下单链路合并
② 客服沟通后的购买链路优化，无需返回，直接购买：
▲图13 客服沟通购买链路优化
③ 利用弹层，或者合并物流进度页，减少页面跳转
▲图14 利用弹层以及合并物流进度页减少跳转
这些是淘宝在购买体验上所做的一些核心优化，有大胆的革新，也有寻常的导航、链路优化，大家也都可以学习和借鉴。对于淘宝而言，内容即商品，商品是淘宝最大的内容载体，是最需要被关注和设计的。设计师先是从熟悉和擅长的表现层出发，归纳了设计上存在的内容体验问题，比如大家都非常熟悉的字号、层次、导航、视觉风格等。▲图15 表现层内容体验的问题
然后再通过设计的手段，选择大字号、去卡片化、更少的分割、层级优化和极光感来逐一对其进行优化。
▲图16 表现层内容体验的解决方案
如果就做了个这，相信大家也不会觉得有啥，因为这只是设计师的本职工作而已，而之所以淘宝的这次分享让我印象深刻，是因为他们还做了以下这些看起来跟设计没多大关系的结构化设计，真正做到了通过设计赋能商家。
先看一下淘宝商品主图的现状：
▲图17 淘宝商品主图现状
会发现商品主图的相似性非常高，甚至有可能多张主图都是重复的，或者主图信息混乱冗余。这样设计的导致的结果是用户决策效率低，商家运营ROI也低。
▲图18 商品主图存在的问题
设计师们通过数据观察，在海量的商品中找到了转化率效果比较好的主图设计：▲图19 头图设计较好的商家案例
经过拆解分析，发现商家将头图的设计逻辑编排非常的巧妙，以往我们都是纵向图文模式来吸引用户关注、兴趣、决策、行动，而这个商家将头图的展示也按照这种模式来排列，从而让那批不爱看文字，只爱看图片的用户，可以在首屏就接收到所有的这些信息，刺激用户的购买决策。
设计师受此启发，决定给商家提供一些结构化的主图设计模版，提高商家主图设计效果和转化率。不过，说起来容易践行难。淘宝商品种类繁多，不同商品用户的关注点不同，那如何才能做到给不同的商品提供合适的模版呢？▲图20 淘宝不同种类产品用户的关注度举例
设计师们真的是沉下心去，将不同品类用户的决策因子进行了分析、整理和提炼，并结合用户反馈和后台数据给出了决策因子的优先级排序。这样，一个新入住的淘宝商家，在没有任何运营经验的前提下，也可以参照设计师给出的主图设计结构和信息建议，进行图片和文本信息的设计，让头图的信息既能够吸引用户注意，又能够帮助用户决策，从而加速用户的购买决策过程，提高用户效率和商家的ROI。这才是真正需要下功夫的地方，想想淘宝海量的商品品类和规格参数，恐怕我们很多设计师都会望而却步。▲图22 各行业结构化的内容维度
以尺码为例，不同的服饰，在尺码上有着不同的参数，比如上衣就有衣长、肩宽、胸围、下摆、袖长，下装有腰围、臀围、裙长、下摆等。▲图23 尺码推荐
通过将各品类的尺码参数标准化，不管商家怎么定义大小，平台都可以结合用户数据，为用户推荐合适的尺码，并展示符合用户尺码的商品版型，再也不会因为不同厂家的标准不同，买到偏大或偏小尺寸的服装啦。▲图24 尺码推荐
相对而言，尺码还是一个比较简单且容易标准化的一个数据，其他数据相对更有挑战一些，比如香型、成分、参数等。▲图25 其他数据的标准化
▲图26 各类行业主图结构化案例
通过将核心参数如：款式、颜色、口味等前置外显，让用户可以直接在主图区域切换和查看，提高用户浏览和决策效率。此外，为了提升商品展示效果，凸显商品材质，淘宝设计师还专门为不同商品制作了特效，以此来让用户感知到商品的面料、质感和光感，提升商品的吸引力。▲图27 为主图商品添加质感特效
此外，淘宝设计师还洞察到用户天然的搭配需求，在主图上为用户提供搭配效果，既满足了用户的搭配需求，还能刺激订单转化，一箭双雕。▲图28 在主图上推荐搭配
▲图29 成分、3d视图、其他类型结构化的案例
由于分享时间有限，淘宝设计师展示的案例还仅仅是他们结构化的一部分，其实还有很多内容未来得及分享，下面是他们给出的详情页框架升级的结构模型，如果大家感兴趣可以仔细学习和借鉴一下。
▲图30 商品详情页框架升级结构模型
强烈建议电商平台的设计师要仔细研究一下，其中的优化思路和方法，甚至具体方案，很多都是可以直接借鉴的，毕竟好的设计都是有共识的，也是经得起用户检验的，希望在设计师们的不断借鉴和创新中，咱们网购的体验能够越来越好。
好了，淘宝2022设计背后的故事分享就到这里结束了，如果大家有什么疑问，或者希望悦姐讲解新的交互课题，欢迎添加悦姐微信yuechats，和悦姐一起学习成长~
参考资料
① Ucan&馨怡分享的《淘宝2022设计背后的故事》