‍编者按： 交互设计 领域的经典设计模型「双钻 设计模型 」该如何理解和运用，这篇文章手把手带你掌握起来！

更多设计模型：

腾讯出品！7 种人机交互设计模型科普 众所周知，人机交互是一门集调研，构思，设计和测试为一体的学科。

阅读文章 >

相信很多交互体验设计师都听过“双钻设计模型”，但是不理解或不会应用的同学也不在少数。

“ 双钻设计模型 （Double Diamond Design Model）”，是由英国设计委员会（British Design Council）在 2005 年创立并提出的，至今仍适用于各类项目的设计工作：

由英国设计委员会提出的“双钻设计模型”

本文就为你详细拆解下这个交互设计师必须掌握的“双钻设计模型”——

一、双钻设计模型的意义 “双钻设计模型”已经被很多设计师或设计机构做过概念变体和衍生，所以你可能经常会看到各种各样类似的“设计模型”，有的是“三钻”的，有的是三角形的或是正方形的。

不过，你不要太在意这些模型是叫做“双钻模型”、“三钻模型”还是“两个四边形模型”，其核心都是在讲一套使用设计思维来解决问题的思路和方法，这套思路和方法适用于从产品需求定义到设计成果产出的整个过程。

在这个过程中，“双钻设计模型”的这两个“钻”，能够分别帮助设计师达到两个目的：

1. 洞察和挖掘产品真正的问题

也就是模型中第一个“钻”的核心目的：为正确的事情做设计（Designing the right thing），即“做正确的事”。

2. 通过恰当方法找到设计最优解

也就是模型中第二个“钻”的核心目的：将设计做正确（Designing things right），即“正确地做事”。

这样通过模型，你就能够将一个未知的、不确定的事件 A，转变成已知的、确定的事件 B 了。

“双钻设计模型”两个“钻”的核心目的

接下来“双钻模型”的设计方法和流程，都是在这两个核心目的的指导下展开的，你会看到很多熟悉和使用过的设计思路和方法。

二、四大阶段 & 行动 “双钻设计模型”主要分为四个主要阶段（Phase），对应着四个关键行动（Activity），每个 “钻” 中各两个，分别是：

调研阶段（Research）。该阶段对应的行动是“发现（Discover）”，指的是发现潜在问题、需求或优化点。 整合阶段（Synthesis）。该阶段对应的行动是“定义（Define）”，指的是定义问题、目标、策略和方法。 构思阶段（Ideation）。该阶段对应的行动是“发展（Develop）”，指的是发散和拓展设计方案和解法。 实现阶段（Implementation）。该阶段对应的行动是“交付（Deliver）”，指的是交付出最终的设计解决方案。

“双钻设计模型”四个“阶段”和“行动”

你可能会问：“四个阶段，那就做成阶梯状的模型呀，为什么要画成棱形结构，难道是因为像钻石更容易引起重视？”

其实不然，我们都知道“形式追随内容”，这个模型之所以做成“双钻”，也是因为在“调研阶段”和“构思阶段”的工作环节中，你的工作状态和设计方式是发散的（Diverging），即你需要广撒网式的收集各种信息和资料，或者产出大量的、不同的方案。所以模型中就用表示“扩张”的三角形，来表示这两个阶段：

“双钻设计模型”中的两个发散的阶段

而在另外两个“定义阶段”和“交付阶段”的工作环节中，你的工作状态和设计方式是收拢的（Converging），即你需要通过你收集的信息和资料进行分析和总结，或者对你产出的方案和想法进行整理和筛选。所以模型中就用表示“收拢”的三角形，来表示这两个阶段：

“双钻设计模型”中的两个收拢的阶段

接下来我们再一个个阶段详细展开来看：

1. 调研阶段（Research） 在调研阶段，你需要通过产品面临的问题、挑战和客户反馈入手，对现状进行分析探究和资料收集，并会得到一些非结构性的、散点式的洞察和发现：

调研阶段的起点和产出

在这个阶段，你需要做的是：

剖析问题

接到问题和需求，先就问题本身进行拆解、分析和思考。注意，对问题的剖析也是个思维发散的过程，所以模型使用的是“扩张”的三角形来表示这个过程（见下图）。

整合主题

通过对问题的剖析整理出相关的主题和方向。这是个总结的过程，所以模型使用的是“收拢”的三角形来表示这个过程（见下图）。

一手调研

根据问题主题和方向，通过对于用户的实地调研、访谈等方式获得的一手信息和资料。

二手调研

通过网络、书籍等方式获得的二手信息和资料。

这两个调研都是广泛收集资料和信息的过程，所以模型使用的是“扩张”的三角形来表示这个过程（见下图）：

调研阶段（Research）中的发散过程和收拢过程

2. 整合阶段（Synthesis） 在整合阶段，你需要对于上一个阶段得到的信息、资料以及初步的洞察和发现，进行更深入的分析和总结，得到最终结论和行动方向。

这个阶段你需要做的是：更进一步的洞察来确定设计的主题、目标、机会点和策略，以此来指导下一步的设计行动方向。你可以通过 “HMW-Question”（How might we…？，我们怎样才能……？）这类问题来推进结论的产生。这也是一步一步收拢思路的过程：

整合阶段（Synthesis）的工作过程

3. 构思阶段（Ideation） 在构思阶段，你需要根据上一个阶段得出的结论和目标，进行方案的设计和构想，产出大量的想法和方案。

这个阶段你需要做的是对于设计方案的发散、呈现和评估。我们依旧能够看到产出方案和发散方案的过程都是使用 “扩张”的三角形来表示，而评估方案则是对方案进行筛选和比较的过程，会选择出最适合的一个或多个值得深入的方向，因此采用的是“收拢” 的三角形来表示：

构思阶段（Ideation）的工作过程

4. 实现阶段（Implementation） 在实现阶段，你需要根据上一个阶段产出的值得深入的设计方案，进行方案原型的制作、测试和更新迭代，得到最终的最优解和产品方案。

这个阶段你需要做的是不断地测试和迭代，淘汰不可行的方案，并将细节进行深入打磨，兼顾各维度的利弊，交付最优方案。

实现阶段（Implementation）的工作过程

经验小结 可以说 “双钻设计模型” 提供的就是 “从发现问题到解决问题” 的标准设计思路和工作方法，适用于解决各种类型的问题。你也可以在平日承接设计需求时，练习使用这样的思路，训练自己的设计思维和工作能力。

设计模型仅靠着白纸黑字的阅读和理解，是不足以体现出其价值的。应对变化多端的设计问题，你还需要更多的设计方法和实践经验的加持。

现在的你，在看着这个模型时可能会想：“原来在得到设计方案之前要经历这么多过程！”。而当你将其中的环节牢记于心，并能将涉及到的工具和方法熟练应用后，也一定会感叹一句：“设计思维和过程，不就是这样万变不离其宗的么！”

更多设计模型：

被说设计没深度？学会这28个常用的设计模型怼回去！ 作为交互设计师，我们要确保产品的框架，任务的链路，界面的设计符合用户的心智模型。

阅读文章 >

欢迎关注作者微信公众号：「长弓小子」

哈喽！大家好，我是杨洋 XHM，我又来咯！先感谢大家对上篇内容的支持，今天继续梳理 Glyphs 系列教程后 7 集-13 集的内容要点。

上篇回顾：

做字库超简单！字体设计神器Glyphs系列教程（上） 如果你想做出属于自己的字库？

阅读文章 >

前言：上篇文章把 Glyphs 的软件特性、界面框架、以及部分常用功能总结完啦！那么，这次就把剩下的内容，一次性全部总结完。内容会涉及到一些超好用的辅助功能、绘制字符的流程和相关技巧，还有字距设定的相关方法、以及字体封装出库的一些设置。

视频版：⑦ 绘制工具

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

七、绘制工具 这个模块的工具主要分成三类：分别是快速切割类、书写绘制类以及几何绘图类。这块内容比较简单，很多工具的用法和我们常用的软件差不多，所以大家跟着视频过一遍，基本就会了。

1. 快速切割类工具：

① 小刀工具：通过点按拖拽的方式，即可快速断开笔画路径、分割笔画块面。

② 橡皮擦工具：主要作用是擦除路径，通过单击对应锚点，即可高效的删除对应锚点。

2. 书写绘制类工具：

① 铅笔工具：可以通过近似书写的方式，便捷地绘制出线条。一般用来绘制文字的骨架非常好用。

② 像素工具：可以非常方便的制作出一些像素风的字体，并且通过 Glyphs 直接生成字体文件，方便你在不同的软件里进行编排，这个工具使用前，需要进行一些设置，具体步骤在视频里有详细演示。

3. 几何绘图类工具：

由于我们在绘制字体时，更多的是通过钢笔来绘制比较复杂的笔画。所以在基础几何绘图方面，Glyphs 只内置了一些常用的方形、圆形这类基础形状。

所以，还是主要拓展一下：在 Glyphs 里，如何快速绘制圆角？以及如何批量的给字体添加圆角？

技巧 ① 调适曲线规范杠杆

用小刀工具对任意一个角进行切割，然后将缺口调整到对角线，最后调出杠杆并用调适曲线规范杠杆，即可获得圆角。

技巧 ② 角部件统一造型

关于角部件，你可以理解为：设置好一个造型模版，在需要的转角处直接套用这个模版。这在做笔画衬线时，很节省时间。而且还能保持所有衬线造型统一。那么用这个功能来制作圆角自然是小意思，具体操作看视频，下面就梳理了演示的核心要点。

① 添加字符形 ⇧ Shift + ⌘ Cmd + G / ② 字符名称 _corner. + 后缀名称 / ③ 绘制一个有弧度的角部件，然后应用到对应锚点上。

技巧 ③ 自定义参数批量绘制

在软件里，我们可以通过 菜单-滤镜-圆角滤镜 来快速新建圆角，但这样的操作是不能后续编辑的。我们可以通过圆角滤镜窗口生成一串代码，然后在 字体信息-导出-添加字样-拷贝自定义参数，即可实现批量添加圆角的效果。

视频版：⑧ 辅助工具

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

八、辅助工具 在 Glyphs 里，有很多专门为了字库创作而设计的辅助功能，这里我主要总结一些特色功能，部分常规功能大家看上面的视频讲解就 ok 了。

1. 文字工具：

我们在完成字库后，会进行很多细节调整和字体编排测试。而 Glyphs 内置的文字工具，就可以很方便的完成这些工作，真正实现了 字体设计 +编排一体化。这在其他软件里，是非常麻烦的工作。

小帖士：① 调整字偶间距：按住 ⇧ Shift 键 + 键盘的上下键，即可调整。② 选中复制文本：按住 ⇧ Shift 键 + 键盘的左右键，可以将文字选中，即可复制、粘贴到任意位置。

2. 注释工具：

我们在字体审核时，可以用它来添加批注和修正标记。默认状态下，只有打开批注工具才能看见这些标记，但我们也可以通过 菜单-视图-显示注释 让加好的批注直接显示在字符框当中。

3. 测量工具：

顾名思义，这个工具主要就是在我们设计字体时，快速测量标注每个部件的宽高、部件之间的间距、锚点的坐标。方便我们观察笔画的各项参数，以此决定是否要继续调整。

小帖士：① 按住 ⌘ Cmd + ⌥ Option + ⌃ Ctrl 可以快速调出测量工具。② 测量时按住 ⇧ Shift 键，也可以直接水平或垂直测量数据，避免偏差。

4. TrueType 指令：

这个功能的主要作用，就是用来预览文字在 8px 到 80px 的显示状态。同时也可以根据自己的需求，调整显示的缩放倍率，以此观察字符的清晰度。通过 菜单-窗口-预览面板 可以调出一个独立窗口去观察，非常直观。

