學(xué)習UI設計需掌握的移動(dòng)端字體7準則

　　字體有許多值得深究的細節，細微的設計匯聚起來(lái)，對閱讀體驗會(huì )產(chǎn)生巨大影響ai字體間距。

　　可能你聽(tīng)過(guò)這說(shuō)法，好的字體是隱形的，不過(guò)更準確來(lái)說(shuō)，應該是好的字體讓閱讀行為毫不費力ai字體間距。

　　當視線(xiàn)掠過(guò)一行文字時(shí)，它是跳躍前進(jìn)的，我們稱(chēng)之為掃視ai字體間距。你讀的不是字母，甚至不是詞語(yǔ)，而是文字某部分的影像，大腦會(huì )補上它預期的內容。如果超出大腦預料，它會(huì )促使眼睛回去核實(shí)假設十分正確。通過(guò)在字里行間創(chuàng )造平順的視覺(jué)流動(dòng)，好的字體極度減輕了眼睛的負擔。

　　對任何字體工作者而言，在移動(dòng)設備上要面臨與生俱來(lái)的挑戰：空間有限，環(huán)境光通常比較微弱ai字體間距。不過(guò)將已經(jīng)用于web端的技巧稍加調整，我們就可以提升移動(dòng)設備的易讀性。

　　1. 留足空間

　　與普遍觀(guān)點(diǎn)恰好相反，字體并非屏幕上彎彎曲曲的線(xiàn)條排列；它主要在于周?chē)拖嗷ラg的空間ai字體間距。

　　字母本身對字體的影響，與構成它的空間相比，要小得多ai字體間距。

　　要理解這一點(diǎn)，了解字體從何而來(lái)很有幫助：字母o（還有b、c、p等等）中間的圓孔被稱(chēng)作“凹槽”ai字體間距。在最原始的印刷機上，鉛字由金屬雕刻而成，這些凹槽來(lái)自雕刻成型、排列在盤(pán)中的金屬活字。第一個(gè)字體設計師所處理的模具，實(shí)際上并不能用于印刷。字母本身對字體的影響，與構成它的空間相比，要小得多。

　　談到層次時(shí)，我們通常指的是h1到p，有時(shí)候還會(huì )到h6ai字體間距。但另外還有一種層次在影響著(zhù)行或段落的視覺(jué)流，這是特殊的層次：字母間距小于字間距，字間距小于行間距，以此類(lèi)推。

　　要在移動(dòng)端創(chuàng )造最佳易讀性，尤其要注意這些特殊層次，這些格式塔式的詞語(yǔ)、行、段落的文字組合，在自然光環(huán)境下同樣至關(guān)重要ai字體間距。

　　2. 行寬

　　行寬是一行文字的長(cháng)度ai字體間距。或者確切的說(shuō)，是一行文字的理想長(cháng)度，因為很難讓每一行都精確吻合。

　　眾所周知，舒適閱讀的理想行寬是65個(gè)字符左右ai字體間距。行寬產(chǎn)生的物理長(cháng)度，取決于字體的設計、字間距（見(jiàn)下文）和你使用的具體文字。本文開(kāi)篇的65個(gè)字符（譯者注：此處請參見(jiàn)英文原文），用PT Serif字體是26.875em寬，用Open Sans是28.4375em寬，用Ubuntu字體是27.3125em寬。如果再加入斜體、大小寫(xiě)和一大堆其他字體細節，還會(huì )有更大的差異。

　　在桌面端瀏覽器中，65個(gè)字符很難觸及邊緣，但在移動(dòng)設備上，65個(gè)字符（如果至少大到看得清）會(huì )超出瀏覽器的邊界ai字體間距。所以，在移動(dòng)設備上，你必須得縮減行寬。

　　移動(dòng)端并沒(méi)有普遍認可的行寬標準ai字體間距。不過(guò)傳統上，報紙或雜志上每一個(gè)窄列都會(huì )趨向于39個(gè)字符。鑒于這個(gè)理想行寬已經(jīng)經(jīng)歷了數個(gè)世紀的考驗，它在移動(dòng)端字體上也運轉良好。

