淘宝频道去哪儿了：频道体系设计升级

淘宝2018来了，相比于以往每年的改版，这次变化是一次更为本质上的变革。亲们打开新版淘宝，最直观的感受可能是：

诶？以前首页各种各样的栏目和频道都哪里去了？

唔！好像分散在猜你喜欢里面。

恩？频道还可以关注？

……

大家可能已经意识到，淘宝频道的模式跟以往不同了，那么在频道模式升级过程中，设计都做了哪些事情，是如何做的？接下来这篇文章就带大家详细了解一下！

频道设计升级的背景

━

01|淘宝频道逐渐开放，运营策略变化

在以前版本的淘宝，频道总是以“固定坑位”的方式在首页呈现给用户，不管你看没看到，它就在那里，不大不小，不管你喜不喜欢，它就在那里，不上不下。在频道数量有限的情况下，问题可能并不明显，但淘宝频道正在逐渐开放，鼓励更多定位于不同用户需求的频道产生，因此大量新的频道将涌入淘宝首页，在这种情况下，没有优胜劣汰机制、所有频道服务于所有用户的定坑模式显然不再能很好的运作。

从首页固定坑位到全链路推荐

新的淘宝，绝大部分频道不再占据首页前几屏的固定坑位，而是分布于首页和购后链路的猜你喜欢、主搜索等多种场景，这些场景中，双列或列表型内容展示方式的用户心智和浏览方式都非常简单，具有很高的分发效率，在其中插入频道坑位不会过多影响淘宝整体的内容浏览效率。

频道除了整体入口外，还有内容入口的形式，一个频道可以通过推荐不同的内容来实现多次分发。

频道可被主动关注

频道在多场景推荐的同时，还可以被用户主动关注，已关注的频道会在淘宝首页提供“快捷方式”，把用户有心智的、真正需要的频道放在首页最重要的首屏位置。

02|频道现有体验问题需改进

对用户来说，淘宝是一个整体产品，所有频道的基础体验应该是一致的。但淘宝是一个非常庞大复杂的平台，各个频道都是由不同业务方分别设计和开发，虽然淘宝有整体设计规范，但由于盘子很大，以及各种历史、现实原因，目前各个频道的基础体验还是参差不齐。

设计要做的事情

━

01|频道体系的认知

频道的内涵已经更为广泛，包括营销产品、内容导购产品，甚至社交产品、工具产品、游戏产品等，频道及其内容的分发也遍布淘宝各种场景。所以所有频道整体上需要一种独特而明确的、自成体系的用户认知，否则用户在使用中可能会感到迷茫。

由于各频道的性质多种多样，其内容及界面本身就应该是千差万别的，因此我们认为频道体系的用户认知，可以通过频道的基础框架来表现，让所有频道都有明确而统一的体感。

02|频道的使用方式

频道更加灵活的推荐模式，从淘宝整体来说，用户看内容的效率更高了；但从单个频道角度来说，由于在首页没有了固定入口，其流量可能会减少，从而影响频道内更多内容触达用户，以及开发者的参与度和积极性。因此设计上要考虑内容和频道的用户流转路径，在内容浏览效率高的前提下，在适当的场景中给频道更多触达用户的机会。

03|借力新频道模式进行体验统一升级

新频道的模式下，所有以往频道都需要迁移至新的技术框架，后续接入的频道也要在新技术框架下开发。设计上可以借力这个机会，解决淘宝历史遗留体验问题，对所有接入频道进行一轮整体体验上的统一和提升。可以通过功能框架化的思路，将频道基础功能全部由框架层统一处理。同时输出功能组件、提供设计建议等。

下面通过一张图对上述内容进行一个总结：

设计拆解

━

01|频道框架的体感设计

通盘去看所有频道类型，我们抽取了频道启动加载、页面导航、频道统一操作反馈、页面转场这4个方面进行框架层的统一设计，并使其具有自身鲜明的特征，从而形成淘宝频道的体系化认知。

在设计过程中，最重要的地方是拿捏频道体感表现的“度”。

平台的子产品体感表达有不少方法，比如现在各大平台风风火火的“小程序”，采用了完全区分于普通页面的导航结构，以及有鲜明特征的进出转场方式，来传达小程序自身小闭环的用户认知。淘宝的新频道模式从概念上其实类似于“小程序”，在设计过程中，我们也探索过强调频道独立体感的设计方式。

但淘宝的频道在使用上却是与其他平台的小程序不同的。频道的使用融于淘宝全链路中，不是独立封装的个体，比如一个商品营销类频道，它的商品组织是频道自身范畴的，但用户的购买、进店、客服沟通、支付、售后链路等又在淘宝基础页面完成，淘宝的频道与基础功能链路的界限并不明显。同时，频道的入口也分布于手淘的各种场景，如淘宝首页、主搜索、微淘、消息等等，会与其他的内容形态（商品、文章、栏目等）同时出现，并不像其他平台的小程序入口场景比较单一。