视频版：⑨ 字符绘制

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

九、字符绘制 通过之前的内容，我们把常用工具讲完了。接下来我会通过这段案例演示，来分享一下我平时的绘制流程。这个过程中有一些工具运用的细节和图形复用的思路。所以文章以梳理步骤为主，建议配合视频来看哈！

1. 设定框架：

在手绘草图前，我们一般会先定好整套字体的比例关系，以此来统一字体的框架参考线。而汉字和西文的框架设定还稍微有些不一样。这里我就提供两个常规的字体框架草图给大家。你们可以下载打印出来绘制草图。

西文：A4-基础框架

中文：A4-5cm-方格纸

2. 导入草图：

我们将画好的草图扫描进电脑之后，先将草图按照字符单独拆开，然后复制、粘贴导入指定的字符框当中，然后右键锁定图片，方便后期绘制。

小帖士：如果字符框太窄，可以在字体信息面板里手动调整字框宽度数值，避免草图重叠到一起。

3. 制作字符：

接下来，就用之前讲解的绘制工具搭建笔画结构，这块没啥难度，都是一些基础工具的组合应用。如果遇到一些造型复杂的曲线类笔画，可以先用钢笔工具，在曲线转折处进行大致的勾勒，然后再添加杠杆调整曲线，这样会比较高效一点。而且因为布点比较简洁，曲线的也会更加的顺滑。

小帖士：撤销的快捷键是 ⌘ Cmd + Z ，但要注意，在 Glyphs 里，每个字符框都是独立记忆步骤的，在当前字符框内，是永远都不会撤销其他字符的操作。

4. 复用形状：

在基础笔画、文字绘制完成后，我们可以对常用造型进行拆分，相同类型的笔画可以直接复用，例如小写的字母 [ h ] 就可以拆分出字母 [ n、i ] ，所以，并不是每个字符都需要重新去绘制，学会解构拆分，可以给我们节省很多时间，这在中文里也是一样的。相同的偏旁都是可以复用的，这能让全套字符的风格细节更统一。

5. 优化曲线：

字符绘制完成后，我们就可以根据曲线情况，利用调适曲线功能逐一优化曲线的平滑度。也可以手动微调锚点的位置，总之尽量让曲线顺滑。当曲线怎么调整都不舒服时，可以考虑是不是锚点的位置摆放不对，或者是曲线两端的杠杆不对称导致的。

小帖士：最后的细节检查，基本上就是检查路径方向是否一致、视错觉修正有没有做好、字间距是否近似等... 灵活应用软件内置的各种变换、对齐功能进行调整，可以极大地提升工作效率。

视频版：⑩ 背景图层

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

十、背景图层 1. 背景图层是什么？

简单来说，背景图层就是将你所选中的路径，转化成一个不可触摸的对象，用来指导你做设计或者当作设计的备份稿。或者当我们需要在已经设计好的两个版本之间取一个中间值，这时候就可以用到背景图层的功能。

2. 背景图层怎么用？

① 置入背景：⌘ Cmd + J 将所选对象置入背景图层中，此时的路径可以看到，但无法直接编辑。

② 编辑背景：⌘ Cmd + B 如果需要调整背景图层的内容，可以通过 菜单-路径-编辑背景 进入背景层，即可操作背景层的路径。

③ 对换稿件：⌘ Cmd + ⌃ Control + J 这组快捷键，可以快速地把背景图层和设计稿进行对调。

小贴士：① 清除背景：⌥ Option + 清除背景，可以将背景层上的所有稿件一键全部清除。② 批量添加：在字体视图内，选中希望移至背景的文字，按 ⌘ Cmd + J 可以批量的将所有选中的稿件添加到背景图层上。

3. 和背景插值：

如果你希望在原稿和修改稿之间，获取一个中间值，那么可以通过和背景插值的功能来寻找一个折中的方案，这有点类似于 Ai 里的混合工具。

视频版：⑪ 字距调整

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

十一、字距调整 在我们设计好一套字体之后，就需要去整体的调整字母边距和字偶间距，这是非常重要的工作。如果不去做这些调整，那么在实际使用字体时，字间距在视觉上就会显得忽远忽近，留白也非常难看。

1. 调整字间距

在信息框的下面有三个参数，其中左右对称的两个参数，代表的就是字符目前默认的边距。可以通过调整这个参数，改变字符到字身框左右两侧的距离。

① 右字边距增 / 减 1 格：⌘ Cmd + 左/右方向键。右字边距增 / 减 10 格：⌘ Cmd + ⇧ Shift + 左/右方向键。

② 左字边距增 / 减 1 格：⌃ Ctrl + 左/右方向键。左字边距增 / 减 10 格：⌃ Ctrl + ⇧ Shift + 左/右方向键。

2. 批量设定字间距

在字体预览视图中：⌘ Cmd + A 全选字符，然后在左侧边栏下方调整 多个值 的设定，即可快速批量地改变字符的左右边距。另外，在 菜单-字符-变换量度值 也可以设定字符的左右边距，直接应用到所有的字符上。勾选 相对值 代表在现有字间距的基础上，增加或删减边距，方便统一地完成字距的调整。

3. 复用字间距

选中需要设定间距的字符，然后在左右数值处填写需要复用间距的对应字符，这样就可以直接复用该字符正在使用的边距数值，还可以根据修改情况实时刷新。

视频版：⑫ 字偶间距

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

十二、字偶间距 1. 字偶间距是什么？

字偶间距是指的两个特定字符组中间的这段距离。因为通过前面字距的整体调整后，我们的字体在大多数情况下，可以做到字距视觉近似。

但是，在一些特殊的字母组合里，因为字体形状的原因，默认字距会出现过大或过小的情况。最常见的就是 [ A、V ] 的组合，这时，我们就需要为这些特定的词组进行字偶间距的微调。

2. 字偶间距怎么调？

用文字工具，把光标放在两个字符中间，然后在信息面板中激活字偶间距的输入框。按键盘的上下方向键，即可在指定的两个字符中间增加或减少 1 格字偶间距。按 ⇧ Shift 则可以每次增减 10 格。

3. 按群组设置字偶间距：

对于形状相似的字符，我们可以统一选中并输入到字偶距群组中。设置好群组以后，群组中所有字符的左 / 右边距都会被统一地调整。 我们可以用这种方式，快速地对一些形状近似的字符进行统一的字偶间距调整。这样能有效的提高调整的效率。

4. 样本字符串：

在 Glyphs-偏好设置-样本字符串 里提供了很多调整字距时用的词组，我们可以通过这里提供的词组来快速统一调整间距。

视频版：⑬ 生成字库

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

十三、导出字体 在字体完成后，不要着急导出字体。我们需要在字体信息面板内添加好对应的参数，这样才能让你的字体更精准的在电脑里显示。下面我罗列了一些常用的设置条目：

1. 字体信息设置：

① 字体家族名称：需要填写英文或拼音，不可以填汉字。

② 本地化家族名称：可以将字体名称翻译成对应语种，方便在字体册中识别并使用字体。

③ 版本信息：在每次修改后调整，防止文件弄混淆了。而创建日期，也可以及时刷新一下。

④ 字体版权信息：设计师、著作权信息、商标等内容，根据实际需求，在旁边的+号进行添加即可。

2. 字体格式选择：

把字体信息设置好后，就可以导出字体啦！关于字体格式，我们通常会选择 OTF 或 TTF 文件格式。

OTF 和 TTF 之间的主要区别是高级排版功能。OTF 格式包含了连字、替代符等功能。而 TTF 主要还是在市面上流通度更高，大家可以按需选择。虽然说 OTF 确实是两者中的更好的选择，但是对于普通计算机用户而言，这些差异实际上并不重要。

3. 导出到文件夹：

关于导出，软件提供了两种选择：目标文件夹，可以按我们的需求，选择导出到指定文件夹。而测试安装，则是帮我们把文件保存到某个特定的文件夹中，它可以方便我们直接在 Adobe 系的软件F中测试使用，并且无需安装、且实时更新。

小帖士：如果你在用 Glyphs 2 没有导出到测试安装的功能，可以把文件夹设置到下面这个固定的路径，从而起到相同效果：

路径：/Library/Application Support/Adobe/Fonts

好啦！这次的分享到这里就结束啦～还有很多功能来不及分享，大家有什么感兴趣的，也可以在评论区里给我留言！

如果你觉得有所收获的话，就给我点个赞吧！我们下次再见～

哈喽！大家好，我是杨洋 XHM，我又来咯！先感谢大家对上篇内容的支持，今天继续梳理 Glyphs 系列教程后 7 集-13 集的内容要点。

上篇回顾：

做字库超简单！字体设计神器Glyphs系列教程（上） 如果你想做出属于自己的字库？

阅读文章 >

前言：上篇文章把 Glyphs 的软件特性、界面框架、以及部分常用功能总结完啦！那么，这次就把剩下的内容，一次性全部总结完。内容会涉及到一些超好用的辅助功能、绘制字符的流程和相关技巧，还有字距设定的相关方法、以及字体封装出库的一些设置。

视频版：⑦ 绘制工具

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

七、绘制工具 这个模块的工具主要分成三类：分别是快速切割类、书写绘制类以及几何绘图类。这块内容比较简单，很多工具的用法和我们常用的软件差不多，所以大家跟着视频过一遍，基本就会了。

1. 快速切割类工具：

① 小刀工具：通过点按拖拽的方式，即可快速断开笔画路径、分割笔画块面。

② 橡皮擦工具：主要作用是擦除路径，通过单击对应锚点，即可高效的删除对应锚点。

2. 书写绘制类工具：

① 铅笔工具：可以通过近似书写的方式，便捷地绘制出线条。一般用来绘制文字的骨架非常好用。

② 像素工具：可以非常方便的制作出一些像素风的字体，并且通过 Glyphs 直接生成字体文件，方便你在不同的软件里进行编排，这个工具使用前，需要进行一些设置，具体步骤在视频里有详细演示。

3. 几何绘图类工具：

由于我们在绘制字体时，更多的是通过钢笔来绘制比较复杂的笔画。所以在基础几何绘图方面，Glyphs 只内置了一些常用的方形、圆形这类基础形状。

所以，还是主要拓展一下：在 Glyphs 里，如何快速绘制圆角？以及如何批量的给字体添加圆角？

技巧 ① 调适曲线规范杠杆

用小刀工具对任意一个角进行切割，然后将缺口调整到对角线，最后调出杠杆并用调适曲线规范杠杆，即可获得圆角。

技巧 ② 角部件统一造型

关于角部件，你可以理解为：设置好一个造型模版，在需要的转角处直接套用这个模版。这在做笔画衬线时，很节省时间。而且还能保持所有衬线造型统一。那么用这个功能来制作圆角自然是小意思，具体操作看视频，下面就梳理了演示的核心要点。

① 添加字符形 ⇧ Shift + ⌘ Cmd + G / ② 字符名称 _corner. + 后缀名称 / ③ 绘制一个有弧度的角部件，然后应用到对应锚点上。

技巧 ③ 自定义参数批量绘制

在软件里，我们可以通过 菜单-滤镜-圆角滤镜 来快速新建圆角，但这样的操作是不能后续编辑的。我们可以通过圆角滤镜窗口生成一串代码，然后在 字体信息-导出-添加字样-拷贝自定义参数，即可实现批量添加圆角的效果。

视频版：⑧ 辅助工具

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

八、辅助工具 在 Glyphs 里，有很多专门为了字库创作而设计的辅助功能，这里我主要总结一些特色功能，部分常规功能大家看上面的视频讲解就 ok 了。

