「页面还原度」即开发工程师对设计稿的还原程度，页面还原度的高低，直接决定从产品需求到设计实现的程度是否被准确有效的表达。

拓展阅读

如何做好设计还原？从这5个方面入手！ 作为设计师，一个老生常谈的话题就是还原度检查。

阅读文章 >

在 B 端产品中，往往更加重视产品功能的实现，页面还原度并不被重视；但是功能实现和页面还原并不是两个孤立的问题，页面还原度低，同样会影响用户的可用性和易用性，损失的是产品最终的输出价值和用户体验，因此，B 端产品团队同样需要重视页面还原度的实现。

大部分开发团队通过 UI 走查环节解决页面还原度低的问题，即在测试阶段由 UI 设计师 对产品的还原度进行走查和标注，开发工程师对问题进行修复。然而，只在 UI 走查环节解决页面还原度问题，有以下缺陷：

开发周期有限，页面还原度问题最终服从于产品功能的实现，修复时间受制于迭代周期被无限推迟，随着问题的累积，造成开发工作量无限期增加的恶性循环 全局性的设计问题没有得到及时修复，无形中增加了设计每次版本迭代中 UI 走查的工作量 线上页面是设计工作的执行表现层，在走查环节进行校正，设计的工作质量难以评估和量化 因此，本文结合工作实践以及与产品、前端、测试的深度沟通，从设计全链路探究产品还原度低的原因，并结合工作实践总结提升页面还原度的解决方案。

页面实现还原度低的原因 1. 设计规范和设计组件库不一致

（1）使用不同设计系统

以 Ant Design 和 Arco Design 表单组件为例，两个设计系统的色值、间距、交互效果等都各有差异，如果设计与前端使用不同的组件库，设计稿和线上页面必然大相径庭

（2）使用同一设计系统

前端工程师在开发过程中不会对所有设计元素逐一查看，更不会对比设计稿规范与设计系统默认规范是否一致，如果设计师对默认的设计规范作出调整且没有在设计稿中作出标注，同样会造成设计稿和线上页面的差异

2. 前端和设计页面实现的思考路径不同 UI 设计师在静态固定宽度的页面进行设计，关注的是如何把产品需求转化为设计语言，将设计元素科学合理的布局与排版。

前端工程师需要完成的是如何在不同分辨率的情况下，最大可能对设计稿进行还原：

以上案例展示了设计师和前端工程师对同一页面不同的实现方式，在线上页面宽度与设计稿一致的情况下，表单之间的横向间距都是 65px。但是，如果页面缩放或者在不同分辨率屏幕下展示，设计认为一行两列表单的间距依然是 65px；而按照前端工程师的实现方式，不同分辨率下单个栅格的宽度是变化的，那么表单之间的横向间距必然会发生动态变化。

3. 设计走查 缺乏系统、动态、可追踪机制

常规的设计走查流程，设计师对线上页面进行截图和标注，最后将所有标注截图汇总给前端工程师。这样的走查流程有以下问题：

走查问题全部使用描述文字，问题无法进行分类分级管理 工作完成状态无法反馈，工作量难以追踪，设计师需要根据前端反馈结果对所有走查问题进行二次检查 如何提升页面实现还原度 1. 建立一致的设计规范和组件库 建立 B 端设计组件库和设计规范，使用范围不应仅局限于设计团队内部，应达成整个团队尤其是前端工程师和设计师的设计规范和组件库的一致，从而实现设计稿到线上页面输出统一的设计语言，从根本提升设计质量和还原度。但是，统一和前端的设计规范与组件库并非易事，需要将产品的发展阶段、前端团队开发团队工作习惯、设计历史原因等因素进行综合考量，笔者结合工作实践，设计师可以从以下方面提升与前端团队的一致性。

（1）设计组件的选择

设计师在接收到设计需求后，需要首先和对接的前端工程师和产品经理确认并考虑以下问题：

是否有统一的设计组件库，如果没有，此次版本是否需要建立； 当前产品的设计组件库是什么，组件库是否可以覆盖当前产品的大部分需求；如果答案为是，建议继续沿用当前的设计组件库； 当前版本是否有更换设计组件库的需求，如果需要，更换何种组件库。 在前面的案例中，我们看到使用不同的第三方组件库，页面差异很大，因此，设计师在开始初始，需要尽量和前端（或者前端和设计师）使用一致的设计组件库

（2）设计组件库更新机制

B 端产品业务复杂，大部分第三方设计组件库并不能覆盖全部的设计需求，设计师依然需要创建符合产品需求的设计组件；此外，设计师会对现有的第三方组件库根据产品需要进行微调；设计师对设计组件库的改造和更新，同样需要团队成员特别是设计师和前端工程师评审通过，保持前端工程师和设计师组件一致

（3）设计师使用组件保持克制

设计师需要充分考虑产品的可用性和用户的学习成本，在组件的使用过程中保持克制，组件的使用需要定义明确的规则和范围，如果仅仅因为“好看”而使用不同风格的设计组件，会极大增加开发团队的学习成本，造成团队成员使用组件的混乱和困惑。

（4）设计规范

制作设计规范的目的是为了统一设计内部以及与前端工程师的设计规范，提升团队的协作效率。前端工程师根据设计规范建立公共组件库，提升前端组件复用率，减少设计与前端的对接成本，提升工作效率。测试工程师根据设计规范建立稳定、一致的测试用例，提高测试工作效率。因此在设计规范在制定和更新过程中，需要与开发、测试充分沟通与协作，形成团队稳定、一致的规范文档，从根本上提升协作效率，高效完成界面的开发和验收。

2. 设计师需要了解前端知识 设计师在设计过程中需要代入前端思维开展设计工作，虽然设计师最终交付的是一个静态尺寸的设计稿，但是在设计各个阶段，都需要充分考虑不同排版和设计元素排列在不同分辨率设备中的显示效果，理解前端实现页面的基本逻辑和适配规则，将设计语言转化为前端规则，最大程度实现页面的还原。

制定设计规范，与前端同步模版页面的设计规范和规则，例如栅格规范，适配规则 在设计过程中，考虑设计元素排版与布局在不同分辨率的展示效果，与前端沟通，采用何种方式最大程度实现不同分辨率下的页面高度还原 设计走查过程中，理解前端的实现方式，分析页面实现的合理性，与前端工程师解决走查问题的合理解决方案。 如果有设计同学的设计工具是 Figma，强烈建议大家学习 Figma 的自动布局和智能组件制作功能，Figma 自动布局的实现方式和前端实现逻辑是高度一致，使用自动布局思维进行设计，可以进一步提升和前端的沟通效率。

拓展阅读

Config 2022 落幕！这15项新功能让 Figma 更简单好用了 大家好，我是和你们聊设计的花生~ 2022 年 Config 已于 2022 年 5 月 10 日-11 日在旧金山举行，这场由 Figma 召开的线上设计大会，邀请了来自全球 20 多个国家的 100 多位相关行业从业者发表演讲，与全球用户交流分享设计经验和最新的理念。

阅读文章 >

3. 设计思想宣讲 在设计走查工作中，经常会遇到一些这样的情况，前端工程师不理解为什么设计师对一个字体的字号、字重、不同元素的间距反复强调，设计稿和线上页面不仔细查看，并不能看出区别，为何设计师对于这些像素级的差异要“锱铢必较”？诸如此类的问题，其根本原因在于团队成员并不理解设计师的工作，停留于设计师就是把设计组件摆的“好看”的认知误区。

设计师的本质工作是为了解决问题，使用不同的设计方法，背后隐含的是设计师对产品不同信息的处理和传达，因此，设计师有必要和团队成员主动沟通，解释设计师在设计工作中对不同信息的处理逻辑，设计师如何将文字需求转化为视觉语言准确传达给用户。不同专业对同一事物的关注度和敏感度不同，例如需求评审过程中，设计关注排版，后端关注数据，测试关注异常情况。因此，对同一页面感知度团队成员差异巨大，这样的结果可能会导致设计师对信息的传达在页面上线后大打折扣，因此，设计师必须和团队成员，尤其是前端工程师分享在设计师在设计过程中，是如何将需求内容转化为视觉语言传达给用户的。

4. 科学合理的设计走查流程 上文笔者介绍了常规设计走查流程带来的诸多问题，经过不断地实践和探索，对设计走查过程不断优化，形成了一套更加高效的的设计走查流程

（1）设计工具的选择

走查工具

让设计稿还原度更高！两款高手都在用的B端设计走查神器 B 端设计师在工作当中一定会遇到这样的情况：因为上线的项目与设计稿不符而与前端进行争论、为了知道开发颜色使用是否准确只有“截图”，然后在设计软件当中“吸色”来进行判断。

阅读文章 >

工欲善其事，必先利其器。选择合适的设计工具可以极大的提高工作效率。在这里为大家推荐两款优秀的设计走查工具；

尺寸查看工具 CSS Peeper

网站链接： https://csspeeper.com/

设计师在设计走查过程中往往需要“像素眼”对线上的每一个设计元素属性、间距进行核对，甚至需要右键检查元素查看前端的数值是否能和设计稿一致。使用 CSS Peeper 神器后，设计师可以直接点击设计元素查看 CSS 样式，还可以看到 padding、margin 值，大幅度提升设计师设计走查的工作效率

截图+标注工具 xnip

过去的设计走查标注过程，设计师截图后，需要将截图拖入设计软件进行标注和说明，这个过程有几个问题：

设计师和前端工程师需要修改颜色、字体，使用箭头标注间距，增加设计师工作量 如果一张截图问题较多，标注的内容互相交叉，会增加前端工程师的查看效率，增加沟通成本 使用支持截图+标注的工具，例如 xnip,支持快框选和文字输入，标注功能支持自动排序和排版，提升工作效率，降低沟通成本

线上协作表格

大家在设计走查沟通中，是否遇到这样的问题

① 使用截图标注交付截图文件

优点：问题可视化，方便前端快速定位问题

缺点：

设计单方面反馈前端，需要再次查看线上页面进行还原检查 前端工程师查看都是具体的标注问题，难以确定解决的优先级，可能导致高风险问题由于交付时间的原因而没有及时得到解决 设计师和前端工程师的工作难以被量化 ② 使用文档记录问题

优点：

可以对设计走查问题分类分级管理 方便对设计问题进行追踪和管理 设计师工作可以被量化 缺点：问题难以可视化，增加沟通成本

基于以上在设计走查过程中遇到的问题，我们使用在线表格类工具，对所有设计走查问题分类、分级，支持团队成员对所有走查问题实时内容可见、可编辑，结合 xnip 工具，对需要截图标注的问题作为补充。

不同走查问题分类管理

功能缺陷问题提交测试工程师 设计规范问题反馈前端工程师 交互优化建议问题由设计师做记录，建立设计优化需求 问题解决优先级分级管理

「重要」问题优先处理 「一般」问题可非此次功能发布前处理 （2）设计走查标准

设计走查原则

设计走查的基本原则，即线上实现页面必须达成的标准

一致性:信息展示一致;相似的功能和任务，用户操作交互路径一致 可用性：页面间信息层级清晰，信息视觉流流畅，重点明确 准确性：基础控件使用正确；内容展示正确，不存在错别字；信息架构表达准确 完整性：操作路径完整；功能实现完整 设计走查颗粒度

