mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 13:09:40 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

Update copywriting.md

Browse Source
This commit is contained in:
竹尔 2018-01-01 18:15:55 +08:00 committed by Wei Zhu
parent 12232e62b0
commit 5997b6e2d6
1 changed files with 45 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
docs/spec/copywriting.md
View File

@ -25,8 +25,8 @@ title:
### 明确表述立足点
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/JTdXAMSRReuZErOBWdYc.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/BRwGAoGwvINrllzufuCA.png" alt="错误示范" description="侧重在『我们』为用户提供了什么，而不是以用户视角的关注点为中心。">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/uBzzoUAMupDWPXFUeRIn.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/EOVTgwoOsYptbkUqpMKn.png" alt="错误示范" description="侧重在『我们』为用户提供了什么，而不是以用户视角的关注点为中心。">
在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述的立足点很重要。
@ -36,8 +36,8 @@ title:
### 精简语句
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/ZiROyfAdBfUrEdOBYAIb.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/TLTPbYTIYtiFBdhGzzuH.png" alt="错误示范">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/dAcEgVUcAcUqbMjaEydw.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/xRUVqOQsBOqzdmZIQDLa.png" alt="错误示范">
省略无用词汇，不重复用户已知事实；在绝大多数交互场景下，都无需界面描述出全部的细节。
@ -45,8 +45,8 @@ title:
### 使用用户熟悉的语言
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/mnKFWLrBvzWLrfYALlkZ.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/KOubjQVgYFwpvYJwXXrQ.png" alt="错误示范" description="站在用户的角度，说用户熟悉的话。">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/FOcLNnbiaZOTMRHAyeVZ.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/tUmMsssHDlGqlKbRwYlH.png" alt="错误示范" description="站在用户的角度，说用户熟悉的话。">
使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。
@ -54,13 +54,13 @@ title:
### 表述一致
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/kZxTKnieUptIioCYsMFD.png" alt="正确示范" description="备注描述使用相同的介词。">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/moXaaoyeNxPHLcanTNVG.png" alt="错误示范" description="同一区块描述中出现了『受』和『被』两个不同的介词。">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ToMaEybHQCrcAfcYRbxF.png" alt="正确示范" description="备注描述使用相同的介词。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/BUFFQwfvLqTLrOzaEccX.png" alt="错误示范" description="同一区块描述中出现了『受』和『被』两个不同的介词。">
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/gwNjncNTEREdWiKYrUAL.png" alt="正确示范" description="在同一页面、同一区域在语序上一致。">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/DYJkKoQzEKCQGxATBdsB.png" alt="错误示范" description="语序上不一致，会影响用户理解成本。">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/AAaXSGqNUBlZChkrMbYl.png" alt="正确示范" description="在同一页面、同一区域在语序上一致。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/DYCoXTphnpdkMMCtyMdN.png" alt="错误示范" description="语序上不一致，会影响用户理解成本。">
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/pZZSDjsQLqSVPKOYPgso.png" description="操作名称和目标页面的标题一致。">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/sNqQYWEJCAzCxcYCBGYD.png" description="操作名称和目标页面的标题一致。">
- 描述同一个事物的词汇要保持统一;
- 上下文的语法、语种、语序要保持统一;
@ -68,8 +68,8 @@ title:
### 重要的信息放在显著位置
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/AGAnUPBZlPrjyXIktJCq.png" alt="正确示范" description="在有限的空间内将重要的信息放在最前面（或通过高亮、留白等方式突出重要信息）。">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/mylnmEBXVmlLurzJWiZq.png" alt="错误示范" description="用户最关心的信息内容藏在段落中，不易搜寻。">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/clWcgMqBypLAAosLQHes.png" alt="正确示范" description="在有限的空间内将重要的信息放在最前面（或通过高亮、留白等方式突出重要信息）。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/hSiLeNGgmeqWvVHCNoeE.png" alt="错误示范" description="用户最关心的信息内容藏在段落中，不易搜寻。">
让用户第一眼看到最重要的内容，不用到段落中寻找。
@ -77,28 +77,28 @@ title:
### 完整、直接得阐述信息
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/GASGWmhAxtIgBeJWVtBu.png" alt="正确示范" description="用户可以从中了解了设置后会有什么好处。">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/pEJsSOGVBiAjcSPhYWkh.png" alt="错误示范" description="用户感受不到设置的意义，不会去设置。">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ioBKvBqCNzUwQDyjMiIa.png" alt="正确示范" description="用户可以从中了解了设置后会有什么好处。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/EiwnPMETQAmWlHSGAWEX.png" alt="错误示范" description="用户感受不到设置的意义，不会去设置。">
当我们希望用户进行一个操作时，要专注于用户能得到什么，以及用户的感受。在操作前引导告知用户操作的目的或重要性，能促进用户更愿意去执行。
<br />
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/tizekZPwmzDRErFQHORz.png" alt="正确示范" description="相对于『失败』，『无法完成』是更加客观的结果，更容易让用户在心理上接受。用户需要知道在出现问题的情况下如何进行下一步操作。">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/AdKMFRcCKgTLUuYaAAkN.png" alt="错误示范" description="对于异常情况不是冷冰冰告诉你『失败』。">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/dlAkFzezQEwtNnZDWpQh.png" alt="正确示范" description="相对于『失败』，『无法完成』是更加客观的结果，更容易让用户在心理上接受。用户需要知道在出现问题的情况下如何进行下一步操作。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/qqrgyclPnhBFgPEYsBXd.png" alt="错误示范" description="对于异常情况不是冷冰冰告诉你『失败』。">
报错是 UI 中常见的功能，它同样是用户体验中不可小视的组成部分。当用户填写的内容出错的时候，你的报错信息应当符合用户的认知，用易于理解的方式表述出来。
### 用词精准完整
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/munDtTOsHjRcvOfVEsCS.png" alt="正确示范" description="完整的表达。">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/itpQLlpjvEGgdvHkdGOC.png" alt="错误示范" description="不完整，有歧义或太口语化。">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/mCusyeTfzbyDCYxvwEPM.png" alt="正确示范" description="完整的表达。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/cugctFUEXcVUNnsZRLMD.png" alt="错误示范" description="不完整，有歧义或太口语化。">
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/DOJdYTWqpbrwFJMTDAZD.png" alt="正确示范" description="专业用语精准。">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/EYQBkePnyOXZhirDXBJu.png" alt="错误示范" description="专业的行业用词有别字。">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/jvYzIkRbdICzNvxeVfBr.png" alt="正确示范" description="专业用语精准。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/TFhFTbqHlEXTMOyCxIvN.png" alt="错误示范" description="专业的行业用词有别字。">
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/KMnFshyMGODpIBEzWGci.png" alt="正确示范" description="时间信息的表述精准完整。">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/MOppPcGzLxutrzmtxNSd.png" alt="错误示范" description="时间信息的描述词不是具体的『日』、『月』，容易让用户产生困扰。">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/qIwLlXOyJQlAqFwWSUuo.png" alt="正确示范" description="时间信息的表述精准完整。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/HBCyJcXZYmtLECZUtjzE.png" alt="错误示范" description="时间信息的描述词不是具体的『日』、『月』，容易让用户产生困扰。">
<table style="font-size:12px;float:right;width:600px;margin-left:60px;margin-bottom:100px;">
<tr>
@ -150,22 +150,22 @@ title:
### 拉近彼此的距离
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/qYJmqCMojZrLHDhTeDDC.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/VtTmFViiLyzffMlylBab.png" alt="错误示范" description="建议不要使用『您』，太过客气，让用户感觉有些疏远。">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/LXVkAEabvRXwOTYkewzV.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/KxSWWhUiCPYaadFucIEr.png" alt="错误示范" description="建议不要使用『您』，太过客气，让用户感觉有些疏远。">
直接使用『你』、『我』来和用户对话，与用户建立亲密感。避免使用『您』，让用户感觉太过疏远。
<br />
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/yjQeptUiKWSvRBhgiBEi.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/EvbzsGGPhPvPwUEAEjui.png" alt="错误示范" description="同时出现了称谓『我』和『你』，用户会感到迷惑，不清楚到底指代对象是谁。">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/mkFlHfRJxVaFpCVnhJxz.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/SwzkNWboQRPncuORBPmL.png" alt="错误示范" description="同时出现了称谓『我』和『你』，用户会感到迷惑，不清楚到底指代对象是谁。">
> 注：不要在同一个句式中混用『你』和『我』，交互中指代混乱会让用户相当纠结。
### 友好、尊重用户
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/MxAUSbigfmwsTsDGrKAh.png" alt="正确示范" description="引导用户正确输入内容。">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/XvmDmIOKZiKbPdXiVlow.png" alt="错误示范" description="不能、不要、请勿都给人命令或强迫的感觉。">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/SiyDiAnuljqDrZgcFiXn.png" alt="正确示范" description="引导用户正确输入内容。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ZSgEJWJJeOYBDDsenOuS.png" alt="错误示范" description="不能、不要、请勿都给人命令或强迫的感觉。">
多给用户支持与鼓励，不要命令和强迫用户。
@ -173,8 +173,8 @@ title:
### 表述不应过于极端
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/nZjyHDlBnVtMSTBbhlxj.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/ruQzHpRSGjXwERKXiVXi.png" alt="错误示范" description="『绝不』过于绝对，让用户感到不适。">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/zXLrYMCesvdZXdSoJEcP.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/MTIsErHJIswPHVfUFQnI.png" alt="错误示范" description="『绝不』过于绝对，让用户感到不适。">
不要使用过于绝对的表述，这样会让用户觉得不适。
@ -182,8 +182,8 @@ title:
### 英文名词大小写规范
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/CytTOToWDKUvpWlAHwBu.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/JuyMVqYJOnQzwZnwucml.png" alt="错误示范">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ruuIBHvkqfJrCNuWrGZZ.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/yEqZfFLnyUACJhprXCqt.png" alt="错误示范">
产品名称全称，首字母大写。产品名称缩写需要全部大写，如：ESC、SLB 等；
@ -191,29 +191,29 @@ title:
<br />
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/nKHHKvQMIKGTmNSVtIZQ.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/ndRBdHSdlsTogOxfiyYg.png" alt="错误示范">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/aVOygdsFMYeQZJNWDouv.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/obNsZSLYKAqMtsXrEHYg.png" alt="错误示范">
正确使用专有名词的大小写规范。
<br />
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/GCqgBzYXTRBbfffRoFaK.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/hDoSuattUMGWQNPOMysN.png" alt="错误示范">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/sDSMymVeCJGoMJLBpoHe.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/tUQvbqMLPGFjwiywBmJP.png" alt="错误示范">
全英文的标题，标签，菜单项等等都要遵循英文句式中首字母大写的规范。
### 统计数据使用阿拉伯数字
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/jUlNKkbKgKsviSGZpEyu.png" alt="正确示范" description="阿拉伯数字的信息传递效率更高">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/pLAutmjpTnexUTaUAEXN.png" alt="错误示范">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/WOtjvzMQnfuAHJXcifgW.png" alt="正确示范" description="阿拉伯数字的信息传递效率更高">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/LhJSOSsQrMFCxtFHqNqL.png" alt="错误示范">
这也是常见问题，用户对于数字的感知速度更快，使用数字而非文字表述会更加有效。
### 省略不必要的标点
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/asvLGJUPfJmkSthIWzcG.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/mrUQxiFLinuBELviCRIP.png" alt="错误示范">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/QGpLpUFgZnTDzYJCeuun.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/fQhiFpjLcHJtJJGzElUT.png" alt="错误示范">
为了帮助用户更加高效得扫视文本内容，可以省略不必要的断句点。
@ -225,8 +225,8 @@ title:
- 悬停文本中的提示
- 表格中的句子
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/bviZMQSqXqCSNTBTJwzs.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/QrcYEddtAMTHkPeeqiFw.png" alt="错误示范">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/UMLpWSOrmsYFlozQFGXu.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/raqemTlQncDdOczUCKvo.png" alt="错误示范">
以下元素单独出现时需要加上标点：
@ -235,8 +235,8 @@ title:
### 谨慎使用感叹号
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/omCTCcBDzuFueCjjPxNJ.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/XlPHSVrOFXYkYbgKEwYQ.png" alt="错误示范">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/CJAEXjDelaghIOHZAxgh.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/SgcrhDeaVpNmeFWRiJnc.png" alt="错误示范">
感叹号会让文案显得过于激动，容易让气氛变得过于紧张。