1. 文字工具：

我们在完成字库后，会进行很多细节调整和字体编排测试。而 Glyphs 内置的文字工具，就可以很方便的完成这些工作，真正实现了 字体设计 +编排一体化。这在其他软件里，是非常麻烦的工作。

小帖士：① 调整字偶间距：按住 ⇧ Shift 键 + 键盘的上下键，即可调整。② 选中复制文本：按住 ⇧ Shift 键 + 键盘的左右键，可以将文字选中，即可复制、粘贴到任意位置。

2. 注释工具：

我们在字体审核时，可以用它来添加批注和修正标记。默认状态下，只有打开批注工具才能看见这些标记，但我们也可以通过 菜单-视图-显示注释 让加好的批注直接显示在字符框当中。

3. 测量工具：

顾名思义，这个工具主要就是在我们设计字体时，快速测量标注每个部件的宽高、部件之间的间距、锚点的坐标。方便我们观察笔画的各项参数，以此决定是否要继续调整。

小帖士：① 按住 ⌘ Cmd + ⌥ Option + ⌃ Ctrl 可以快速调出测量工具。② 测量时按住 ⇧ Shift 键，也可以直接水平或垂直测量数据，避免偏差。

4. TrueType 指令：

这个功能的主要作用，就是用来预览文字在 8px 到 80px 的显示状态。同时也可以根据自己的需求，调整显示的缩放倍率，以此观察字符的清晰度。通过 菜单-窗口-预览面板 可以调出一个独立窗口去观察，非常直观。

视频版：⑨ 字符绘制

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

九、字符绘制 通过之前的内容，我们把常用工具讲完了。接下来我会通过这段案例演示，来分享一下我平时的绘制流程。这个过程中有一些工具运用的细节和图形复用的思路。所以文章以梳理步骤为主，建议配合视频来看哈！

1. 设定框架：

在手绘草图前，我们一般会先定好整套字体的比例关系，以此来统一字体的框架参考线。而汉字和西文的框架设定还稍微有些不一样。这里我就提供两个常规的字体框架草图给大家。你们可以下载打印出来绘制草图。

西文：A4-基础框架

中文：A4-5cm-方格纸

2. 导入草图：

我们将画好的草图扫描进电脑之后，先将草图按照字符单独拆开，然后复制、粘贴导入指定的字符框当中，然后右键锁定图片，方便后期绘制。

小帖士：如果字符框太窄，可以在字体信息面板里手动调整字框宽度数值，避免草图重叠到一起。

3. 制作字符：

接下来，就用之前讲解的绘制工具搭建笔画结构，这块没啥难度，都是一些基础工具的组合应用。如果遇到一些造型复杂的曲线类笔画，可以先用钢笔工具，在曲线转折处进行大致的勾勒，然后再添加杠杆调整曲线，这样会比较高效一点。而且因为布点比较简洁，曲线的也会更加的顺滑。

小帖士：撤销的快捷键是 ⌘ Cmd + Z ，但要注意，在 Glyphs 里，每个字符框都是独立记忆步骤的，在当前字符框内，是永远都不会撤销其他字符的操作。

4. 复用形状：

在基础笔画、文字绘制完成后，我们可以对常用造型进行拆分，相同类型的笔画可以直接复用，例如小写的字母 [ h ] 就可以拆分出字母 [ n、i ] ，所以，并不是每个字符都需要重新去绘制，学会解构拆分，可以给我们节省很多时间，这在中文里也是一样的。相同的偏旁都是可以复用的，这能让全套字符的风格细节更统一。

5. 优化曲线：

字符绘制完成后，我们就可以根据曲线情况，利用调适曲线功能逐一优化曲线的平滑度。也可以手动微调锚点的位置，总之尽量让曲线顺滑。当曲线怎么调整都不舒服时，可以考虑是不是锚点的位置摆放不对，或者是曲线两端的杠杆不对称导致的。

小帖士：最后的细节检查，基本上就是检查路径方向是否一致、视错觉修正有没有做好、字间距是否近似等... 灵活应用软件内置的各种变换、对齐功能进行调整，可以极大地提升工作效率。

视频版：⑩ 背景图层

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

十、背景图层 1. 背景图层是什么？

简单来说，背景图层就是将你所选中的路径，转化成一个不可触摸的对象，用来指导你做设计或者当作设计的备份稿。或者当我们需要在已经设计好的两个版本之间取一个中间值，这时候就可以用到背景图层的功能。

2. 背景图层怎么用？

① 置入背景：⌘ Cmd + J 将所选对象置入背景图层中，此时的路径可以看到，但无法直接编辑。

② 编辑背景：⌘ Cmd + B 如果需要调整背景图层的内容，可以通过 菜单-路径-编辑背景 进入背景层，即可操作背景层的路径。

③ 对换稿件：⌘ Cmd + ⌃ Control + J 这组快捷键，可以快速地把背景图层和设计稿进行对调。

小贴士：① 清除背景：⌥ Option + 清除背景，可以将背景层上的所有稿件一键全部清除。② 批量添加：在字体视图内，选中希望移至背景的文字，按 ⌘ Cmd + J 可以批量的将所有选中的稿件添加到背景图层上。

3. 和背景插值：

如果你希望在原稿和修改稿之间，获取一个中间值，那么可以通过和背景插值的功能来寻找一个折中的方案，这有点类似于 Ai 里的混合工具。

视频版：⑪ 字距调整

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

十一、字距调整 在我们设计好一套字体之后，就需要去整体的调整字母边距和字偶间距，这是非常重要的工作。如果不去做这些调整，那么在实际使用字体时，字间距在视觉上就会显得忽远忽近，留白也非常难看。

1. 调整字间距

在信息框的下面有三个参数，其中左右对称的两个参数，代表的就是字符目前默认的边距。可以通过调整这个参数，改变字符到字身框左右两侧的距离。

① 右字边距增 / 减 1 格：⌘ Cmd + 左/右方向键。右字边距增 / 减 10 格：⌘ Cmd + ⇧ Shift + 左/右方向键。

② 左字边距增 / 减 1 格：⌃ Ctrl + 左/右方向键。左字边距增 / 减 10 格：⌃ Ctrl + ⇧ Shift + 左/右方向键。

2. 批量设定字间距

在字体预览视图中：⌘ Cmd + A 全选字符，然后在左侧边栏下方调整 多个值 的设定，即可快速批量地改变字符的左右边距。另外，在 菜单-字符-变换量度值 也可以设定字符的左右边距，直接应用到所有的字符上。勾选 相对值 代表在现有字间距的基础上，增加或删减边距，方便统一地完成字距的调整。

3. 复用字间距

选中需要设定间距的字符，然后在左右数值处填写需要复用间距的对应字符，这样就可以直接复用该字符正在使用的边距数值，还可以根据修改情况实时刷新。

视频版：⑫ 字偶间距

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

十二、字偶间距 1. 字偶间距是什么？

字偶间距是指的两个特定字符组中间的这段距离。因为通过前面字距的整体调整后，我们的字体在大多数情况下，可以做到字距视觉近似。

但是，在一些特殊的字母组合里，因为字体形状的原因，默认字距会出现过大或过小的情况。最常见的就是 [ A、V ] 的组合，这时，我们就需要为这些特定的词组进行字偶间距的微调。

2. 字偶间距怎么调？

用文字工具，把光标放在两个字符中间，然后在信息面板中激活字偶间距的输入框。按键盘的上下方向键，即可在指定的两个字符中间增加或减少 1 格字偶间距。按 ⇧ Shift 则可以每次增减 10 格。

3. 按群组设置字偶间距：

对于形状相似的字符，我们可以统一选中并输入到字偶距群组中。设置好群组以后，群组中所有字符的左 / 右边距都会被统一地调整。 我们可以用这种方式，快速地对一些形状近似的字符进行统一的字偶间距调整。这样能有效的提高调整的效率。

4. 样本字符串：

在 Glyphs-偏好设置-样本字符串 里提供了很多调整字距时用的词组，我们可以通过这里提供的词组来快速统一调整间距。

视频版：⑬ 生成字库

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

十三、导出字体 在字体完成后，不要着急导出字体。我们需要在字体信息面板内添加好对应的参数，这样才能让你的字体更精准的在电脑里显示。下面我罗列了一些常用的设置条目：

1. 字体信息设置：

① 字体家族名称：需要填写英文或拼音，不可以填汉字。

② 本地化家族名称：可以将字体名称翻译成对应语种，方便在字体册中识别并使用字体。

③ 版本信息：在每次修改后调整，防止文件弄混淆了。而创建日期，也可以及时刷新一下。

④ 字体版权信息：设计师、著作权信息、商标等内容，根据实际需求，在旁边的+号进行添加即可。

2. 字体格式选择：

把字体信息设置好后，就可以导出字体啦！关于字体格式，我们通常会选择 OTF 或 TTF 文件格式。

OTF 和 TTF 之间的主要区别是高级排版功能。OTF 格式包含了连字、替代符等功能。而 TTF 主要还是在市面上流通度更高，大家可以按需选择。虽然说 OTF 确实是两者中的更好的选择，但是对于普通计算机用户而言，这些差异实际上并不重要。

3. 导出到文件夹：

关于导出，软件提供了两种选择：目标文件夹，可以按我们的需求，选择导出到指定文件夹。而测试安装，则是帮我们把文件保存到某个特定的文件夹中，它可以方便我们直接在 Adobe 系的软件F中测试使用，并且无需安装、且实时更新。

小帖士：如果你在用 Glyphs 2 没有导出到测试安装的功能，可以把文件夹设置到下面这个固定的路径，从而起到相同效果：

路径：/Library/Application Support/Adobe/Fonts

好啦！这次的分享到这里就结束啦～还有很多功能来不及分享，大家有什么感兴趣的，也可以在评论区里给我留言！

如果你觉得有所收获的话，就给我点个赞吧！我们下次再见～

本文从点线面的定义、作用、设计方法帮你全方位科普 点线面 在 版式设计 中的运用，附上实操案例，基础差的 平面设计 师，这篇别错过了！

更多平面设计教程：

平面设计作品不出彩？来看高手总结的18个细节！ 本文用真实的平面设计作品案例，通过优化前后的关系，让读者短时间受到启发，建议平面设计师收藏保存哟 上期回顾：

阅读文章 >

更多平面教程：

平面设计中如何用好黑体？来看这份入门指南！ 本文总结了黑体字的特点、使用场景和案例实操，帮你掌握黑体字的用法。

阅读文章 >

欢迎关注作者的微信公众号：「艺海拾贝Design」

本文从点线面的定义、作用、设计方法帮你全方位科普 点线面 在 版式设计 中的运用，附上实操案例，基础差的 平面设计 师，这篇别错过了！

更多平面设计教程：

平面设计作品不出彩？来看高手总结的18个细节！ 本文用真实的平面设计作品案例，通过优化前后的关系，让读者短时间受到启发，建议平面设计师收藏保存哟 上期回顾：

阅读文章 >

更多平面教程：

平面设计中如何用好黑体？来看这份入门指南！ 本文总结了黑体字的特点、使用场景和案例实操，帮你掌握黑体字的用法。

阅读文章 >

欢迎关注作者的微信公众号：「艺海拾贝Design」

本文从搜索的基本属性与特征、搜索入口的样式及应用场景、常见的搜索方式、搜索流程状态解析和辅助模块/元素的妙用5个章节，帮你掌握搜索设计。

搜索设计 案例复盘：

如何做好视频搜索的体验？来看百度高手的案例复盘！ 视频化时代用户消费越加倾向于丰富直观的视频承载形式，文章从体验视角出发，分享设计师如何在搜索视频化过程中发挥自己的价值。