设计走查的颗粒度，一般来自于产品开发目标和开发周期。一般情况下，如果产品开发周期紧迫，产品目标是优先实现功能交付，那么设计师可以将功能实现的相关问题标注为高优先级问题优先解决；如果产品的目标是 UI 重构或者体验优化，那么影响产品界面还原和体验优化的问题也应提升为高优先级。

设计走查沟通

设计师对走查问题的描述，应该描述准确。

问题定位-问题发生的位置和状态； 问题是什么-功能缺失？组件使用错误？间距错误？ 问题如何解决； 设计师在走查问题中，尽量直接描述问题，减少使用“请查看设计稿”这样的表述，降低设计师和前端工程师的沟通成本。

本次分享到这里就结束了，希望可以对大家有所帮助，我们下期再见

你也是半个心理学家 我之前反复提过，我们体验设计现在的主流研究方法大部分从社会学或者心理学里移植而来，而 可用性测试 就直接脱胎于认知心理学的看家研究方法“实验法”。假如有读者小时候上幼儿园的职业理想曾经是“做实验、当科学家”，那么恭喜你，当 设计师 会做可用性测试，某种程度上也算是部分实现了你当年的心愿。先给自己一点鼓励。

可用性测试方法

设计师第一次做可用性测试，这篇文章就够了！ 背景：去年 12 月因公司一个改版项目，第一次全流程负责与参与设计调研工作。

阅读文章 >

认知心理学的基本思路是把人的心理活动理解成一套像精密机械一样的信息加工系统，里面的各个零件可以拆开来各自研究的：比如人的注意力、记忆，或者某种感受。它有许多的研究内容都是很微观的概念和现象，这些（短期）现象发生得非常快、并且在自然环境下受各种因素影响干扰，很难测量。因此为了在现象或概念间建立有力的因果关系，认知心理学作为横跨社科和自然科学两个领域的一门学科，向自然科学取经从而发展出了很成熟的控制实验技术（包括咱们比较常见的眼动仪实验）。这个方法后来辐射到了各个其他社会学科中，又诞生了“实地实验”（field experiments，自然实验/社会实验）的说法，其思路很像我们今天经常做的 AB test。

如何做一个可靠有效的AB测试？从这两方面入手！ AB测试的好处相信每个互联网从业者多少应该都知道，简单的说就是设置几组不同方案比较，通过上线后的数据判断哪个效果好。

阅读文章 >

还是拿我们上篇文章的“可爱小猫论”作案例，假设你是一个很有才华的心理学家，发现小猫可爱程度会影响人的身心健康，养越可爱的猫越有利于身心健康。你要如何证明这一点？

首先我们需要确定这个现象普遍广泛存在，而不是仅仅存在在你这个猫奴身上的个例，因此一定需要通过定量的方法做验证。

其次，在现实生活中能对人的身心健康产生影响的东西太多了，比如这个月老板老给你穿小鞋，导致你身心受到了巨大打击；下个月你苦练搏击，身心健康又增长不少，那么如何从这么多因素中抽离出猫咪对你的影响，而过滤职场/锻炼/饮食等其他因素的影响？

最后，也许养猫和身心健康是有关系，但其实是身心健康较弱的人更不愿意养猫，而非反过来——如何能准确探究这两个因素的关系？

答案是在实验室环境下严格地控制变量，通过对实验环境和环节的科学设置、对被试者情况的筛选和抽样来确保得到精准的结果。比如你可以假设被试对猫的喜爱程度、猫的可爱度都可能影响实验结果，所以你可以被试分成 4 个单元小组：不可爱的猫配不喜欢猫的人、可爱的猫配不喜欢猫的人、不可爱的猫配喜欢猫的人、可爱的猫配喜欢猫的人。

在测量了人的初始身心健康程度后，让他们与猫呆 3 小时，然后再次测量人的身心健康程度。此外还需要配备一个对照组，这个组的人只能看 3 小时动画片——这就是一个很简单的小实验。

由此可以看出控制实验法和其他的研究方法相比，完全脱离了情境，所以实验室内的结果是否可以推广到实际生活中去，是需要打一个大大的问号的，但正因为如此，实验法也为验证因果关系创造了可能性。这一点也就是我之前在不要从“交互设计定理”入门交互设计中强调的。

说回到咱们的可用性测试，根据《人因学手册》的说法，可用性测试在 80 年代初被提出后马上在 80～90 年代风行于业界，影响了施乐（Xerox）、苹果、IBM 等一代明星公司的产品评估流程。在可用性测试引进之初从业者仍然比较严格地遵守控制实验的方法，对测试的环节设计、环境设置要求十分严格，是一种主要用于评估/对比设计方案的、定量的、脱离情景的手段。举个例子，为了得到比较严谨的结果，可用性测试应该：

做预测试：在设计完实验流程后需要先找一些被试，看看控制变量的手段是否有效

考虑组内实验还是组间实验：比如是找同一个用户测试 3 组设计图，还是 3 个不同的用户每人测试 1 组设计图

考虑实验顺序：假如找同一个用户测试 3 组设计图，那么先看哪个、后看哪个

……

此外，各个公司会为了可用性测试搭建专门的、昂贵的可用性实验室。在实验室环境下对用户发布任务、进行测试，主要是为了规避噪音、灯光、外来人员打断等干扰因素对实验结果的影响。比如下图就是一个典型的可用性测试实验室。

发展与“5 个就够了” 90 年代后随着可用性测试相关的应用和研究快速发展，可用性测试的概念也从验证性研究逐渐扩展到形成性的、探索性研究。对可用性测试的要求也远远没 80 年代那么高了，到今天据我所知很多厂的 用户研究 部门把可用性测试理解地很宽泛，只要和用户有接触、只要设置了任务，都可以勉强讲是“可用性测试”。这样做测试不再需要严格的实验室环境与变量控制技术，反而更加偏向实地调研，让用户在自己熟悉的环境中完成任务。造成这个发展的原因其实有很多。

首先，软件开发模式变了。70～80 年代盛行的瀑布流式开发，要求软件的设计开发者一次性完全完成一个环节后，再迈入下一个环节。比如你做设计时，需要提前想好未来需要应对的所有场景，一次把几千张设计图全部交付开发，开发开始写所有的页面，写完了这几千张图再上市。这种开发模式在 90 年代被敏捷开发或迭代开发逐渐替代，这要求设计者出一版能用的先做出来，根据用户反馈再迭代之前的想法。因此，设计师对于快速定位设计问题的诉求大大提升，而可用性测试作为一种有用户参与的评估方式（可能是唯一一种），可以满足这种诉求。

其次，从调研目的的角度上来讲，我们作为设计者说到底和科学家做的事儿是不同的。对于科学家来讲研究概念之间的相互关系是有意义的，其最终的目的是形成一个具有解释力的学说。但对于设计师来说我们需要选出更优的设计，但并不关心究竟是哪个变量导致了设计最优、变量之间相互的关系。比如你可能做了两个稿子，A 稿红色按钮放右边、B 稿橙色按钮放左边，最终用户觉得 B 稿好，你的研究就结束了；而心理学家需要去思考到底是位置、颜色，还是别的什么因素影响了用户的什么体验，最终导致用户的决策。

对控制变量的严格要求，最终导致做一场严格的控制实验成本超高，除去复杂的控制变量带来的成本以外，为了让整个实验可以使用统计学分析，一般会要求每个单元小组的样本量大于 30——做学术也许可以不那么考虑成本，但企业总是会思考投入产出比。

比如 90 年代软件业界就曾经把当时出现的专家启发式评估、认知走查这些无需用户参与、专家进行即可的方法当成可用性测试的廉价替代品。虽然后来被证实没有方法可以替代用户评估——专家走查出来的问题往往不是真实用户遇到的问题，而往往是一些无伤大雅的小细节。

最后，90 年代尼尔森写了一篇关于可用性测试样本量的文章，极大地鼓舞了用可用性测试做探索性研究、寻找可用性问题的做法。这篇文章我最开从《用户体验度量》里读到，我把这个理论叫“5 个就够了”论。

尼尔森将此前为一些产品做的可用性测试与专家评估结果整理了一下，用一个泊松模型来预测参与可用性测试的用户数或参与评估的专家数与最后找到的可用性问题的比例之间的关系，最终“发现 5 个用户就能发现 83%的问题”。下面这张图能看出来假如拆分了可用性测试和专家评估，那么可用性测试需要的人数稍微多一些，5 个用户大约能发现 70%的问题。

现在看来尼尔森这个模建得说不上多么精细。注意这个图里的因变量是百分比，“1”代表“所有被发现的问题”，而不代表“本系统所有可能存在的问题”，所以尼尔森这个结论正确的解读方式是，假设他们测试了 20 个用户最终发现了 10 个问题，那么 5 个用户就能发现其中 8 个问题。

这种问题的重叠很有可能是因为对用户的不当抽样带来的。比如我们现在很多系统存在不同的用户角色与用户场景，用户个体的技能水平也有差异，因此不同用户组的关注点、问题点可能都是不一样的，很可能这一组用户找不到另外一组的问题，这一点在《用户体验度量》也有所说明。

后来尼尔森在他公司的网站上对“5 个就够了”论做出了补充，当前版本的可用性测试结合了设计迭代的动作，更偏向定性的、个案研究的思路。按他现在的话来讲，可用性测试这个事情应该多次多轮的进行：首先选取 5 个人可用性测试-然后马上对设计进行修改和迭代-再找另外 5 个人重复进行可用性测试，看看他们有没有新的观点，如此多轮往复，最终打磨出一版好设计。

对尼尔森这套想法感兴趣的看这里： https://www.nngroup.com/videos

怎么做更好 我们总结一下：假如你不太熟悉可用性测试的发展脉络，那可能会对这个东西有点犯迷糊：一会要设置任务，一会要发问卷，一会又要观察用户的动作；一会 5 个就够了，一会又要多找几个人。简单来讲：

假如你做可用性测试是为了发现问题，5 个人够了。虽然要设置任务但不需要太严谨，以快取胜；假如你做可用性测试是为了对比方案/评估方案的优劣程度，5 个人不够。严格来说每个组至少 30 人，但我们毕竟不做学术，少一点也勉强可接受。虽然今天已经基本不做严格的实验设计，但应该尽量减少对用户的言语干扰、指导，让用户自由体验产品。

最后关于样本量的事情我再多说两句。虽然调研的用户数量是一个困扰大部分设计师的问题，但根据我个人的经验来看，可用性测试是“多做比少做好，但做了一定比不做好”的一件事。对上线前的飞机稿来说，即使你只找 1 个用户看了你的设计，甚至你只找同事看了一眼你的设计，都会比你闭门造车要更好。不要惧怕做体验调研，也不要认为非要花多大代价才算在做体验调研。

欢迎关注作者微信公众号：「白话说交互」

TCC 推荐：大家好，这里是 TCC 翻译情报局，我是张聿彤。在设计按钮时，你是否会纠结如何去设计按钮的文案？这篇文章指出，设计好按钮的微文案可以有效地激励用户采取行动、提供给用户有用的帮助信息和行为反馈，文章中还提供了如何设计按钮微文案的 7 条建议，我们一起来学习一下吧~

