原文出
处：http://www.ui.cn/detail/72212.h
tml
在印刷与桌面端Web的传统领域我们
有很成熟的文字排版经验，在移动时
代，这些经验很多依然有效，但因显
示设备与使用环境发生了变化，也给
带来了不少变化……
在印刷与桌面端Web这些传统领域，
我们已经有了很成熟的文字排版经
验。随着移动时代的到来，APP的界
面设计，加上网站越来越多地转身为
响应式设计以适应多种显示设备，这
些经验很多依然有效，但因为显示设
备与使用环境发生了变化，也给文字
排版带来了变化。
ꢀ
ꢀ在桌面端我们可能会采用字号差
异较大的文字组合，移动端屏幕较
小，容纳的文字也较少，同等的字号
差异在小屏幕上的感受会被放大。
ꢀ
ꢀ原因是我们在使用这两种设备时
的观看距离不同，桌面端我们的眼睛
离屏幕较远，而在移动端则相反，因
此我们应该在移动端使用较小的字号
反差。
ꢀ
ꢀ
不要使用PS中的文本加粗，它不仅破
坏字体本身的美感，还改变了文字原
本的字宽而影响段落内文字的对齐。
合理的方式是使用字体本身的字重来
控制，比如苹方、STHeiti、Helvetica
Neue等字体本身提供Light、Regular、
Medi um等两三种甚至更多的字重选
择。
不要轻易改变字体默认的字间距，字
体设计师已经充分考虑了这款字体所
适合的字间距，如果不满意可以更换
字体。
ꢀ
移动设备使用环境复杂多变而不局
限在室内，可能在室外，甚至暴露在
强烈的阳光下，应确保文字在背景中
不会识别困难，即使是色弱者也可以
正常阅读。WCAG 2.0中建议的两者
颜色反差比应该高于4.5:1（AA
级），才能确保更多人及环境都可以
轻松阅读。Sketch中有一个插件Color
Contrast Analyser可以方便的检测这个
比值，你可以使用在线检测工
小屏幕上，一些桌面端无关大雅的间
距不等问题会变得突出。
ꢀ
ꢀLofter是网易一款精品优雅的
App，但其文章正文界面却略有瑕
疵：
ꢀ
ꢀ可以看到段落右侧与卡片的间距
明显大于左侧。造成这个问题的原因
是设计时对文本框的宽度与文字大小
之间在关系考虑不周全，导致文字并
不能完美地填充满文本框。
ꢀ
ꢀ上图为iPhone5中此界面的放大
效果并加上了辅助线，仔细观察，去
除黄色部分各20px的间距后，文本框
宽度是558px，而正文使用的字号是
30px，所以行末留下18px的空余空
间。如果字号定为31px，则刚好可以
放下18个字后填满558px像素的文本
框。
ꢀꢀ当然31px的字号在实际环境中可
能并不是一个最合理的字号设定，因
为它并不能被整除使用到@1x的iOS
开发环境。在实际设计中，可以先设
定一个栅格系统，以iPhone5为例，
定义最小栅格为8x8px的话，得到如
下一个栅格图：
ꢀꢀ以8为基本单位，把所有字号、
文本框宽度设定为8的倍数，这样我
们就可以确保汉字始终保持对齐。
ꢀ
“...所有的元素都是正方體。但是
從二十世紀開始使用標點後，到了現
代桌上出版時代，許多排版工具軟體
都直接套用來自日本的「禁則處理」
—
即避頭尾點；加上與西方文字混排
的狀況越來越多，以至於無法做到縱
橫對齊的基礎。但是至少段落的頭尾
還是需要對齊。這就是為什麼對齊對
電子書與長文章來說十分重要的原
因。 ”
—
—董福興《簡單做好中文排版》
ꢀ
ꢀ在英文的段落排版中，通常是左
侧对齐，而让右侧自然形成起伏边
（rag）。对中文排版与阅读习惯而
言则相反，段落的头尾对齐尤其重
要。
ꢀꢀ先来看一个反例：
ꢀꢀ这是Zaker的新闻正文的表现，
在夹杂了数字或英文字母字符的情况
下，原本中文的整齐排列被打乱了，
右侧严重参差不齐，非常难看。
ꢀꢀ看看同一篇文章其它App是怎么
处理的：
ꢀꢀ左边是网易云阅读，右边是网易
新闻。两者的处理方式类似，都是通
过程序的设置，微调文字的间距以补
足右边存大的空白，区别是当标点出
现在行末时，网易云阅读将标点外
置，而网易新闻将标点放在了内部。
ꢀꢀ文字的对齐方式，可以用简单的
代码实现：
ꢀꢀWeb App中，使用CSS类中指定
justify属性值控制即可，以下为兼容
性较佳的方案
.
space-betw { -webkit-box-pack: ju
stify; -moz-box-pack: justify; -ms-
flex-pack: justify; -webkit-justify-
content: space-between; justify-cont
ent: space-between;}
ꢀꢀ原生iOS中，需为字符串对象设
置NSTextAl i gnmentJusti fi ed值
-
(NSDictionary *)demoTextAttributes
NSMutableParagraphStyle *ps =
{
[
.
d;
NSMutableParagraphStyle new];
alignment = NSTextAlignmentJustifie
// here, NSBaselineOffsetAttri
ps
buteName must be set though the defa
ult value is 0 to make the justified
work.
return @{NSParagraphStyleA
ttributeName :ps, NSBaselineOffsetAt
tributeName : @0.0f};}
ꢀꢀ这个方法，结合之前我们通过栅
格系统对字号和文本容器宽度的规范
定义，终于可以避免App中常见的段
落文字对不齐，对不准的老问题。
以上是实际工作中的经验总结，移动
平台、硬件设备、字体本身都在不断
变化，相应的设计方法也不会永远一
成不变，但总的原则是不变的，那就
是让内容更易读。