阅读文章 >

前言

搜索是产品中非常重要的一个功能模块，它通过搜索框给用户提供一个直达目的地的绿色通道，方便用户快速找到自己想要的内容，在引导用户走向方面起到了绝对性的作用。

搜索框的体验如何，决定着产品解决问题的能力、效率以及用户的使用频率。好的搜索框一方面能帮助用户节约时间成本，通过友好的设计细节带来差异化的信息反馈，便于用户在大量且复杂的信息中筛查所需目标，提高转化率；另一方面，还能协助产品搜集用户行为目标并做好数据埋点，为后期的更新迭代提供强有力的依据。

有部分设计师认为，搜索不就是一个矩形框、放大镜图标再加一个占位符不就搞定了吗？可有没有想过，为什么在不同类型的应用中搜索框的交互方式、视觉样式也有所不同，且用户在搜索前、搜索中、搜索后到底有哪些细节需要我们去注意？今天，笔者将和大家一起了解关于搜索框的设计知识。

一、基本属性与特征 1. 搜索存在的意义

当界面内容过多、在列表中仅通过视觉扫描很难找到目标，这时能给用户提供最大帮助的一个是筛选、另一个就是搜索，筛选能够缩小查找范围、而搜索却能直到目标。相对来说，对于有明确目标的用户，在关键词较为接近的情况下，搜索比筛选的查找效率、匹配结果的精准度更高。

2. 搜索反馈类型

输入关键信息后，系统会有两种反馈类型，自动即时反馈和手动触发反馈。

① 自动反馈

系统自动检测所有内容中符合关键词的目标信息并罗列出来，随着关键词的持续输入，与之相匹配的结果会逐渐减少、直至找到目标，类似自定义筛选功能。这种反馈方式适合内容不是特别多的列表，避免服务器的压力太大、影响反馈效率，例如地址搜索、查找联系人等。

② 手动触发

关键词输入完成后，需要手动点击搜索按钮向服务器发送指令才会得到相应的搜索结果，这种方式适合内容信息较多的列表。例如商品查找、新闻类搜索等，其搜索结果也可能是海量的，与筛选功能结合使用效果更佳。

3. 搜索的属性特征

① 搜索入口

为了保持界面的一致性，在同一 APP 中，不同界面、功能的搜索应该具备统一的视觉属性。搜索本属于界面的一部分，需要将其放在关键位置，用户需要使用时能随时找到。

② 状态变化

站在用户体验角度，一个好的搜索应该具备完整的流程，即搜索前、搜索中、搜索后的页面跳转以及搜索框形态的变化，将 搜索功能 的价值发挥到最大化。

二、搜索入口的样式及应用场景 在大家使用的众多 app 中，部分搜索框的样式虽然没有多大差别，其实背后都经过了精心设计。针对搜索入口，更具不同的应用场景、等级权重，其搜索入口的位置、样式也有所不同，下面将分别介绍四种常见的类型。

1. Tab 栏独立入口

将搜索放在底部 Tab 栏作为独立的一级入口，很大程度上强化了搜索权重，有利于用户的搜索行为引导、以及产品搜索相关内容的推荐曝光。这种做法为搜索功能拓展提供了很大的空间，相比其他方式，操作起来更便捷，即便用户在其他 Tab 页时、突然有搜索需求时也触手可及，并使其成为应用重量级的流量入口。

Tab 栏搜索入口只适合对于搜索需求极高的应用，具备简洁、高辨识度的放大镜图标让用户一眼就能发现它，需要注意的是控制好 Tab 功能数量，在 3~5 个图标时最宜使用，切勿强行加塞而影响操作。

例如： App Store、新浪微博、花瓣等

2. 顶部搜索框

最常见的搜索方式之一，将搜索以输入框的形式居于页面顶部（状态栏或标题栏下方），在视觉上非常醒目，用户进入应用即能快速找到，很符合用户的视觉浏览动线，为最终转化提供了很大的流量支持。

这种搜索框的形态较为复杂，其信息元素的设计有很多方面的考究，它主要由搜索框、图标、占位符以及部分其他元素组成，下面一一介绍：

① 图标

首先，“放大镜”样式的图标主要用于提醒用户这是一个搜索功能，如果搜索框足够明显且有占位符引导，也可以去掉搜索图标；其次，辅助搜索如语音录入、扫一扫、拍照搜索等也会使用图标样式呈现。

② 占位符

提示用户文本输入位置，很多产品会根据自身属性或功能类型提供固定的占位符，例如：请输入 xxx 搜索、搜索感兴趣的内容...等。

在电商类型的产品中，为了提高占位符的商业价值，将其进行了拓展，系统根据千人千面的算法推荐、提供多个占位符式的商品名称轮播，或者将占位符当做广告位进行出售，不仅让搜索框更个性化，还能潜移默化的提升搜索的转化率。

③ 按钮

为了提高用户使用搜索功能的便捷性，键盘的右下角都会有搜索操作，但设计师们依然会毫不吝啬在搜索框右侧多添加一个搜索按钮，一方面在视觉上能起到引导搜索的作用，另一反面给用户多一个选择、避免键盘隐藏后需再次唤出才能发送搜索指令。

④ 选择器

对于类型/属性较多且要求较高的产品，为了提高搜索结果的精准度，会增加一些前置条件，让用户设定好之后在进行搜索，得出的结果会与用户目标更匹配，能一定程度的提升用户对产品的满意度。例如：携程旅游搜索的地址选择、酒店搜索日期选择，拼多多的商品、店铺选择等。

3. “放大镜”图标入口

形态相对比较简单，通常以“放大镜”样式的 icon 出现在界面右上角，视觉上不会过于突出，常用于搜索行为不是特别频繁的场景，需点击后才会跳转至搜索框页面。

Icon 搜索入口相较于上述提到的类型在视觉引导方面略逊一筹，相对弱化了搜索功能，但可以节省了更多的导航栏空间，呈现位置比较灵活，可单独呈现、也可与其多个其他功能 icon 并列组合展示。

4. 隐藏式入口

隐藏搜索入口方式在真实场景中使用的极少，在初始状态下将搜索入口隐藏，需通过交互操作唤醒。例如：有的将其折叠，点击展开才能看到；有的通过下滑才会出现，iPhone 桌面就是一个不错的案例。

三、常见的搜索方式 基于信息复杂度的提升，纯文字搜索已无法满足很多产品的搜索需求，为了拓展搜索功能空间、更好的满足用户需求，衍生出了多种搜索方式，如语音搜索、扫一扫、拍照搜索等。

1. 文本搜索

最常用且做主要的搜索方式，点击搜索框激活键盘即可开始，相较于其它方式，码字的操作成本略高，但这种搜索方式极为灵活，对于有目标的用户、其搜索结果的精准度只高不低。

文本搜索可分为模糊搜索和精准搜索。精准搜索即能准确识别所输入的关键词，要么结果与搜索目标极度匹配、要么结果为空，例如订单查询、查找联系人等；模糊搜索可在无法匹配用户目标的情况下，推荐与关键词相似、或相接近的内容，不管用户是否有明确的目标皆可使用，例如商品搜索、新闻资讯搜索等。

2. 语音搜索

语音搜索比文本搜索更为便捷，省去了用户码字的操作，同时也解决了对使用键盘、拼音有难度的老弱用户群体所面临的现实问题。语音录入后，系统会将其转化为文字，然后根据关键词搜索内容，需要注意的是对普通话的标准程度要求较高，不然会影响搜索结果的准确度。

为了给用户提供更好的搜索体验，语音搜索也玩出了新高度。例如：酷狗音乐的哼歌识曲/听歌识曲，用户只需哼出大致的曲调或直接对正在播放的音乐录音就能找出歌曲名字；在高德地图中，直接说出“导航去 xxx”,系统即可自动完成搜索、查询路线等多个操作步骤。

3. 拍照搜索

拍照搜索是借助图像识别技术将用户实时拍照、或上传的图片进行相关内容匹配的一种搜索方式，在电商类产品中得到广泛应用。当我们看到一个物品想要够买，不知道叫什么或无法用文字准确形容时，拍照搜索就能很好的解决这个问题。

4. 扫一扫搜索

用户有明确目标且现场有真实样品时，可直接扫描商品条形码/二维码搜索相同的商品。虽然这种搜索方式比上述任何一种方式搜索的准确度都要到高，但受到现实条件的限制，反而使用频率很低。

四、搜索流程状态解析 1. 搜索前-进入“待命”状态

从用户点击搜索框的这一刻起、即便没有任何其他操作，系统就已经开始做搜索前的准备工作了，利用一系列辅助功能为用户提供有效的引导，为搜索转化做足了铺垫，例如占位符提示、热门搜索、历史搜索、猜你喜欢等，后续会对辅助功能做详细的讲解。

不仅如此，与搜索相关的元素也会进入“待命”状态，随着搜索框内放大镜的消失、光标的闪烁、高亮的输入框描边以及自动弹出的键盘，每一个点都在从视觉上告诉用户“我已经准备好了”。

2. 搜索中-关键词联想

在输入关键词过程中，搜索框右侧会出现删除图标，点击即可一键清除输入的内容。这里要注意删除与取消的区别，删除只是清除内容，而取消则是回到上一级页面，切勿将两个操作离得太近，以免用户误触而浪费不必要的时间成本。

系统还会根据所输内容的变化进行关键词联想以提供内容推荐，点击就能进入相应的搜索结果页。关键词联想从很大程度上降低了用户思考时间，还节省了点击搜索按钮的操作步骤，提高搜索效率，这也是一个优秀的搜索框必备的交互反馈。如果关键词联想设计的足够智能，还可以自动拆分一句话中的多组关键词、错字自动纠正、拼音自动转汉字等，搜索的易用性将得到进一步提升。

例如：在京东搜索框输入“电”，就会出现电磁炉、电池、电热毯...等一系列与“电”相关的商品。

3. 搜索后-清晰有效的结果

用户主要是想通过搜索功能来缩短路径、满足自己的查找需求，产品应尽一切能力带给用户符合预期的搜索结果，即便无法与搜索目标相匹配，也应该给予清晰的提示以及合理的视觉引导，搜索结果常见的有三种场景。

① 无相关内容匹配

当系统无法给用户提供相匹配的内容时，会通过缺省页提示，例如让用户修改关键词或将其引导至其他内容页面。电商类产品通常会提供其他模块的商品进行引流，如猜你喜欢、热门推荐、经常购买等。

② 结果内容较少

搜索出的结果内容较少时，会全部显示在同一页面中，但需要注意排序的规则，与关键词匹配度较高的内容靠前展示，用户在上滑浏览的过程中，越往后的其关键词匹配度越低，其阅读量和关注度都不高。

③ 结果内容较多

如果搜索出的结果内容较多，且匹配度较高，很多内容都有可能是用户想要的，这时就需要提供 Tab 分类、筛选等辅助控件来协助用户更快找到想要的结果。

五、辅助模块/元素的妙用 1. 默认提示（占位符）

首先，搜索框内会有默认的占位符提示，以引导用户搜索，这些提示词可以是固定的、也可以是来自运营的营销文案或者系统根据算法推荐，用户不用任何输入也能直接点击搜索提示词相关的内容。

2. 热门推荐

热门搜索主要起到引导作用，特别对那些没有明确目标的用户能给予更多选择，有点类似搜索框中的占位符提示，最大的区别在于占位符可能是用户想要的、但热门搜索却是产品想要提供给用户的内容。

