编写用户界面

Kaely Coon: 大家好 我是 Kaely Coon Jennifer Bush: 我是 Jennifer Bush 我们是 Apple 产品和服务 人机交互界面团队中的撰文者 今天 我们跟大家分享下 我们所学习到的小技巧和方法 希望能对各位开发者 在编写 App 或游戏时有所帮助 Kaely: 有时我们也称为 UX 撰文者 或 内容设计师 我们所写的内容可以称为 字符串 副本或文本 但最重要的是 我们的工作 是从语言视角出发的 在 Apple 任职初期 我们就想设计为大众所用的设备 这意味着这些设备 能和大家进行交互沟通 第一款 Mac 的设计原则就是 “所见即所得” 其中也包含语言 Mac 使用的是简单易懂的语言 主要关注的是用户 欢迎用户的使用 直至今日 在我们所有产品中 开机界面 都会显示“Hello” 从早期开始 我们就在界面中 持续了口语化的风格 当文字与设计无缝衔接时 您可能甚至注意不到它的存在 但对于每一部分的用户体验来说 语言都是至关重要的 文字可以帮助用户完成他们的操作 不管是创建 Memoji 看电影还是个人专注 我们看下移除文字后的 App 有点空落落的 对吧 在 Apple Music App 中 视觉效果提示了这里有不同的部分 但您知道每个专辑和播放列表 之间的区别吗 如何浏览 听音乐呢 即使是屏幕上有限的文字 也能帮助您了解现在看的是什么 接下来要做什么 如果遇到了错误 文字也能帮您找到解决方法 写作的目的是沟通 当然 文字也是一样 但其中也包含了这些文字的结构 出现的时机 以及人们 阅读文字时的主观感觉 我提到了 UX 撰文者 是如何通过语言视角来设计的 现在 您听完后 可能会问 “这到底是什么意思” 这意味着在设计 App 时 您越早将文字 作为其中的流程之一 用户就能获得越好的使用体验 在这一讲座中 我们将会与大家一起探究 在开发产品的文字时 所考虑的要点 这不是写作时的唯一考量 毕竟要考虑的要素太多了 但我们希望这能为您 在设计 App 的文字时 提供一些有用的框架 它们包括 目的 预期 语境和共情

按首字母可以 将其缩写为 PACE 这是在写作时要考虑的重点

PACE 要求创建流畅的文字 让用户对您所写的内容 感兴趣 愿意驻留观看 这也意味着您要知道说什么 怎么说 何时说 现在 我们有请 Jen 为我们介绍下目的

Jen: 在您开发 App 的屏幕界面时 想想什么对用户当时来说 是最重要的 这就是您界面内容的目的 那要如何表达呢

首先 要考虑信息层级 或者屏幕上的元素要如何排序 这是示例 这是信息 App 流的 介绍屏幕 这一界面的目的就显示在顶部 因此您可以一目了然 “与好友共享您的名字和照片” 这是您首先注意到的内容 接下来 您可能会看到这个按钮 显示“选择名字和照片” 我们知道用户不一定会按顺序 阅读屏幕上的文本 所以标题和按钮要保证信息明了

屏幕上的其它文本还有 一个很重要的目的 它可以告诉您哪些内容可以自定义 您可以选择与谁 共享这个内容 但这部分文本字号略小 信息层级有利于传达屏幕目的 知道哪些信息可以忽略 当您知道屏幕内容的目的后 就可以选择哪些想法 可以保留 哪些可以省略 或者哪些可以移动到其它位置 这是模拟的 iPhone 温度预警屏幕的线框 标题是“iPhone Needs to Cool Down” 听起来很清晰 但还有很多文本 这个屏幕还想达成更多

想想屏幕的目的 这是为了告诉您 为什么 iPhone 温度要降下来吗 如果是这样的话 它会提醒您 处于阳光直射或 App 使用时间太长 或许是为了告诉您 您现在只能拨打一个紧急电话了 那个按钮很大 看起来像这个屏幕在告诉您 这是不得不做的事了 现在看看我们的修改 这个屏幕简单多了

标题就只是“温度” 因为温度计的图像 已经表达了温度高这一含义了 我们不需要说得太直白 就一句话说明 iPhone 温度要降低后 才能使用 按钮就只显示“紧急” 所以如果您需要拨打紧急电话 可以怎么做也很明显了

