【复盘】全方位解析搜狗搜索APP设计改版经验
作者：搜狗搜索设计团队（S²DC）
搜索的本质是什么？它应该以什么形态出现在用户面前？这是我们一直在思索的问题。当互联网被信息湮灭，寻找真实有效的内容需要付出更多努力的时候，我们站在信息链接的中心，有义务去思考如何缩短人类和真实世界的距离。迎着这些问题出发，我们对搜索APP进行了一次改版升级。
回归搜索本质，使产品更具包容性，多角度兼容未来各专业领域的垂类场景，以迎接新的挑战和机遇。我们经历了问题定义，设计策略制定，团队协作，跨部门资源调配，灰度测试，验证效果等环节，最终以新的姿态和用户见面。而在这次以设计推动为主题的改版中，我们有意识进行了储备和积淀，形成了更高效的协同模式并规范设计流程管理，同步构建体验维度的验证模型，并不断深挖和拓展产品外延，探讨更多可能性。
图例：设计流程
在新版设计中，设计更注重对内容的优先展示。我们通过对默认热词的强调，希望吸引用户注意力并促进他的后续行为；此外，限定了引导色的使用，使内容更为聚焦；压缩空间保证信息流的露出，增加信息的展现密度。同时以数据为依据，对功能进行重新布局设置，用有限的空间展示更无限的可能性。
下图是对搜索核心流程的改版效果：
图例：整体对比图
一. 设计目标拆分
提出核心改版目标后，我们在设计内部进行了向下的目标拆分。对app视觉系统的一致性和易用性做了定性分析和调研，以制定后续改版工作的具体框架。首先从商业、用户及自身设计现状这几个角度进行分拆。
商业方面：围绕公司的战略目标和产品的商业现状（品牌认知度低、用户构成分层严重），去圈定我们发力的范围和重点。
用户方面：借助用户研究去采集用户声音，了解用户对于权威搜索引擎的理解，对于关键路径的体验感知并尝试挖掘潜在需求。
设计方面：从三大主要使用场景出发，按照功能粒度去评估我们与竞品的主要体验差距，校正自身的体验问题。
图例：竞品跟踪体验量表
二. 制定体验追踪模型
在本次改版中，交互设计师对线上数据和各环节转化进行了分析，在改版中沉淀输出了体验的评估体系，并对设计的增值价值进行重新思考与定位。我们希望拿到的不只是一个‘好’与‘坏’的结论，而是希望得到追踪问题的通路：建立一个可以为项目持续输入用户视角，能对设计起到评估、监测、反馈作用并产生实际价值的用户体验指标体系。从这一目标出发，对原先的数据指标以用户的视角又做了新的整理，以期搭建一个全面、系统、有效的指标模型。
该体系将产品指标隐喻成一颗树，作为树干的主干是商业目标搜索量相关的核心路径，作为枝叶的细分功能层是周期性高频迭代的主要增值功能。设计价值的隐喻就是通过一系列的方法监测滋养，保证这棵产品树不断发展壮大。
图例：用户体验模型
主干层映射任务完成度这一体验维度，关注指标包含核心任务的完成率、核心路径转化率等。目标是版本常规跟进监测产品状况，以及从用户角度切入的需求发掘，对指标产生正向影响。
细分层多涉及一些重要辅助功能的增减及迭代，主要映射参与度、接受度这些体验维度，关注指标包含重要功能点的点击率、停留时间、转化率等。目标是了解这些功能的用户行为数据，提升功能使用体验以及向核心路径分发等效果。
由此整个体系框架可映射留存度、愉悦度这些体验维度，而这两个维度多会通过些定性方法去做评估。留存度我们关注用户使用中的体验水准，既有对我们自身产品一致性及体验细节的纵向改进，也会同竞品以功能点粒度做周期性的体验评估。满意度会采取定期的用户回访、问卷及用户反馈后台分析整理这些方法，持续整理收集用户声音，筛选有价值点扩充到体验需求池中，向用户传达正向反馈。
这个体系除了帮助我们衡量改版的设计成果，也会在后续的设计工作中提供相应依据。接下来我们进行了多轮的讨论，把这些前期整理到的信息继续发散再收敛，拆解成战略目标-目标延伸-行动节点（单级或多级）这样的结构，得到了一些非常具体的可行动的细项。
图例：目标拆分行动点
三. 制定设计策略
经过前一阶段拆分得到的可行动点离落地还有一定距离，我们还需要进行设计目标的转化，从而得出相应的设计原则。而项目资源的有限性及投入产出比不确定性等问题，要求我们必须制定详实周密的计划，循序渐进的去推动方案落地，发挥出设计的最大价值。这期间我们完成了以下的工作：
图例：工作模型金字塔
首先我们从金字塔最底层的工作开始向上回灌，由于长时间的迭代和功能上新，APP系统内的视觉系统错乱不堪，导致各个模块之间缺少视觉关联，在没有严格规范的约束下，产品视觉复杂度逐渐‘不可控’，不光影响了整个产品的品牌识别，也对我们内部维护和设计开发成本造成了不必要的浪费。我们需要在产品的基底就解决掉这一问题，于是我们对线上的样式进行收缩并产出规范，规范的用意不只是对所有视觉元素进行约束，而是试图优化设计落地的整个链条和流程。例如，我们对产品中所有弹窗状态进行梳理，并配置成开发可随时调配的组件规则，同步节省了设计平铺和开发的时间成本，整体效率提升50%，释放出宝贵的人力资源攻克更困难的任务目标。
图例：弹窗规范
我们借由本次改版，制定了组件规范，动效规范，适配规范，文件管理规范，输出物规范以及流程规范，从基底严格控制样式的复杂度，保证了上层显示的一致性和稳定性，并针对效率优先的工具产品提炼出相应的设计准则，保证用户对内容的聚焦和高效的流程体验。同时根据产品的用户群属性，我们对产品内的品牌符号进行了更替，替换掉了‘低龄感‘的卡通形象，制定新形象并规范使用场景，以提升不同层次用户对产品的品牌认知。
图例：视觉系统
图例：去低龄化
通过对战略目标的拆解，得出设计语义和原则：简洁，易懂，高效。并向下平铺产出。我们从色彩，图形，布局，动效这四个维度进行融合，改版小组进行了目标一致的组内风格稿集体设计，通过快速发散，收敛，总结，明确新方向，再发现，收敛，总结的循环探索模式，确认了最终的v7.0风格指引稿。以此为基础扩展出本次改版的核心思路。
3.1 色彩
颜色作为用户接触产品的第一视觉信息，其传递效率最快，决定了用户对于产品第一感受与记忆。搜索APP的产品使命是建立信息和用户之间的快速链接，我们认为内容触达的效率是最重要的，而产品的定位也不是迎合单一群体，在用户构成上更为复杂，所以我们的风格基调需要更强的普适性，对这些问题我们在新的配色方案中做了重新思考：我们选取一对“互补色邻近对”四种颜色组成的配色，两两之间既有邻近色的和谐，也有对比色的色差，两对互补色之间的夹角越大，色彩对比越强烈。40度夹角既保证了明显的色相差异，又避免了过于强烈的视觉冲击而造成的视觉疲劳。以此为色彩原则，团队成员对构成整个产品的各主要操作组件（列表，弹窗，toast，缺省页，按钮，列表，文字等）进行了配色尝试，最终确定新版配色方案：摒弃原有过度娱乐化的多彩配色体系，同时，解决旧版中由于过于强调色彩表现所带来的视觉干扰，回归为内容本身而设计。新版色彩体系，通过在UI主色橙色中引入相对沉稳正式的深蓝色作为主辅色，向用户传递轻松获取专业服务&信息的配色系统。
图例：配色方案
3.2 图形
在产品使用过程中，图标是最先触达用户的图形信息，也是最能直观表达产品风格与设计态度的元素。我们把图标设计的要点（如表意，效率，秩序，美等）代入整体风格的要求中进行思考，提出了图标系统应该满足的几大核心：加强识别度，权衡视觉美感与用户基础认知，迁移用户在实体世界的客观认知（固有概念强化，模糊概念具象化，状态传递细节化，切图尺寸规范化）。基于以上理解，对于整体app的绝大部分icon进行了重绘，依据现有产品体量与未来模块扩展计划，重新设计图标尺寸规则，建立底层秩序感框架。
图例：图标识别性
3.3 布局
对布局的核心要求是信息的传达效率。根据这一目标向下拆解，对内容体系进行归类统一，解决无序性、低效性。为了保证既定的布局思路在整体app改版过程中的延续，我们设计了由数个特定间距组成的软栅格系统。也就是我们所有元素之间的距离尽量设定为8pt的倍数，以此来达到高质量，可编程的，且更为灵活的布局方式，且多平台可适配。让所有尺寸遵循统一规则，界面的节奏会更加统一，且大大降低开发和后期调整的成本。
图例：栅格系统
3.4 动效
继续拆解到动效这一环，我们希望产品内体验是顺滑流畅的，因此我们对新开窗口，反馈，效果点击，转场等需要用户等待或过渡的细节进行了分类梳理。将简洁、高效、可靠和亲和的关键词融入至新的动效方案设计当中。不光在细节体验上，我们希望通过动态设计能按照产品的意图正确引导用户的注意力，在产品内起到正向作用。例如首页到信息流的过渡，我们通过tab图标的状态来提示用户暗含的操作，并借以效果过渡来辅助用户加强对这两个状态的理解。
图例：动态引导
同时，在新方案的设计过程中考虑两端的差异（iOS 与 安卓），通过后台用户机型分布数据，为安卓提供了简化版动效设计解决方案，保证流畅的使用体验。在执行环节，为保证新的动效设计原则能够很好的贯穿在v7.0版本以及后续版本的设计中，在进行全新动效设计的同时，输出了搜索app v7.0动效设计指导文档。
图例：动效减配方案
四. 团队协作
如何组织协调一组10人左右的设计团队在短时间内完成改版任务？虽然制定设计策略很重要，但是团队内的设计目标管理和执行层的输出把控也同样重要。除此之外，对于搜索APP这种体量的产品，我们提出的任何一个优化建议在上线前都需要经过层层审核和验证，才能最终落地。这需要跨部门的通力协作，我们需要协调请求外部的力量支援，才能打完攻坚战的最后一仗。我们完成了两部分工作：
4.1 对内管理：设计沟通并制定标准
建立组件库并根据改版进度时时更新，除了样式上通过规范收缩，在风格上也要进行严格把控，设计团队在输出系统性页面时，由主设计师先负责产出各模块明确的风格框架，改版小组成员以此为基准，可以快速在统一的设计框架内扩展输出。
4.2 对外协调：申请协调产品、技术、测试资源
在改版过程中，要做到真正的协同业务增值价值，需要各部门间的支撑。例如，在指定设计策略前我们需要了解业务逻辑，商业模式，从而落实到产品框架中去。我们组织了多次产品评审，将业务上的核心诉求逐步进行渗透，进而剥离分拆具体设计目标，同时，为了后期有效的进行体验验证，我们会提一些数据验证侧的需求给产品同学。在开发环节为了对接效率提升，开发组的同学为我们制定了可视化的走查工具。
五. 上线验证
根据产品效果评估，V7.0版本相比上线前版本，整体效果正向。
- 数据方面：用户核心监测指标上，安卓全渠道新用户次留和7留均有上涨，公开市场和商店渠道7留上涨明显。
- 用户行为方面：新用户在产品核心功能上的有效点击行为均有大幅提升。
- 用户满意度方面：从改版满意度调查中给出的结论来看，认为新版更优的用户占比58%，用户忠诚度达到73%，整体满意度达到预期。
图例：上线效果
写在最后
经过大家的通力协作，本次改版历时两个月，改版小组经历了问题定位，方案探索，跨部门协调，灰度测试，反馈验证，最终才能与大家见面。通过本次改版，我们制定了通用规范，优化了设计协作和落地的流程，以效率为前提引入了新的合作模式，为后续的体验升级铺垫了基础设施。同时我们对用户声音进行了采集和归纳分析，储备了一些APP内新场景的需求痛点以备后续更精彩的探索。说到这里，我们向您发出诚挚的邀请，新版搜索APP诚邀您的体验并提出宝贵意见，我们会为您的每一个细节体验保驾护航，有好的建议别忘了告诉我们哦~~~最后感谢您的阅读。
