Apple 官网里三个令我惊叹的中文排版细节

无论是软件还是硬件,Apple 公司对于细节上面的执着程度可以说无人能出其右。我作为一名设计师,时常也会翻阅 Apple 的官网,拜读、细品,每次都会有点新发现。

无论是软件还是硬件,Apple 公司对于细节上面的执着程度可以说无人能出其右。我作为一名设计师,时常也会翻阅 Apple 的官网,拜读、细品,每次都会有点新发现。

这次就我记录下近期两个在 Apple 官网内发现的三处让我瞠目结舌、赞叹不已中文排版细节。感谢 Apple,让我重新认识了“中文排版”,感觉以前自己做的设计只能算是“文字排列”。

一、大标题的视觉居中处理

Apple 产品介绍的文案无论长短,多数是会以句号结束,这是他们的文案风格。而如果此时文案需要居中对齐,多出来的句号,会导致文案整体偏左,如下图所示,取了一加手机的官网截图作为例子:

句末标点导致的居中文案视觉偏左

造成视觉偏左的原因,就是因为大部分字体的中文标点占位是1em,一个中文标点实际上只有约0.5em宽,右侧却还有0.5em的空白。CSS 实现文字居中时,是将整块文本内容居中的,所以自然右侧空白也会占位。

这种明显影响视觉观感的情况,Apple 自然不会让他出现在自家官网内。所以我也发现了他们有两种方式,来处理因句末标点导致的居中文案视觉偏左的问题。

1.行首增加 padding,将文案往右推

行首增加 padding,与句末的标点相抵消

既然是句末的标点占位导致的文案视觉偏左,我们在行首增加一个标点占位的距离,就能抵消掉向左偏移的问题,实现视觉居中了。

行首增加 padding,与句末的标点相抵消
本地化处理:html[lang=zh-CN]让该样式仅在网站语言是简体中文下生效

这种做法确实可以实现视觉居中,且用法较简单。我们可以给h1h2同一加上样式,或者需要特殊处理的文案加一个类名,所以大量使用也不会增加太多工作量。但同时也有不足之处:

文案换行时,效果可能不符合预期

因为做法是给一句文本左边增加间距,如果这段文字换行了,此时效果未必是我们想要的。另一种极端情况,在文字换行规则设置有误的时候,会增加句首出现标点的出现概率。

2.绝对定位,让句末的标点不占位

“罪魁祸首”是句末的标点占位导致,Apple 干脆将句末的标点设置成在行内绝对定位,让其不占位,即可完美避免该问题的出现,如下图所示:

绝对定位的元素不占位,不参与文字的居中对齐

让 CSS 只针对前面的来文字计算居中,不管前面的文字的字数多少,怎么换行,句末的标点老老实实跟在最后面就行了。不打扰,不占位,而且不管这句话的文字换行规则怎么设置,标点都不可能出现在句首。

句末的标点绝对定位,修复视觉偏移

这么看起来,第二种方法效果更好,各种边缘情况也能兼顾到,不会出现大问题。就是前端需要的工作量可能稍微大了一点,要手动给这种标点每个都加上绝对定位…

二、大标题的空格处理

我们都知道,在中文和西文/数字之间,要添加一点空白间隙(W3C推荐不多于四分之一个汉字宽)。考虑到实现成本,通常在网页中我们都用空格来实现。

汉字与西文字母、数字之间的空白

用空格键来实现会遇到一个棘手的问题是,如果一段文案文本的字体尺寸较大、或者字体大小不一,这间距会特别大,效果未必如我们所愿,如下图:

间隙过大,可能会影响观感

而 Apple 官网内有一个新做法,确实也是在中文和数字之间用一个空格符号来隔开,但这个空格符号的字体大小被设置父元素的二分之一。

这种做法实现了《W3C 中文排版需求》所要求的:

原则上,汉字与西文字母、数字间使用不多于四分之一个汉字宽的字距或空白。

