ant-design/docs/spec/copywriting.zh-CN.md
二货爱吃白萝卜 cbcfd38ca7
docs: v5 site upgrade (#38328)
* build: try to use dumi as doc tool

* docs: migrate demo structure to dumi way

* refactor: use type export & import

* docs: migrate demo previewer to dumi

* docs: create empty layout & components

* docs: apply custom rehype plugin

* docs: create empty extra pages

* docs: Add Banner component

* chore: move theme tsconfig.json

* docs: home page init

* docs: migrate header (#37896)

* docs: header

* docs: update

* docs: home init

* clean up

* test: fix site lint

* chore: tsc ignore demo

* chore: dumi demo migrate script

* chore: cards

* docs: home layout

* docs: Update locale logic

* docs: fix getLink logic

* chore: fix ci (#37899)

* chore: fix ci

* ci: remove check-ts-demo

* ci: preview build

* test: ignore demo.tsx

* chore: update script

* test: update snapshot

* test: update node and image test

* chore: add .surgeignore

* docs: layout providers (#37908)

* docs: add components sidebar (#37923)

* docs: sidebar

* docs: update docs title

* docs: update design doc

* chore: code clean

* docs: handle changelog page

* docs: add title

* docs: add subtitle

* docs: active header nav

* chore: code clean

* docs: overview

* chore: code clean

* docs: update intl (#37918)

* docs: update intl

* chore: code clean

* docs: update favicons

* chore: update testPathIgnorePatterns

* chore: code clean

* chore: code clean

* chore: copy 404.html (#37996)

* docs: Home page theme picker

* chore: Update migrate script

* docs: home page update

* docs: theme editor style

* docs: theme lang

* chore: update migrate.js

* docs: fix demo (#38094)

* chore: update migrate.js

* docs: update md

* docs: update demo

* test: fix snapshot

* chore: move debug to code attr in migrate script

* chore: update md

Co-authored-by: PeachScript <scdzwyxst@gmail.com>

* feat: overview page

* feat: Migrate `404` page (#38118)

* feat: migrate IconSearch component (#37916)

* feat<site/IconSearch>: copy IconDisplay from site to .dumi

* feat<site/IconSearch>: change docs of icon

* feat<site/IconSearch>: tweak

* feat<site/IconSearch>: use useIntl instead of injectIntl

* feat<site/IconSearch>: fix ts type error

* feat<site/IconSearch>: use intl.formatMessage to render text

* docs: Adjust home btn sizw

* docs: Update doc

* feat: v5 site overview page (#38131)

* feat: site

* fix: fix

* feat: v5 site overview page

* fix: fix path

* fix: fix

* fix: fix

* docs: fix margin logic

* feat: v5 site change-log page (#38137)

* feat: v5 site change-log page (#38162)

* docs: site redirect to home pag

* docs: theme picker

* docs: use react-intl from dumi (#38183)

* docs: Theme Picker

* docs: update dumi config

* docs: home back fix

* docs: picker colorful

* docs: locale of it

* docs: update components desc

* docs: site of links

* docs: update components list

* docs: update desc

* feat: Migrate `DemoWrapper` component (#38166)

* feat: Migrate `DemoWrapper` component

* feat: remove invalid comments and add comment for `key` prop

* docs: FloatButton pure panel

* chore: update demo

* chore: update dumi config

* Revert "chore: update demo"

This reverts commit 028265d3ba.

* chore: test logic adjust to support cnpm modules

* chore: add locale alias

* docs: /index to /

* docs: add locale redirect head script

* chore: adjust compact

* docs: fix missing token

* feat: compact switch

* chore: code clean

* docs: update home

* docs: fix radius token

* docs: hash of it

* chore: adjust home page

* docs: Add background map

* docs: site theme bac logic

* docs: avatar

* docs: update logo color

* docs: home banner

* docs: adjust tour size

* docs: purepanl update

* docs: transfooter

* docs: update banner gif

* docs: content (#38361)

* docs: title & EditButton

* docs: content

* chore: fix toc

* docs: resource page

* docs: transform resource data from hast

* docs: filename & Resource Card

* chore: enable prerender

* chore: remove less

* docs: toc style

* chore: fix lint

* docs: fix Layout page

* docs: fix CP page

* chore: update demos

* docs: workaround for export dynamic html

* chore: enable demo eslint

* docs: table style

* fix: header shadow

* chore: update snapshot

* fix: toc style

* docs: add title

* docs: Adjust site

* feat: helmet

* docs: site css

* fix: description

* feat: toc debug

* docs: update config-provider

* feat: use colorPanel

* fix: colorPanel value

* feat: anchor ink ball style

* feat: apply theme editor

* fix: code block style

* chore: update demo

* chore: fix lint

* chore: code clean

* chore: update snapshot

* feat: ts2js

* chore: description

* docs: site ready for ssr

includes:
- move client render logic to useEffect in site theme
- extract antd cssinjs to a single css file like bisheng
- workaround to support react@18 pipeableStream for emotion

* chore: bump testing lib

* docs: font size of title

* chore: remove react-sortable-hoc

* chore: update snapshot

* chore: update script

Co-authored-by: PeachScript <scdzwyxst@gmail.com>
Co-authored-by: MadCcc <1075746765@qq.com>
Co-authored-by: zqran <uuxnet@gmail.com>
Co-authored-by: TrickyPi <530257315@qq.com>
Co-authored-by: lijianan <574980606@qq.com>
2022-11-09 12:28:04 +08:00

16 KiB
Raw Blame History

group type order title
设计模式 全局规则 5 文案

在界面中,我们需要通过对话的方式与用户产生共鸣。精准、清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感。因此在界面设计时,文案也应当被重视。 在使用和书写文案时有以下几点需要注意:

  • 从用户角度出发
  • 表述一致
  • 重要的信息放在显著位置
  • 专业、精准、完整
  • 精简、友好、正面

语言

在界面中,文案是我们与用户沟通的基础,语言文字的表述也需要精心推敲,仔细设计。清晰、准确、简洁的文案设计能够让界面拥有更好的可用性,同时让用户体验更加友好。

明确表述立足点

正确示范 错误示范

在表述内容时,关注点应该是用户和他们能用你的产品做什么,而不是你和你的产品在为他们做什么,所以内容表述的立足点很重要。

既然以用户为中心,文案就应该尽量以用户为主体来写作。

注:当用户向后台反馈问题、提出建议或申诉时,使用「我们」是合理的语境,例如「我们将会审核你的申诉」。

精简语句

正确示范 错误示范

省略无用词汇,不重复用户已知事实;在绝大多数交互场景下,都无需界面描述出全部的细节。

尽量提供简短、易于快速获取的内容。

使用用户熟悉的语言

正确示范 错误示范

使用简单、直接、易于理解的词汇,让内容和指示更容易被用户接受和理解。

间接、暧昧模糊的说法,生僻和过于「文雅」的用词,会增加用户的认知负荷,所以应当尽量避免使用这类用户无法识别的词汇。

表述一致

正确示范 错误示范 正确示范 错误示范 操作名称和目标页面的标题一致。
  • 描述同一个事物的词汇要保持统一;
  • 上下文的语法、语种、语序要保持统一;
  • 操作的名称和目标页面标题的名称保持一致。

重要的信息放在显著位置

正确示范 错误示范

让用户第一眼看到最重要的内容,不用到段落中寻找。

注:如考虑安全性问题时,隐私信息也可调整为「点击后可见」的方式。

完整、直接得阐述信息

正确示范 错误示范

当我们希望用户进行一个操作时,要专注于用户能得到什么,以及用户的感受。在操作前引导告知用户操作的目的或重要性,能促进用户更愿意去执行。


正确示范 错误示范

报错是 UI 中常见的功能,它同样是用户体验中不可小视的组成部分。当用户填写的内容出错的时候,你的报错信息应当符合用户的认知,用易于理解的方式表述出来。

用词精准完整

正确示范 错误示范 正确示范 错误示范 正确示范 错误示范    
使用 不使用 备注
其他 其它 「其他」的应用范围更广
抱歉 对不起 如果是我们系统造成的结果,可以使用「抱歉」,如果是用户自己造成的结果,不能使用。
验证码 4位或多位数字或字母图片可有效防止黑客发起对账户的登录尝试。
校验码 手机或即时通讯工具收到的6位数字用于验证用户的身份。
登录登陆 登记记录用户输入的注册账号和密码。
当要表达当前事物时,「此」更加明确。

通用基本用词要规范,不要写错字,词语表达要完整。

专业用语要精准,并是所属行业认可通用用词;时间的表述必须明确。


语气

语言定义的是内容,而情绪和气氛更多地是通过语气来表达,并且同样的内容面对不同的用户我们可以使用不同的语气来表达;例如,我们对应专业的运维人员和小白用户应有不同的表达方式。

拉近彼此的距离

正确示范 错误示范

直接使用「你」、「我」来和用户对话,与用户建立亲密感。避免使用「您」,让用户感觉太过疏远。


正确示范 错误示范

注:不要在同一个句式中混用「你」和「我」,交互中指代混乱会让用户相当纠结。

友好、尊重用户

正确示范 错误示范

多给用户支持与鼓励,不要命令和强迫用户。

如果你想留住你的用户,当出错的时候就不要责怪用户。专注于解决问题,而不是指责。

表述不应过于极端

正确示范 错误示范

不要使用过于绝对的表述,这样会让用户觉得不适。

大小写和标点符号

英文名词大小写规范

正确示范 错误示范

产品名称全称首字母大写。产品名称缩写需要全部大写ESC、SLB 等;

注:整个单词都大写不利于阅读和识别,应尽量避免这种用法。


正确示范 错误示范

正确使用专有名词的大小写规范。


正确示范 错误示范

全英文的标题,标签,菜单项等等都要遵循英文句式中首字母大写的规范。

统计数据使用阿拉伯数字

正确示范 错误示范

这也是常见问题,用户对于数字的感知速度更快,使用数字而非文字表述会更加有效。

省略不必要的标点

正确示范 错误示范

为了帮助用户更加高效地扫视文本内容,可以省略不必要的断句点。

以下元素单独出现时可以省略标点:

  • 标签
  • 标题
  • 输入框下的提示
  • 悬停文本中的提示
  • 表格中的句子
正确示范 错误示范

以下元素单独出现时需要加上标点:

  • 多句或多段的文案和列表内容。
  • 任何文字链前的句子。

谨慎使用感叹号

正确示范 错误示范

感叹号会让文案显得过于激动,容易让气氛变得过于紧张。

注:当向用户表达问候或祝贺时,使用「!」是合理的语境,例如「欢迎回到社区!」。

基本标点规范

标点名称 字符 描述
空格 段落句子中的链接和文字之间增加空格; 全角字符和半角字符搭配时需要添加空格两个、2 个、50%。
句号 以下情况中不使用句号:输入框下的提示;表格中的句子;句末为文字链(链接前使用句号);按钮和标题。
感叹号 只在需要表达强烈情感的情况下使用。
连接号 - 不使用中文全角的连接号。如2012-11-12。
省略号 使用半角的「…」为省略号。
隐藏符号 * 多用于替换显示隐私信息。

正确地使用标点符号会让句子看起来更清晰和具有可读性。

具体使用请参考 1995 年中国标准出版社出版的《标点符号用法》,右图为重点列出的在设计中需要注意的部分。