不需要提供太多信息 简洁为主 您可以告诉人们这一界面的目的 这不是秘密 例如 向人们介绍新功能时 告诉他们这个功能为什么在这里 为什么很重要 在这个介绍屏幕中 标题是“Wind Down Shortcuts” 告诉您“睡前最好” “减少使用屏幕时间” 这是这一功能的目的 现在您知道 为什么要设置这一功能 每个屏幕都要有对应的目的 如果一段工作流中有多个步骤 那确定整个工作流 以及其中每个界面的目的 这可以让界面更简洁 减少不必要的步骤 在开始的时候 想想欢迎界面如何设置 告诉人们他们需要知道的信息

这是帮助设置 家庭共享 Apple Cash 设计工作流中的几个屏幕

文本告诉您 Apple Cash 是做什么的 “18 岁以下的家庭成员” 以及他们能做什么 “付款和收款 使用 Apple Pay 进行购买”

下一步的目的是让您知道 接下来要做什么 验证身份 提供关于数据和隐私的重要信息 隐私信息占用了屏幕很大空间 但这是重要信息 隐私是 Apple 的核心价值之一 想想您 Apple 的价值 确保在整个流程都有一致体现

验证身份后 就到了这一工作流的结尾部分 您还没有准备好 开始使用这一功能 这个“Almost ready”屏幕 告诉您 “卡片激活需要几分钟” 等待通知

好了 现在您可以用 Apple Cash 来付款了 如果您很难决定屏幕上要写什么 回来思考这一目的 您可以通过信息层级来传达目的 知道哪些信息要忽略 每个屏幕界面都要有对应的目的 Kaely: 接下来我们来说下预期

您可以将 App 上的文字 想成是对话的一部分 您的 App 和用户之间的对话 在一段好的对话中 总是有来有往的 有时在竖耳倾听 有时在夸夸其谈 有时会提出疑问 同样的 在您的 App 中 也预期每个时刻 都会有一段最完美的对话

假设到了周末 您想要睡懒觉 所以到时钟 App 修改闹钟 您想只修改明天的闹钟 而不改变整个计划 菜单会询问 “您要将此更改” “应用到所有周末吗” 第一个选项是 “仅修改下一次闹钟” 这一修改预期的是 大部分时间 您只考虑的是明天醒来的情况 您休息时 锁定屏幕显示 “睡个好觉” 提示您睡眠专注模式已打开 小按钮显示闹钟 设置为 8:30 AM “睡个好觉”的语气听起来 很熟悉 很友好 告诉您现在到了睡觉时间了 第二天早上 如果您在 闹钟响起前醒来 开始使用 iPhone 它预期您可能不想听到闹铃响 就会询问 “看来您已经醒了” “您要关闭闹钟和睡眠模式吗” 这个对话很易懂 就好像说出了您的需求一样 使用口语风格时 写手更多的是考虑风格和语调 先开发 App 的风格 然后改变语调 先问自己 什么要说 什么不用说 您是开发一款刺激有趣的游戏吗 这是一款需要安全可靠的 银行 App 吗 这个 App 是适合儿童浏览的吗 想想您对话的对象 从而考虑应该用 哪种类型的词汇 整理一个常用术语列表 帮助您在网站 邮件 和其它沟通方式统一风格 预期用户当前的场景 从而帮助您选择合适的风格 这里 Apple Watch 说 “好像您摔得很厉害啊” 如果您没事 可以回答 “我摔跤了 不过没事” 在这个紧张的时刻 其语调是冷静清晰的 Apple 不管在什么设备上 风格都是一致的 但语调可以视情况调整 想想您和好友打电话 以及和银行工作人员打电话时 风格语调有哪些改变 在 Watch 的 健身 App 中 您设置了一个徒步路程 它会说 “您完成了最长每日徒步路程的” “个人记录 35天” 语调是快乐的 还带有惊叹号 但要小心您的使用频率 如果频率太高看起来会有点傻

编写 App 内容时 您经常会问 “下一步是什么” 预期用户的下一个行动 或下一个问题 能帮助您想好应该要写什么 在 Apple Watch 的 呼吸 App 中 指令提醒您 “放松 关注自己的呼吸”

您可能不知道如何开始 所以它会说 “现在吸气” “呼气” 它回答您如何使用的问题 视觉效果进一步强化信息 手表通过振动帮助计时 在地图 App 这个例子中 当您可能要往家的方向走时 会弹出一个关于您通勤的通知 “离家还有 8 分钟” “走 Audubon Ave 一路通畅” 它通过预期您下一步的行动 为您做出对应的决定 当设计和文本紧密联系时 使用 App 时会感觉无缝衔接 预期是将您的 App 当成 对话的一部分

