想讓界面優(yōu)雅易讀？跟你聊聊移動(dòng)端字體的7準(zhǔn)則！

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

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

一、留足空間

與普遍觀點(diǎn)恰好相反，字體并非屏幕上彎彎曲曲的線條排列；它主要在于周圍和相互間的空間。

字母本身對(duì)字體的影響，與構(gòu)成它的空間相比，要小得多。

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

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

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

二、行寬

行寬是一行文字的長(zhǎng)度?；蛘叽_切的說，是一行文字的理想長(zhǎng)度，因?yàn)楹茈y讓每一行都精確吻合。

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

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

移動(dòng)端并沒有普遍認(rèn)可的行寬標(biāo)準(zhǔn)。不過傳統(tǒng)上，報(bào)紙或雜志上每一個(gè)窄列都會(huì)趨向于39個(gè)字符。鑒于這個(gè)理想行寬已經(jīng)經(jīng)歷了數(shù)個(gè)世紀(jì)的考驗(yàn)，它在移動(dòng)端字體上也運(yùn)轉(zhuǎn)良好。

三、寬松行距、緊湊行距

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

從左至右：理想行距、太緊湊、太寬松。

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

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

四、找到好狀態(tài)

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

好狀態(tài)下，多數(shù)筆畫通常都能排列在像素網(wǎng)格中——像素字體，如果你還記得的話，那些字體僅僅在字號(hào)調(diào)整到好狀態(tài)下才有效。

將字體設(shè)為好狀態(tài)能形成更強(qiáng)烈的對(duì)比。為移動(dòng)端設(shè)計(jì)時(shí)，對(duì)比尤其重要，因?yàn)閼敉獾膹?qiáng)光可能分散注意。

你會(huì)發(fā)現(xiàn)，微調(diào)行距會(huì)使每行脫離好像素匹配。我覺得，在移動(dòng)設(shè)備屏幕上，對(duì)比的重要性勝過行距。所以如果你不得不在行距上妥協(xié)，來保持每行契合像素網(wǎng)格，那就這么做吧。

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

五、不要忽視起伏邊

起伏邊是一段文字的邊緣。你讀的多數(shù)內(nèi)容是居左對(duì)齊的（至少對(duì)于拉丁語系而言），導(dǎo)致右邊沿參差不齊。

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

因此你絕不應(yīng)該將兩三行以上的文字居中對(duì)齊。

通常文字會(huì)設(shè)置成兩端對(duì)齊，這意味著每行文字所占空間相等，所以兩側(cè)都不會(huì)有起伏邊。我懷疑兩端對(duì)齊的流行和響應(yīng)式設(shè)計(jì)有關(guān)，它教設(shè)計(jì)師們以塊狀形態(tài)思考。兩端對(duì)齊的文字產(chǎn)生的留白不統(tǒng)一。最糟的情況會(huì)導(dǎo)致一行中只有幾個(gè)字，相當(dāng)不協(xié)調(diào)。更窄的行寬會(huì)加重兩端對(duì)齊的問題，所以兩端對(duì)齊的文字在移動(dòng)端是難以閱讀的。

從左至右：左對(duì)齊、居中對(duì)其、兩端對(duì)齊。

如果整潔真的非常重要，那么使用連字符號(hào)來讓起伏邊更平滑，絕不能在移動(dòng)端使用兩端對(duì)齊。

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

六、減少反差

增強(qiáng)文字與背景對(duì)比的同時(shí)，我們也要減少不同層次文字間的反差。

在移動(dòng)端，實(shí)際可見的文字更少，所以反差被放大了。

其原因是我們的大腦基于環(huán)境來判斷重要性。在桌面端，標(biāo)題可能是正文字號(hào)的兩倍甚至三倍，因?yàn)槠聊簧嫌懈辔淖?，所以這是有效的。在移動(dòng)端，實(shí)際可見的文字更少，所以反差被放大了。

多數(shù)設(shè)計(jì)師使用斐波那契數(shù)列式的字號(hào)組合。在移動(dòng)端，應(yīng)該縮小比率來減少字號(hào)間的反差。比如，如果你使用黃金比例1.618與字號(hào)相乘。在移動(dòng)端，應(yīng)該用更小的比例1.382來替代。

桌面端屏幕比移動(dòng)端容許更夸張的字號(hào)縮放。

七、按比例調(diào)整字間距

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

（先說一句，不應(yīng)該調(diào)整固有字距。固有字距是兩個(gè)字母相互組合時(shí)的距離，使它們的間距與其他字母間距在視覺上統(tǒng)一。創(chuàng)作字體時(shí)，就納入了固有字距的考量，這個(gè)過程可能要花上數(shù)月。如果你選用了一款專業(yè)的字體，它的固有字距就是合適的，如果你覺得不對(duì)，請(qǐng)換一個(gè)字體。）

字間距并不是固有字距。字間距是字體中應(yīng)用在所有字符上的間距。通常你也不應(yīng)該調(diào)整字間距。

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

總結(jié)

字體是一門工藝，設(shè)計(jì)師終其一生都在精心打磨。的確如此，因?yàn)槊總€(gè)文字、每種字體和每項(xiàng)技術(shù)都帶來了新的挑戰(zhàn)。沒有一成不變的普適規(guī)律。

假如你追求易讀性，要牢記三條原則：行內(nèi)的視覺流要平順，空間層級(jí)要清晰，要有足夠的對(duì)比。這尤其適用于移動(dòng)端頁面。

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

網(wǎng)站欄目：想讓界面優(yōu)雅易讀？跟你聊聊移動(dòng)端字體的7準(zhǔn)則！
分享鏈接：http://muchs.cn/news6/217456.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、面包屑導(dǎo)航、企業(yè)建站、微信小程序、網(wǎng)站設(shè)計(jì)公司、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)