因移动端设备空间有限，为提高资源位利用率，购物类产品的热门搜索内容主要以标签形式展示且不会太多，而新闻资讯类产品大部分则会以完整标题（一行）的形式纵向排列、并增加明显的大标题/Tab 分类。

3. 搜索历史

用户够买过的商品（非消耗类）不一定会再买，但搜索过的内容却有极高的几率再次搜索，例如购物前货比三家反复参考、看新闻/视频有内容偏好等。

提供历史搜索，方便用户随时查看搜过的内容，提升重复搜索的效率。不是所有的搜索都需要历史记录，例如订单，用户重复搜索的概率极低。

另外，考虑到界面空间的问题，历史记录的数目和时间范围需要合理的控制，如产品所需保存的记录较多，可以固定显示几行，其他的用展开/收起控件进行控制。如果历史搜索权重较低，只展示了少量的记录，可在新的搜索记录产生时，最后一条后移隐藏，这样为的是保持搜索记录的新老更替，也不至于对其他信息产生影响。

4. 猜你喜欢

猜你喜欢出于营销目的，通过采集用户的行为偏好进行行为预判，提供用户可能感兴趣的内容，或可在用户迟疑的瞬间被这些内容吸引，降低搜索页面的跳出率。在用户眼中，猜你喜欢多少有点“莫须有”的味道，不过这不是本文讨论的重点。

与热门推荐相比，猜你喜欢模块权重在很多设计师眼中持不同看法。在笔者看来其实不分伯仲，这不难理解，同为搜索功能的辅助板块，还得根据产品内容属性来决定。

例如：商品类搜索，猜你喜欢必定比热门推荐的转化率要高，毕竟更接近用户的真实需求，这就是「用户想要的」与「产品想给的」最实质性的区别；而新闻资讯类搜索，热门推荐的权重则更高，它所捕捉到的热点、新奇事件正是吃瓜群众们最要看到的内容。

5. 分类搜索

产品中涉及的业务、类型较多时，搜索结果可能“鱼龙混杂”，可在用户搜索前就提供多个类别，方面目标明确的用户能更快、更精准的搜索出符合目标预期的相关内容。

六、结语 基于对上述内容的理解，大家都知道不管使用什么形式的搜索，其本身并没有好坏之分，在设计之初就需要我们从业务类型、功能定位、使用场景等多维度综进行合分析，才能设计出更合理的搜索形式，用户的使用体验也会更好。

设计师们虽然前期做了很多方面是准备，但要想将搜索功能做的多么完美无瑕，并非那么容易、也不太现实。正所谓没有最好、只有更好，在这个过程中，前期不仅需要大量的样式积累、思考分析，期间还应通过反复的使用、挖掘更多设计要点，以此思考是否还有更优的设计方案，为后续的更新迭代以及提升用户体验做充足的准备。

更多搜索设计相关文章：

如何做好 B 端场景下的搜索设计？来看腾讯高手的总结！ 前言 B 端业务场景下数据量多且复杂，对数据的精准度和查找效率要求高。

阅读文章 >

本文从搜索的基本属性与特征、搜索入口的样式及应用场景、常见的搜索方式、搜索流程状态解析和辅助模块/元素的妙用5个章节，帮你掌握搜索设计。

搜索设计 案例复盘：

如何做好视频搜索的体验？来看百度高手的案例复盘！ 视频化时代用户消费越加倾向于丰富直观的视频承载形式，文章从体验视角出发，分享设计师如何在搜索视频化过程中发挥自己的价值。

阅读文章 >

前言

搜索是产品中非常重要的一个功能模块，它通过搜索框给用户提供一个直达目的地的绿色通道，方便用户快速找到自己想要的内容，在引导用户走向方面起到了绝对性的作用。

搜索框的体验如何，决定着产品解决问题的能力、效率以及用户的使用频率。好的搜索框一方面能帮助用户节约时间成本，通过友好的设计细节带来差异化的信息反馈，便于用户在大量且复杂的信息中筛查所需目标，提高转化率；另一方面，还能协助产品搜集用户行为目标并做好数据埋点，为后期的更新迭代提供强有力的依据。

有部分设计师认为，搜索不就是一个矩形框、放大镜图标再加一个占位符不就搞定了吗？可有没有想过，为什么在不同类型的应用中搜索框的交互方式、视觉样式也有所不同，且用户在搜索前、搜索中、搜索后到底有哪些细节需要我们去注意？今天，笔者将和大家一起了解关于搜索框的设计知识。

一、基本属性与特征 1. 搜索存在的意义

当界面内容过多、在列表中仅通过视觉扫描很难找到目标，这时能给用户提供最大帮助的一个是筛选、另一个就是搜索，筛选能够缩小查找范围、而搜索却能直到目标。相对来说，对于有明确目标的用户，在关键词较为接近的情况下，搜索比筛选的查找效率、匹配结果的精准度更高。

2. 搜索反馈类型

输入关键信息后，系统会有两种反馈类型，自动即时反馈和手动触发反馈。

① 自动反馈

系统自动检测所有内容中符合关键词的目标信息并罗列出来，随着关键词的持续输入，与之相匹配的结果会逐渐减少、直至找到目标，类似自定义筛选功能。这种反馈方式适合内容不是特别多的列表，避免服务器的压力太大、影响反馈效率，例如地址搜索、查找联系人等。

② 手动触发

关键词输入完成后，需要手动点击搜索按钮向服务器发送指令才会得到相应的搜索结果，这种方式适合内容信息较多的列表。例如商品查找、新闻类搜索等，其搜索结果也可能是海量的，与筛选功能结合使用效果更佳。

3. 搜索的属性特征

① 搜索入口

为了保持界面的一致性，在同一 APP 中，不同界面、功能的搜索应该具备统一的视觉属性。搜索本属于界面的一部分，需要将其放在关键位置，用户需要使用时能随时找到。

② 状态变化

站在用户体验角度，一个好的搜索应该具备完整的流程，即搜索前、搜索中、搜索后的页面跳转以及搜索框形态的变化，将 搜索功能 的价值发挥到最大化。

二、搜索入口的样式及应用场景 在大家使用的众多 app 中，部分搜索框的样式虽然没有多大差别，其实背后都经过了精心设计。针对搜索入口，更具不同的应用场景、等级权重，其搜索入口的位置、样式也有所不同，下面将分别介绍四种常见的类型。

1. Tab 栏独立入口

将搜索放在底部 Tab 栏作为独立的一级入口，很大程度上强化了搜索权重，有利于用户的搜索行为引导、以及产品搜索相关内容的推荐曝光。这种做法为搜索功能拓展提供了很大的空间，相比其他方式，操作起来更便捷，即便用户在其他 Tab 页时、突然有搜索需求时也触手可及，并使其成为应用重量级的流量入口。

Tab 栏搜索入口只适合对于搜索需求极高的应用，具备简洁、高辨识度的放大镜图标让用户一眼就能发现它，需要注意的是控制好 Tab 功能数量，在 3~5 个图标时最宜使用，切勿强行加塞而影响操作。

例如： App Store、新浪微博、花瓣等

2. 顶部搜索框

最常见的搜索方式之一，将搜索以输入框的形式居于页面顶部（状态栏或标题栏下方），在视觉上非常醒目，用户进入应用即能快速找到，很符合用户的视觉浏览动线，为最终转化提供了很大的流量支持。

这种搜索框的形态较为复杂，其信息元素的设计有很多方面的考究，它主要由搜索框、图标、占位符以及部分其他元素组成，下面一一介绍：

① 图标

首先，“放大镜”样式的图标主要用于提醒用户这是一个搜索功能，如果搜索框足够明显且有占位符引导，也可以去掉搜索图标；其次，辅助搜索如语音录入、扫一扫、拍照搜索等也会使用图标样式呈现。

② 占位符

提示用户文本输入位置，很多产品会根据自身属性或功能类型提供固定的占位符，例如：请输入 xxx 搜索、搜索感兴趣的内容...等。

在电商类型的产品中，为了提高占位符的商业价值，将其进行了拓展，系统根据千人千面的算法推荐、提供多个占位符式的商品名称轮播，或者将占位符当做广告位进行出售，不仅让搜索框更个性化，还能潜移默化的提升搜索的转化率。

③ 按钮

为了提高用户使用搜索功能的便捷性，键盘的右下角都会有搜索操作，但设计师们依然会毫不吝啬在搜索框右侧多添加一个搜索按钮，一方面在视觉上能起到引导搜索的作用，另一反面给用户多一个选择、避免键盘隐藏后需再次唤出才能发送搜索指令。

④ 选择器

对于类型/属性较多且要求较高的产品，为了提高搜索结果的精准度，会增加一些前置条件，让用户设定好之后在进行搜索，得出的结果会与用户目标更匹配，能一定程度的提升用户对产品的满意度。例如：携程旅游搜索的地址选择、酒店搜索日期选择，拼多多的商品、店铺选择等。

3. “放大镜”图标入口

形态相对比较简单，通常以“放大镜”样式的 icon 出现在界面右上角，视觉上不会过于突出，常用于搜索行为不是特别频繁的场景，需点击后才会跳转至搜索框页面。

Icon 搜索入口相较于上述提到的类型在视觉引导方面略逊一筹，相对弱化了搜索功能，但可以节省了更多的导航栏空间，呈现位置比较灵活，可单独呈现、也可与其多个其他功能 icon 并列组合展示。

4. 隐藏式入口

隐藏搜索入口方式在真实场景中使用的极少，在初始状态下将搜索入口隐藏，需通过交互操作唤醒。例如：有的将其折叠，点击展开才能看到；有的通过下滑才会出现，iPhone 桌面就是一个不错的案例。

三、常见的搜索方式 基于信息复杂度的提升，纯文字搜索已无法满足很多产品的搜索需求，为了拓展搜索功能空间、更好的满足用户需求，衍生出了多种搜索方式，如语音搜索、扫一扫、拍照搜索等。

1. 文本搜索

最常用且做主要的搜索方式，点击搜索框激活键盘即可开始，相较于其它方式，码字的操作成本略高，但这种搜索方式极为灵活，对于有目标的用户、其搜索结果的精准度只高不低。

文本搜索可分为模糊搜索和精准搜索。精准搜索即能准确识别所输入的关键词，要么结果与搜索目标极度匹配、要么结果为空，例如订单查询、查找联系人等；模糊搜索可在无法匹配用户目标的情况下，推荐与关键词相似、或相接近的内容，不管用户是否有明确的目标皆可使用，例如商品搜索、新闻资讯搜索等。

2. 语音搜索

语音搜索比文本搜索更为便捷，省去了用户码字的操作，同时也解决了对使用键盘、拼音有难度的老弱用户群体所面临的现实问题。语音录入后，系统会将其转化为文字，然后根据关键词搜索内容，需要注意的是对普通话的标准程度要求较高，不然会影响搜索结果的准确度。

为了给用户提供更好的搜索体验，语音搜索也玩出了新高度。例如：酷狗音乐的哼歌识曲/听歌识曲，用户只需哼出大致的曲调或直接对正在播放的音乐录音就能找出歌曲名字；在高德地图中，直接说出“导航去 xxx”,系统即可自动完成搜索、查询路线等多个操作步骤。

3. 拍照搜索

拍照搜索是借助图像识别技术将用户实时拍照、或上传的图片进行相关内容匹配的一种搜索方式，在电商类产品中得到广泛应用。当我们看到一个物品想要够买，不知道叫什么或无法用文字准确形容时，拍照搜索就能很好的解决这个问题。

4. 扫一扫搜索

用户有明确目标且现场有真实样品时，可直接扫描商品条形码/二维码搜索相同的商品。虽然这种搜索方式比上述任何一种方式搜索的准确度都要到高，但受到现实条件的限制，反而使用频率很低。