微文案指南

4500字干货！写给设计师的微文案设计指南 前言 公开演讲者 Hamza Yusuf 曾这样说过“永远不要削弱语言的力量，言动于心, 心动于身”。

阅读文章 >

微文案（顾名思义）是那些可在网站、APP 和产品上看到的简短文案。根据 Roberts（2017），它有 三个主要作用：

激励用户做出行动 引导用户 为用户提供行为反馈 微文案在表单、文本、标签、弹出窗口和按钮上都能看到。这是一个相对较新的术语和概念，由 Joshua Porter 于 2009 年在其博客文章“如何撰写 微文案 ”中提出。他提出在正确的时间、正确的地方添加一些文案内容，可以提升整个产品的 用户体验 。

为了设计有效的微文案，我们需要思考用户处理信息和阅读文本的方式。多项来自尼尔森诺曼集团的研究的研究表示：

眼动研究表明对于文化程度较高的用户来说，扫视文本是一种极为常见的行为。用户在页面上平均只会阅读大约 20% 的文本。

通过结合简洁、易扫和客观的微文案，可以显著提高可用性（124%~159%），从而提升用户的使用的流畅性和满意度。

什么是好的微文案？ 巴特说：“好的微文案具有以下特点：a）清晰、简洁、易于理解；b）它能呈现出品牌声音和品牌基调；c）它在视觉上是合适的，感觉上像是设计的一部分”

好的微文案可以解决用户的需求、回答用户的问题或建立同理心（取决于所讨论的产品），并在用户心中建立信任。它能激励用户采取行动（例如，注册帐户、完成预订）。最后，好的微文案可以预测并解决用户问题（例如，防止错误）。

有研究发现，微文案“减轻了用户担心的情绪，提供了有用的报错信息和明确的语言表达，并有助于为用户提供操作提示”。

下面列出了一些有助于优化按钮微文案的建议：

使用动作动词 应该要使用动作动词，而不是泛指词。应避免使用“是”或“否”，因为它们可能会产生歧义并让用户混淆。

在 交互设计 中，用户先阅读对话框的内容然后才进行操作。如前所述，研究表明大多数用户通过扫视页面的方式来获取相关信息，而不是去仔细阅读所有信息。这意味着，如果他们跳过或误读了对话框，他们最终会按错按钮。使用被动描述的文案会迫使用户做更多的工作。通过按钮文案来确认接下来要做的动作，会减少出错的机会，并减少用户的工作量。

在下面的示例中可以看到（ 受 UX Movement 的启发 ）。当对话框文本没加载出来，只有按钮可见时，按钮的文案是用户唯一可用的信息。动作动词可以帮助他们采取行动，但使用“是”或“否”文案的按钮就不能达到这个目的。所以很显然带有动作动词的按钮任务效率更高，可以防止用户出错。

赋予动作动词的按钮的任务效率更高，可以防止用户出错

使用任务导向的文本 按钮应与动作操作匹配。按钮应该始终清楚地描述用户单击按钮时将会执行什么操作。如果用户对点击按钮后发生的事情感到不确定或惊讶，那么微文案就可能存在着问题。

“提交”一词就是一个很好的例子，它可以用于大多数按钮。正如 UX Movement 的 Anthony 所建议的：“如果文案不是针对任务场景来描述的，当用户看到它时，就不知道会发生什么。”因此，用户会对他们的行为会产生什么结果而感到困惑。避免这种情况的一种方法是使用描述用户任务结果的微文案。

这可以通过使用针对任务场景描述的文案而不是通用的文案来实现。这让用户认知更清晰，并为他们的行动提供了确定性。请记住，用户通常会扫视页面以获取相关信息。为了改进用户体验，微文案应该准确地描述用户在任务中所做的事情。例如，如果用户正在删除照片，则“删除”的按钮会告诉用户单击动作按钮将会删除照片，这对于他们的任务来说是明确而具体的（见下例）。

使用针对任务场景的语言可以使文案更清晰（右侧示例）

一致性 为按钮编写文案时，保持一致性很重要。研究表明，一致性可以帮助用户准确地建立产品工作方式的心理模型，从而最终获得更好的用户体验。设计微文案的一些具体准则可以帮助我们达到这一目的。例如，你可以：

规范字数：不同组件平均应该有多少个词？每个按钮一个、两个或多个单词。 选择大小写：例如整个产品始终使用大写字母，你也可以在句子大小写、标题大小写、大写或小写之间进行选择（稍后将详细介绍…） 文案结构：你需要确定文案的结构。它们是否仅包括一个动词或是动词与名词的组合（例如“动词”+“名词” 或 “动词” 或 “动词” +a+ “名词” ）？ 对特定含义的用词表达一致：词语选择上的细微差异可能会对用户体验产生影响。例如，正如 Tobias van Schneider 所报告的，“请求定价”和“获取报价”描述了相同的动作，但在不同的产品中却产生了不同的结果。 提高透明度 有时，数字产品可能会出于安全和隐私原因（ 例如，要求用户提供敏感信息 ）而引起用户担心。在这些情况下，微文案可以帮助我们减轻用户潜在的忧虑，并与他们建立信任关系。

例如，如果人们在进行交易时感到不安全或可疑，他们可能最终无法完成交易行为。

Bhatt 提供了一些示例场景： 要求用户提供过多的个人信息 有关产品保修/维修/更换的内容未进行详细说明 为免费试用订阅的用户询问信用卡详细信息 有效的微文案可以告知用户询问信息的原因以及如何使用这些信息 —— C.巴特

下面有一个很好的例子；Airbnb 通过点击 “预定” 按钮，通知用户他们在这一步 “不会被收费”。

来自 Airbnb 网站的截图

避免使用行业术语 有效的微文案应该是对话式的。不应使用行业术语和底层的技术内容（ 如错误代码 ）。用户应该感觉的是他们在和另一个人说话，而不是一台机器。罗伯茨建议，“微文案应该使用简单的语言，由最少的词组成”。这意味着除非特殊情况，否则我们应该避免使用行业术语。这其实是一件比较难实现的事情，因为我们对我们所设计的产品以及我们每天遇到的行业术语非常熟悉。解决这个问题的一种方法是与用户一起测试微文案，看一下 他们懂我们使用的语言吗？

下面展示了一个示例。与“启用”这个词相比，用户可能更熟悉“打开”这个词。

避免使用专业术语

注意字母大写形式 根据 Vaishnav Shravan 的说法，“大写是 UX 写作中提高文本元素理解和一致性的工具，需要给予应有的重视”。最流行的大写形式有：句子大写（ 仅句子的第一个字母和专有名词大写 ）、标题大写（ 除冠词、连词和标题外的每个单词的第一个字母大写 ）和每个字母大写。

选用哪种大写风格取决于你的产品。一般来说，如果文本是面向国际的内容，请使用句子的大写，因为这样更利于国际化（ 除非产品面向美国受众 ）。标题大写可用于标题/副标题/文案文本（<4 个单词）。在大多数情况下（ 双关语 ），为了保持一致性，最好在产品中统一选择一种格式。

大写的两个例子：左侧为标题示例，右侧为句子示例

深度了解用户 好的微文案应该在用户使用你的产品时提供信息和帮助。为了实现这一目标，了解用户是谁并了解他们的需求是很重要的，所以通过用户测试来确定微文案是否有效是必要的。用户访谈可以帮助我们更好地了解用户，A/B 测试可以用来确定微文案的哪些变化对用户体验的影响最大。

欢迎关注作者微信公众号：「TCC翻译情报局」

你也是半个心理学家 我之前反复提过，我们体验设计现在的主流研究方法大部分从社会学或者心理学里移植而来，而 可用性测试 就直接脱胎于认知心理学的看家研究方法“实验法”。假如有读者小时候上幼儿园的职业理想曾经是“做实验、当科学家”，那么恭喜你，当 设计师 会做可用性测试，某种程度上也算是部分实现了你当年的心愿。先给自己一点鼓励。

可用性测试方法

设计师第一次做可用性测试，这篇文章就够了！ 背景：去年 12 月因公司一个改版项目，第一次全流程负责与参与设计调研工作。

阅读文章 >

认知心理学的基本思路是把人的心理活动理解成一套像精密机械一样的信息加工系统，里面的各个零件可以拆开来各自研究的：比如人的注意力、记忆，或者某种感受。它有许多的研究内容都是很微观的概念和现象，这些（短期）现象发生得非常快、并且在自然环境下受各种因素影响干扰，很难测量。因此为了在现象或概念间建立有力的因果关系，认知心理学作为横跨社科和自然科学两个领域的一门学科，向自然科学取经从而发展出了很成熟的控制实验技术（包括咱们比较常见的眼动仪实验）。这个方法后来辐射到了各个其他社会学科中，又诞生了“实地实验”（field experiments，自然实验/社会实验）的说法，其思路很像我们今天经常做的 AB test。

如何做一个可靠有效的AB测试？从这两方面入手！ AB测试的好处相信每个互联网从业者多少应该都知道，简单的说就是设置几组不同方案比较，通过上线后的数据判断哪个效果好。

阅读文章 >

还是拿我们上篇文章的“可爱小猫论”作案例，假设你是一个很有才华的心理学家，发现小猫可爱程度会影响人的身心健康，养越可爱的猫越有利于身心健康。你要如何证明这一点？

首先我们需要确定这个现象普遍广泛存在，而不是仅仅存在在你这个猫奴身上的个例，因此一定需要通过定量的方法做验证。

其次，在现实生活中能对人的身心健康产生影响的东西太多了，比如这个月老板老给你穿小鞋，导致你身心受到了巨大打击；下个月你苦练搏击，身心健康又增长不少，那么如何从这么多因素中抽离出猫咪对你的影响，而过滤职场/锻炼/饮食等其他因素的影响？

最后，也许养猫和身心健康是有关系，但其实是身心健康较弱的人更不愿意养猫，而非反过来——如何能准确探究这两个因素的关系？

答案是在实验室环境下严格地控制变量，通过对实验环境和环节的科学设置、对被试者情况的筛选和抽样来确保得到精准的结果。比如你可以假设被试对猫的喜爱程度、猫的可爱度都可能影响实验结果，所以你可以被试分成 4 个单元小组：不可爱的猫配不喜欢猫的人、可爱的猫配不喜欢猫的人、不可爱的猫配喜欢猫的人、可爱的猫配喜欢猫的人。

在测量了人的初始身心健康程度后，让他们与猫呆 3 小时，然后再次测量人的身心健康程度。此外还需要配备一个对照组，这个组的人只能看 3 小时动画片——这就是一个很简单的小实验。

由此可以看出控制实验法和其他的研究方法相比，完全脱离了情境，所以实验室内的结果是否可以推广到实际生活中去，是需要打一个大大的问号的，但正因为如此，实验法也为验证因果关系创造了可能性。这一点也就是我之前在不要从“交互设计定理”入门交互设计中强调的。

说回到咱们的可用性测试，根据《人因学手册》的说法，可用性测试在 80 年代初被提出后马上在 80～90 年代风行于业界，影响了施乐（Xerox）、苹果、IBM 等一代明星公司的产品评估流程。在可用性测试引进之初从业者仍然比较严格地遵守控制实验的方法，对测试的环节设计、环境设置要求十分严格，是一种主要用于评估/对比设计方案的、定量的、脱离情景的手段。举个例子，为了得到比较严谨的结果，可用性测试应该：

