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

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

Sponsor

在「改版6步法」的前两部分《网易有道词典APP如何做设计改版？（上）》，我们通过分析已经得到了核心的「用户特征」和「品牌基因」。如何将两个要素适当结合并翻译成可操作的设计语言、以及最终传递给合作方，是后续步骤的重点。（6步法的流程图）

3 定位设计总方向

用户特征、品牌基因都是相对抽象的描述，而且常会存在一定冲突。此时我们需要用一些具象化的手段（如情绪板收集、品牌形象速写等方式）将这些描述在视觉上被表现出来，取两部分交汇点作为后续设计的方向。

在有道词典的描述 “具象化” 过程中，我们选择了筛选情绪板方式，将符合团队成员对「个性、专业」两个核心关键词理解的图像罗列并逐步寻找其中共性，如表现「个性」这一概念时情绪版中高频出现的色彩、对比、动感、趣味元素；以及诠释「专业」概念时高频可见的文化符号、理性/现实映射等。

此外，在具象化过程中我们还为有道词典构想了一个理想「人设」—— 欧阳娜娜，同时具有潮流个性与古典特征（可能是方案沟通后某些潜移默化的影响或机缘巧合，词典9.0二期代言人真的选择了欧阳娜娜😝…）。这些图像共性形成的新关键词，让我们直观地看到了后续设计中的可能性。

通过上面的过程，我们将最初有限的用户数据、品牌资料转化为了有道词典关键词「个性、专业」，并继续拓展为了「欧美文化感、新锐活力感、亲切趣味性」三个具体的设计关键词（共性）；而后继续翻译为指导设计的具体解读（如侧重文化符号的使用、强化对比、动态暗示等）。这几个主要方向在后续复盘中虽有微调，但奠定了9.0设计的基础，也是后续设计自查的重要标准，成为了此次改版的核心环节。

有时在确定设计关键词时，我们可能仅拆分到“个性、专业”这一层级来指导设计，但后续执行方案时会比较宽泛，难以在设计师脑海中浮现独特可感的画面。个人认为当尝试理解偏抽象的概念时，不要闭门造车苦思冥想，而用一些更图像化的东西拓展思路，会更快地找到方向。

有了能够提供独特画面感的设计关键词，下一步我们就可以从UI设计的「形、色、字、构、质、动」六个主要维度进行进一步拆分（按明确的方向找竞品、收集细化的情绪版），确定具体的设计风格走向，为参与项目的设计师在方案设计前提供更加明确、聚焦的风格共识。

请注意，这一步指导设计的这些「方向」，一定是具体、可分工的，让大家在这个“风格库”里选择自己要做的方案，而不需要继续去猜测。

当然，关键词侧重不同，可选风格库也随之改变 —— 有道翻译官4.0比有道词典更侧重对K12用户的治愈与引导，因此在对应关键词下衍生出的「色彩」、「质感」、「动态」都逐渐集中在另一种风格趋向附近。

设计总方向的确定，能够保障项目设计周期紧张的情况下避免出现风格稿每个人都完全不一样难以判断和抉择的情况。（毕竟前提不一致的设计和比稿是没有评判标准的…谁也不好说服谁）

YAY! 到这里我们更加具体地扩展出了风格库，参与改版的设计师们也有了一些比较清晰的画面，马上动工！

4 设计方案，开工！

有了明确的方向，就可以愉快地分工啦~

在这一步就看我们天赋异禀的设计师们的功力和脑洞了！每人都从风格库中找到 1-2 个自己最感兴趣的「切入点」进行设计发散 —— 有些尝试侧重质感+色彩，以动效辅助（比重例如5:3:2）；有的侧重探索有记忆点的图形+结构，色彩辅助（比重为6:3:1）；另外一些侧重字体等尝试（定义相应的风格占比）。用 9.0 中「新世界 · 大不同」主题方案作例子看下~

（我选择的切入点）

（一些过程稿）

就像拨动滑块，每种风格比例的变化都会带来耳目一新的方案 —— 但大家的设计发散都拥有一致的前提和关键词，整体往一个大方向尝试。

