Back to Details

stop-describing-ui

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Stop describing UI

停止描述 UI

An interface shows what the user can do. It does not explain itself. Every sentence is something the user has to read before acting, so keep a sentence only when the user would make a real mistake without it.
When writing UI, apply the rules below as you write. When reviewing UI, go through every string, apply each rule, and present the result as before and after.
界面展示用户可以做什么，而不是解释自身。每一句说明都是用户在行动前必须阅读的内容，因此，只有当缺少这句话会导致用户误操作时，才保留句子。
编写 UI 时，应在写作过程中应用以下规则。审查 UI 时，应逐个检查每条文案，应用每项规则，并以修改前后对照的形式呈现结果。

Rules

规则

1. Don't describe the feature

1. 不要描述功能

Name the action instead. A heading, a control, and its label already say what the screen is for.
Before
undefined
改为说出操作名称。标题、控件及其标签本身已经说明屏幕的用途。
修改前
undefined

Projects

项目

No projects yet.

暂无项目。

Choose a GitHub repository and we'll deploy on every push.

选择一个 GitHub 仓库，我们会在每次 push 时自动部署。

  • New

After
  • 新建

修改后

Projects

项目

  • Connect repository
undefined
  • 连接仓库
undefined

2. Use specific verbs

2. 使用具体的动词

Pick the verb that names what actually happens, and give it the object it acts on. Avoid generic verbs such as New, Create, Manage, Set up, Configure, Go, or OK when a more precise one exists. In the example above, "New" becomes "Connect repository".
选择能够准确反映实际发生内容的动词，并给出它所作用的对象。如果有更精确的说法，就避免使用“新建”“创建”“管理”“设置”“配置”“前往”“确定”等泛化动词。在上例中，“新建”改为“连接仓库”。

3. Keep only the most critical consequence

3. 只保留最关键的影响

When an action has several effects, state the one that matters most and drop the rest. Effects that follow from it are implied. In a booking service that takes reservations through AI auto-replies, turning off auto-replies obviously stops reservations too.
Before
Turning this off stops AI auto-replies and web reservations. Customer messages are saved only to the conversation log. You can turn it back on anytime from "Replies off" in the header.
After
Temporarily turns off AI auto-replies.
Irreversible or destructive effects, such as deleting data, charging money, or notifying customers, are the critical consequence and always stay.
当一个操作产生多种影响时，只说明最重要的影响，其余内容全部删除。由该影响自然产生的后续结果无需重复说明。在一个通过 AI 自动回复接收预订的预约服务中，关闭自动回复显然也会停止接收预订。
修改前
关闭此选项会停止 AI 自动回复和网页预订。客户消息只会保存到对话日志中。你可以随时通过页眉中的“回复已关闭”重新开启。
修改后
临时关闭 AI 自动回复。
不可逆或破坏性影响，例如删除数据、收取费用或通知客户，属于最关键的影响，必须始终保留。

4. Don't describe backend behavior

4. 不要描述后端行为

Where data is stored, what gets logged, what syncs, and what runs in the background are not the user's concern. In the example above, "Customer messages are saved only to the conversation log" goes.
数据存储位置、记录内容、同步内容以及后台运行的内容，都不是用户需要关心的。在上例中，“客户消息只会保存到对话日志中”应删除。

5. Don't explain undo when the same control undoes it

5. 当同一个控件可以撤销操作时，不要解释如何撤销

A toggle that turns something off also turns it back on. Explain how to undo only when undoing needs a different control or place.
如果同一个控件既负责关闭也负责重新开启，就不要解释如何撤销。只有当撤销需要通过其他控件或其他位置完成时，才进行说明。

6. Don't explain what the page already tells

6. 不要解释页面已经表达的信息

The page title, navigation, and section structure carry meaning. On an Options page, the user already knows they are looking at options.
Before
undefined
页面标题、导航和区块结构本身已经传达了含义。在“选项”页面上，用户已经知道自己正在查看选项。
修改前
undefined

Other options

其他选项

Options that become available with a contract. They cannot be toggled on or off.

签订合同后才会启用的选项。无法通过开关启用或禁用。


After


修改后

Other

其他

undefined
undefined

7. Don't state what doesn't exist

7. 不要说明不存在的内容

