淘宝美食怎么挑？吃货们看完这一篇就够了

在我们的前两篇系列文章《淘宝首页2018：回归初心，化繁为简》、《淘宝频道去哪儿了：频道体系设计升级》中，已经带大家对本次淘宝首页、频道升级背后的设计故事有了比较全面的了解。首页“我的频道”板块之中，具体的导购频道又将如何在这次升级中实现蜕变？这些导购频道的背后有着怎样的设计思考？本文将以吃货们的最爱——美食频道“汇吃”为例，介绍美食场景导购背后的设计探索。

环境与现状

━

01|首页与频道升级

2017版的淘宝首页强调的是场景化的导购概念，通过“我淘我家”、“淘遍全球”、“时尚大咖”等场景，聚合相似的垂直导购频道。而在2018版的淘宝中，更强调每个导购频道的场景垂直性，及其自身的特征与个性。从原来定坑的出现方式变成了根据用户行为，在猜你喜欢feed流中混排，进行个性化展示。

02|食品行业导购

食品是在整个淘系内消费占比很大的一个垂直行业，但在淘宝内还没有特征明确、功能清晰的食品类导购产品。用户如果想要购买美食，只能在搜索框通过搜索相关字段进行查找并查看相关的推荐字段，或是在现有的“生活家”、“有好货”、“必买清单”等导购频道下浏览查看。搜索的方式找到的美食比较有限，导购频道推荐的食品也相对大众化，且导购的方式也较为单一，难以帮助用户发现千奇百怪的美食。

在这样的大背景下，“汇吃”频道便应运而生，旨在打造吃喝消费的第一入口，帮助用户发现新奇有趣的美食，满足广大吃货们对吃的追求。

设计目标

━

基于以上业务背景，我们提炼出设计层面的目标。

01|频道心智表达

频道心智表达是指通过设计使得用户能快速清晰的明确产品是什么，能为用户带来什么价值。通过与项目组同学的讨论，频道的功能定位“帮助用户发现新奇有趣的美食，提升种草过程的愉悦感”。清晰明确的心智能强化用户对频道的认知。从而提升用户浏览时的愉悦度，更能提升用户对产品的使用粘性。

02|产品导购效率

产品定位上，主要是帮助用户提供发现美食的内容导购，其核心价值是帮助用户种草，满足用户逛的诉求。设计的另一目标则是提升信息的传达效率，提升用户的浏览效率，尽可能多的为吃货们种草。

在确定设计目标的同时，我们也需要确定衡量设计目标的相应客观数据。数据衡量指标可以帮助我们清晰化设计目标，同时可以帮助迭代之后的设计方案。

体验定位分析

━

在开展具体设计工作前，我们从三个维度进行分析，帮助我们明确产品的体验定位。

01|用户诉求

食品行业的用户整体偏年轻化，尤其是在零食、坚果、冲饮类，高价值用户整体集中在1-3线城市。我们选择了若干目标用户进行深度访谈，了解吃货们的购买偏好和浏览习惯，最终为频道构建了用户画像。

从用户视角出发，提炼产品体验的关键词为有趣的、活泼的、轻松的。

02|平台特性

用户所熟知的淘宝是万能的，无奇不有、丰富多样，因此，在淘内的食品导购产品与外部其它产品相比，也应该丰富有趣的。此外，结合阿里巴巴的天然背书，要求我们的产品是具有品质感、信赖度的。

从平台视角出发，提炼产品体验的关键词为趣味性、丰富性和品质感。

03|业务特性

食品行业

不同的垂直行业天然存在较大差异性，相比其它服饰、家装、3C等行业，食品行业客单价低，用户决策成本低，多是依赖于商品图片和价格，不太关注商品其它的利益点。

内容导购

内容类导购更进一步优化信息内容，拓展商品广度，从单纯推荐商品到推荐一种价值观，帮助用户决策，对用户有较强的吸引力。其形式也更加多样，包括图文、视频、社区等。

从业务视角出发，提炼产品体验的关键词为吸引人的、高效率、丰富感、内容感。

04|体验定位

通过以上不同维度的分析，得出“趣味性”、“丰富性”、“内容感”、“发现感”等关键词，最终综合收拢汇总出“汇吃”频道的体验定位——淘遍新奇特美食。

设计策略：心智分层设计

━

在频道首页的框架上，我们根据用户的浏览路径，采用分层设计的策略。将首页分成“是什么”、“干什么”和“有什么”三个部分，不同阶段满足用户的预期，并希望分别能达到“焦点式”、“承接式”和“沉浸式”的体验感受。

头部区块是用户进入频道后第一眼认知的区块。我们通过精细化、综艺化的形式对内容进行包装，帮助用户在进入频道后，能快速完成心智的对焦和匹配，了解频道的调性和功能。

颈部区块的作用是维持住用户的浏览兴趣。通过算法进行人与货的标签匹配，向用户展示个性化内容，抓住用户兴趣，减少在该区块的跳失。