我们鼓励设计师在自己的方案中脑洞大开，除了共同定义的基本页面外有些自己的「彩蛋点」和侧重，思考在流程中能有哪些出彩的点（比如分享页、文章或是某些情感细节），提前呈现，也是帮助看客青睐自己的方案~

比如，从UI衍生到周边、贴纸等等…

翻译官4.0中，由于风格尝试阶段时间非常有限，我们调整策略，将重点集中于「交互结构」和易用性设计的尝试，视觉风格放在相对辅助地位，选取大家广泛认可的轻渐变质感进行重点尝试。

（一种方案👇）

（另一种方案👇）

（另另一种方案👇）

这里你可能想问：为什么交互结构每个方案不一样呢？这不应该已经确定再进入UI设计么？

是的，我们暂时没有交互😂…… 从需求原型到设计提案，全靠各位体验/界面设计能力和必备的顺畅沟通。但这也很好，我们有了更多的思考机会，逐步转变为「产品设计师」，而非仅限于视觉/UI或是体验一环。

这里对「设计合作」有一些小提示。

① 在开始动手前要先定义统一的试验页面，但不一定是一级「Tab」，需要根据产品的核心流程有侧重地选择。

② 设计不是纯艺术，是「信息、体验、艺术」三者的综合。因此，在我们的方案中需要规划这三者的占比。对于有些产品能懂可用、清晰无干扰是最重要的，那就不要过度藻饰；有些产品特定场景下使用，体验为王，就要怎么好用高效怎么来；有些是走文艺、情感牌的，那么设计艺术角度就要提高些占比。

不区分好坏，只是这三个维度能够产出截然不同的设计。

毕竟有人说：

也有人认为：

③ 我们设计之前经常会上Dribbble / Behance看看，但究竟那些漂亮的新风格、酷炫的质感适合我的产品么？用上之后对于「信息传达」和「可用性」并没有什么帮助，单纯是为了设计风格好看呢？设计改版的目的，时时考虑。

（流行风格之外，探索能够“专属于有道词典”的设计细节）

④ 设计周期虽然有限，但是「细节」不能忽略：依据你的设计思路，在一些重点流程或者视觉、情感细节中着重刻画一下，这些栩栩如生的细节能帮助你的方案更有效地击中看客。当然，如果你的产品重点在于体验，那么在体验、动效展示上多花些功夫。

当你已经成功地做出了设计稿，如何判断已经达到标准，可以包装成提案了？推荐参考UI设计自查表。

如果时间有余，推荐各位在内部沟通之后把大家的方案融合成一个最推荐的设计稿（浓缩的都是精华）。当然，这一步也可以在提案讨论之后再做，根据项目难度和时间排期而定。

当UI稿终于通过自查和内部确认，在下一步我们就要考虑如何呈现给需求方了。「提案技巧」是能否最终获得全战线认可的重要一步~

5 提案呈现技巧

好的设计师，需要讲好自己的设计。

如何让大家在短时间内get到你的用心、把精华展示出来是值得探索的。我把这种思考称为「提案意识」，就像我们在做外包项目的时候，设计完成后需要阐述创作构思、标识寓意、以及做些效果图来丰满使用场景。UI设计与此同理，如果仅是几个界面而没有足够引导，看客很容易就会按照自己的好恶评论。

提案思路上，建议大家围绕最初定义的设计关键词和总方向来展开，按项目改版初衷 → 推导过程 → 设计成果的顺序，由浅入深，带领每位观者感受这次设计探索的过程。从改版价值角度出发，也就和团队（产品/市场/开发/测试）所有人站在了一起，避免一上来直接讨论视觉「好看」与否的主观倾向。

比如有道词典9.0提案，是这样讲述的：

适当的、半开放式的引导，能让方案更深入地被了解；但要避免强势灌输和干预判断，不利于建立互信。

这里有一些我认为比较实用的「提案设计」小方法：

① 让方案有神：给每个方案找一个「主题」，也就是对设计切入点的描述。就像一句广告词，它能便于观众记住你的方案，而且方案的讲述也可以依据主题来拆分，让方案不再是一个个界面而是有神的整体。