　　3. 寬松行距、緊湊行距

　　行距是行之間的空間，行距太緊湊，會(huì )讓視線(xiàn)難以從行尾掃視到下一行首ai字體間距。行距太寬松，字間距會(huì )開(kāi)始形成隊列，產(chǎn)生了我們通常意義上的河流，阻斷了行的視覺(jué)流。

　　從左至右：理想行距、太緊湊、太寬松ai字體間距。

　　行距的標準通常是1.4em，但以我的經(jīng)驗，這對于屏幕來(lái)說(shuō)太緊湊了：在屏幕上表現良好的字體都有一個(gè)關(guān)鍵特征——大的凹槽，大凹槽需要更大一些的行距來(lái)保持空間層次ai字體間距。

　　反過(guò)來(lái)，更短的行寬需要更小的行距ai字體間距。所以你可能需要將桌面端的行距設得寬松點(diǎn)，同時(shí)記得將移動(dòng)端的設置得緊湊些。

　　4. 找到最佳狀態(tài)

　　所有字體至少都有一種最佳狀態(tài)，在屏幕上展現最佳的尺寸，還有在瀏覽器中最能保持字形的抗鋸齒選項ai字體間距。

　　最佳狀態(tài)下，多數筆畫(huà)通常都能排列在像素網(wǎng)格中——像素字體，如果你還記得的話(huà)，那些字體僅僅在字號調整到最佳狀態(tài)下才有效ai字體間距。

　　將字體設為最佳狀態(tài)能形成更強烈的對比ai字體間距。為移動(dòng)端設計時(shí)，對比尤其重要，因為戶(hù)外的強光可能分散注意。

　　你會(huì )發(fā)現，微調行距會(huì )使每行脫離完美像素匹配ai字體間距。我覺(jué)得，在移動(dòng)設備屏幕上，對比的重要性勝過(guò)行距。所以如果你不得不在行距上妥協(xié)，來(lái)保持每行契合像素網(wǎng)格，那就這么做吧。

　　通常設計師通過(guò)基線(xiàn)網(wǎng)格來(lái)排列文字ai字體間距。但在移動(dòng)設備上，我們需要使用x高度來(lái)代替（x高度顧名思義，就是小寫(xiě)字母x的高度）。從易讀性研究中，我們知道大腦識別的是文字頂部，而不是底部。所以要成就更加平順的視覺(jué)流，我們要確保字符頂部最契合像素網(wǎng)格。

　　5. 不要忽視起伏邊

　　起伏邊是一段文字的邊緣ai字體間距。你讀的多數內容是居左對齊的（至少對于拉丁語(yǔ)系而言），導致右邊沿參差不齊。

　　當視線(xiàn)從行尾跳至下一行首時(shí)，大腦最好要能判斷出下一次跳躍的角度和距離ai字體間距。把每次跳躍都想象成跑過(guò)跳板，如果間距保持一致，就會(huì )快很多。因此，文字左側邊緣應該是平的，每行從同一個(gè)地方開(kāi)始（對于從右至左的語(yǔ)言，恰好相反）。

　　因此你絕不應該將兩三行以上的文字居中對齊ai字體間距。

　　通常文字會(huì )設置成兩端對齊，這意味著(zhù)每行文字所占空間相等，所以?xún)蓚榷疾粫?huì )有起伏邊ai字體間距。我懷疑兩端對齊的流行和響應式設計有關(guān)，它教設計師們以塊狀形態(tài)思考。兩端對齊的文字產(chǎn)生的留白不統一。最糟的情況會(huì )導致一行中只有幾個(gè)字，相當不協(xié)調。更窄的行寬會(huì )加重兩端對齊的問(wèn)題，所以?xún)啥藢R的文字在移動(dòng)端是難以閱讀的。

　　從左至右：左對齊、居中對其、兩端對齊ai字體間距。

　　如果整潔真的非常重要，那么使用連字符號來(lái)讓起伏邊更平滑，絕不能在移動(dòng)端使用兩端對齊ai字體間距。