开发对应的风格 根据使用场景改变语调

然后回答接下来的问题 用正确的方式直接和用户对话 是将您的 App 用户体验 从功能齐全升级到鬼斧神工的方法 Jen: 接下来 我们来看语境 首先 跳脱出 App 来思考 当用户使用您的 App 时 他们通常是在家里安静的空间 还是在繁忙的机场中穿梭呢 他们是正在做别的事 如驾驶或烹饪 还是可以全身专注于 App 呢 Apple Watch 发现您在锻炼时 会出现这个提醒 但还没有开始记录 语境是 您在户外散步 所以您不想要停下来 阅读很多文字 有一个很大的按钮 很明显写了 “记录户外散步” 另外 一旦停止锻炼 您的语境就改变了 您可以接收多一些的信息 如您的总距离 平均速度 动态卡路里 在这里 您拍摄全景照片时 焦点分散在 相机 App 和所要拍摄的物体之间 屏幕上的箭头指引您 “拍摄全景照片时 保持持续移动” 这行文字出现在箭头下方 因为那是您正在看的位置 现在我们来看下 如何写出有用的警告信息 您的 App 需要用户确认操作 或做出选择时 可能会弹出一些警告 在这些语境下 它们是干扰信息 因此您的警告要有用 且清晰 在这个警告信息中 您打开了天气 App 它需要您允许使用位置 因为是在您打开 App 之时 出现的 所以具有情境性 警告提示了这一许可 是用在什么场景的 显示本地天气 发送相关的通知

有些警告可能会有破坏性操作 或者一些无法撤回的操作 如从您的账户中移除设备 我们来仔细看看 这一警告询问 “确认移除 iPhone 吗” 可以通过“移除”或“取消” 两个按钮来回答 这里的语境是 用户需要做一个重要的决定 可能会丢失信息的决定 “移除”是破坏性操作 因此其按钮是红色的 放置于左边 “取消”按钮在右边 可以不作其它操作 取消这一警告 但使用取消选项时也要小心 在这个模拟订阅的警告页面中 标题是“确认取消” 这样就很难选择要点击哪个按钮 左边的“取消” 还是右边的“确认” 其余的文本为 “如果您确认结束这一计划” “您将会失去访问 2022 年 6 月 21 日的权限” 这并没有提供太大帮助

是现在就结束了计划 还是仍能继续访问 这并不清晰 “这一计划”这个表达也很模糊 尤其是您有超过一个订阅时

通过几个小变化就能 解决这个问题 新的标题为 “取消铂金订阅吗” 告诉您现在取消的是哪个订阅 同时与下面的“取消订阅” 和“保留订阅”按钮相匹配 信息提醒您 “您可继续访问 2022 年 6 月 21 日以前的内容”

您可以看到按钮 并不是简单的“是” 或“否” 当编写警告信息时 最好要将 按钮操作具体化 在这个警告中 如果您只看了 按钮标签 您仍然能理解要选择的是什么 另一个警告信息的语境是 某个操作出错时 错误经常会 以警告信息的形式出现 如这个非常无用的模拟示例所示 标题“哦 您不能这么做” 并没有说明您具体不能做的是什么 您不可能知道错误代码 1234567 是什么含义 其余的信息 “抱歉 输入错误” “请重试” 并没有提供更多信息 为什么会有两个按钮“好”和 “取消”也不清楚 好像它们都是同样的操作 对于信息的语调方面 像“哦”或“啊哦”这样的感叹词 听起来有点高人一等 “请”和“抱歉”听起来更真诚 要尽量少使用

这是一个优化信息的例子 标题很清晰地说了是账单问题 文本也解释了接下来应如何做 增加新的支付方式 以继续访问您的订阅 上面的按钮“Add Payment Method” 可以引导您 解决问题 而第二个按钮“Not Now” 帮助您继续之前的操作 随后再返回 现在我们看下如何创建空状态 或者将您的 App 放在 没有任何内容的位置 空状态有时可能是为了教育 或甚至是庆祝 比如您完成待办清单中的 最后一项时 就取决于语境 这是另一个例子 在这个模拟餐馆 App 中 您没有保存内容到喜欢列表 这里用了标题 “没有撩拨心弦的东西吗” 有一种很古怪的感觉 如果符合您 App 的风格 那没有问题 但是成语习语可能并不是所有人 都能理解 也不一定翻译到位

