网易有道词典APP如何做设计改版？（上）

12 月 16, 2021 发表于: 视觉设计. 评论 (1)

Sponsor

接到改版这种「大工程」，可能每个设计师都有自己的方法和诀窍，也踩过不少坑。风格那么多该往哪些方向尝试？设计时用了各种系统理论，最后评审大家却在 battle 颜色好不好看？这些问题很让人头疼，长此以往也会消磨专业自信。我们需要找到尽可能快速、准确定义改版思路的方法，让设计引起大家的共鸣。

经历了网易有道词典 7 / 8 / 9.0 改版、众多设计项目，以及即将发布的有道翻译官 4.0 APP改版，我逐渐发现这个过程是有些规律可循的。虽然愈加庞大的用户量使设计的每一步都要谨慎明确，但这也为我们提供了深入探索、验证的条件。这里和大家分享下我初步总结的改版六步法。

（有道词典及翻译官改版效果示例）

本文以我们在改版中的分析思路为主，一步步是如何推导的；具体产出效果可以看下面这篇，是我和团队另两位小伙伴之前产出的词典 9.0 改版总结👇~

改版，改什么？

通常有三个原因导致产品的改版：业务调整（产品战略升级）、体验优化（有数据支撑的迭代）、不可抗力（政策 / 老板偏好等）。每个类型，都有不同的针对策略，今天我们主要讨论第一类业务主线的大型改版 —— 比如美团 “变黄”、滴滴首页改版、躺平改版等等，其中都涉及 UI 风格、视觉、交互、品牌、等各类设计的配合。

设计从哪里开始？

一次成功的改版，从方案谋划到成功面世，基本会经历【产品定义】→【设计方案】→【开发+测试】→【市场推广】流程，上下游涉及的环节众多。作为设计师，我们通常拿到需求后开始调研、做方案、改稿、输出给客户端 / 前端，最后进行 debug 。但这些环节，都是偏重设计执行的。

如果希望更了解业务方的考量、目标，获得更多人的理解和共鸣，建议避免把 “设计” 局限在设计环节本身，而是要从前期产品数据分析阶段尝试积极介入、开发角度了解技术可行性和成本、提供必要支持（保障还原度）、后期市场宣传环节，从设计角度提供一些创新点和效果示意。

如果把全流程画个轴，设计参与的环节是这样的：

这就是设计中需要的「全局视角」。有点“卷”，但有助于项目快速推进，以及提升你和团队的设计影响力。

此时想起小米从大师那重金 “请” 来的新 LOGO ，也许在其构思设计、说服各路评判者的时候，也会一定程度上从“全局战略”、“可持续演绎价值”上考虑吧。毕竟看着第一代方方正正的小米手机到今天的小米电视、手表，这个 LOGO 还真让我有了些画面感。说不定未来的小米盒子、扫地机、软件设计就会变成圆润的品牌造型 ID 了？

设计师的「全局视角」，一定程度上避免我们和需求方过度纠结在“审美”问题上，尝试从“价值”角度考量设计。

具体是哪几个步骤？

我将改版的主流程归纳为 6 个步骤：【① 用户多维分析】→【② 品牌基因定位】→【③ 设计总方向】→【④ 方案及优势整合】→【⑤ 提案呈现】→【⑥ 调整输出】。

其中前两部分属于前期的背景分析、铺垫，有助于了解用户群体“要什么”、我们自己“有什么”；在这之后，从总方向到分工实施，再到整合优势，是“总分总”的结构，和我们上学时写作文很相似（由于优势整合环节需要依据时间而定，有时在提案前没有时间和把握做这个步骤，因此暂不单独作为一环）；提案步骤，是我们展示思路、收集意见的关键阶段，有“半开放”、“故事化叙述”等呈现技巧；最后的定稿输出，可以分为设计规范细化和具体需求延展两部分，是落地设计改版的最终保障。

逻辑思维、设计表现、沟通表达、耐心共情，在这个过程中从前至后，缺一不可。

由于这套流程的分析、举例较多，这次先讲解下前两部分。

1 用户多维分析

了解用户特征、需求的重要意义无需多言，但如何真正找到有价值的点而非“套路化”分析，是设计师面临的一个问题。很多作品分析中，大家倾向用绘制“体验地图”、“用户画像”等模式填充这一部分，甚至根据设计反推得到 —— 分析方法本身都是很好的，但只有当这些方法“为你所用”、灵活地为找到用户特征这个目标服务时才有实际价值，而非因大家都放所以我要有。