做预测试：在设计完实验流程后需要先找一些被试，看看控制变量的手段是否有效

考虑组内实验还是组间实验：比如是找同一个用户测试 3 组设计图，还是 3 个不同的用户每人测试 1 组设计图

考虑实验顺序：假如找同一个用户测试 3 组设计图，那么先看哪个、后看哪个

……

此外，各个公司会为了可用性测试搭建专门的、昂贵的可用性实验室。在实验室环境下对用户发布任务、进行测试，主要是为了规避噪音、灯光、外来人员打断等干扰因素对实验结果的影响。比如下图就是一个典型的可用性测试实验室。

发展与“5 个就够了” 90 年代后随着可用性测试相关的应用和研究快速发展，可用性测试的概念也从验证性研究逐渐扩展到形成性的、探索性研究。对可用性测试的要求也远远没 80 年代那么高了，到今天据我所知很多厂的 用户研究 部门把可用性测试理解地很宽泛，只要和用户有接触、只要设置了任务，都可以勉强讲是“可用性测试”。这样做测试不再需要严格的实验室环境与变量控制技术，反而更加偏向实地调研，让用户在自己熟悉的环境中完成任务。造成这个发展的原因其实有很多。

首先，软件开发模式变了。70～80 年代盛行的瀑布流式开发，要求软件的设计开发者一次性完全完成一个环节后，再迈入下一个环节。比如你做设计时，需要提前想好未来需要应对的所有场景，一次把几千张设计图全部交付开发，开发开始写所有的页面，写完了这几千张图再上市。这种开发模式在 90 年代被敏捷开发或迭代开发逐渐替代，这要求设计者出一版能用的先做出来，根据用户反馈再迭代之前的想法。因此，设计师对于快速定位设计问题的诉求大大提升，而可用性测试作为一种有用户参与的评估方式（可能是唯一一种），可以满足这种诉求。

其次，从调研目的的角度上来讲，我们作为设计者说到底和科学家做的事儿是不同的。对于科学家来讲研究概念之间的相互关系是有意义的，其最终的目的是形成一个具有解释力的学说。但对于设计师来说我们需要选出更优的设计，但并不关心究竟是哪个变量导致了设计最优、变量之间相互的关系。比如你可能做了两个稿子，A 稿红色按钮放右边、B 稿橙色按钮放左边，最终用户觉得 B 稿好，你的研究就结束了；而心理学家需要去思考到底是位置、颜色，还是别的什么因素影响了用户的什么体验，最终导致用户的决策。

对控制变量的严格要求，最终导致做一场严格的控制实验成本超高，除去复杂的控制变量带来的成本以外，为了让整个实验可以使用统计学分析，一般会要求每个单元小组的样本量大于 30——做学术也许可以不那么考虑成本，但企业总是会思考投入产出比。

比如 90 年代软件业界就曾经把当时出现的专家启发式评估、认知走查这些无需用户参与、专家进行即可的方法当成可用性测试的廉价替代品。虽然后来被证实没有方法可以替代用户评估——专家走查出来的问题往往不是真实用户遇到的问题，而往往是一些无伤大雅的小细节。

最后，90 年代尼尔森写了一篇关于可用性测试样本量的文章，极大地鼓舞了用可用性测试做探索性研究、寻找可用性问题的做法。这篇文章我最开从《用户体验度量》里读到，我把这个理论叫“5 个就够了”论。

尼尔森将此前为一些产品做的可用性测试与专家评估结果整理了一下，用一个泊松模型来预测参与可用性测试的用户数或参与评估的专家数与最后找到的可用性问题的比例之间的关系，最终“发现 5 个用户就能发现 83%的问题”。下面这张图能看出来假如拆分了可用性测试和专家评估，那么可用性测试需要的人数稍微多一些，5 个用户大约能发现 70%的问题。

现在看来尼尔森这个模建得说不上多么精细。注意这个图里的因变量是百分比，“1”代表“所有被发现的问题”，而不代表“本系统所有可能存在的问题”，所以尼尔森这个结论正确的解读方式是，假设他们测试了 20 个用户最终发现了 10 个问题，那么 5 个用户就能发现其中 8 个问题。

这种问题的重叠很有可能是因为对用户的不当抽样带来的。比如我们现在很多系统存在不同的用户角色与用户场景，用户个体的技能水平也有差异，因此不同用户组的关注点、问题点可能都是不一样的，很可能这一组用户找不到另外一组的问题，这一点在《用户体验度量》也有所说明。

后来尼尔森在他公司的网站上对“5 个就够了”论做出了补充，当前版本的可用性测试结合了设计迭代的动作，更偏向定性的、个案研究的思路。按他现在的话来讲，可用性测试这个事情应该多次多轮的进行：首先选取 5 个人可用性测试-然后马上对设计进行修改和迭代-再找另外 5 个人重复进行可用性测试，看看他们有没有新的观点，如此多轮往复，最终打磨出一版好设计。

对尼尔森这套想法感兴趣的看这里： https://www.nngroup.com/videos

怎么做更好 我们总结一下：假如你不太熟悉可用性测试的发展脉络，那可能会对这个东西有点犯迷糊：一会要设置任务，一会要发问卷，一会又要观察用户的动作；一会 5 个就够了，一会又要多找几个人。简单来讲：

假如你做可用性测试是为了发现问题，5 个人够了。虽然要设置任务但不需要太严谨，以快取胜；假如你做可用性测试是为了对比方案/评估方案的优劣程度，5 个人不够。严格来说每个组至少 30 人，但我们毕竟不做学术，少一点也勉强可接受。虽然今天已经基本不做严格的实验设计，但应该尽量减少对用户的言语干扰、指导，让用户自由体验产品。

最后关于样本量的事情我再多说两句。虽然调研的用户数量是一个困扰大部分设计师的问题，但根据我个人的经验来看，可用性测试是“多做比少做好，但做了一定比不做好”的一件事。对上线前的飞机稿来说，即使你只找 1 个用户看了你的设计，甚至你只找同事看了一眼你的设计，都会比你闭门造车要更好。不要惧怕做体验调研，也不要认为非要花多大代价才算在做体验调研。

欢迎关注作者微信公众号：「白话说交互」

TCC 推荐：大家好，这里是 TCC 翻译情报局，我是张聿彤。在设计按钮时，你是否会纠结如何去设计按钮的文案？这篇文章指出，设计好按钮的微文案可以有效地激励用户采取行动、提供给用户有用的帮助信息和行为反馈，文章中还提供了如何设计按钮微文案的 7 条建议，我们一起来学习一下吧~

微文案指南

4500字干货！写给设计师的微文案设计指南 前言 公开演讲者 Hamza Yusuf 曾这样说过“永远不要削弱语言的力量，言动于心, 心动于身”。

阅读文章 >

微文案（顾名思义）是那些可在网站、APP 和产品上看到的简短文案。根据 Roberts（2017），它有 三个主要作用：

激励用户做出行动 引导用户 为用户提供行为反馈 微文案在表单、文本、标签、弹出窗口和按钮上都能看到。这是一个相对较新的术语和概念，由 Joshua Porter 于 2009 年在其博客文章“如何撰写 微文案 ”中提出。他提出在正确的时间、正确的地方添加一些文案内容，可以提升整个产品的 用户体验 。

为了设计有效的微文案，我们需要思考用户处理信息和阅读文本的方式。多项来自尼尔森诺曼集团的研究的研究表示：

眼动研究表明对于文化程度较高的用户来说，扫视文本是一种极为常见的行为。用户在页面上平均只会阅读大约 20% 的文本。

通过结合简洁、易扫和客观的微文案，可以显著提高可用性（124%~159%），从而提升用户的使用的流畅性和满意度。

什么是好的微文案？ 巴特说：“好的微文案具有以下特点：a）清晰、简洁、易于理解；b）它能呈现出品牌声音和品牌基调；c）它在视觉上是合适的，感觉上像是设计的一部分”

好的微文案可以解决用户的需求、回答用户的问题或建立同理心（取决于所讨论的产品），并在用户心中建立信任。它能激励用户采取行动（例如，注册帐户、完成预订）。最后，好的微文案可以预测并解决用户问题（例如，防止错误）。

有研究发现，微文案“减轻了用户担心的情绪，提供了有用的报错信息和明确的语言表达，并有助于为用户提供操作提示”。

下面列出了一些有助于优化按钮微文案的建议：

使用动作动词 应该要使用动作动词，而不是泛指词。应避免使用“是”或“否”，因为它们可能会产生歧义并让用户混淆。

在 交互设计 中，用户先阅读对话框的内容然后才进行操作。如前所述，研究表明大多数用户通过扫视页面的方式来获取相关信息，而不是去仔细阅读所有信息。这意味着，如果他们跳过或误读了对话框，他们最终会按错按钮。使用被动描述的文案会迫使用户做更多的工作。通过按钮文案来确认接下来要做的动作，会减少出错的机会，并减少用户的工作量。

在下面的示例中可以看到（ 受 UX Movement 的启发 ）。当对话框文本没加载出来，只有按钮可见时，按钮的文案是用户唯一可用的信息。动作动词可以帮助他们采取行动，但使用“是”或“否”文案的按钮就不能达到这个目的。所以很显然带有动作动词的按钮任务效率更高，可以防止用户出错。

赋予动作动词的按钮的任务效率更高，可以防止用户出错

使用任务导向的文本 按钮应与动作操作匹配。按钮应该始终清楚地描述用户单击按钮时将会执行什么操作。如果用户对点击按钮后发生的事情感到不确定或惊讶，那么微文案就可能存在着问题。

“提交”一词就是一个很好的例子，它可以用于大多数按钮。正如 UX Movement 的 Anthony 所建议的：“如果文案不是针对任务场景来描述的，当用户看到它时，就不知道会发生什么。”因此，用户会对他们的行为会产生什么结果而感到困惑。避免这种情况的一种方法是使用描述用户任务结果的微文案。

这可以通过使用针对任务场景描述的文案而不是通用的文案来实现。这让用户认知更清晰，并为他们的行动提供了确定性。请记住，用户通常会扫视页面以获取相关信息。为了改进用户体验，微文案应该准确地描述用户在任务中所做的事情。例如，如果用户正在删除照片，则“删除”的按钮会告诉用户单击动作按钮将会删除照片，这对于他们的任务来说是明确而具体的（见下例）。

使用针对任务场景的语言可以使文案更清晰（右侧示例）

一致性 为按钮编写文案时，保持一致性很重要。研究表明，一致性可以帮助用户准确地建立产品工作方式的心理模型，从而最终获得更好的用户体验。设计微文案的一些具体准则可以帮助我们达到这一目的。例如，你可以：