由上面的分析可以看出，频道的框架体感如果完全区分与淘宝其他链路页面，用户在使用过程中一定会不顺畅。从淘宝整体来看这并不是理想的体验。

因此频道框架的设计要点可以总结为：寻找到自身体感与全链融合性的结合点，用多个不会影响到用户的细微变化叠加，产生出频道体系的用户感知。我们对以下的细节进行了设计。

频道启动加载

启动加载是频道从入口到首页的过渡过程，是给用户第一印象的部分。以往频道首页加载基本属于“无人问津”，在新频道框架设计中则是利用起来这一过程。启动界面以大尺寸logo给用户以频道独立品牌的认知。单个频道的启动过程可能不会引人注意，但所有频道整齐划一的启动方式，会给用户明确的“体系”感知。

导航栏

为保证淘宝全链的使用体验，频道导航我们仍然沿用了与淘宝基础页面一致的层级返回，但返回icon在视觉表达上进行了弱化，并与导航栏其他元素区隔开，以减弱频道首页在淘宝中的“二级页面特征”；同时强化频道的名称，使之更有独立产品的感受。

频道统一操作反馈

我们对全部频道统一的操作反馈，在框架层面进行了统一处理：在全局菜单中加入“最近使用的频道”，使所有频道串联起来，从而具有体系化感知。视觉上采用类似手机系统提示的交互方式，自顶部而下出现，并具有背景模糊的视觉效果，这种方式能够带来“应用级”的使用感受。

页面转场

页面转场首要考虑顺畅的通路和无缝衔接。所以频道的进出场方式，最终我们舍弃了垂直方向进出、或缩放进出等强调体感的做法，采用了淘宝基础的左右水平进出方式。

02|频道和内容多途径流转

考虑到不同场景下频道与内容用户浏览方式，新的频道模式设计了多种频道及其内容的流转路径。用户不仅可以直接进入频道首页，还可以通过内容进入频道首页或查看频道其他相关内容，并且能够通过导航栏中的菜单在不同频道之间切换。

路径1：频道入口-频道首页-频道二级页

用户频道整体入口进入频道首页，再进入频道二级页面，是最基础的浏览方式。

路径2：内容入口-频道内容-频道首页

用户直接进入属于某个频道的内容详情页面时，页面导航栏中会提供回到频道首页入口，同时，页面中也可以插入频道相关的模块，使频道其他内容更多透出。

路径3：频道1-频道2-频道3…

用户可以通过全局菜单在最近使用的频道之间切换，避免通过多次返回再进入其他频道带来的操作成本。

03|频道功能框架化

在不影响频道自身设计的前提下，我们把能够由框架层处理的问题统一解决，而不是给出规范由频道自己开发，这样能够保证在越来越多的频道接入以后，频道体系的基础体验一致性仍然能最理想的实现。

案例1：频道关注功能

从每个频道自身来说，肯定是希望用户去关注的，但从用户角度，如果每个频道都各自为战，用户每次进入一个频道，都被提醒一下是否要关注，那么整个手淘的体验可想而知。因此，我们在框架层设计了频道关注的提醒方案及其出现逻辑：在用户前三次进入频道时进行关注提醒，而不放开由频道各自去设计。

案例2：二级页的频道首页入口

在频道二级页的导航栏中，频道入口可以跟随手指上滑动作而缩短，从而为其他内容让出展示空间。

在技术层面，导航栏无法获取页面的上滑状态，如果我们只提供入口缩短的设计规范，而由频道自己设计和开发，那么由于动效本身具有一定复杂度和较多细节参数，结果各频道的实现效果不免会有差别。因此我们在框架层提供了统一动效方案，频道只需接入即可。

写在最后

━

新的频道体系从产品角度来看，核心是模式的改变，而用户如何认知、如何使用，业务方不会提出具体的需求。如果设计师只是从接收产品需求再完成设计方案的角度来看待，就几乎没有可做的事情。拿这次频道体系升级项目来说，业务需求无非是以前不可以关注，现在可以关注了，加个关注按钮就OK。但回头看来，在新频道体系落地的过程中，我们已经改变了很多。

在产品变化的过程中，设计师不能局限于某一个变化点，要主动去发现产品中某部分变化对全局用户体验带来的方方面面的影响，并主动提出解决方案，反哺给业务方，共同推进体验的全面升级，这是设计师价值体现的重要部分。

原文始发于微信公众号（淘宝设计）：淘宝频道去哪儿了：频道体系设计升级