为什么主张多维度地分析用户？多数情况下，用户对产品设计这一表现层面的偏好，是与其所处地域、社会环境共同形成的价值观密切相关的，对于数亿级庞大用户量的产品，他们的共性特征更为重要。

例如，同是企业协作应用的钉钉和国外的 Slack、Monday、Toggl 官网的设计表现，钉钉偏重严谨中略带清新的风格，让用户感受到其产品的专业性；而国外产品则偏好使用大面积色彩、Q 弹有趣的动效和插画、甚至看起来不那么严肃的倾斜非衬线字体来打造轻松无压力办公的感受，这与不同社会环境下对于“专业感”、“工作态度”的理解也是直接相关的。设想两个设计倒过来，也许都不再合适。同理的还有股票交易类、资讯类应用风格、布局的差距。

生活是多方面相互渗透的整体，用户多维分析，目的则是在于找到“群体”特征，其所日常接触的「衣、食、住、行、娱、社会背景、政策」等方面「共性」都是我们要研究和取样的对象。

在文学分析中，这种包围式的、由表及里的方法也被广泛应用，即 “知人论世”（毕竟文、艺本就相通），渐入里层需求。

例如在探索有道词典 9.0 中，我们通过各类直接调研、机构调研报告锁定与词典用户群高度重合的 Z 时代高满意度产品，涉及潮流服饰、影音娱乐、等各领域，竞品调研范围远超出教育、工具单一品类。看得更多，我们也更确定地从中找出了用户偏好的共性：例如哔哩哔哩、Twitch、云音乐等优秀产品深耕的同好聚合、高归属感社区；颇受好评的快手 “看见” 短片、云音乐热评列车、机智暖心的小爱同学所共有的真实情感、emo走心特征；以及炙手可热的得物、盲盒文化等体现出的个性专属特征等等。

对上面的特征进行总结，以及加入对现实社会 Z 时代人群需求的洞察（例如鸡娃社会背景下的渴望陪伴和理解、减负政策下的轻松伴学，“轻” 质氛围等），便能很快得到改版应当具备的总体走向。

当然，相似的用户群通过更加深入的探视，能够得到不同的结论，例如有道词典和有道翻译官的用户特征差异。

至此我们得到了提炼设计方向的两个配方之一，多维度「用户特征」。

2 品牌基因定位

知己知彼，百战不殆。看到用户要什么，还要清楚我们自己有什么、需要延续什么。

近几年看到一些产品在改版中运用各种新潮强视觉的设计风格，C4D 好看就抛弃扁平用 C4D、玻璃拟物新潮要马上换上这种图标、新版使用一个颠覆性的配色抓住用户眼球，更新版本之后基本不认得了，好像要对过去的自己做一个彻底了断。个人看来，这样刻意颠覆前代、略显炫技的设计方式并不妥当。尤其对于已经积累数代品牌经验和影响力的大中型产品，如非整体业务上的考虑，每一次草率的尝试都可能流失用户对品牌长期建立的的信任和认知直觉。

在有道词典、翻译官改版中，我们也在考虑这个问题。9.0 升级的业务出发点是打造 “泛学习平台”，提供查词工具外更多服务内容（如建立学习社区、视频圈、签到体系等）。怎样能在大量业务变化中接续词典前代累积的权威、专业特征，同时拥有更强的 “网易”、“有道” 品牌感呢？

同样作为年轻用户群下老品牌升级的星巴克，给了我们一些启发。

在近十年，星巴克开辟了线下第三空间、星专送、啡快等各种新型业务，也尝试打造猫爪杯、星冰粽、品牌保温杯等网红周边延展品，业务逐渐趋向年轻化、与同行的差异化。其品牌标识也从最初的 “星巴克咖啡 + 人鱼造型” 到 “突出面部的人鱼造型”，省略了文字，但始终延续着自己 “海上塞壬” 的冒险精神和迷人的品牌基因，无论何时 —— 他始终是他。

可以看到，星巴克的升级策略是扩展外延 + 延续内核，让升级承上启下。

此时思考有道词典，我们的内核是十数年积累下的权威内容和专业词典数据，这是用户选择的根本，需重点传承和谨慎优化（升级查词体验和视觉风格）；同时，在拓展品牌外延的角度，有道词典从 7.0 设计的深沉严肃，到 8.0 的轻松明快，再到本次的 9.0，我们将其与网易系产品独具的「匠心」、「文化态度」相结合 —— 通过尝试给设计加入更多文化内涵，找到突破纯工具属性的方法。