中文排版指南（有点变态）
这里是工作狂的聚集地 |
||||
职场 |
学术 |
新媒体 |
设计 |
极客 |
纯文本的字里行间，
才真正见排版功力。
这两天我们厂牌在带设计新人，恰逢做纯文字排版的训练，让几个孩子备受折磨。
「纯文字排版」问题在职场中极其常见—— 写 Word 文档？PPT 排版？写微信图文/纯文本消息？设计海报？制作网页？
你会发现在没有任何配图的情况下，不同人排版一段文字的效果千差万别。因为真正懂中文文字排版的人，其排版方法的细节程度是非常“变态”的。
● ● ●
关于空格的问题，我在很多企业内训或者公开课都提及过。大多数职场新手根本不知道“空格”是文本排版首当其冲的技术，今天我特别推荐 GitHub 上交互设计师王奥OX的这份教学。
有一个设计圈的笑话说，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦：有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。
中英文之间需要增加空格
正确：
在 LeanCloud 上，数据存储是围绕
AVObject进行的。
错误：
在LeanCloud上，数据存储是围绕
AVObject进行的。在 LeanCloud上，数据存储是围绕
AVObject进行的。
完整的正确用法：
在 LeanCloud 上，数据存储是围绕
AVObject进行的。每个AVObject都包含了与 JSON 兼容的 key-value 对应的数据。数据是 schema-free 的，你不需要在每个AVObject上提前指定存在哪些键，只要直接设定对应的 key-value 即可。
例外：「豆瓣FM」等产品名词，按照官方所定义的格式书写。
中文与数字之间需要增加空格
正确：
今天出去买菜花了 5000 元。
错误：
今天出去买菜花了 5000元。
今天出去买菜花了5000元。
数字与单位之间需要增加空格
正确：
我家的光纤入户宽带有 10 Gbps，SSD 一共有 20 TB。
错误：
我家的光纤入户宽带有 10Gbps，SSD 一共有 10TB。
例外：度／百分比与数字之间不需要增加空格：
正确：
今天是 233° 的高温。
新 MacBook Pro 有 15% 的 CPU 性能提升。
错误：
今天是 233 ° 的高温。
新 MacBook Pro 有 15 % 的 CPU 性能提升。
全角标点与其他字符之间不加空格
正确：
刚刚买了一部 iPhone，好开心！
错误：
刚刚买了一部 iPhone ，好开心！
-ms-text-autospace to the rescue?
Microsoft 有个 -ms-text-autospace.aspx) 的 CSS 属性可以实现自动为中英文之间增加空白。不过目前并未普及，另外在其他应用场景，例如 OS X、iOS 的用户界面目前并不存在这个特性，所以请继续保持随手加空格的习惯。
● ● ●
标点符号
现在计算机用户习惯了网络书写，往往在正式文本中会错误使用标点符号。以下错误在书写正规文档时请勿出现，互联网营销文案另当别论。
不重复使用标点符号
正确：
德国队竟然战胜了巴西队！
她竟然对你说「喵」？！
错误：
德国队竟然战胜了巴西队！！
德国队竟然战胜了巴西队！！！！！！！！
她竟然对你说「喵」？？！！
她竟然对你说「喵」？！？！？？！！
● ● ●
全角和半角
全角指一个字符占用两个标准字符位置的状态。汉字字符和规定了全角的英文字符及国标 GB2312-80 中的图形符号和特殊字符都是全角字符。
半角，即一个字符占用一个标准字符的位置。
使用全角中文标点
正确：
嗨！你知道嘛？今天前台的小妹跟我说「喵」了哎！
核磁共振成像（NMRI）是什么原理都不知道？JFGI！
错误：
嗨! 你知道嘛? 今天前台的小妹跟我说 "喵" 了哎!
嗨!你知道嘛?今天前台的小妹跟我说"喵"了哎!
核磁共振成像 (NMRI) 是什么原理都不知道? JFGI!
核磁共振成像(NMRI)是什么原理都不知道?JFGI!
数字使用半角字符
正确：
这件蛋糕只卖 1000 元。
错误：
这件蛋糕只卖 １０００ 元。
例外：在设计稿、宣传海报中如出现极少量数字的情形时，为方便文字对齐，是可以使用全角数字的。
遇到完整的英文整句、特殊名词
其內容使用半角标点
正确：
乔布斯那句话是怎么说的？「Stay hungry, stay foolish.」
推荐你阅读《Hackers & Painters: Big Ideas from the Computer Age》，非常的有趣。
错误：
乔布斯那句话是怎么说的？「Stay hungry，stay foolish。」
推荐你阅读《Hackers＆Painters：Big Ideas from the Computer Age》，非常的有趣。
● ● ●
名词
名词牵涉的排版问题主要涉及英文，本不是文章探讨内容。不过关注者中有不少技术人员，所以在此蜻蜓点水。
专有名词使用正确的大小写
正确：
使用 GitHub 登录
我们的客户有 GitHub、Foursquare、Microsoft Corporation、Google、Facebook, Inc.。
错误：
使用 github 登录
使用 GITHUB 登录
使用 Github 登录
使用 gitHub 登录
使用 gｲんĤЦ8 登录
我们的客户有 github、foursquare、microsoft corporation、google、facebook, inc.。
我们的客户有 GITHUB、FOURSQUARE、MICROSOFT CORPORATION、GOOGLE、FACEBOOK, INC.。
我们的客户有 Github、FourSquare、MicroSoft Corporation、Google、FaceBook, Inc.。
我们的客户有 gitHub、fourSquare、microSoft Corporation、google、faceBook, Inc.。
我们的客户有 gｲんĤЦ8、ｷouЯƧquﾑгє、๓เςг๏ร๏Ŧt ς๏гק๏гคtเ๏ภn、900913、ƒ4ᄃëв๏๏к, IПᄃ.。
注意：当网页中需要配合整体视觉风格而出现全部大写／小写的情形，HTML 中请使用标准的大小写规范进行书写；并通过 text-transform: uppercase;／text-transform: lowercase; 对表现形式进行定义。
不要使用不地道的缩写
正确：
我们需要一位熟悉 JavaScript、HTML5，至少理解一种框架（如 Backbone.js、AngularJS、React 等）的前端开发者。
错误：
我们需要一位熟悉 Js、h5，至少理解一种框架（如 backbone、angular、RJS 等）的 FED。
● ● ●
争议
以下用法略带有个人色彩，既：无论是否遵循下述规则，从语法的角度来讲都是正确的。
链接之间增加空格
用法：
请 提交一个 issue 并分配给相关同事。
访问我们网站的最新动态，请 点击这里 进行订阅！
对比用法：
请提交一个 issue 并分配给相关同事。
访问我们网站的最新动态，请点击这里进行订阅！
简体中文使用直角引号
用法：
「老师，『有条不紊』的『紊』是什么意思？」
对比用法：
“老师，‘有条不紊’的‘紊’是什么意思？”
工具
| 仓库 | 语言 |
|---|---|
| vinta/paranoid-auto-spacing | JavaScript |
| huei90/pangu.node | Node.js |
| huacnlee/auto-correct | Ruby |
| sparanoid/space-lover | PHP (WordPress) |
| nauxliu/auto-correct | PHP |
| hotoo/pangu.vim | Vim |
| sparanoid/grunt-auto-spacing | Node.js (Grunt) |
| hjiang/scripts/add-space-between-latin-and-cjk | Python |
谁在这样做？
| 网站 | 文案 | UGC |
|---|---|---|
| Apple 中国 | Yes | N/A |
| Apple 香港 | Yes | N/A |
| Apple 台湾 | Yes | N/A |
| Microsoft 中国 | Yes | N/A |
| Microsoft 香港 | Yes | N/A |
| Microsoft 台湾 | Yes | N/A |
| LeanCloud | Yes | N/A |
| 知乎 | Yes | 部分用户达成 |
| V2EX | Yes | Yes |
| SegmentFault | Yes | 部分用户达成 |
| Apple4us | Yes | N/A |
| 豌豆荚 | Yes | N/A |
| Ruby China | Yes | 标题达成 |
| PHPHub | Yes | 标题达成 |
● ● ●
尾声
现代互联网图文产品中，文案、排版、交互已经彼此纠缠，以上还只是纯文本页面的入门知识。而对于：
❶ H5 页面文案设计
❷ Banner 等产品营销文案
❸ EDM 模块布局
……
这就是为什么我建议互联网媒体人要向交互设计师取经的原因。我早年也在传统南方报系下 21世纪经济报道工作，如今作为交互设计师也收获了不少专业心得。欢迎 9月 24日，在北京和我们聊聊。这是一场顶尖文案的训练班，扫描下方二维码加入。
其他你会感兴趣的内容
回复 配图学习如何快速找图片素材
回复 H 5了解社会化营销利器玩法
回复 排版读有史以来最全排版教学
H5、平面、视频、多媒体定制请致电
TEL：（021）3721 8818
抱歉，除了干货，其他什么也没有。