Don't say there are no items yet, that something can't be toggled, or that a feature isn't available, when the screen already shows it. An empty list with a clear action says "nothing here yet". A row without a toggle says "can't be toggled".
The exception is a restriction the user would otherwise try and fail at, such as an action their role can't perform. Keep it, in one short line with an icon, as in rule 9.
当界面已经展示出来时，不要说明“没有项目”“无法切换”或“某项功能尚不可用”。带有清晰操作入口的空列表已经表达出“这里暂时没有内容”。没有开关的行也已经表达出“无法切换”。
例外是用户否则会尝试并失败的限制，例如其角色无权执行的操作。按照规则 9，用一个图标配一行简短文字予以保留。

8. Show how to enable, don't write it

8. 展示如何启用，而不是用文字说明

If something becomes available by subscribing, upgrading, connecting, or turning on a setting, put the button or toggle that does it on the screen. Don't write a sentence telling the user where to go or what to do.
Before
Sign up for the Pro plan to use this option.
After
[Upgrade to Pro]
如果某项内容需要订阅、升级、连接或开启设置后才能使用，应把执行该操作的按钮或开关直接放在界面上。不要用句子告诉用户去哪里或该做什么。
修改前
注册 Pro 套餐后即可使用此选项。
修改后
[升级到 Pro]

9. Don't rely on text alone

9. 不要只依赖文字

Break prose into short lines, each led by an icon. Use spacing and grouping for structure.
Never use 
->
, 
>
, 
|
, 
✔️
, 
!
, 
→
, or 
:
as separators, arrows, bullets, or emphasis. Use an icon or spacing instead.
Before
Searches across all stores and shows the results. Stores you don't belong to are shown as Operator, and every action records who did what in which store. You can't change applications, payment methods, or plans, or send messages to customers (replies, approving or declining tentative reservations).
After
(icon) Every action is recorded
(icon) You can't change applications, payment methods, or plans, or send messages to customers
Here "Searches across all stores and shows the results" goes by rule 1, "shown as Operator" by rule 6 because the UI already labels them, and the detailed record format by rule 4.
将段落拆分成短行，每行配一个图标作为引导。使用间距和分组来组织结构。
绝不要将 
->
、
>
、
|
、
✔️
、
!
、
→
或 
:
用作分隔符、箭头、项目符号或强调。改用图标或间距。
修改前
搜索所有门店并显示结果。你不属于的门店会显示为 Operator，而且每项操作都会记录是谁在哪个门店执行了什么。你无法更改申请、付款方式或套餐，也无法向客户发送消息（回复、批准或拒绝暂定预订）。
修改后
(图标) 每项操作都会被记录
(图标) 你无法更改申请、付款方式或套餐，也无法向客户发送消息
这里，“搜索所有门店并显示结果”根据规则 1 删除，“显示为 Operator”根据规则 6 删除，因为 UI 已经为其添加了标签，而详细的记录格式根据规则 4 删除。

Checklist

检查清单

For each string, ask in order.
  1. Does it explain what the feature is? Delete it, or turn it into a specific action label.
  2. Is the verb generic? Replace it with one that names the real action and its object.
  3. Does it list several consequences? Keep the most critical one.
  4. Does it mention storage, logging, syncing, or other internals? Delete it.
  5. Does it explain how to undo with the same control? Delete it.
  6. Does the page title or navigation already say it? Delete it.
  7. Does it say something is missing or unavailable? Delete it, unless the user would otherwise try and fail.
  8. Does it tell the user how to enable something? Replace it with the button or toggle.
  9. Is it a paragraph, or does it use symbols as separators? Split it into icon-led lines and use spacing.
If nothing is left after the checklist, leave nothing. An empty helper text slot is better than a filler sentence.
针对每条文案，依次询问。
  1. 它是否在解释功能是什么？删除它，或将其改成具体的操作标签。
  2. 动词是否泛化？替换为能准确说明实际操作及其对象的动词。
  3. 是否列出了多种影响？只保留最关键的一种。
  4. 是否提到存储、记录、同步或其他内部机制？删除。
  5. 是否在解释如何通过同一个控件撤销？删除。
  6. 页面标题或导航是否已经表达了这层含义？删除。
  7. 是否在说明某项内容缺失或不可用？删除，除非用户否则会尝试并失败。
  8. 是否在告诉用户如何启用某项内容？替换为按钮或开关。
  9. 是段落形式，还是使用了符号作为分隔符？将其拆成以图标引导的短行，并使用间距组织内容。
如果执行检查清单后没有留下任何内容，就不要保留任何内容。宁可让辅助文本位留空，也不要填入无意义的句子。