规范字数：不同组件平均应该有多少个词？每个按钮一个、两个或多个单词。 选择大小写：例如整个产品始终使用大写字母，你也可以在句子大小写、标题大小写、大写或小写之间进行选择（稍后将详细介绍…） 文案结构：你需要确定文案的结构。它们是否仅包括一个动词或是动词与名词的组合（例如“动词”+“名词” 或 “动词” 或 “动词” +a+ “名词” ）？ 对特定含义的用词表达一致：词语选择上的细微差异可能会对用户体验产生影响。例如，正如 Tobias van Schneider 所报告的，“请求定价”和“获取报价”描述了相同的动作，但在不同的产品中却产生了不同的结果。 提高透明度 有时，数字产品可能会出于安全和隐私原因（ 例如，要求用户提供敏感信息 ）而引起用户担心。在这些情况下，微文案可以帮助我们减轻用户潜在的忧虑，并与他们建立信任关系。

例如，如果人们在进行交易时感到不安全或可疑，他们可能最终无法完成交易行为。

Bhatt 提供了一些示例场景： 要求用户提供过多的个人信息 有关产品保修/维修/更换的内容未进行详细说明 为免费试用订阅的用户询问信用卡详细信息 有效的微文案可以告知用户询问信息的原因以及如何使用这些信息 —— C.巴特

下面有一个很好的例子；Airbnb 通过点击 “预定” 按钮，通知用户他们在这一步 “不会被收费”。

来自 Airbnb 网站的截图

避免使用行业术语 有效的微文案应该是对话式的。不应使用行业术语和底层的技术内容（ 如错误代码 ）。用户应该感觉的是他们在和另一个人说话，而不是一台机器。罗伯茨建议，“微文案应该使用简单的语言，由最少的词组成”。这意味着除非特殊情况，否则我们应该避免使用行业术语。这其实是一件比较难实现的事情，因为我们对我们所设计的产品以及我们每天遇到的行业术语非常熟悉。解决这个问题的一种方法是与用户一起测试微文案，看一下 他们懂我们使用的语言吗？

下面展示了一个示例。与“启用”这个词相比，用户可能更熟悉“打开”这个词。

避免使用专业术语

注意字母大写形式 根据 Vaishnav Shravan 的说法，“大写是 UX 写作中提高文本元素理解和一致性的工具，需要给予应有的重视”。最流行的大写形式有：句子大写（ 仅句子的第一个字母和专有名词大写 ）、标题大写（ 除冠词、连词和标题外的每个单词的第一个字母大写 ）和每个字母大写。

选用哪种大写风格取决于你的产品。一般来说，如果文本是面向国际的内容，请使用句子的大写，因为这样更利于国际化（ 除非产品面向美国受众 ）。标题大写可用于标题/副标题/文案文本（<4 个单词）。在大多数情况下（ 双关语 ），为了保持一致性，最好在产品中统一选择一种格式。

大写的两个例子：左侧为标题示例，右侧为句子示例

深度了解用户 好的微文案应该在用户使用你的产品时提供信息和帮助。为了实现这一目标，了解用户是谁并了解他们的需求是很重要的，所以通过用户测试来确定微文案是否有效是必要的。用户访谈可以帮助我们更好地了解用户，A/B 测试可以用来确定微文案的哪些变化对用户体验的影响最大。

欢迎关注作者微信公众号：「TCC翻译情报局」

编者按：NNGroup 的撰稿人 Kate Moran 最近有几篇关于奢侈品牌、产品和用户的文章非常有意思，这类产品和用户人群和我们日常所涉及到的产品和用户有着一定的差别，在产品逻辑和运营方式上也有着诸多反逻辑的特征，这些产品特征和逻辑可以作为某些产品和特定设计的参考，甚至对于用户消费行为和习惯，也是一个有趣的印证。另外，虽然文章本身探讨的是奢侈品牌和产品，但其实如今很多非 奢侈品 也有类似的特征，因此这篇文章对于这类产品的设计、运营也有相当的借鉴和参考价值。

下面是正文。

在过去几年时间里，奢侈品牌（Gucci、路易威登、 香奈尔、Fendi、爱马仕等等 ）一直在试图改变他们在数字化领域的形象以及电商领域内的服务。这种转变主要是2种原因促成的：

数字时代原住民消费力的崛起：千禧一代和Z世代用户将会快速转变为奢侈品消费的的主力，而这些用户对于数字化产品、 全渠道路径和社交体验都寄予厚望。

2020-2022 年新冠疫情的爆发：突然之间，过去强烈依赖线下门店渠道的奢侈品牌，不得不选择为无法离开家的用户提供奢华的体验。比如 Gucci 的母公司开云集团，在2020 年电商销售额增加了 72% 。

这两个因素让奢侈品品牌对于数字化战略和线上营销的兴趣大幅增加，而这些品牌中的多数也确实在尽力提升这些影响力，但是同时又试图维持原有的品牌核心价值观。

这两者本质上是存在冲突的，在 Don Norman 的用户情绪反应理论中，对此有所解释，这涉及到本能、行为和反思三个层面。奢侈品的价值深深的植根于「反思性」中的情感吸引力，换句话来说，就是人们被奢侈品品牌所吸引，是因为他们和这些品牌的情感联系反映出来他们自身的身份认知。专注于这种反思层面特征（无论是否是奢侈品牌）的公司有时会忽略行为层面的可用性。

注：本能、行为、反思三个层级反应在产品当中的效果是不同的，下意识被产品造型和美感所吸引是本能层次的特征，对于产品的易用性和功能所吸引是行为层次的反应，而产生情感连接，出于文化、仪式感和个人经历而做出的选择和热爱，则是反思层次的特征。

更多可以参考下面的文章：

情感｜设计的三个层次，帮你重开情感化设计的大门 我们正在进入一个信息复杂度远超以往的时代。

阅读文章 >

为了了解奢侈品牌电商设计和可用性之间的关系，我们进行来一系列的用户研究会议，同时使用了可用性测试和用户访谈两种方法，来探索这个结果。研究结果将会以三篇文章的形式呈现：

为什么这么多奢侈品牌在电商领域表现糟糕（本文） 奢侈品购物的用户群和用户历程 将奢侈品原则应用于电商设计的正确方式 奢侈品是什么 确定奢侈品的精确定义有点麻烦，因为它是一个难以捉摸的概念，在不同的语境和环境下可能 不同的形态。为了更好地服务于当前的研究，我定义了四个类别，而它们主要由（1）产品或服务的成本和（2）用户获取（找到并购买）它们的难易程度 两方面所决定。

大众市场：这些产品或者服务是大规模生产的，消费者可以很容易获得，通常价格是合理的或是低廉的

溢价产品：这些产品或者服务的价格是高于大众市场的，并非所有的消费者都能负担得起，这些产品的价格通常是由更好的质量或者是设计来证明的。这些产品的制造商会尽可能多地增加供应来满足需求。

奢侈品：这些高质量的产品或服务，价格高到许多消费者买不起。而高昂的价格一部分是借由高品质来证明，但是更重要的是借助用户和品牌之间的情感联系加持得来。奢侈品牌通常拥有狂热的追随者，而奢侈品则通常可能是身份的象征。奢侈品牌故意使供应量低于需求，同时让负担得起这个价格的用户来购买。

顶级奢侈品：顶级奢侈品的价格高到了世界上少有人能买的起，这类产品甚至是单靠有钱都不一定能买到这些产品和服务——通常只有VIP 或者老客户甚至只有名人才能获得这些商品和服务。这种顶级奢侈品的意义在于本身的独特性。

价格越高，越难获得的产品和服务，就越奢侈

在某些情况下，一个品牌可能仅仅只是存在于一个类别当中，比如 GAP 和 Target 就仅仅服务于大众市场，而 Lululemon 仅仅服务于高端市场。而有的品牌会同时提供不同市场级别的东西，比如爱马仕提供的配饰，有的只要几百美元，在他们的网站上也很容易买到，这种是一种奢侈品，但算不上顶级奢侈品。然而他们的柏金包，售价数万美元，只有 VIP 客户可以获得。

奢侈品按照自身的规则行事 奢侈品牌的规则和其他零售行业的规则大不相同，主要因为购买奢侈品的决策过程通常是高度情绪化的，甚至有点不切实际。奢侈品的营销，在很大程度上依赖的是他们所建立和保护的品牌叙事——主要是围绕着质量和排他性。

大多数的零售商，会向尽可能多的受众销售产品，而这也是产品本身所具备的扩张趋势，但是奢侈品牌则不同，它是警惕扩张的。而且，在可获得性和价格上也和大众消费品不同的——拥有这个产品的人越多，它的排他性就越低。这些品牌「不想」卖给所有人——他们想将产品卖给「合适」的人。它们存在的意义，就是「定义社会地位」。因此，「奢侈品的规则有时会公然地违反可用性」。他们想让客户「通过工作来赚取产品」。

在《奢侈品战略》一书当中，JN Kapferer 和 V.Bastien 阐述了他们所谓的奢侈品牌「反向营销法」，其中的规则包括：

4、「让非狂热者远离」。奢侈品牌必须尽量确保购买产品的人理解并且相信品牌的价值。换句话说，他们不应该让任何人都来购买产品，这条规则与奢侈品牌限制客户群的需求高度相关。

7、「让客户难以购买」。这条规则与典型的电商 用户体验 完全相悖。这条规则背后的基本理念是，如果奢侈品的购买者需要努力工作之后，才能获得一件奢侈品（例如需要搜索、等待或者需要单独取得资格才能获得），那么他们就会更加重视它。

24、「在互联网上只有少量销售」。这本书最初是在 2012 年的时候出版，当时作者认为「电商」是和「即时性」、「可访问性」、「可用性」、「服务自动化」、「众包」等词是互通的——对奢侈品行业来说是巨大的缺陷。购买奢侈品是需要花费大量的时间、精力和金钱才能取得的。

虽然 《奢侈品战略》一书出版之后，奢侈品营销已经发生了许多变化，但是书中所 摘录的这些关于奢侈品牌抵制和对抗数字化的战略线索，足以说明它本身的特性。在这些奢侈品牌公司当中，从上到下都在警惕和对抗着电商，因为电商就是反奢侈品的。

典型的电商策略是不适用于奢侈品的 奢侈品牌在电商领域的问题 ，有一部分原因是他们确实很难找到了解奢侈品牌数字领域的战略顾问。我们采访了专职奢侈品牌研究、培训的战略咨询公司 Luxury Institute 的高级顾问 Katherine Sousa。

「奢侈品客户体验与数字化之间存在严重脱节。奢侈品牌引入了在其他行业取得过成功的外部专家，但是这些专家并不了解奢侈品牌和奢侈品消费者。他们认为他们可以使用相同的战略和战术，但是通常这种操作都会失败。」

她告诉我们，外部专家曾希望获得奢侈品用户的反馈，但是奢侈品牌并未这么做：

「外部顾问团队希望获得消费者关于用户体验的反馈，但是奢侈品牌的一位高管对此的回应是，这很俗气，因为奢侈品牌从不会向用户获取反馈。」

这件小事反映了现代奢侈品牌面临的核心挑战在于，如何在不损害奢侈品牌价值的情况下，采用数字化战略，又提供积极的体验？Sousa 认为，关键在于如何取得平衡：

「反馈无疑是至关重要的。有非常微妙但是足够成熟的方式来寻求品牌的意义，并获得符合奢侈品牌价值观的反馈。当客户在一个手提包上花费了2w美元的时候，你毫无疑问不能像达美航空那样去寻求用户反馈。奢侈品牌当前正在尽最大努力来数字化，但是他们在战略和执行层面上，又很难满足当下奢侈品用户所期许的结果。」