四、搜索流程状态解析 1. 搜索前-进入“待命”状态

从用户点击搜索框的这一刻起、即便没有任何其他操作，系统就已经开始做搜索前的准备工作了，利用一系列辅助功能为用户提供有效的引导，为搜索转化做足了铺垫，例如占位符提示、热门搜索、历史搜索、猜你喜欢等，后续会对辅助功能做详细的讲解。

不仅如此，与搜索相关的元素也会进入“待命”状态，随着搜索框内放大镜的消失、光标的闪烁、高亮的输入框描边以及自动弹出的键盘，每一个点都在从视觉上告诉用户“我已经准备好了”。

2. 搜索中-关键词联想

在输入关键词过程中，搜索框右侧会出现删除图标，点击即可一键清除输入的内容。这里要注意删除与取消的区别，删除只是清除内容，而取消则是回到上一级页面，切勿将两个操作离得太近，以免用户误触而浪费不必要的时间成本。

系统还会根据所输内容的变化进行关键词联想以提供内容推荐，点击就能进入相应的搜索结果页。关键词联想从很大程度上降低了用户思考时间，还节省了点击搜索按钮的操作步骤，提高搜索效率，这也是一个优秀的搜索框必备的交互反馈。如果关键词联想设计的足够智能，还可以自动拆分一句话中的多组关键词、错字自动纠正、拼音自动转汉字等，搜索的易用性将得到进一步提升。

例如：在京东搜索框输入“电”，就会出现电磁炉、电池、电热毯...等一系列与“电”相关的商品。

3. 搜索后-清晰有效的结果

用户主要是想通过搜索功能来缩短路径、满足自己的查找需求，产品应尽一切能力带给用户符合预期的搜索结果，即便无法与搜索目标相匹配，也应该给予清晰的提示以及合理的视觉引导，搜索结果常见的有三种场景。

① 无相关内容匹配

当系统无法给用户提供相匹配的内容时，会通过缺省页提示，例如让用户修改关键词或将其引导至其他内容页面。电商类产品通常会提供其他模块的商品进行引流，如猜你喜欢、热门推荐、经常购买等。

② 结果内容较少

搜索出的结果内容较少时，会全部显示在同一页面中，但需要注意排序的规则，与关键词匹配度较高的内容靠前展示，用户在上滑浏览的过程中，越往后的其关键词匹配度越低，其阅读量和关注度都不高。

③ 结果内容较多

如果搜索出的结果内容较多，且匹配度较高，很多内容都有可能是用户想要的，这时就需要提供 Tab 分类、筛选等辅助控件来协助用户更快找到想要的结果。

五、辅助模块/元素的妙用 1. 默认提示（占位符）

首先，搜索框内会有默认的占位符提示，以引导用户搜索，这些提示词可以是固定的、也可以是来自运营的营销文案或者系统根据算法推荐，用户不用任何输入也能直接点击搜索提示词相关的内容。

2. 热门推荐

热门搜索主要起到引导作用，特别对那些没有明确目标的用户能给予更多选择，有点类似搜索框中的占位符提示，最大的区别在于占位符可能是用户想要的、但热门搜索却是产品想要提供给用户的内容。

因移动端设备空间有限，为提高资源位利用率，购物类产品的热门搜索内容主要以标签形式展示且不会太多，而新闻资讯类产品大部分则会以完整标题（一行）的形式纵向排列、并增加明显的大标题/Tab 分类。

3. 搜索历史

用户够买过的商品（非消耗类）不一定会再买，但搜索过的内容却有极高的几率再次搜索，例如购物前货比三家反复参考、看新闻/视频有内容偏好等。

提供历史搜索，方便用户随时查看搜过的内容，提升重复搜索的效率。不是所有的搜索都需要历史记录，例如订单，用户重复搜索的概率极低。

另外，考虑到界面空间的问题，历史记录的数目和时间范围需要合理的控制，如产品所需保存的记录较多，可以固定显示几行，其他的用展开/收起控件进行控制。如果历史搜索权重较低，只展示了少量的记录，可在新的搜索记录产生时，最后一条后移隐藏，这样为的是保持搜索记录的新老更替，也不至于对其他信息产生影响。

4. 猜你喜欢

猜你喜欢出于营销目的，通过采集用户的行为偏好进行行为预判，提供用户可能感兴趣的内容，或可在用户迟疑的瞬间被这些内容吸引，降低搜索页面的跳出率。在用户眼中，猜你喜欢多少有点“莫须有”的味道，不过这不是本文讨论的重点。

与热门推荐相比，猜你喜欢模块权重在很多设计师眼中持不同看法。在笔者看来其实不分伯仲，这不难理解，同为搜索功能的辅助板块，还得根据产品内容属性来决定。

例如：商品类搜索，猜你喜欢必定比热门推荐的转化率要高，毕竟更接近用户的真实需求，这就是「用户想要的」与「产品想给的」最实质性的区别；而新闻资讯类搜索，热门推荐的权重则更高，它所捕捉到的热点、新奇事件正是吃瓜群众们最要看到的内容。

5. 分类搜索

产品中涉及的业务、类型较多时，搜索结果可能“鱼龙混杂”，可在用户搜索前就提供多个类别，方面目标明确的用户能更快、更精准的搜索出符合目标预期的相关内容。

六、结语 基于对上述内容的理解，大家都知道不管使用什么形式的搜索，其本身并没有好坏之分，在设计之初就需要我们从业务类型、功能定位、使用场景等多维度综进行合分析，才能设计出更合理的搜索形式，用户的使用体验也会更好。

设计师们虽然前期做了很多方面是准备，但要想将搜索功能做的多么完美无瑕，并非那么容易、也不太现实。正所谓没有最好、只有更好，在这个过程中，前期不仅需要大量的样式积累、思考分析，期间还应通过反复的使用、挖掘更多设计要点，以此思考是否还有更优的设计方案，为后续的更新迭代以及提升用户体验做充足的准备。

更多搜索设计相关文章：

如何做好 B 端场景下的搜索设计？来看腾讯高手的总结！ 前言 B 端业务场景下数据量多且复杂，对数据的精准度和查找效率要求高。

阅读文章 >

编者按：B端 设计师 求职时面试官要求做测试题，应该如何入手？本文从读题、专词分析、竞品分析、流程拆解、信息设计、原型整理。方案润色7个方面，帮你学会分析B端测试题。

UI测试题的分析方法：

大厂测试题怎么破，教你见招拆招！ 在今天的设计师求职中，招聘方提供测试题让求职者完成，已经逐渐成为常态。

阅读文章 >

在 B 端产品面试的过程中，我们多多少少都会接触到测试题。因为假设面试官对你比较满意，他会给你留一份测试题去做测验；假设他对你不满意，也会给你一份测试题来进行考察的设计能力（把你当备胎先准备着），也就是说，除非你表现实在太不尽如人意，否则你总是逃不开测试题的

而对于测试题来说，很多设计师往往都会给大家说：别做、快逃 等类似的观点，因为在互联网上流传着很多关于测试题的负面报道，如骗稿、偷创意等等…

因此我作为至少模拟面近 100 场的面试官，站在一个中立的角度，来说说关于测试题究竟会遇到哪些问题。

面试官

考察：虽然已经看过你的作品集，也完整面试一次，哪怕是看人非常准的面试官也会担心，怕你是只会吹牛不会干活的设计师。因此想通过测试题再看看你的设计能力，通过一个实际工作当中的需求，来判断你是否具备实战的能力（毕竟现在招人来都是认真干活的，而不是充人数顶人头的）。

怀疑：考察是比较正向的态度，那怀疑就相对负面的。这种态度是因为在面试的过程当中，你的表现与设计作品 本身差距过大，面试官觉得可能是你紧张又或者是状态不佳导致，因此想要深入了解你的能力，就会给你一份测试题，来多一个维度进行判断。

业务：B 端产品确实非常特殊，因为每一个行业的能力要求都不太一样。比如你在 OA 协同的行业当中表现不错，那你打算进入其他行业也需要有一个领域的跨度，因此很多面试官都希望能够通过测试题，了解你的综合能力，也就是你如何通过交互的方式来解决业务的问题。

风险：其实在整个面试的过程当中，面试官会有很多潜在的风险，因为面试官眼里，他需要找到一个合适的人。而面试官的上级，也会判断他是否有辨别人才（识人）的能力，这也是一种重要的指标。你想想，假设部门里面人员变动非常频繁，并且很多人员都是没有过试用期，那我对于这个面试官的评价一定不会特别高。因此对于面试官来说，招人本身就会有风险，毕竟在短时间内想要了解会十分困难，因此测试题就是最好的一个工具。

当然在做测试题的时候千万不要慌张，今天我们就来聊聊 B 端测试题的整体思路，为了方便大家理解，我们这里分享一个 TX 企点的 B 端产品测试题。

当拿到这个测试题，首先第一步干嘛？给大家五秒钟时间思考一下。

一、读题：寻找关键信息 读题听上去像是一句废话，但是我们需要从面试官的题目当中，寻找解题的方向。

首先，拿到这个题目，我们要做得第一件事就是将题干当中重要的信息进行标注。标注的好处就是能够让我们，在一长串文字当中，提炼出面试官想要传达的真正意图。

其中，部分信息出题人将其进行了加粗处理（这个值得点赞）

这里，我们一共标注出几个核心信息：

TX 企点当中的企业营销产品线 需要去设计 CDP 平台当中的用户 360 视图功能 信息模块：用户基础信息、用户行为轨迹、用户洞察信息（如标签)、与运营/业务相关的核心指标和关键数据等 还需要思考：自定义配置与其他产品的联动设计 标注信息不是目的，我们需要将标注出来的内容进行整理，这样更有利于我们进行分析设计

而在标注出来的这些核心词当中，你会发现有很多较为困难的专业词汇，这就要进入到我们的第二步

二、专词：理解产品含义 在 B 端产品的测试题当中，专业词汇一直以来都是非常头疼的一件事，因为每个行业每个产品都有他们沟通交流的“黑话”，因此在去做测试题之前，我们必须先了解目前专业词汇有哪些？以及它们的真正含义是什么。

再来回顾这个测试题，我又重新阅读了测试题内容过后，一共整理了 5 个小问题：

TX 企点是干什么的？ 企业营销又是做什么的？ CDP 平台是什么意思？ 用户 360 视图功能有什么用？ 它能够与哪些产品进行联动？ 基于这五个问题，我们需要从产品的官网出发，横向、纵向的寻找这些专业词汇的具体解释，并且这个解释一定是简单易懂的。比如 TX 企点 ，我首先进入到官网当中，看到了它们自己的一个解释：

当然这个解释我相信大家肯定不能理解，随后我就会在官网上以及百度上寻找线索：比如从它的发展史来看，它其实是从企业 QQ 演变而来，并且能够在官网的标签标题上看到企业 QQ 的字眼，感觉就如同企业微信与微信的关系一样，都是去链接平台流量池。

随后继续深入了解其功能，首先看到的便是客户沟通，明白这款产品的基础功能是在线沟通聊天。然后浏览官网的其他细节，发现 TX 企点就是以 在线沟通/客服 功能为基础，随后搭建的营销板块，来管理自己手中的每一位客户。有点类似于 客服系统+SCRM 系统 的结合。

当然这是一个专业词汇，我们在去做测试题时，就需要一个一个将问题具象化，这样才能够让解题思路变得清晰。而了解这些专业词汇的方式有很多，除了官网查阅以外，我们还可以通过：帮助中心、销售咨询、网上资料搜寻、试用产品、请教他人 等多种途径。

