Vivo应用商店9.0设计改版

一、项目背景

1. 为什么要做 9.0 改版？

21 年商店经历数次设计改版，灰度测试，最具有代表性的是《商店 UI9.0 视觉升级》及《动见创意探索专项》，致力于打造精彩的产品体验，为商店业务提供创新的设计思路。但都因商业化数据下降，而未能成功上线。回望过去，商店未做大改版已有 3 年之久，8.0 版本号从 8.01 到了 8.99，即将破百。

前期商店改版探索

2. 为什么商店改版这么难？有两个难点

难点 1：通过调研我们发现商店有四类用户，且年龄与喜好跨度大，不同群体有不同诉求，年轻群体追求好逛、惊喜。而大龄用户追求安心、易用；在设计时需要兼顾权衡。

难点 2：满足大盘用户诉求的同时，需要确保商业化分发效率的稳定，设计时需要保证内容展示效率，这也是导致产品形态不敢做较大变动的根本原因。

因为体量大、商业化重，做一点改动对数据波动就会很大，导致进入到担心数据不好不敢改动，不敢改动就没有变化的困境循环。

过程中我们深刻认识到，仅通过表层的视觉刷新，没有整体产品形态和内容的改版，是无法达到用户对商店好逛、惊喜的感知的。所以需要通过与业务侧共创，对功能、框架、内容、表现层面寻求新的设计突破，并找到商业化和用户体验的平衡点，才有可能给用户焕然一新的感知，达成 9.0 升级目标。

通过小伙伴们的不懈努力，历经 200 多天，2 次规划汇报、10+次共创工作坊、1 次完整提案，我们运用科学度量发现问题，通过克制美学解决问题，最终与业务通力合作，完成了这次 9.0 改版的突破。

二、设计目标推导

22 年，通过体验度量模型两期监测，我们精准定位到“吸引力、新颖、简洁、一致性”四个低分指标，并且这些低指标项都涵盖在之前用研定性访谈结论中。

业务侧也针对不同诉求用户制定了 9.0 整体产品规划夯实基础体验；拓展服务边界；分人群个性化；建立期待，希望通过以上策略，给用户打造更安心、智慧、精彩的商店，满足多样化需求，基于业务侧 9.0 规划，设计会着重围绕两个部分来提升体验。

1. 「框架及信息的升级」致力于让用户更好找、更快决策，对应业务规划夯实基础体验的设计策略。
2. 「品牌形象重塑」致力于为用户打造品牌一致性、有吸引力、新颖的商店，为用户营造更加官方高效、懂我贴心、好逛惊喜的感受。总体设计策略与业务是相契合的，助力商店业务达成活跃分发的目标。

1. 框架优化思路

通过框架优化让布局更合理，用户需求路径更好找。

①首页框架优化

首页框架问题主要有这三类：

1. 首页模糊需求路径较乱，主次场景归类不太清晰。
2. 分类作为核心路径，人均分发效率和渗透率高，但入口分散不明显，用户感知弱。
3. 没有入口可以运营，整体框架可拓展性较弱。

基于以上，我们提炼出总体设计目标——通过合理区分主次模块、构建合适的框架样式，让用户更高效的找到功能模块，达成易辨别、易理解、及分发指标的提升。

针对首页框架层，用户在商店有 4 种需求解决路径，精准、模糊、潜在、管理，模糊需求目前占比最大，比如哪个视频 app 更好？哪个自拍更好看？哪个养成游戏更好玩？模糊需求主要分为核心和次要场景，核心场景为搜索、分类、游戏、应用，需要强化路径感知，让用户轻松触达；次要场景为必备、排行、热门、专题等，需要合理归类方便查找。

针对首页框架，我们通过竞品分析归纳出三种常见类型。入口分流是我们商店现有框架，金刚入口处于视觉焦点位置，感知强，拓展性较差；平行分流是华为、小米、应用宝的框架结构，底 tab 与顶 tab 权重区分较好，顶 tab 拓展性强；平行入口分流是电商类惯用结构，较复杂，比较适合于商品类目较多的产品。

最终我们从用户和平台视角认为「平行分流结构」更优，原因是布局简洁，功能主次分区明确，能更好的兼顾拓展性和屏效比。

我们的框架设计方案也采用平行分流结构，首先，将入口改为 Tab，区分框架优先级，强化底 Tab 权重；

其次，将分类下移到底 Tab，加强全局性，强化模糊需求核心路径感知，而排行则上移到顶 Tab 与推荐内容归类；

再次，将顶部 Banner 下移，凸显搜索入口。通过这些优化让用户模糊需求主次路径归类更清晰，凸显分类权重和感知。

最后，在顶 Tab 中，我们预留出运营拓展空间，让常规活动、精品内容、新内容在页面内可以更灵活的尝试，让用户方便的感知到高品质运营内容。

②分类页框架优化

分类页改版是本次 9.0 产品规划中，有效提升活跃和转化的重要场景。我们通过走查和竞对发现有以下体验问题

1. 一级分类展示不全，用户不易察觉。
2. 页面信息平铺，与应用相关的信息少。
3. 任务路径深，浏览内容须跳至二级页面。

所以我们希望通过框架布局调整，让用户更高效找到目标类目，提升查找效率。通过调研，了解到分类用户偏下沉，希望操作更简单，信息更直观。

根据业务目标及用户诉求，提炼出分类页改版的设计目标是，通过框架优化，让操作短平快；通过结构优化，让信息更易辨别。

针对分类框架，通过竞品分析归纳出三种常见类型：

1. 侧竖向导航，在单页中切换 tab
2. 索引导航，用户可快速定位二级类目，但下载路径较长。
3. 平行分流导航，对特定类目信息曝光大，但一级类目切换路径长。