奢侈品牌需要适应电商的逻辑，但是电商和奢侈品牌之间的天生错位，使得很多奢侈品牌在电商领域的尝试以失败告终。

数字购物体验远落后于店内购物体验 对于奢侈品牌而言，店内体验为王。我们采访的奢侈品用户反馈道，他们看重的是店内购物体验中以下的几个要点：

细心又亲切的销售人员：「我们在 David Yurman 的第一次购物体验非常好，店员让我们试穿了店里几乎所有的单品，他们非常有耐心，一点也不咄咄逼人。」

VIP 待遇：「店员总是用香槟或者葡萄酒来接待我，这看起来只是额外的客户关怀，但是这也是独特的购物体验。」

平静而独特：「在奢侈品牌店里购物是平静而独特的，通常组织良好，选品也不会多到让人无可适从，店里的人员流动也较少。」

与销售人员的长期个人关系：「我真的很喜欢和多年前第一次购物时结识的店员建立个人联系，她知道我买过什么，这种关系的一致性真的太好了，让我对这个品牌有独特的体验。」

对大宗奢侈品购买充满信心：「我喜欢触摸和感知到具体物品，看到他们是如何被选中，怎么被安置。我喜欢亲自去购买，因为这样可以最大限度地减少我退货的频率。」

奢侈品牌始终还是将店内体验置于数字体验之上。不幸的是，亲身参与的店内体验同样也导致了数字体验的优先级较低。在我们的研究当中，我们观察到很多奢侈品的消费者，在尝试过先上购买奢侈品之后，因为不佳的体验，而被迫选择重新回到店内进行购物。这对于日常工作繁忙且住在郊区的消费者而言尤其烦人（奢侈品店往往比起其他连锁店更少，即使是在很多大城市可能都不是特别全）。有的客户可能会选择直接放弃从品牌门店购买，而是转向大型的奢侈品百货，或者是 Moda Operandi 等奢侈品平台，而这种情况发生的时候，意味着品牌失去了对自身产品的展示权和控制权。

由于奢侈品牌在线上销售不够可观，导致他们继续优先考虑店内体验，而这种决策又加剧了当下的问题，成熟奢侈品牌由于其积极忠诚的受众，使得这一循环得到了进一步的强化，这也使得受众本身进一步得到筛选。

品牌电商体验糟糕的自我循环

奢侈品在店内和线上购物的差异 疫情和受众年轻化让奢侈品牌意识到他们需要使用个更加复杂的、数字化的方式来维持他们的受众的品牌忠诚度。

「我认为我们正处于一个消费者不再接受产品描述很少的时代，新的奢侈品消费者对此有明确的需求。疫情让奢侈品牌不再有选择，他们的产品和服务不可避免地走向数字化，电商成为了必选项。很多奢侈品牌争先恐后地开始做出改变，电商和品牌数字化终于被优先考虑和对待。」

「奢侈品牌正在将越来越多的预算分配到数字化工具和战略上，但是它的路径和亚马逊不同，奢侈品的在线购买也绝不是一键下单搞定的。当然，奢侈品的购买体验应该是无缝的，优质的，但是它的核心应该是建立情感联系。」

——奢侈品研究所高级顾问 Katherine Sousa

奢侈品牌依然会重视店内体验，但是他们将会在数字化的时代逐渐成长，也许能够找到合理的平衡点。

关于下一篇文章 有趣的地方在于，有很多品牌即使没有打上奢侈品的标签，但是如果品牌和产品追求的是反思层的「情感连接」（其实很多涉及抢购、预订、客制化的产品都有类似属性），都需要面对品牌价值和可用性之间的平衡。

这个系列文章的下一篇将会继续探讨奢侈品牌在电商领域的探索和状态，同时探讨在不牺牲品牌特质的情况下改善数字体验的方法。

编者按：NNGroup 的撰稿人 Kate Moran 最近有几篇关于奢侈品牌、产品和用户的文章非常有意思，这类产品和用户人群和我们日常所涉及到的产品和用户有着一定的差别，在产品逻辑和运营方式上也有着诸多反逻辑的特征，这些产品特征和逻辑可以作为某些产品和特定设计的参考，甚至对于用户消费行为和习惯，也是一个有趣的印证。另外，虽然文章本身探讨的是奢侈品牌和产品，但其实如今很多非 奢侈品 也有类似的特征，因此这篇文章对于这类产品的设计、运营也有相当的借鉴和参考价值。

下面是正文。

在过去几年时间里，奢侈品牌（Gucci、路易威登、 香奈尔、Fendi、爱马仕等等 ）一直在试图改变他们在数字化领域的形象以及电商领域内的服务。这种转变主要是2种原因促成的：

数字时代原住民消费力的崛起：千禧一代和Z世代用户将会快速转变为奢侈品消费的的主力，而这些用户对于数字化产品、 全渠道路径和社交体验都寄予厚望。

2020-2022 年新冠疫情的爆发：突然之间，过去强烈依赖线下门店渠道的奢侈品牌，不得不选择为无法离开家的用户提供奢华的体验。比如 Gucci 的母公司开云集团，在2020 年电商销售额增加了 72% 。

这两个因素让奢侈品品牌对于数字化战略和线上营销的兴趣大幅增加，而这些品牌中的多数也确实在尽力提升这些影响力，但是同时又试图维持原有的品牌核心价值观。

这两者本质上是存在冲突的，在 Don Norman 的用户情绪反应理论中，对此有所解释，这涉及到本能、行为和反思三个层面。奢侈品的价值深深的植根于「反思性」中的情感吸引力，换句话来说，就是人们被奢侈品品牌所吸引，是因为他们和这些品牌的情感联系反映出来他们自身的身份认知。专注于这种反思层面特征（无论是否是奢侈品牌）的公司有时会忽略行为层面的可用性。

注：本能、行为、反思三个层级反应在产品当中的效果是不同的，下意识被产品造型和美感所吸引是本能层次的特征，对于产品的易用性和功能所吸引是行为层次的反应，而产生情感连接，出于文化、仪式感和个人经历而做出的选择和热爱，则是反思层次的特征。

更多可以参考下面的文章：

情感｜设计的三个层次，帮你重开情感化设计的大门 我们正在进入一个信息复杂度远超以往的时代。

阅读文章 >

为了了解奢侈品牌电商设计和可用性之间的关系，我们进行来一系列的用户研究会议，同时使用了可用性测试和用户访谈两种方法，来探索这个结果。研究结果将会以三篇文章的形式呈现：

为什么这么多奢侈品牌在电商领域表现糟糕（本文） 奢侈品购物的用户群和用户历程 将奢侈品原则应用于电商设计的正确方式 奢侈品是什么 确定奢侈品的精确定义有点麻烦，因为它是一个难以捉摸的概念，在不同的语境和环境下可能 不同的形态。为了更好地服务于当前的研究，我定义了四个类别，而它们主要由（1）产品或服务的成本和（2）用户获取（找到并购买）它们的难易程度 两方面所决定。

大众市场：这些产品或者服务是大规模生产的，消费者可以很容易获得，通常价格是合理的或是低廉的

溢价产品：这些产品或者服务的价格是高于大众市场的，并非所有的消费者都能负担得起，这些产品的价格通常是由更好的质量或者是设计来证明的。这些产品的制造商会尽可能多地增加供应来满足需求。

奢侈品：这些高质量的产品或服务，价格高到许多消费者买不起。而高昂的价格一部分是借由高品质来证明，但是更重要的是借助用户和品牌之间的情感联系加持得来。奢侈品牌通常拥有狂热的追随者，而奢侈品则通常可能是身份的象征。奢侈品牌故意使供应量低于需求，同时让负担得起这个价格的用户来购买。

顶级奢侈品：顶级奢侈品的价格高到了世界上少有人能买的起，这类产品甚至是单靠有钱都不一定能买到这些产品和服务——通常只有VIP 或者老客户甚至只有名人才能获得这些商品和服务。这种顶级奢侈品的意义在于本身的独特性。

价格越高，越难获得的产品和服务，就越奢侈

在某些情况下，一个品牌可能仅仅只是存在于一个类别当中，比如 GAP 和 Target 就仅仅服务于大众市场，而 Lululemon 仅仅服务于高端市场。而有的品牌会同时提供不同市场级别的东西，比如爱马仕提供的配饰，有的只要几百美元，在他们的网站上也很容易买到，这种是一种奢侈品，但算不上顶级奢侈品。然而他们的柏金包，售价数万美元，只有 VIP 客户可以获得。

奢侈品按照自身的规则行事 奢侈品牌的规则和其他零售行业的规则大不相同，主要因为购买奢侈品的决策过程通常是高度情绪化的，甚至有点不切实际。奢侈品的营销，在很大程度上依赖的是他们所建立和保护的品牌叙事——主要是围绕着质量和排他性。

大多数的零售商，会向尽可能多的受众销售产品，而这也是产品本身所具备的扩张趋势，但是奢侈品牌则不同，它是警惕扩张的。而且，在可获得性和价格上也和大众消费品不同的——拥有这个产品的人越多，它的排他性就越低。这些品牌「不想」卖给所有人——他们想将产品卖给「合适」的人。它们存在的意义，就是「定义社会地位」。因此，「奢侈品的规则有时会公然地违反可用性」。他们想让客户「通过工作来赚取产品」。

在《奢侈品战略》一书当中，JN Kapferer 和 V.Bastien 阐述了他们所谓的奢侈品牌「反向营销法」，其中的规则包括：

4、「让非狂热者远离」。奢侈品牌必须尽量确保购买产品的人理解并且相信品牌的价值。换句话说，他们不应该让任何人都来购买产品，这条规则与奢侈品牌限制客户群的需求高度相关。

7、「让客户难以购买」。这条规则与典型的电商 用户体验 完全相悖。这条规则背后的基本理念是，如果奢侈品的购买者需要努力工作之后，才能获得一件奢侈品（例如需要搜索、等待或者需要单独取得资格才能获得），那么他们就会更加重视它。

24、「在互联网上只有少量销售」。这本书最初是在 2012 年的时候出版，当时作者认为「电商」是和「即时性」、「可访问性」、「可用性」、「服务自动化」、「众包」等词是互通的——对奢侈品行业来说是巨大的缺陷。购买奢侈品是需要花费大量的时间、精力和金钱才能取得的。

虽然 《奢侈品战略》一书出版之后，奢侈品营销已经发生了许多变化，但是书中所 摘录的这些关于奢侈品牌抵制和对抗数字化的战略线索，足以说明它本身的特性。在这些奢侈品牌公司当中，从上到下都在警惕和对抗着电商，因为电商就是反奢侈品的。

典型的电商策略是不适用于奢侈品的 奢侈品牌在电商领域的问题 ，有一部分原因是他们确实很难找到了解奢侈品牌数字领域的战略顾问。我们采访了专职奢侈品牌研究、培训的战略咨询公司 Luxury Institute 的高级顾问 Katherine Sousa。

「奢侈品客户体验与数字化之间存在严重脱节。奢侈品牌引入了在其他行业取得过成功的外部专家，但是这些专家并不了解奢侈品牌和奢侈品消费者。他们认为他们可以使用相同的战略和战术，但是通常这种操作都会失败。」

