点左边还是右边？这是一个问题。
当想要取消自动续费时，如果出现如此令人迷惑的弹窗，那你一定会怀疑对方在故意使绊子。这是 2022 年 Apple 开发者大会（WWDC2022）「为交互界面书写」主题演讲中的一个反例。经过「内容设计师」（UX Writer/Content Designer）调整，它变成了这样：
「文案」是如此重要，但它却常常淹没在交互界面中，被我们看作是图形的一部分。
从「文案」到「内容」
屏幕上的那些文字，真的只是「文案」而已吗？
在开篇的例子中，文案和视觉的调整是同步进行的。你能看到文字加粗、按钮位置调整等本不属于文案写作范畴的调整。
科技巨头们也不简单地将文字剥离出交互系统。文字不再仅仅是「用户界面的文本」（UI Text）而是「内容设计」（Content Design）的一部分。Google 的设计系统 Meterial Design，微软的设计系统 Fluent2，Apple 的《人机界面指南》，华为的鸿蒙系统《通用设计指南》，都对「内容设计」提出了引导标准，并将其放到了相当重要的位置。
Adobe 是做得最绝的一家公司。他们的设计系统 Spectrum 单独列出一个章节指导了内容设计，与图形化的「组件」「模式」等平起平坐。本文将大量引用 Spectrum 的原文。「内容」章节共有以下六个部分。
- 用语和语气 Voice and tone
- 语法和结构 Grammar and mechanics
- 语言和包容性 Language and inclusivity
- 产品内词汇表 In-product word list
- 为发生错误书写 Writing for errors
- 为引导书写 Writing for onboarding
那么，所谓的「内容」到底指的是什么？Spectrum 将其定义为以下几类。
- 可见文案，包括用户界面元素的标签、按钮上的文案、链接和表单
- 不在屏幕上显示的描述（例如图标按钮的替代文案）、图像、工作流程、教程
- 产品内部的任何其他可阅读的内容
在 Spectrum 中，很少出现「文案」（Text）这一词汇，他们用「声音」（Voice）和「语气」（Tone）来指导用户体验中的「内容」——「我们使用一种声音和多种语气发声」。在本文中，我会用「UX 文案」来代指具体交互界面中的文字内容。
| 语气 | 态度 | 例子 | 使用频次 |
|---|---|---|---|
| 激励的 | 积极、鼓励性的 | 我们会关注你并为你加油。你能行的！ | 很少 |
| 有帮助的 | 礼貌的、尊重的 | 我们知道你很忙，所以我们制作了这份简报。 | 偶尔 |
| 建设性的 | 中立、直接的 | 这是你所需要的信息。 | 经常 |
| 令人放心的 | 专业、可靠的 | 我们知道你对这个问题感到担忧，我们会在这里帮助你。 | 偶尔 |
| 支持的 | 关切的、有同情心的 | 一些不好的事情发生了，我们理解你的感受。我们希望通过提供信息、指导和支持来帮助你度过这个困难。 | 很少 |
内容设计如何影响你的体验
当你打开手机上一款音乐播放器时，屏幕上弹出「你已离线」或「无可用网络」，哪种说法会让你更好受一些？
或许都不太好受。于是设计师们加上了后半句：「关闭飞行模式或接入无线局域网」或「你可以播放已下载的音乐」。
国内外设计师对缺省页的内容设计是有基本共识的。当页面出现错误时，页面上的交互元素一般会分为三个部分：
- 发生了什么
- 潜在原因（如可以提供）
- 如何解决当前的问题
尽管有共识，能不能做得到却是另一码事。每个部分该如何呈现，出现错误时的内容设计如何融入到整个交互体系中，各个厂商都有着不同的做法。下面举一些例子，你可以带入没网的情景，看看哪一种内容设计会让你更加平静。
*以下的所有页面均为网络连接错误时的缺省页。
在视频平台 Bilibili 中，视频详情页和文字动态详情页的缺省状态大致相同，但是用语却有一些小小的不一致。
阿里集团旗下的两款购物应用中，描述页面错误的用语显得「夸张」一些。我对「崩溃」二字的用法保留意见。
两款音乐播放器的缺省页中，网易云音乐和 Apple Music 则从不同角度提供了解决方案。
- 网易云音乐：预测用户的需求，提供另一种 App 用法——播放已下载的音乐
- Apple Music：为用户提供解决离线问题的方法——关闭飞行模式或接入 Wi-Fi
除了文字说明，两款音乐播放器都对无法连接网络时提出了实质性的解决方案。在无网络时，网易云音乐的首屏会从「发现」变为「我的」，Apple Music 可以播放「播放列表」中缓存的曲目。
发生错误时内容怎么设计？
以下建议来自 Adobe Spectrum。原文为英文，下面的翻译中加入部分我的理解。
除非有理由，否则不要道歉
不要为小错误道歉。这样听起来不真诚，也会干扰信息的重要部分。将「抱歉」留给严重的错误：比如数据丢失或需要用户采取重大行动来解决问题的情况。
谨慎使用被动语态
尽量使用主动语态来写作，这样更快速和容易理解。被动语态在软化信息时很有用，尤其是当错误是由用户的行动或不作为引起时。要注意，中文语境中较少使用被动态。
承认自己的错误，并使用「我们」和「你」来帮助用户理解复杂的操作
通常我们在用户界面的文案中避免使用「我们」指代自己，因为这会增加不必要的认知负担。但是，在错误消息中直接使用「我们」指代界面，使用「你」指代用户，可以清晰地回答「出了什么问题」和「谁需要采取行动」等问题。
内容设计与人人有关
一句话使人跳，一句话使人笑。一个界面中的用语会将一部分人排除在外，而好的内容设计应当是包容的，与人人都有关。
Spectrum 的一个表格有助于快速理解什么是更加包容的 UX 文案。
| 建议使用 | 避免使用 | 原因 |
|---|---|---|
| 人们 | 客户 | 要包容当前和潜在的产品用户，不仅仅是付费用户。如果上下文依赖于付款或订阅，可以使用「客户」这个词。 |
| 你 | 用户 | 要包容正在查阅的人。如果上下文需要由角色串联（例如，「管理员权限」），可以使用「用户」这个词。 |
| Adobe Dimension 帮助你在三维空间实现创意。 | Adobe Dimension 帮助图形设计师在 3D 领域拔得头筹。 | 要包容更多使用某个产品的原因。 |
| 查看、显示、转到全部 | 查看全部 | 要具体描述。并非每个人都是「看到」的，而且「查看」、「显示」、「转到全部」等「执行」选项在意义上有更多的细微差别。 |
| 播放视频 | 观看视频 | 要具体描述。并非每个人都在「观看」视频。 |
| Last updated: 2 days ago | Updated • 2d ago | 要有意义。如果不采取额外措施，在使用屏幕朗读器语音播报时，符号和缩写可能导致信息被模糊。 |
| 更新你的信息（步骤 1/3） | 确认你的信息 | 要有意义。引导人们按步骤操作，并明确告诉他们应该做什么。对任务所需时间设定准确的期望。 |
从这些例子中可以看出，提高 UX 文案的包容性，也就是尽可能让更多人接受、理解交互界面中的文案。在「无障碍」、「国际化」、「跨平台」等大趋势下，一个成熟的产品不仅要考虑残疾人的需求，也不能将不同人种、性别、职业、年龄、国籍和信仰的用户拒之门外。
包容的内容设计不仅仅关乎「政治正确」，它有利于提升产品的商业价值和公司的长远发展。具有远见的公司应该认识到，越少人被「排除在外」，就越有可能接触到潜在的机会——可能是吸引「奇才」加入团队，也可能打入到意料之外的用户群体。
在写作方面，传统媒体其实沉淀了非常优质的经验。大众媒体面对的是广域中的所有人，准确、规范、易读是新闻写作的基本要求。但平面媒体的文字少有交互性，所以 UX 文案往往需要加入更多考量。Adobe Spectrum 提供了下面三个方向的建议。
1. 关照个体
文案写作和各个区域的政治正确紧密相关，在 Spectrum 中，Adobe 特别指出了「残疾人」、「种族和阶级」、「性别和性取向」。在中文语境下，设计师未必需要过分恪守这些规则。但千万不要否定「普世价值」，尊重个体即尊重自己。
2.保证易读
使用六年级学生和爷爷奶奶都能看得懂的表达——少用长难句，考虑将专业用语换个说法……同时在字体排印上下一些功夫。
关于字体排印
以下案例摘录自「日本内阁数字化厅」对政府网站提出的设计指南。
3.与视觉要素配合
按照时间顺序组织文案
按照时间顺序组织文案，而非空间位置。如果界面按照时间进行组织（例如，「之前」和「之后」而不是「上方」和「下方」），这将减轻视觉障碍者的负担——他们需要屏幕朗读器或放大镜辅助。一部分人患有言语型学习障碍，他们对描述方向的文本感到困惑，用时间顺序也可以避免干扰到他们。
| 建议使用 | 避免使用 |
|---|---|
| 首先 | 上方 |
| 接下来 | 下方 |
| 在菜单栏中 | 在左侧 |
| 最后 | 在底部 |
模块化地呈现文案
创建能以不同方式呈现，却不丢失信息或结构的内容，即「模块化内容」。这有助于简化布局，或者改变内容的顺序。
| 建议使用 | 避免使用 | |
|---|---|---|
| 学习如何裁切图片 | 准备好学习了吗？ | 主要文案 |
| 现在开始实践教程吧。 | 或准备深入学习？还是两者一起？ | 辅助文案 |
| 开始 | 开始教程/返回 | 按钮文案 |
| 这是模块化内容设计——所有的内容部分都可以独立存在，即便重新排列也不影响整体。 | 这是更传统的内容设计——用户依赖特定顺序来理解内容。 |
「预防」而非「纠正」
特别是在表单中，要提供足够的指示。如果发生错误，要在文案中描述问题，而不仅仅依赖图标或颜色。
不仅仅依赖颜色和图标
避免命名
每个新的名称都会增加认知负荷。当命名不可避免时，要保持前后一致。
描述正在发生什么
为场景（教程或分步流程）提供标题。这有助于所有人导航、查找内容并确定自己所处的位置。如果视觉内容是基于时间的媒体，比如教程视频，文案需要提供描述性的标识。并且，最好提供视觉的替代方案，例如文案转录、字幕或逐步的书面指南。
告知动作和影响
不要仅靠视觉来交流
| 建议使用 | 避免使用 |
|---|---|
| 「开始」按钮 | 绿色按钮 |
关于替代文案
这个部分与无障碍设计紧密关联，包括屏幕朗读器，放大镜，图像的替代文案等等，需要操作系统层面的支持。这里可以参照鸿蒙系统设计指南-屏幕朗读器章节。
「机器人会作自由诗吗？」
现在，唤起 Google 的语音助手 Google Assistant，你需要说：OK Google 或 Hey Google。2015 年，Google 的 UX 文案写手 Joscelin Cooper 这样评价：
「OK google」之所以尴尬，是因为它坚持认为我们与这个搜索巨头是朋友。在这种语境下，Google 不再是一个公司，而是一个乐于助人的朋友。然而同时，Google 将「专注于用户」作为其创立的基石之一，「用户」既暗示了克制和距离，又隐喻了一种令人不快的依赖关系。
那么，我要如何同时成为这家公司的朋友，又成为他们的「用户」呢？
在交互领域，越来越多人开始关注文字的力量。想想 ChatGPT 这样的大语言模型吧。在它还没有展现出多模态的能力时，我们的交流仅仅限于文案；将思绪再拉远一些，当下班回家，你希望语音助手用什么语气和你对话？在工作中，你希望 AI 助手用什么样的表达方式？
如今，家居、出行、穿戴、办公等场景都在数字化。用户体验中的「内容」也不再仅仅是屏幕上的字符，它还是语音交互时的指令，是你和数据库、开发者、运营方交流的桥梁，也暗示着你和他们之间的身份关系。
在科幻爱情电影《她》上映十年后，已经有独角兽公司试图创造你的「赛博爱人」。你会期待 TA 用什么样的语气和你交流？而近在眼前的变化则是下个月的 iOS17，你可以用「Siri」而非「Hey, Siri」来唤醒 Apple 的语音助手。
我相信，当你能不再煞有其事的用「嘿」来开头时，Siri 将会变得更像一位助手。
*这篇文章也是一次「内容设计」实践。我花了很多工夫在统一用词和本地化上。希望「文本」、「文字」、「文案」、「声音」、「语音」、「语言」这些词没有给你带去太多困扰。
参考资料
- Adobe Spectrum
- HarmonyOS 《通用设计基础》
- 腾讯 ISUX《设计探索｜重新认识 UX 文案》
- Apple WWDC22《Writing for interfaces》
- Apple《人机界面指南》
- デジタル庁 デザインシステム
- Joscelin Cooper - Do Androids Dream in Free Verse?
题图来自 Nasim Keshmiri on Unsplash
> 下载少数派 客户端、关注 少数派小红书，感受精彩数字生活 🍃
> 实用、好用的 正版软件，少数派为你呈现 🚀