我们的目的就是你能够理解它，并且能够给路边的老奶奶讲懂，就可以了。

通过资料查询以及我自己的理解，最终整理出问题的答案（答案不一定标准，但是这个答案能够帮助我理解测试题）

Q：TX 企点是干什么的？

A：TX 企点就是以在线沟通/客服 功能为基础，随后搭建的营销板块，来管理自己手中的每一位客户

Q：企业营销又是做什么的？ A：因为客户已经在手中，所以需要提供完整的营销板块，用于管理客户，提高客户成交率

Q：CDP 平台是什么意思？ A：统一客户数据，进而深度分析客户，最后实现精准运营

Q：用户 360 视图功能有什么用？ A：上面 CDP 平台当中重要一环，主要为了深度分析客户数据

Q：它能够与哪些产品进行联动？ A：这个暂时不知道，因为了解还比较少，我们需要再深入探究一下才行

三、竞品分析：了解产品背后的设计逻辑 竞品分析，一定是 B 端逃不开的一个话题，因为它太过于重要，很多产品模块不太理解如何设计都可以通过竞品分析寻找到蛛丝马迹。

而我们回到这个测试题当中，出题人已经给到了我们一个较为完整的竞品（依然值得点赞）

Salesforce、Hubspot、Convertlab、销售易、神策、诸葛 io、Wakedata

这其实就需要你对于这些产品有一个初步的认知，有经验的同学一眼就能看出，上面竞品分为两类：销售类产品与数据分析类产品。

而在竞品的分析当中，主要是分为直接竞品、间接竞品以及交互竞品，那为什么出题人要将两类完全不同类型的产品划分到一起当作竞品呢？

突然思路就明朗起来，首先对于用户 360 视图的定义，就需要我们呈现的是数据页面，因此会提供数据分析类的产品。

同时 用户 360 视图 又在产品的营销板块，所以会有销售类产品的数据，那有了思路过后，我们再进入到不同的产品里面，去查看页面。

重点观察几个问题：

用户 360 视图的页面/客户详情页 是如何设计的？ 它的整体流程是什么？我是如何进入到这个页面当中去的？ 他们产品之间会存在什么联动？ 好的，接下来就是不停地注册、测试、截图、整理、分析，我们整体都是围绕这几个问题展示，因此竞品分析就可以根据这些页面信息，尝试去分析背后的原因，它为什么要这么设计，进而去提高竞品分析的深度。

比如这个 Hubspot 的客户详情页面，结合上面的问题我们尝试进行回答呢？

① Hubspot 是一款营销管理工具，并且主要用户属于国外用户，因此整体的页面设计采取全屏展示。而在信息当中我们能够看到整体三段式的布局：

左侧为基本信息，主要讲清楚这个客户的基本信息，目的也是想要让使用者了解 中间部分为跟进记录，主要是标注清楚与客户产生过什么沟通记录，我能够在这个页面当中进行查看 右侧则为这个客户的关联数据，其中包含：票据、公司、等信息，这部分在右侧都能够直接新增，关联信息快速新增，是一个不错的思考点 ② 流程主要是从列表页为入口，点击进入。但是在流程的后方，可以进入 各个关联的数据 ，可以考虑借助这个形式，在目前测试题当中进行流程上的优化

③ 关联产品，Hubspot 本身就能够与很多产品产生联动，但是在这款产品当中借鉴意义明显不大，因此不做讨论

并且在竞品分析的时候，我就在神策数据的网站，发现有对 CPD 平台以及用户 360 视图的完整介绍，这无疑是非常重要的线索。

因此，这里神策数据的竞品分析，则主要围绕 用户 360 视图 以及交互借鉴的功能点展开，但无奈的是尝试了各种办法，也没有体验到这个产品模块，这里就比较遗憾。

四、流程拆解 B 端产品，流程当然也十分重要，因为我们虽然是在做 用户 360 视图 的单一页面，但是页面它需要进行对应的流转和

在流程的设计上，会有：业务流程、功能流程、页面流程 三个流程方式，因为我们只专注在几个页面当中，因此这里更聚焦在功能流程与页面流程上。

功能流程 其实也就是聚焦于 用户 360 视图 的使用场景，这里自己做了小小的推测：

首先，如果把 用户 360 视图 功能看做是一个页面当中的详情页，那我们肯定需要先在列表页当中寻找我想查看的用户（场景一）

除此之外，因为 TX 企点的核心功能为 客户沟通，因此可以考虑将用户 360 视图 与客服模块 联动，当用户正在与客户聊天时，就可以查看用户的 360 视图，进行分析，进而为其推荐更多高质量商品（场景二）

因此大致的流程应该是：

场景一：信息列表、选择用户、查看用户 360 视图

场景二：客服聊天页面、点击查看 360 视图

当然这个流程拆解因为缺乏实际的项目业务支撑，所以只能够简单整理，同时也缺乏深入调研，只能够说够用，深挖的话还是会有很多信息场景值得分析。

五、信息设计 信息设计之所以重要，其实是因为 B 端产品里面，信息是最为重要的，出题人也非常优质，将基本的信息类型已经放在测试题当中，其中包含：用户基础信息、用户行为轨迹、用户洞察信息（如标签）、与营销/运营/业务相关的核心指标和关键数据等。

而我们就需要根据这些信息，结合题目当中的 “电商” 行业，进行头脑风暴，思考一下会存在哪些关键词。

1. 基础信息

就是这个顾客的基本信息内容，因为会存在微信、QQ 等平台，通过这些平台的基础字段设计，引用到我们平台当中，因此分析这些社交平台与企点平台的共性即可。大致会存在这些信息：

名称：对客户的基本描述 性别：判断购物人员的喜好需求 年龄：定位用户的购买力 QQ：能够提供的一个关键信息（会是 TX 企点的优势） 微信：配合个人信息，实现私域流量的引导 职位：因为 B 端产品，目的还是补充信息内容 地址：电商平台需要去关注的信息，因为会涉及到快递发货的场景，需要提前知道 2. 用户行为轨迹

用户行为轨迹就是用于记录用户进入到该产品过后的所有重要数据，结合电商来看主要就是：用户进入到到某商品板块、浏览商品信息、查看商品详情页、加入购物车、提交订单、支付金额、咨询客服 等

在每一步所需要记录的信息不一样，大家可以想想，用户提交订单过后，系统可以记录哪些信息？我们一会儿在页面当中公布答案。

3. 用户洞察信息标签

用户洞察信息标签，其实就是一个完整的标签体系。其中会包含创建标签条件、手动关联标签、标签基础属性配置。

关于标签模块我的设计，自己并不是特别了解，因此使用了几个较为典型的产品：Finder、印象笔记、Eagle（智能文件夹），他们虽然不是典型的 B 端产品，但是在标签的设计上，我们依然可以进行借鉴。

4. 营销运营的关键数据

因为是营销运营的关键的数据，结合电商，大致推断为 销售数据相关，比如：订单总数、客单价、订单总金额、选购时长、最高订单价格 等等，这些数据都能够帮助我们进行一个快速的判断。

六、原型整理 将上面的信息与流程进行统一整理，形成最初的原型，原型部分不需要太多纠结

把你自己的想法表达出来即可，这里需要注意原型设计最主要是展示你的页面统筹能力，这里我就将上面的信息+流程进行一个简单的汇总，然后将注意力集中在页面的设计上，过程就不必多言，结果大致就是这样，看不懂的小伙伴可以往上看看前面的具体思路。

七、方案润色 方案润色主要是将你的作品放在页面当中，然后将其呈现出来。其中方案的视觉部分占据 60%，剩余思维拓展的部分占据 40%。

先将视觉部分给大家去做预览：

思维拓展的部分主要是在产品联动部分去做延伸。这里思考过后，决定从企点的客服产品入手，希望能够通过客服产品直接进入用户 360 视图页面

同时将该页面采取抽屉的形式，这样既保证了客服人员快速了解这个用户的所有信息，同时又减少了这个客服人员来回模块的跳转，帮助他进行更多营销策略上的调整。

这就是整个测试题的完整思路，当然，你还需要讲测试题的整体思路通过 PPT 等形式进行包装，同时阐述自己的想法。

而这个测试题我认为算是一个较为合格的测试题，因为作为 面试者，我在读完这个测试题后会有着明确的设计思路，因此其他团队也可以借鉴借鉴。

更多测试题干货：

设计师求职要不要做测试题？来看职场老鸟的实战经验！ 最近，在一些平台看到设计师求职吐槽的内容，大致内容就是现在 90%的招聘方无论公司大小，都会给面试者出一道测试题，很多人很被动的接受了测试题，最后做完了测试题后，招聘方却没有任何反馈，缺乏最起码的尊重意识。

阅读文章 >

希望今天的干货文章能够对大家有所帮助，也别忘了点赞、关注、转发，我是 CE 青年，一个 2 B 行业的 2B 设计师~

欢迎关注作者的微信公众号： CE青年Youthce

编者按：B端 设计师 求职时面试官要求做测试题，应该如何入手？本文从读题、专词分析、竞品分析、流程拆解、信息设计、原型整理。方案润色7个方面，帮你学会分析B端测试题。

UI测试题的分析方法：

大厂测试题怎么破，教你见招拆招！ 在今天的设计师求职中，招聘方提供测试题让求职者完成，已经逐渐成为常态。

阅读文章 >

在 B 端产品面试的过程中，我们多多少少都会接触到测试题。因为假设面试官对你比较满意，他会给你留一份测试题去做测验；假设他对你不满意，也会给你一份测试题来进行考察的设计能力（把你当备胎先准备着），也就是说，除非你表现实在太不尽如人意，否则你总是逃不开测试题的

而对于测试题来说，很多设计师往往都会给大家说：别做、快逃 等类似的观点，因为在互联网上流传着很多关于测试题的负面报道，如骗稿、偷创意等等…

因此我作为至少模拟面近 100 场的面试官，站在一个中立的角度，来说说关于测试题究竟会遇到哪些问题。

面试官

考察：虽然已经看过你的作品集，也完整面试一次，哪怕是看人非常准的面试官也会担心，怕你是只会吹牛不会干活的设计师。因此想通过测试题再看看你的设计能力，通过一个实际工作当中的需求，来判断你是否具备实战的能力（毕竟现在招人来都是认真干活的，而不是充人数顶人头的）。

怀疑：考察是比较正向的态度，那怀疑就相对负面的。这种态度是因为在面试的过程当中，你的表现与设计作品 本身差距过大，面试官觉得可能是你紧张又或者是状态不佳导致，因此想要深入了解你的能力，就会给你一份测试题，来多一个维度进行判断。

业务：B 端产品确实非常特殊，因为每一个行业的能力要求都不太一样。比如你在 OA 协同的行业当中表现不错，那你打算进入其他行业也需要有一个领域的跨度，因此很多面试官都希望能够通过测试题，了解你的综合能力，也就是你如何通过交互的方式来解决业务的问题。

风险：其实在整个面试的过程当中，面试官会有很多潜在的风险，因为面试官眼里，他需要找到一个合适的人。而面试官的上级，也会判断他是否有辨别人才（识人）的能力，这也是一种重要的指标。你想想，假设部门里面人员变动非常频繁，并且很多人员都是没有过试用期，那我对于这个面试官的评价一定不会特别高。因此对于面试官来说，招人本身就会有风险，毕竟在短时间内想要了解会十分困难，因此测试题就是最好的一个工具。

当然在做测试题的时候千万不要慌张，今天我们就来聊聊 B 端测试题的整体思路，为了方便大家理解，我们这里分享一个 TX 企点的 B 端产品测试题。