她告诉我们，外部专家曾希望获得奢侈品用户的反馈，但是奢侈品牌并未这么做：

「外部顾问团队希望获得消费者关于用户体验的反馈，但是奢侈品牌的一位高管对此的回应是，这很俗气，因为奢侈品牌从不会向用户获取反馈。」

这件小事反映了现代奢侈品牌面临的核心挑战在于，如何在不损害奢侈品牌价值的情况下，采用数字化战略，又提供积极的体验？Sousa 认为，关键在于如何取得平衡：

「反馈无疑是至关重要的。有非常微妙但是足够成熟的方式来寻求品牌的意义，并获得符合奢侈品牌价值观的反馈。当客户在一个手提包上花费了2w美元的时候，你毫无疑问不能像达美航空那样去寻求用户反馈。奢侈品牌当前正在尽最大努力来数字化，但是他们在战略和执行层面上，又很难满足当下奢侈品用户所期许的结果。」

奢侈品牌需要适应电商的逻辑，但是电商和奢侈品牌之间的天生错位，使得很多奢侈品牌在电商领域的尝试以失败告终。

数字购物体验远落后于店内购物体验 对于奢侈品牌而言，店内体验为王。我们采访的奢侈品用户反馈道，他们看重的是店内购物体验中以下的几个要点：

细心又亲切的销售人员：「我们在 David Yurman 的第一次购物体验非常好，店员让我们试穿了店里几乎所有的单品，他们非常有耐心，一点也不咄咄逼人。」

VIP 待遇：「店员总是用香槟或者葡萄酒来接待我，这看起来只是额外的客户关怀，但是这也是独特的购物体验。」

平静而独特：「在奢侈品牌店里购物是平静而独特的，通常组织良好，选品也不会多到让人无可适从，店里的人员流动也较少。」

与销售人员的长期个人关系：「我真的很喜欢和多年前第一次购物时结识的店员建立个人联系，她知道我买过什么，这种关系的一致性真的太好了，让我对这个品牌有独特的体验。」

对大宗奢侈品购买充满信心：「我喜欢触摸和感知到具体物品，看到他们是如何被选中，怎么被安置。我喜欢亲自去购买，因为这样可以最大限度地减少我退货的频率。」

奢侈品牌始终还是将店内体验置于数字体验之上。不幸的是，亲身参与的店内体验同样也导致了数字体验的优先级较低。在我们的研究当中，我们观察到很多奢侈品的消费者，在尝试过先上购买奢侈品之后，因为不佳的体验，而被迫选择重新回到店内进行购物。这对于日常工作繁忙且住在郊区的消费者而言尤其烦人（奢侈品店往往比起其他连锁店更少，即使是在很多大城市可能都不是特别全）。有的客户可能会选择直接放弃从品牌门店购买，而是转向大型的奢侈品百货，或者是 Moda Operandi 等奢侈品平台，而这种情况发生的时候，意味着品牌失去了对自身产品的展示权和控制权。

由于奢侈品牌在线上销售不够可观，导致他们继续优先考虑店内体验，而这种决策又加剧了当下的问题，成熟奢侈品牌由于其积极忠诚的受众，使得这一循环得到了进一步的强化，这也使得受众本身进一步得到筛选。

品牌电商体验糟糕的自我循环

奢侈品在店内和线上购物的差异 疫情和受众年轻化让奢侈品牌意识到他们需要使用个更加复杂的、数字化的方式来维持他们的受众的品牌忠诚度。

「我认为我们正处于一个消费者不再接受产品描述很少的时代，新的奢侈品消费者对此有明确的需求。疫情让奢侈品牌不再有选择，他们的产品和服务不可避免地走向数字化，电商成为了必选项。很多奢侈品牌争先恐后地开始做出改变，电商和品牌数字化终于被优先考虑和对待。」

「奢侈品牌正在将越来越多的预算分配到数字化工具和战略上，但是它的路径和亚马逊不同，奢侈品的在线购买也绝不是一键下单搞定的。当然，奢侈品的购买体验应该是无缝的，优质的，但是它的核心应该是建立情感联系。」

——奢侈品研究所高级顾问 Katherine Sousa

奢侈品牌依然会重视店内体验，但是他们将会在数字化的时代逐渐成长，也许能够找到合理的平衡点。

关于下一篇文章 有趣的地方在于，有很多品牌即使没有打上奢侈品的标签，但是如果品牌和产品追求的是反思层的「情感连接」（其实很多涉及抢购、预订、客制化的产品都有类似属性），都需要面对品牌价值和可用性之间的平衡。

这个系列文章的下一篇将会继续探讨奢侈品牌在电商领域的探索和状态，同时探讨在不牺牲品牌特质的情况下改善数字体验的方法。

前言 在内容为主的用户界面设计上，图标起到了降低理解成本、高效传递信息等举足轻重的作用。随着矢量格式与高分屏的普及，对图标字体的精细度与视觉匹配度也有了更高的要求，这对设计师来说也是一个不小的考验。本篇将介绍目前业界优秀的图标案例，并以日常 图标绘制 中遇到的问题，解析背后原理给出对应解法。

拓展阅读

如何让图标更吸引人？复盘智行 Tab 图标设计过程 OMG！

阅读文章 >

注：以下部分示例仅为个人处理方法，仅供参考。

业界的优秀案例 “SF Symbols” 是苹果为 San Francisco 系统字体设计的一套内置图标合集，每个符号图形都能与所有磅重、大小的文本进行自动对齐，达到与字体无缝结合的效果。目前已更新到 3.0 版本，根据应用界面中各种使用、展示场景，默认提供 3,200 个符号各自拥有 9 种磅重，设计师可根据官方提供的合集库直接引用到设计稿中，或使用符号模板来添加自定义图标。

1. 多种磅重

“SF Symbols” 拥有与 “San Francisco” 字体相呼应的 9 种字重，在字母参考线（字母顶线与基线）下支持 Small、Medium 和 Large 3 种显示比例，总计 27 种样式，以达到与各个字形最佳的匹配效果。

图形磅重与比例参考表

图形比例与字形排列参考

2. 字形参照定位

以字体设计方式处理图形的垂直定位，在设计图标时需要将图形中心部分放置在模板基线以上的位置，系统读取时将根据图形基线计算图形的 baselineOffsetFromBottom（基线与底边的偏移值）进行垂直定位，使图形与文本的基线一致，达到图形和文本水平视觉对齐。

图形参考线

相同基线下对齐效果，重心处于小写字母区域

常用的块级元素对齐效果，重心稍微偏下

3. 多色应用

通过读取图形内的分层信息，可赋予每个分层不同的渲染模式达到更加丰富的表现形式。

不同渲染模式下的多色效果

4. 图形本地化适配

除磅重与比例以外，当图形出现需要使用文字表达含义时，针对特定语言与书写顺序 “SF Symbols” 提供了不同的适配图形，包含拉丁语、阿拉伯语、希伯来语、印地语、泰语、中文、日语和韩语等语言类型与 LTR/RTL（从左到右、从右到左）两种布局。

矢量规格的效率画法 随着像 Retina 这样的高分屏与 SVG、PDF 等矢量格式在设备上普及，文字和图标在精细度与匹配度上有了更多的追求，一般应用会根据常用的字体磅重去定义默认图标的粗细，因此我们会看到一些图标出现非整数规格的情况，这对新人来说会造成一定的设计门槛。

1. 微信的图标规格

以微信客户端为例，需要在 24*24pt 的网格中默认使用 1.2pt 线条进行绘制，同时在图形自然拐角处需要保持外圆内方的样式。

2. 为什么会有设计门槛

对新手来说在 Sketch、Figma 或 Photoshop 中使用描边设计非整数规格图标可以是噩梦，即便有经验的设计师在绘制过程中也会因为计算路径余数而影响设计效率，以 Sketch 为例路径属性中虽然支持像素对齐、半像素对齐和不对齐像素三种模式，但如果需要绘制 1.2x 描边时，我们只能使用不对齐像素的模式再计算路径落点位置，因此需要不断计算落点是否处于 0.2、0.8、0.2……

Sketch 的对齐模式

3. 建议方法：倍化绘制

所以在处理非整数图标时我们不妨把画板等比放大 5 倍，可以获得一个 120*120pt 的新画板同时描边放大为 6pt，这时候我们只需要使用像素对齐模式直接进行绘制即可，同理其他数值规格我们也可以使用倍化调整，使图形在画板内变成整数，最直接方式是小数点后奇偶数进行判断，奇数放大 10 倍，偶数放大 5 倍。输出资源时如果使用 svg 这类矢量格式可根据业务需要决定是否缩放输出，而位图则根据所需尺寸进行倍数缩放再输出。

4. 工具使用差异

使用 Sketch 对图形进行倍化后绘制和调整已经友好很多了，但是其实 Sketch 中还有不少绘制效率工具是没有放在默认工具栏里的，这里可以根据需要使用自定义工具栏把这些工具外置。

Sketch 中的路径工具

Figma 相对而言路径编辑功能比较简单，但依赖社区丰富的插件也能达到对应的效果，这里推荐一些常用的矢量图形处理插件。

虽然目前 sketch 的图形绘制功能已经很完善了，但依然存在一些限制，如路径断开后无法直接重新连接，特定角度绘制效率低等问题，从而影响设计的精确度和效率。这时我们可以把目光转移到一个老牌的矢量工具上“ Adobe Illustrator ”（后面简称 AI ），AI 中的隔离模式、方向滑移延伸和自定义网格本身非常适合矢量绘图，用来绘制图标也十分便利。

Sketch 与 AI 的对比，虽不公平但也是事实……

使用 AI 的网格系统，我们可以设定符合业务需要的对齐方式、键盘增量和网络间隔，且 AI 生成的路径是支持在 Sketch 或其他矢量工具中复制粘贴的。

适配自身规格的网格设置

使用 AI 自带的角度旋转功能时设置图形副本数量，保证了每个图形角度和方向都是准确的。

使用 AI 绘制实例演示

图标绘制的注意点 1. 等比分布

当我们需要绘制等比放大或扩散图形时，会遇到一种情况：等边图形或圆形可以直接使用工具进行等比缩放，但长矩形或者不规则图形等比缩放后会出现部分点、线不等比，这其实是一种理解上的误区，在把不规则图形等比放大时，我们需要的是点、线距离图形中心（非图层中心，而是几何中心）做等距偏移的效果，而工具一般会按图层中心来进行缩放，可能会造成效果上的误差。

常见图形在不同处理方式上产生的差异

清楚原因与差异后，只需选择对应偏移功能即可达到理想效果，等距偏移一般矢量工具都会自带，只是就使用习惯而言没有常用等比缩放容易理解与上手。以 AI 与 Sketch 为例，都能在路径、对象菜单中找到，且 AI 额外支持偏移后拐角属性设置。

AI 与 Sketch 下通过路径偏移获得等距缩放效果

2. 骨架与输出路径

日常涉及图标绘制的需求，建议可以先使用描边进行绘制，可以理解为把路径当做图形的骨架，再利用工具的描边样式塑造磅重拐角，这样我们可以有效的保留图形最大的可塑性和调整空间。