　　文字右側是起伏邊在移動(dòng)端還有一項額外好處：人們通常在易分心的場(chǎng)合閱讀文字，讀者視線(xiàn)頻繁地從文字上移開(kāi)——查看站名，或是接電話(huà)ai字體間距。起伏邊創(chuàng )造了一個(gè)隨機形狀，讓右撇子的視線(xiàn)可以通過(guò)重讀最少的文字，回到剛才的位置。

　　6. 減少反差

　　增強文字與背景對比的同時(shí)，我們也要減少不同層次文字間的反差ai字體間距。

　　在移動(dòng)端，實(shí)際可見(jiàn)的文字更少，所以反差被放大了ai字體間距。

　　其原因是我們的大腦基于環(huán)境來(lái)判斷重要性ai字體間距。在桌面端，標題可能是正文字號的兩倍甚至三倍，因為屏幕上有更多文字，所以這是有效的。在移動(dòng)端，實(shí)際可見(jiàn)的文字更少，所以反差被放大了。

　　多數設計師使用斐波那契數列式的字號組合ai字體間距。在移動(dòng)端，應該縮小比率來(lái)減少字號間的反差。比如，如果你使用黃金比例1.618與字號相乘。在移動(dòng)端，應該用更小的比例1.382來(lái)替代。

　　桌面端屏幕比移動(dòng)端容許更夸張的字號縮放ai字體間距。

　　7. 按比例調整字間距

　　為移動(dòng)端調整字號時(shí)，我們要意識到字間距發(fā)生了必要的變化ai字體間距。

　?。ㄏ日f(shuō)一句，不應該調整固有字距ai字體間距。固有字距是兩個(gè)字母相互組合時(shí)的距離，使它們的間距與其他字母間距在視覺(jué)上統一。創(chuàng )作字體時(shí)，就納入了固有字距的考量，這個(gè)過(guò)程可能要花上數月。如果你選用了一款專(zhuān)業(yè)的字體，它的固有字距就是合適的，如果你覺(jué)得不對，請換一個(gè)字體。）

　　字間距并不是固有字距ai字體間距。字間距是字體中應用在所有字符上的間距。通常你也不應該調整字間距。

　　大字號是個(gè)例外，拿標題和小號文字（比如腳注）舉例ai字體間距。大號文字需要減少字間距，小號文字需要增加字間距。前者是考慮到分組，后者則是為了增強對比。如果你在調整標題，或是用了通常字間距緊密的藝術(shù)字體，縮小時(shí)可能就需要把字間距放開(kāi)一點(diǎn)。

　　總結

　　字體是一門(mén)工藝，設計師終其一生都在精心打磨ai字體間距。的確如此，因為每個(gè)文字、每種字體和每項技術(shù)都帶來(lái)了新的挑戰。沒(méi)有一成不變的普適規律。

　　假如你追求易讀性，要牢記三條原則：行內的視覺(jué)流要平順，空間層級要清晰，要有足夠的對比ai字體間距。這尤其適用于移動(dòng)端頁(yè)面。

　　沒(méi)有不可撼動(dòng)的規則，全憑你雙眼決斷ai字體間距。不過(guò)本文的指南可以作為理想的出發(fā)點(diǎn)，讓你在移動(dòng)設備上優(yōu)美地排列文字。

　　UI設計，在目前這樣一個(gè)十分注重用戶(hù)體驗的時(shí)代，已經(jīng)逐漸成為一個(gè)被企業(yè)越來(lái)越重視的工作崗位，目前國內UI設計相關(guān)崗位的薪資待遇也在逐步提升，對于UI設計學(xué)習者來(lái)說(shuō)，發(fā)展機遇也在逐漸增多，學(xué)習UI設計，其實(shí)需要掌握很多零零碎碎的知識點(diǎn)，目前類(lèi)似CGWANG這樣的一些專(zhuān)業(yè)的CG培訓學(xué)校也逐漸重視UI交互設計相關(guān)課程的強化調整，旨在給予學(xué)生最直接最貼合崗位水平要求的培訓，幫助學(xué)生高效強化其專(zhuān)業(yè)技能ai字體間距。