② 延展边界：之前提到设计阶段鼓励大家开一些脑洞（后续的市场运营点、跨界可能性、周边构想等等），都能加强你的方案与相关同事的共鸣，让你的设计思路延续下去。

③ 故事化叙述：尝试在展开方案的时候把为什么这样设计、我想达到什么意图用生动有趣、富有情绪的语言讲出来。比如翻译官这个笔画线的元素，是在用自由笔触 · 自在质感的方式突出0压力治愈的点；词典创新的」符号，有自己的名字，叫做灵魂小弧线，是为了让静态的元素像漫画里抖动线一样富有动感。「戏多」的描述，更能和大家的情绪有些互动。

总之这些叙述方式还是为了一点，避免直接、过度纠结在「美丑」主观维度上。用一个词来说叫做「价值导向」。

当然，如果你试过了各种引导，但需求方还是油盐不进，那就只能换方式接待了。

6 最终章！调整输出

当你的设计稿历经层层考量进入量产（功能延展）阶段，这里主要有两方面需要输出的内容：① 品牌/UI的延展落地 ② 设计语言的细化规范。每部分具体要做的事，基本在下面列出（加重的是PO-P1优先级内容）

例如，主界面优化定稿后一些相关状态的延展，和其他UI功能设计细节的输出：

空状态、运营视觉等等配套内容，也围绕「设计关键词」延展设计：

以及IP形象的尝试（没有专门品牌设计团队的情况下）：

n.0大版本一般需要换新视频，反复打磨脚本分镜，和视频设计师沟通效果：

应用市场截图、代言人活动等等物料，与市场沟通好逐一输出：

品牌这块，如果像有道词典需要在大版本更新LOGO和字体，那么在设计完字体之后，尽管时间有限也要抽空出一个VI规范手册，新版本会有很多合作要用到：

有的时候LOGO更新涉及IP形象设计（例如有道翻译官4.0），也在风格确认阶段后进行尝试和延展，并以1-3轮提案形式单独进行，给设计多争取一些时间保障：

设计语言的细化规范，还涉及与开发密切相关的控件库更新：

有些备受瞩目的「大版本」，建议从设计角度出一些物料宣传品，比如朋友圈长图、官方解读文章等等（放在最后阶段进行，发版后释出）。整理这些材料、汇成文字的时候，也是我们再度审视设计、复盘改版是否达到「初心」的一次机会。

回顾&延展

到这里设计改版6步法已经逐步进行了解读，再来回顾一下这个流程吧~

其实很像小时候写作文「总分总」的结构，题目里先给一段材料，开头构思出总起部分，然后分几个段落诠释提出的观点，最后结尾扣题，再来些点睛升华。当然，前提是有感而发 —— 凑字数套结构，到底还是少了些共鸣。

真实的用户、品牌、业务价值作为设计基点，延展设计行为，也就是所谓「价值导向」，无论小型APP或是体量庞大的产品，也许都需要这个部分，照亮同一个方向。

当这套价值导向的设计方法，从改版延伸到后续版本的具体功能设计中，也就逐渐形成了完整的设计系统，循环上升。（具体项目有具体项目的分析方法和难点，后续有机会分享一下~ 但都要建立在最初的方向上，在后续设计中持续体现）

上线后静候佳音，持续关注反馈~ 如果功课已经做足，数据和满意度都会给你正向的支持。而非个例的差评和建议，也是我们继续优化的方向。

改版是动用全项目组人力的一件大事，对于上亿用户量的产品更是这样。可能随着项目扩大，有些新的前后端开发、产品、测试、运营、市场我从前都从未见过，但大型的改版，让我们有了更多的交汇点（甚至有机会接触到算法开发、商务团队） —— 作为设计师，连接了最初的构想与最后的呈现，每个步骤皆需涉足，成为了整个项目的粘合剂，也擘画了更加有情可感的远景。

好的改版，让经历过种种交集的团队关系更加密切，了解我们做的所有事是为了什么。