当拿到这个测试题，首先第一步干嘛？给大家五秒钟时间思考一下。

一、读题：寻找关键信息 读题听上去像是一句废话，但是我们需要从面试官的题目当中，寻找解题的方向。

首先，拿到这个题目，我们要做得第一件事就是将题干当中重要的信息进行标注。标注的好处就是能够让我们，在一长串文字当中，提炼出面试官想要传达的真正意图。

其中，部分信息出题人将其进行了加粗处理（这个值得点赞）

这里，我们一共标注出几个核心信息：

TX 企点当中的企业营销产品线 需要去设计 CDP 平台当中的用户 360 视图功能 信息模块：用户基础信息、用户行为轨迹、用户洞察信息（如标签)、与运营/业务相关的核心指标和关键数据等 还需要思考：自定义配置与其他产品的联动设计 标注信息不是目的，我们需要将标注出来的内容进行整理，这样更有利于我们进行分析设计

而在标注出来的这些核心词当中，你会发现有很多较为困难的专业词汇，这就要进入到我们的第二步

二、专词：理解产品含义 在 B 端产品的测试题当中，专业词汇一直以来都是非常头疼的一件事，因为每个行业每个产品都有他们沟通交流的“黑话”，因此在去做测试题之前，我们必须先了解目前专业词汇有哪些？以及它们的真正含义是什么。

再来回顾这个测试题，我又重新阅读了测试题内容过后，一共整理了 5 个小问题：

TX 企点是干什么的？ 企业营销又是做什么的？ CDP 平台是什么意思？ 用户 360 视图功能有什么用？ 它能够与哪些产品进行联动？ 基于这五个问题，我们需要从产品的官网出发，横向、纵向的寻找这些专业词汇的具体解释，并且这个解释一定是简单易懂的。比如 TX 企点 ，我首先进入到官网当中，看到了它们自己的一个解释：

当然这个解释我相信大家肯定不能理解，随后我就会在官网上以及百度上寻找线索：比如从它的发展史来看，它其实是从企业 QQ 演变而来，并且能够在官网的标签标题上看到企业 QQ 的字眼，感觉就如同企业微信与微信的关系一样，都是去链接平台流量池。

随后继续深入了解其功能，首先看到的便是客户沟通，明白这款产品的基础功能是在线沟通聊天。然后浏览官网的其他细节，发现 TX 企点就是以 在线沟通/客服 功能为基础，随后搭建的营销板块，来管理自己手中的每一位客户。有点类似于 客服系统+SCRM 系统 的结合。

当然这是一个专业词汇，我们在去做测试题时，就需要一个一个将问题具象化，这样才能够让解题思路变得清晰。而了解这些专业词汇的方式有很多，除了官网查阅以外，我们还可以通过：帮助中心、销售咨询、网上资料搜寻、试用产品、请教他人 等多种途径。

我们的目的就是你能够理解它，并且能够给路边的老奶奶讲懂，就可以了。

通过资料查询以及我自己的理解，最终整理出问题的答案（答案不一定标准，但是这个答案能够帮助我理解测试题）

Q：TX 企点是干什么的？

A：TX 企点就是以在线沟通/客服 功能为基础，随后搭建的营销板块，来管理自己手中的每一位客户

Q：企业营销又是做什么的？ A：因为客户已经在手中，所以需要提供完整的营销板块，用于管理客户，提高客户成交率

Q：CDP 平台是什么意思？ A：统一客户数据，进而深度分析客户，最后实现精准运营

Q：用户 360 视图功能有什么用？ A：上面 CDP 平台当中重要一环，主要为了深度分析客户数据

Q：它能够与哪些产品进行联动？ A：这个暂时不知道，因为了解还比较少，我们需要再深入探究一下才行

三、竞品分析：了解产品背后的设计逻辑 竞品分析，一定是 B 端逃不开的一个话题，因为它太过于重要，很多产品模块不太理解如何设计都可以通过竞品分析寻找到蛛丝马迹。

而我们回到这个测试题当中，出题人已经给到了我们一个较为完整的竞品（依然值得点赞）

Salesforce、Hubspot、Convertlab、销售易、神策、诸葛 io、Wakedata

这其实就需要你对于这些产品有一个初步的认知，有经验的同学一眼就能看出，上面竞品分为两类：销售类产品与数据分析类产品。

而在竞品的分析当中，主要是分为直接竞品、间接竞品以及交互竞品，那为什么出题人要将两类完全不同类型的产品划分到一起当作竞品呢？

突然思路就明朗起来，首先对于用户 360 视图的定义，就需要我们呈现的是数据页面，因此会提供数据分析类的产品。

同时 用户 360 视图 又在产品的营销板块，所以会有销售类产品的数据，那有了思路过后，我们再进入到不同的产品里面，去查看页面。

重点观察几个问题：

用户 360 视图的页面/客户详情页 是如何设计的？ 它的整体流程是什么？我是如何进入到这个页面当中去的？ 他们产品之间会存在什么联动？ 好的，接下来就是不停地注册、测试、截图、整理、分析，我们整体都是围绕这几个问题展示，因此竞品分析就可以根据这些页面信息，尝试去分析背后的原因，它为什么要这么设计，进而去提高竞品分析的深度。

比如这个 Hubspot 的客户详情页面，结合上面的问题我们尝试进行回答呢？

① Hubspot 是一款营销管理工具，并且主要用户属于国外用户，因此整体的页面设计采取全屏展示。而在信息当中我们能够看到整体三段式的布局：

左侧为基本信息，主要讲清楚这个客户的基本信息，目的也是想要让使用者了解 中间部分为跟进记录，主要是标注清楚与客户产生过什么沟通记录，我能够在这个页面当中进行查看 右侧则为这个客户的关联数据，其中包含：票据、公司、等信息，这部分在右侧都能够直接新增，关联信息快速新增，是一个不错的思考点 ② 流程主要是从列表页为入口，点击进入。但是在流程的后方，可以进入 各个关联的数据 ，可以考虑借助这个形式，在目前测试题当中进行流程上的优化

③ 关联产品，Hubspot 本身就能够与很多产品产生联动，但是在这款产品当中借鉴意义明显不大，因此不做讨论

并且在竞品分析的时候，我就在神策数据的网站，发现有对 CPD 平台以及用户 360 视图的完整介绍，这无疑是非常重要的线索。

因此，这里神策数据的竞品分析，则主要围绕 用户 360 视图 以及交互借鉴的功能点展开，但无奈的是尝试了各种办法，也没有体验到这个产品模块，这里就比较遗憾。

四、流程拆解 B 端产品，流程当然也十分重要，因为我们虽然是在做 用户 360 视图 的单一页面，但是页面它需要进行对应的流转和

在流程的设计上，会有：业务流程、功能流程、页面流程 三个流程方式，因为我们只专注在几个页面当中，因此这里更聚焦在功能流程与页面流程上。

功能流程 其实也就是聚焦于 用户 360 视图 的使用场景，这里自己做了小小的推测：

首先，如果把 用户 360 视图 功能看做是一个页面当中的详情页，那我们肯定需要先在列表页当中寻找我想查看的用户（场景一）

除此之外，因为 TX 企点的核心功能为 客户沟通，因此可以考虑将用户 360 视图 与客服模块 联动，当用户正在与客户聊天时，就可以查看用户的 360 视图，进行分析，进而为其推荐更多高质量商品（场景二）

因此大致的流程应该是：

场景一：信息列表、选择用户、查看用户 360 视图

场景二：客服聊天页面、点击查看 360 视图

当然这个流程拆解因为缺乏实际的项目业务支撑，所以只能够简单整理，同时也缺乏深入调研，只能够说够用，深挖的话还是会有很多信息场景值得分析。

五、信息设计 信息设计之所以重要，其实是因为 B 端产品里面，信息是最为重要的，出题人也非常优质，将基本的信息类型已经放在测试题当中，其中包含：用户基础信息、用户行为轨迹、用户洞察信息（如标签）、与营销/运营/业务相关的核心指标和关键数据等。

而我们就需要根据这些信息，结合题目当中的 “电商” 行业，进行头脑风暴，思考一下会存在哪些关键词。

1. 基础信息

就是这个顾客的基本信息内容，因为会存在微信、QQ 等平台，通过这些平台的基础字段设计，引用到我们平台当中，因此分析这些社交平台与企点平台的共性即可。大致会存在这些信息：

名称：对客户的基本描述 性别：判断购物人员的喜好需求 年龄：定位用户的购买力 QQ：能够提供的一个关键信息（会是 TX 企点的优势） 微信：配合个人信息，实现私域流量的引导 职位：因为 B 端产品，目的还是补充信息内容 地址：电商平台需要去关注的信息，因为会涉及到快递发货的场景，需要提前知道 2. 用户行为轨迹

用户行为轨迹就是用于记录用户进入到该产品过后的所有重要数据，结合电商来看主要就是：用户进入到到某商品板块、浏览商品信息、查看商品详情页、加入购物车、提交订单、支付金额、咨询客服 等

在每一步所需要记录的信息不一样，大家可以想想，用户提交订单过后，系统可以记录哪些信息？我们一会儿在页面当中公布答案。

3. 用户洞察信息标签

用户洞察信息标签，其实就是一个完整的标签体系。其中会包含创建标签条件、手动关联标签、标签基础属性配置。

关于标签模块我的设计，自己并不是特别了解，因此使用了几个较为典型的产品：Finder、印象笔记、Eagle（智能文件夹），他们虽然不是典型的 B 端产品，但是在标签的设计上，我们依然可以进行借鉴。

4. 营销运营的关键数据

因为是营销运营的关键的数据，结合电商，大致推断为 销售数据相关，比如：订单总数、客单价、订单总金额、选购时长、最高订单价格 等等，这些数据都能够帮助我们进行一个快速的判断。

六、原型整理 将上面的信息与流程进行统一整理，形成最初的原型，原型部分不需要太多纠结

把你自己的想法表达出来即可，这里需要注意原型设计最主要是展示你的页面统筹能力，这里我就将上面的信息+流程进行一个简单的汇总，然后将注意力集中在页面的设计上，过程就不必多言，结果大致就是这样，看不懂的小伙伴可以往上看看前面的具体思路。

七、方案润色 方案润色主要是将你的作品放在页面当中，然后将其呈现出来。其中方案的视觉部分占据 60%，剩余思维拓展的部分占据 40%。

先将视觉部分给大家去做预览：

思维拓展的部分主要是在产品联动部分去做延伸。这里思考过后，决定从企点的客服产品入手，希望能够通过客服产品直接进入用户 360 视图页面

同时将该页面采取抽屉的形式，这样既保证了客服人员快速了解这个用户的所有信息，同时又减少了这个客服人员来回模块的跳转，帮助他进行更多营销策略上的调整。

这就是整个测试题的完整思路，当然，你还需要讲测试题的整体思路通过 PPT 等形式进行包装，同时阐述自己的想法。

而这个测试题我认为算是一个较为合格的测试题，因为作为 面试者，我在读完这个测试题后会有着明确的设计思路，因此其他团队也可以借鉴借鉴。

更多测试题干货：

设计师求职要不要做测试题？来看职场老鸟的实战经验！ 最近，在一些平台看到设计师求职吐槽的内容，大致内容就是现在 90%的招聘方无论公司大小，都会给面试者出一道测试题，很多人很被动的接受了测试题，最后做完了测试题后，招聘方却没有任何反馈，缺乏最起码的尊重意识。

阅读文章 >

希望今天的干货文章能够对大家有所帮助，也别忘了点赞、关注、转发，我是 CE 青年，一个 2 B 行业的 2B 设计师~

欢迎关注作者的微信公众号： CE青年Youthce