为什么 Apple 这里没有用padding来做,也没有用  这类 HTML 特殊空格字符来做,我猜测是以下原因:

  1. 用普通的空格来做,复制文案的时候也会带上空格,这是padding做法所不能提供的。而且是相对单位em。可以确保不同分辨率,不同字体大小情况下保持同一视觉体验;
  2. 至于  这种做法,会另间距不受控制,毕竟这种空白符号的占位多少,还是根据字体走的,没办法设定具体的占位宽度。

三、避免单字成行

不管是中文还是西文,文字排版上都有着「孤字不成行、孤行不成页」的规则。这是多年来传统实体印刷得出来的经验,用意也是提升阅读的体验。

孤字:若段落末行仅有一个汉字,或一个汉字加上标点符号,即为孤字,另一种说法是“单字成行”。

孤行:若页面中第一行为前一页最后一个段落的末行,即为孤行。

什么是孤字和孤行

通常孤行问题只会出现在小说、阅读等需要模拟翻页的软件。所以在现代网页的设计中,我们只需关注前半句「孤字不成行」。尽可能避免在版式中出现孤字的情况。

我们设计师在设计界面时,为避免孤字的存在,也会适当地调整行宽,或者微调文案。但与书籍,报刊等实体印刷品不同,网页在浏览器内呈现,容器宽度是可以动态变化的。

网页的特点,使得单字成行不可避免?

这就导致了在设计稿内,确实没有孤字存在,但谁能保证,浏览器宽度改变或者用户调整网页字体后,没有孤字存在呢?所以,我们需要透过前端 CSS 的一些能力,确保在任何时候都不会出现孤字。来看看 Apple 的做法吧。

1.中文语境的处理方式

Apple 给有可能出现孤字的文本设置为行内块元素,并加上white-space: nowrap;,用 CSS 来阻止某段文本的换行。所以这时不论宽度、字体大小如何调整,都能确保最后的几个字是在同一行内,不出现孤字的情景。

上图的「具体做法」中,nowrap就能起到避免换行的作用了。苹果加上inline-block的做法有点迷,会导致用谷歌翻译该网站时,浏览器会将行内块元素识别成独立的一句话,首字母大写且与前文没有了空格。

可以看看设置前后的对比,高下立判。

实际上除了「阻止孤字情况出现」,在一些专有名词,或分开后会导致理解困难的短语里,都可以视具体情况用 CSS 样式来阻止文字换行。灵活运用,最终目标都是为了提升网站的观感,阅读体验。

2.英文语境的处理方式

在 CJK 文字里,每一个字符都可以触发换行,所以才会出现孤字的情况。而在英文语境下,因为每个单词中间都会用空格来隔开,所以在默认的网页换行规则下,英文语境换行符是空格,同样也会出现孤字的情况。

英文语境下的孤字

在英文版网站,Apple 用 的方式来阻止孤字的出现,如下图

用   来阻止单词之间断开
 全称是 Non-breaking space(不换行空格)。因为普通的空格在网页中会被视为换行符,而  可以禁止自动换行,且多个空格连续出现时,不会被 HTML 合并。关于 Web 端换行规则的其他探索,可以去我的这篇文章内了解更多。

 来阻止网页中出现孤字,确保流畅的阅读体验的做法,除了 Apple 官网,我也观察到有不少网站是这样做的,比如 ShopifyFramerFigma 等等,看来这应该是一种比较成熟的处理方式了。

要注意&nbps;的做法有一个缺点,如果单词内有 hyphen(连字符”-”),或设置了hyphen: auto;时,可能会无法阻止换行。因为连字符本身也可以触发换行,&nbps;只能确保自己本身的空格不触发换行。

但如果文案是已确定的,设计时能够确保不会出现 hyphen 导致的极端情况,那么可以不用顾虑太多。

以上的发现,是可以扎扎实实用在我们业务场景中去的。公司的官网、产品功能展示页等等,都是能够提升观感,提升体验的细节位。

看来平常要多多拜读顶尖的设计案例,才能收获多多。以往自己看到的/没看到的问题,大佬们都已经有完善的解决方案了。

苹果秋季发布会即将来临,又有一波新品出现,指不定我又能从产品介绍页中发现一些有趣的细节~

参考网站