但同时需要注意，图标在输出前需要完全转化为轮廓以及封闭路径，以保证系统渲染模式的一致，并且这是所有平台都要求的。

SF Symbols 对路径轮廓化的要求

图标中的平衡 1. 面积配比

对应不同的业务，有时会基于用户对事物的认知，直接引用该事物作为基础图形进行图标绘制。因此会出现一些稳定性弱、长宽比例相差较大或形体单薄的图形，而我们会遵循已有的标准图标栅格进行绘制，这样会导致部分特征过于明显的图形在显示面积上出现视觉误差与中心浑浊。情况类似中文字体中出现的中宫、字怀（中宫：汉字重心区域范围、字怀：笔画之间的留白范围）紧凑。

按标准栅格绘制特征明显的图形

这时可以适当把图形延伸部分进行细微的外扩处理，使图形中心部分视觉上更加舒展。

对图形延伸部分外扩微调

2. 视觉对齐

通常使用工具的对齐功能实现图形间的相对关系是合理的，但我们在处理多边形时就会遇到 “已经用工具居中了，但看起来却没居中” 这种问题，这种现象一般是由于不同多边形的面积与宽高带来的视觉差造成的。

奇怪的对齐现象

以三角形播放按钮为例，在背景范围中绘制三角形时，我们可以先添加周长与三角顶点相接的圆形辅助定位，注意这里需要使用多边形工具设置的三角形而非默认的菜单中的三角形，因为默认的三角形是等腰三角形，不能用于这种情况。

与等距放大类似，先确定几何中心而非图层中心

这里推荐使用多边形工具设置三角形，除了因为是等边三角形外，在 Sketch、Figma 中这类图形未扩展的情况下工具是会自动填补图层范围，且直接对齐就是居中状态。

Sketch 多边形工具创建的三角形

总结 本文所提到的情况与处理方式仅以个人角度切入，在日常设计工作中我们所遇到的情况会更加复杂棘手，但这里也希望通过自己的发现给大家带来一些启发与探讨。图标的绘制并不是也不应该是一个繁重的任务，只要找对方法或了解背后图形原理，大家都能在方寸之间的设计中找到不一样的精彩。

参考文献：

Apple Developer – SF Symbols – Human Interface Guidelines / Xcode Documentation – Creating Custom Symbol Images for Your App hustanding – CSDN – 不规则多边形等比例缩小及等间距缩小算法 欢迎关注作者微信公众号：「腾讯设计族」

前言 在内容为主的用户界面设计上，图标起到了降低理解成本、高效传递信息等举足轻重的作用。随着矢量格式与高分屏的普及，对图标字体的精细度与视觉匹配度也有了更高的要求，这对设计师来说也是一个不小的考验。本篇将介绍目前业界优秀的图标案例，并以日常 图标绘制 中遇到的问题，解析背后原理给出对应解法。

拓展阅读

如何让图标更吸引人？复盘智行 Tab 图标设计过程 OMG！

阅读文章 >

注：以下部分示例仅为个人处理方法，仅供参考。

业界的优秀案例 “SF Symbols” 是苹果为 San Francisco 系统字体设计的一套内置图标合集，每个符号图形都能与所有磅重、大小的文本进行自动对齐，达到与字体无缝结合的效果。目前已更新到 3.0 版本，根据应用界面中各种使用、展示场景，默认提供 3,200 个符号各自拥有 9 种磅重，设计师可根据官方提供的合集库直接引用到设计稿中，或使用符号模板来添加自定义图标。

1. 多种磅重

“SF Symbols” 拥有与 “San Francisco” 字体相呼应的 9 种字重，在字母参考线（字母顶线与基线）下支持 Small、Medium 和 Large 3 种显示比例，总计 27 种样式，以达到与各个字形最佳的匹配效果。

图形磅重与比例参考表

图形比例与字形排列参考

2. 字形参照定位

以字体设计方式处理图形的垂直定位，在设计图标时需要将图形中心部分放置在模板基线以上的位置，系统读取时将根据图形基线计算图形的 baselineOffsetFromBottom（基线与底边的偏移值）进行垂直定位，使图形与文本的基线一致，达到图形和文本水平视觉对齐。

图形参考线

相同基线下对齐效果，重心处于小写字母区域

常用的块级元素对齐效果，重心稍微偏下

3. 多色应用

通过读取图形内的分层信息，可赋予每个分层不同的渲染模式达到更加丰富的表现形式。

不同渲染模式下的多色效果

4. 图形本地化适配

除磅重与比例以外，当图形出现需要使用文字表达含义时，针对特定语言与书写顺序 “SF Symbols” 提供了不同的适配图形，包含拉丁语、阿拉伯语、希伯来语、印地语、泰语、中文、日语和韩语等语言类型与 LTR/RTL（从左到右、从右到左）两种布局。

矢量规格的效率画法 随着像 Retina 这样的高分屏与 SVG、PDF 等矢量格式在设备上普及，文字和图标在精细度与匹配度上有了更多的追求，一般应用会根据常用的字体磅重去定义默认图标的粗细，因此我们会看到一些图标出现非整数规格的情况，这对新人来说会造成一定的设计门槛。

1. 微信的图标规格

以微信客户端为例，需要在 24*24pt 的网格中默认使用 1.2pt 线条进行绘制，同时在图形自然拐角处需要保持外圆内方的样式。

2. 为什么会有设计门槛

对新手来说在 Sketch、Figma 或 Photoshop 中使用描边设计非整数规格图标可以是噩梦，即便有经验的设计师在绘制过程中也会因为计算路径余数而影响设计效率，以 Sketch 为例路径属性中虽然支持像素对齐、半像素对齐和不对齐像素三种模式，但如果需要绘制 1.2x 描边时，我们只能使用不对齐像素的模式再计算路径落点位置，因此需要不断计算落点是否处于 0.2、0.8、0.2……

Sketch 的对齐模式

3. 建议方法：倍化绘制

所以在处理非整数图标时我们不妨把画板等比放大 5 倍，可以获得一个 120*120pt 的新画板同时描边放大为 6pt，这时候我们只需要使用像素对齐模式直接进行绘制即可，同理其他数值规格我们也可以使用倍化调整，使图形在画板内变成整数，最直接方式是小数点后奇偶数进行判断，奇数放大 10 倍，偶数放大 5 倍。输出资源时如果使用 svg 这类矢量格式可根据业务需要决定是否缩放输出，而位图则根据所需尺寸进行倍数缩放再输出。

4. 工具使用差异

使用 Sketch 对图形进行倍化后绘制和调整已经友好很多了，但是其实 Sketch 中还有不少绘制效率工具是没有放在默认工具栏里的，这里可以根据需要使用自定义工具栏把这些工具外置。

Sketch 中的路径工具

Figma 相对而言路径编辑功能比较简单，但依赖社区丰富的插件也能达到对应的效果，这里推荐一些常用的矢量图形处理插件。

虽然目前 sketch 的图形绘制功能已经很完善了，但依然存在一些限制，如路径断开后无法直接重新连接，特定角度绘制效率低等问题，从而影响设计的精确度和效率。这时我们可以把目光转移到一个老牌的矢量工具上“ Adobe Illustrator ”（后面简称 AI ），AI 中的隔离模式、方向滑移延伸和自定义网格本身非常适合矢量绘图，用来绘制图标也十分便利。

Sketch 与 AI 的对比，虽不公平但也是事实……

使用 AI 的网格系统，我们可以设定符合业务需要的对齐方式、键盘增量和网络间隔，且 AI 生成的路径是支持在 Sketch 或其他矢量工具中复制粘贴的。

适配自身规格的网格设置

使用 AI 自带的角度旋转功能时设置图形副本数量，保证了每个图形角度和方向都是准确的。

使用 AI 绘制实例演示

图标绘制的注意点 1. 等比分布

当我们需要绘制等比放大或扩散图形时，会遇到一种情况：等边图形或圆形可以直接使用工具进行等比缩放，但长矩形或者不规则图形等比缩放后会出现部分点、线不等比，这其实是一种理解上的误区，在把不规则图形等比放大时，我们需要的是点、线距离图形中心（非图层中心，而是几何中心）做等距偏移的效果，而工具一般会按图层中心来进行缩放，可能会造成效果上的误差。

常见图形在不同处理方式上产生的差异

清楚原因与差异后，只需选择对应偏移功能即可达到理想效果，等距偏移一般矢量工具都会自带，只是就使用习惯而言没有常用等比缩放容易理解与上手。以 AI 与 Sketch 为例，都能在路径、对象菜单中找到，且 AI 额外支持偏移后拐角属性设置。

AI 与 Sketch 下通过路径偏移获得等距缩放效果

2. 骨架与输出路径

日常涉及图标绘制的需求，建议可以先使用描边进行绘制，可以理解为把路径当做图形的骨架，再利用工具的描边样式塑造磅重拐角，这样我们可以有效的保留图形最大的可塑性和调整空间。

但同时需要注意，图标在输出前需要完全转化为轮廓以及封闭路径，以保证系统渲染模式的一致，并且这是所有平台都要求的。

SF Symbols 对路径轮廓化的要求

图标中的平衡 1. 面积配比

对应不同的业务，有时会基于用户对事物的认知，直接引用该事物作为基础图形进行图标绘制。因此会出现一些稳定性弱、长宽比例相差较大或形体单薄的图形，而我们会遵循已有的标准图标栅格进行绘制，这样会导致部分特征过于明显的图形在显示面积上出现视觉误差与中心浑浊。情况类似中文字体中出现的中宫、字怀（中宫：汉字重心区域范围、字怀：笔画之间的留白范围）紧凑。

按标准栅格绘制特征明显的图形

这时可以适当把图形延伸部分进行细微的外扩处理，使图形中心部分视觉上更加舒展。

对图形延伸部分外扩微调

2. 视觉对齐

通常使用工具的对齐功能实现图形间的相对关系是合理的，但我们在处理多边形时就会遇到 “已经用工具居中了，但看起来却没居中” 这种问题，这种现象一般是由于不同多边形的面积与宽高带来的视觉差造成的。

奇怪的对齐现象

以三角形播放按钮为例，在背景范围中绘制三角形时，我们可以先添加周长与三角顶点相接的圆形辅助定位，注意这里需要使用多边形工具设置的三角形而非默认的菜单中的三角形，因为默认的三角形是等腰三角形，不能用于这种情况。

与等距放大类似，先确定几何中心而非图层中心

这里推荐使用多边形工具设置三角形，除了因为是等边三角形外，在 Sketch、Figma 中这类图形未扩展的情况下工具是会自动填补图层范围，且直接对齐就是居中状态。

Sketch 多边形工具创建的三角形

总结 本文所提到的情况与处理方式仅以个人角度切入，在日常设计工作中我们所遇到的情况会更加复杂棘手，但这里也希望通过自己的发现给大家带来一些启发与探讨。图标的绘制并不是也不应该是一个繁重的任务，只要找对方法或了解背后图形原理，大家都能在方寸之间的设计中找到不一样的精彩。

参考文献：

Apple Developer – SF Symbols – Human Interface Guidelines / Xcode Documentation – Creating Custom Symbol Images for Your App hustanding – CSDN – 不规则多边形等比例缩小及等间距缩小算法 欢迎关注作者微信公众号：「腾讯设计族」