下面的文本 “如果有想吃的东西 请随时回来” 并没有提供一些有用的指示或暗示 内容会如何显示

另外 Apple 的播客 App 播放列表 很清晰地告诉您 “无保存剧集” 然后解释了您可以 “稍后保存想要听的剧集” “它们会在这里显示” 更好 所以总的来说 当考虑语境时 跳脱出 App 的框架去思考 想下用户使用时可能在做什么

写下有用的 符合情境 且能提供清晰选择的警告信息

通过使用合适的语调 以及给出有用的引导 创建有用的空状态

Kealy: 最后 我们说下共情

在用户体验写作中 共情能力 意味着您的写作能触及每个人 您的 App 可能有具体的听众 如音乐家 游戏家或其他开发者 您应该与他们对话 但又不想忽略其他人 最好是用简单平实的语言 习语 诙谐语可能会被误解 或者翻译不到位 有些短语的含义 不一定适用于所有人群

共情的关键方面是 要对应本地需求 全球所有用户都在 使用您的 App 这是个激动人心的机会 这也意味着您的 App 需要适应 许多语言和文化

当您从一个语言翻译到 另一个语言时 单词可能变长 也可能变短 有些语言需要更多垂直空间 有些使用您 App 的用户 可能用的是从左到右 或从右到左阅读的语言 以下是例子 这是更改 iPhone 语言时的 确认信息 在这个例子中 是英语更改成泰语

在英语中 通知内容是 “应用此设置需要重启 iPhone” 附带按钮“更改为泰语” 以及“取消”

在泰语中 上面的文本比较长 空间根据较高的字母适配 而在荷兰语中 文本更长 上面的空间增加 因此文本移动到了第二行 这是希伯来语 从右到左阅读的语言

还有其它单词长度以外的考虑 在美式英语中 日历的一周每日的缩写为 单个字母 M 是周一 T 是周二等等

但在加泰罗尼亚语中 一周每日的缩写为 两个字母 并没有一个字母的缩写 而在阿拉伯语中 一周每日并没有对应的缩写 您的 UI 需要适应这些语言变化

现在我们来说说易使用性 欢迎每个进入您 App 的用户 是很重要的 您的用户要有更多的用户 就需要与尽可能多的人对话 例如 有些用户可能是失明 或视力较低的 可能会将 设备文字设置为粗体或较大字号 或使用 VoiceOver 来导航

注意您使用的语言 标记您 App 中的元素 那些文字可能就是用户的 整个使用体验 这种体验就需要经过精心设计

每个元素都需要经过深思熟虑 有用且描述清楚 这不仅包括导航的 VoiceOver 文本 如链接 按钮 还包括其它所有符号 图表或图像 我们看看 VoiceOver 是如何描述一些 Memoji 贴纸 的 第一个描述为 “倾斜着头的人” “手放在嘴边 好像在分享秘密一样” 注意这不仅仅是外形的描述 还包括其意图 “好像在分享秘密一样”

第二个描述为 “冥想的人” “手臂放松 食指捏合” 同样也是包含了外形细节 放松的手臂和食指捏合 以及冥想的语境

第三个例子也是描述了语境 和姿势 紧张地咬手指的人 注意这些例子都描述为“人” 而不是“男人”或“女人” 您可以通过避免使用不必要的 性别暗示 让您的 App 更受大众欢迎 每一个描述性语言都需要 经过思考 编写 App 时具有共情能力 是很关键的 用简洁的语言 为所有人而写

对应本地需求 包括文字大小改变

设计要易使用 为使用 VoiceOver 导航的用户 提供体贴入微的文本 要经常检查您 App 的语言 并做相应的改变 语言在进化 您 App 的 文本同样要升级换代 关于这个话题 还有很多需要学习的 您可查看 Human Interface Guidelines 学习更多关于设计 包容性 App 的知识 今天 我们探究了目的 预期 语境和共情 通过这四个方面 您可以确保 App 或游戏中的文本 经过了精心设计 我们希望您能在设计进程的初期 就考虑到了写作的价值 而非在后期才补充 Jen: 如果您无法找到合适的措辞 我们还有最后一个小技巧 也是最简单的一个 将您的文本大声读出来 可以让您的文本更口语化 就好像在跟朋友聊天一样 大声朗读也能帮助你发现 不必要或重复的单词 语法错误或拼写错误 这些细节很重要 Kaely: 界面协作始于对屏幕 另一头用户的好奇心 带着尊重和理解之心与他们对话 我们相信您能找到正确的措辞的