通过之前模块的筛选，能够进入尾部区块浏览的用户是频道的核心用户，因此在该区域的内容应最大限度还原内容本身，把各种有趣的美食呈献给用户。

具体做了什么

━

01|头部心智栏目：内容呈现高效化

内容调性提炼

在前期，我们会深入到内容的定义中，和运营同学一起讨论该把怎样的内容呈现给用户。

最终“汇吃”频道的心智栏目确定在两个类型：“今日网红味”——以视频吃播的形式，介绍当下最流行热门的新奇事物；“每周食令”——以图文的形式，介绍时下最应季的食物及文化。

栏目框架设计

确定了内容的具体类型和调性，就要对其设计在页面上的展现形式。在初期，我们进行了不同的尝试，包括视频的沉浸感、内容感等设计方向。

最终考虑到平衡效率与氛围，以及多档栏目的心智，采用了卡片的设计形式，在背景层使用当期栏目的封面图，更有整体感和沉浸感。

视觉调性把控

在完成心智栏目的框架设计之后，我们对视觉表现进行了深入的探索，主要分为logo字体设计和图片品质把控。

在logo字体设计上，前期进行了不同方向的探索。考虑到字体识别性和频道的特色心智，最终选择手写体的设计方案，更具轻松活力。

在图片影像上，我们输出了严格的视觉规范，包括弱网状态下的静态图片，以及wifi状态下的5秒视频切片。并且在后期实际生产中，对达人的生产内容进行严格把控，以保证最终的呈现质量。

在频道上线后，通过设计师的指导和达人机构的协作配合，使得栏目图片、视频的质量越来越符合预期的设定。尤其是有清晰特写和试吃过程的视频内容，都能有较好的点击和转化，得到吃货们的认可。

详情页展示设计

在完成入口的设计之后，我们也对栏目的详情展示进行了设计，主要包括完整视频的规范和详情页的规范。设计了结合栏目名称的视频片头，并提供给内容生产者。

02|腰部个性化内容：导购效率化

该区块的作用主要是抓住用户兴趣，降低用户在此区块的跳失，因此我们设计了三个区块来实现这一目标。

盘点内容模块

商品盘点是频道核心的内容之一，主要包括PGC的盘点和算法盘点，将相同主题性质的商品聚合到一起，提升用户的浏览效率。通过口味维度与用户需求进行匹配。在交互上，通过上下滑动屏幕来切换多个商品的展现，提升效率。

在承接页中，我们为不同的口味的人群设计了相应的氛围图片，使得氛围感更强烈。对于商品，使用单列的展现形式，清晰化呈现每个商品的利益点，方便用户比对不同商品间的差别。

营销内容模块

食品行业天然客单价较低，促销活动也相对较多，因此设计了营销模块，用来承接价格敏感型用户，防止该部分用户的流失。对于二级页也设计了相应的氛围图片，保证体验的延续性。

区别于盘点型商品内容，对于营销折扣型的商品展现使用的双列的形式，能够在单位屏幕面积内，最大限度展现图片面积，提升浏览效率。

03|Feeds内容：浏览节奏感

对于Feeds内容，我们确定了双列的呈现结构，在单屏空间内展示效率更高，更利于图片的展示，更能体现内容趣味感和丰富性。

对于视频内容，设计了9:16的沉浸式样式，定义了有序的排列规则，以保证在视频自动播放情况下的产品性能流畅度。穿插营销活动、节点等其它内容类型，提升浏览时候的节奏感。

Feeds内容来源于海量的达人，相比头部心智栏目的内容生产者，这部分达人的能力是参差不齐的，因此无法像心智栏目一样一一强控。我们输出了优秀的图片案例，和图片制作tips，给到内容生产者，包括不同类目商品的多种构图、色调参考。并定期和达人进行沟通交流，发现达人在内容生产中的实际问题，及时对图片规范进行调整，逐步优化图片呈现效果。

节点二级页设计

节点是以最小颗粒度聚合不同的内容和商品的一种内容组织形式，在汇吃频道中，我们设计了类目导购和地域导购两种形式，满足有细分流量目的用户的诉求。在头部，通过强氛围感的图片来是用户明确当前的维度心智。由于各个节点的内容形式和数量是参差不齐的，我们确定了模块化的展现形式，并不制定严格的排列规则，而是方便各个内容模块之间组合不同的呈现方式，满足不同节点的内容分发需求。

写在最后

━

产品的从0到1是一个非常有趣的过程，尤其是针对美食这样的垂直行业。设计师在产出方案的过程中，不单单只是设计一个静态的页面，而是要充分了解其背后的商业逻辑、货品内容构成和算法逻辑等，才能产出更有针对性的设计方案。以及在产品开发中，除了跟进技术的还原度以外，更要跟进运营对于商品的选择和内容的生产，才能保证最终的呈现效果。

原文始发于微信公众号（淘宝设计）：淘宝美食怎么挑？吃货们看完这一篇就够了