移動(dòng)端文字與排版設(shè)計(jì)的六個(gè)原則
在印刷與桌面端Web的傳統(tǒng)領(lǐng)域我們有很成熟的文字排版經(jīng)驗(yàn)购笆，在移動(dòng)時(shí)代爸业，這些經(jīng)驗(yàn)很多依然有效矫渔，但因顯示設(shè)備與使用環(huán)境發(fā)生了變化崔列，也給帶來(lái)了不少變化……
在印刷與桌面端Web這些傳統(tǒng)領(lǐng)域添诉，我們已經(jīng)有了很成熟的文字排版經(jīng)驗(yàn)屁桑。隨著移動(dòng)時(shí)代的到來(lái)，APP的界面設(shè)計(jì)栏赴，加上網(wǎng)站越來(lái)越多地轉(zhuǎn)身為響應(yīng)式設(shè)計(jì)以適應(yīng)多種顯示設(shè)備蘑斧，這些經(jīng)驗(yàn)很多依然有效，但因?yàn)轱@示設(shè)備與使用環(huán)境發(fā)生了變化，也給文字排版帶來(lái)了變化竖瘾。
大小反差
在桌面端我們可能會(huì)采用字號(hào)差異較大的文字組合沟突，移動(dòng)端屏幕較小，容納的文字也較少捕传，同等的字號(hào)差異在小屏幕上的感受會(huì)被放大惠拭。
原因是我們?cè)谑褂眠@兩種設(shè)備時(shí)的觀看距離不同，桌面端我們的眼睛離屏幕較遠(yuǎn)庸论，而在移動(dòng)端則相反职辅，因此我們應(yīng)該在移動(dòng)端使用較小的字號(hào)反差。
字重
不要使用PS中的文本加粗聂示，它不僅破壞字體本身的美感域携，還改變了文字原本的字寬而影響段落內(nèi)文字的對(duì)齊。合理的方式是使用字體本身的字重來(lái)控制催什，比如蘋(píng)方梆掸、STHeiti似扔、Helvetica Neue等字體本身提供Light拆魏、Regular缝驳、Medium等兩三種甚至更多的字重選擇。
字間距
不要輕易改變字體默認(rèn)的字間距旋圆，字體設(shè)計(jì)師已經(jīng)充分考慮了這款字體所適合的字間距宠默，如果不滿意可以更換字體。
顏色反差
移動(dòng)設(shè)備使用環(huán)境復(fù)雜多變而不局限在室內(nèi)灵巧，可能在室外搀矫，甚至暴露在強(qiáng)烈的陽(yáng)光下，應(yīng)確保文字在背景中不會(huì)識(shí)別困難刻肄，即使是色弱者也可以正常閱讀瓤球。WCAG 2.0中建議的兩者顏色反差比應(yīng)該高于4.5:1（AA級(jí)），才能確保更多人及環(huán)境都可以輕松閱讀敏弃。Sketch中有一個(gè)插件Color Contrast Analyser可以方便的檢測(cè)這個(gè)比值卦羡，你可以使用在線檢測(cè)工具Colour Contrast Check。
柵格系統(tǒng)
小屏幕上麦到，一些桌面端無(wú)關(guān)大雅的間距不等問(wèn)題會(huì)變得突出绿饵。
Lofter是網(wǎng)易一款精品優(yōu)雅的App，但其文章正文界面卻略有瑕疵：
可以看到段落右側(cè)與卡片的間距明顯大于左側(cè)瓶颠。造成這個(gè)問(wèn)題的原因是設(shè)計(jì)時(shí)對(duì)文本框的寬度與文字大小之間在關(guān)系考慮不周全拟赊，導(dǎo)致文字并不能完美地填充滿文本框。
上圖為iPhone5中此界面的放大效果并加上了輔助線粹淋，仔細(xì)觀察吸祟，去除黃色部分各20px的間距后瑟慈，文本框?qū)挾仁?58px，而正文使用的字號(hào)是30px屋匕，所以行末留下18px的空余空間封豪。如果字號(hào)定為31px，則剛好可以放下18個(gè)字后填滿558px像素的文本框炒瘟。
當(dāng)然31px的字號(hào)在實(shí)際環(huán)境中可能并不是一個(gè)最合理的字號(hào)設(shè)定，因?yàn)樗⒉荒鼙徽褂玫紷1x的iOS開(kāi)發(fā)環(huán)境第步。在實(shí)際設(shè)計(jì)中疮装，可以先設(shè)定一個(gè)柵格系統(tǒng)，以iPhone5為例粘都，定義最小柵格為8x8px的話廓推，得到如下一個(gè)柵格圖：
以8為基本單位，把所有字號(hào)翩隧、文本框?qū)挾仍O(shè)定為8的倍數(shù)樊展，這樣我們就可以確保漢字始終保持對(duì)齊。
在英文的段落排版中堆生，通常是左側(cè)對(duì)齊专缠，而讓右側(cè)自然形成起伏邊（rag）。對(duì)中文排版與閱讀習(xí)慣而言則相反淑仆，段落的頭尾對(duì)齊尤其重要涝婉。
先來(lái)看一個(gè)反例：
這是Zaker的新聞?wù)牡谋憩F(xiàn)，在夾雜了數(shù)字或英文字母字符的情況下蔗怠，原本中文的整齊排列被打亂了墩弯，右側(cè)嚴(yán)重參差不齊，非常難看寞射。
看看同一篇文章其它App是怎么處理的：
左邊是網(wǎng)易云閱讀渔工，右邊是網(wǎng)易新聞。兩者的處理方式類似桥温，都是通過(guò)程序的設(shè)置引矩，微調(diào)文字的間距以補(bǔ)足右邊存大的空白，區(qū)別是當(dāng)標(biāo)點(diǎn)出現(xiàn)在行末時(shí)策治，網(wǎng)易云閱讀將標(biāo)點(diǎn)外置脓魏，而網(wǎng)易新聞將標(biāo)點(diǎn)放在了內(nèi)部。
文字的對(duì)齊方式通惫，可以用簡(jiǎn)單的代碼實(shí)現(xiàn)：
Web App中茂翔，使用CSS類中指定justify屬性值控制即可，以下為兼容性較佳的方案
.space-betw?{
-webkit-box-pack:?justify;
-moz-box-pack:?justify;
-ms-flex-pack:?justify;
-webkit-justify-content:?space-between;
justify-content:?space-between;
}
原生iOS中履腋，需為字符串對(duì)象設(shè)置NSTextAlignmentJustified值
-?(NSDictionary?*)demoTextAttributes?{
NSMutableParagraphStyle?*ps?=?[NSMutableParagraphStyle?new];
ps.alignment?=?NSTextAlignmentJustified;
//?here,?NSBaselineOffsetAttributeName?must?be?set?though?the?default?value?is?0?to?make?the?justified?work.
return?@{NSParagraphStyleAttributeName?:ps,?NSBaselineOffsetAttributeName?:?@0.0f};
}
這個(gè)方法珊燎，結(jié)合之前我們通過(guò)柵格系統(tǒng)對(duì)字號(hào)和文本容器寬度的規(guī)范定義惭嚣，終于可以避免App中常見(jiàn)的段落文字對(duì)不齊，對(duì)不準(zhǔn)的老問(wèn)題悔政。
后記
以上是實(shí)際工作中的經(jīng)驗(yàn)總結(jié)晚吞，移動(dòng)平臺(tái)、硬件設(shè)備谋国、字體本身都在不斷變化槽地，相應(yīng)的設(shè)計(jì)方法也不會(huì)永遠(yuǎn)一成不變，但總的原則是不變的芦瘾，那就是讓內(nèi)容更易讀捌蚊。