从用户视角和从平台视角综合来看，使用「侧竖向导航」更优，原因是层级扁平，操作短平快，使用效率高，兼顾拓展性和屏效比。

最终，分类框架设计方案是，在框架层扁平化层级，通过设计侧竖向导航，将双级页面变为一级页面，缩短下载路径，让用户切换类目下载更高效。

对于二级分类，我们也尝试了多种方案，最终选择「去掉排序功能，强化二级分类的方案」，为了让切换二级页更方便。

因为从后台数据发现，二级类目的活跃和分发都比一级要高，需求强烈，排序的活跃和转化很低；用户希望快速触达二级分类，且简单直观，易于理解；所以我们建议去掉排序，强化二级分类的方案，整体层级更简化，用户切换更直观方便。经过科学的论证，也说服了产品侧接纳我们的方案建议。

同时也考虑到与游戏中心的统一性，让两个产品整体框架和基础控件感知保持一致，避免差异化体验，让用户在相同场景下能尽可能保持一致的操作习惯。最后，我们来看一下首页和分类页整体框架优化后的效果。

新版上线后，从体验度量和数据层面都获得了出乎意料的结果。从体验度量检测结果来看，框架优化让操作步骤变得更简单高效，用户反馈更加简单易学了。同时单场景度量结论中发现首页、分类场景在操作简单、易学、操作步骤短平快等指标都超过大盘平均分，这也充分验证了前面对框架及信息的思考。

那我们再来看一下数据层面，首页框架改版 + 页面视觉体验优化，让翻屏率提升明显，说明用户对新版有较大的浏览兴趣；分类页的用户诉求也被更好的满足，分发量有了大幅增长。说明改版从产品和用户层面都是符合预期的。

2. 全局决策信息优化思路

通过决策信息优化让信息传递更加丰富贴心，方便用户更快的下载决策。

首先，我们通过对用研反馈问题梳理，总结 2 点问题。

1. 帮助用户高效下载决策的信息较少。
2. 一眼望去全是没有重点的文字，信息枯燥，层次感是不够的。

设计发力的核心是，通过信息分层，差异化凸显，高效传递给用户更有价值的决策信息。

总体按照信息归类、重组、划分优先级这样一个思路来设计。

首先，将列表决策信息划分为两类，一类是 Icon、标题等用户了解应用的必备信息。另一类是极光奖、排行、福利等魅力信息。

接下来，将魅力信息按照用户重要程度划分为三类：

1. 顶部的极光奖、排行代表优质权威，需要差异化重点突出，可以看到友商都会做凸显和强化。
2. 中间是精选评论、福利等差异化特色信息。基于用户从众、驱利等心理，可提升用户下载动机，类似大众点评的效果。
3. 第三类是标签，更适合游戏用户需快速甄别游戏类型，像 TapTap 会做差异化展示。

为了让信息更高效的传递，我们制定了信息展示规则，将权威特色信息分层设计，帮助用户更高效决策。

我们通过信息层级和视觉表现层级对不同权重的信息进行区别展示。

1. 针对极光奖、排行信息，会强化展示，凸显权威。
2. 针对评论、福利信息，会做差异化凸显，帮助用户提升下载动机。
3. 针对标签，会在游戏应用中强调，让用户快速区分差异化。

在详情页，同样运用信息分层展示规则，通过对奖项、排行等信息分层和视觉强化，让用户一眼 Get 到重点信息，高效决策。我们再来看一下，决策信息优化后在页面中的效果，在层级上会更舒适，感知上更权威可信。

以上就是框架及信息的升级的设计思路，我们运用科学的体验度量发现问题，严谨全面的推导解决问题，完成了交互层面改版，也收获了出乎意料的结果。

3. 品牌形象重塑

在前面的内容中，我们从交互视角阐述了「框架及信息的升级」的整体内容。现在，我们从视觉的角度来阐述「品牌形象重塑」的相关内容。

应用商店品牌形象重塑的目标是通过视觉调性的升级，提升商店的吸引力和新颖性，从而提升应用下载量，最终促成业务目标的达成。

应用商店品牌形象重塑包含三个方面的内容，分别是一致性、吸引力和新颖性。

①一致性

在 22 年 vivo 手机推出 originOS2.0 操作系统后，我们在视觉上进行了全面的升级。作为系统预装应用的应用商店，我们需要保持与 OS 风格的一致性和品牌调性的认知，这有助于强化 vivo 官方应用商店的感知，也是相比第三方应用商店的最大优势之一。

基于此，我们通过应用商店 9.0 大改版进行了一个全面的品牌形象升级，以保证视觉风格的一致性和认知传递。

此次 originOS2.0 的升级主要围绕层级感、舒适性这两个维度进行打造。下面，我们一起来看商店是如何从这两个维度完成系统一致性适配的。

由于应用商店与 OS 工具产品属于不同的业务类型，产品目标和定位有较大的差异，这直接决定了产品形态的不同。因此，OS 的设计表现手法并不能直接应用于应用商店产品。为了实现与系统感知的一致性和统一性，我们需要基于系统规范，结合产品特征，寻找平衡的设计策略。

「层级感」

应用商店产品形态主要以应用列表为主，样式单调，层级感不够强。为了提升列表的层级感，我们通过强化模块分区和穿插内容的节奏感，来打破页面单调感。

将应用商店首页内容转换成布局图，就能清晰地看到模块内容的相似性极高，内容也过于平淡，容易让用户产生疲劳感。

为了提升浏览的舒适性，我们在不影响首屏应用曝光数量的前提下，运用格式塔法则对结构进行了优化整合，建立视觉锚点，让信息传递更有节奏感。同时，我们通过增加页面边距、加大容器圆角等手段，增加空白区域（负空间）的面积，来有效提升页面的通透感，使页面看起来更加简洁整体。