專注于互聯網服務

專業設計,網站建設,應用軟件開(kāi)發(fā),電子商務平台及商務應用系統開(kāi)發(fā).

移動端字體排版設計準則

2015-4-28 返回

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

一、留足空間

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

字母本身對(duì)字體的影響,與構成(chéng)它的空間相比,要小得多。

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

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

要在移動端創造最佳易讀性,尤其要注意這(zhè)些特殊層次,這(zhè)些格式塔式的詞語、行、段落的文字組合,在自然光環境下同樣至關重要。

二、行寬

行寬是一行文字的長(cháng)度。或者确切的說(shuō),是一行文字的理想長(cháng)度,因爲很難讓每一行都(dōu)精确吻合。

衆所周知,舒适閱讀的理想行寬是65個字符左右。行寬産生的物理長(cháng)度,取決于字體的設計、字間距(見下文)和你使用的具體文字。本文開(kāi)篇的65個字 符(譯者注:此處請參見英文原文),用PT Serif字體是26.875em寬,用Open Sans是28.4375em寬,用Ubuntu字體是27.3125em寬。如果再加入斜體、大小寫和一大堆其他字體細節,還(hái)會(huì)有更大的差異。

在桌面(miàn)端浏覽器中,65個字符很難觸及邊緣,但在移動設備上,65個字符(如果至少大到看得清)會(huì)超出浏覽器的邊界。所以,在移動設備上,你必須得縮減行寬。

移動端并沒(méi)有普遍認可的行寬标準。不過(guò)傳統上,報紙或雜志上每一個窄列都(dōu)會(huì)趨向(xiàng)于39個字符。鑒于這(zhè)個理想行寬已經(jīng)經(jīng)曆了數個世紀的考驗,它在移動端字體上也運轉良好(hǎo)。

三、寬松行距、緊湊行距

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

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

行距的标準通常是1.4em,但以我的經(jīng)驗,這(zhè)對(duì)于屏幕來說(shuō)太緊湊了:在屏幕上表現良好(hǎo)的字體都(dōu)有一個關鍵特征——大的凹槽,大凹槽需要更大一些的行距來保持空間層次。

反過(guò)來,更短的行寬需要更小的行距。所以你可能(néng)需要將(jiāng)桌面(miàn)端的行距設得寬松點,同時(shí)記得將(jiāng)移動端的設置得緊湊些。

四、找到最佳狀态

所有字體至少都(dōu)有一種(zhǒng)最佳狀态,在屏幕上展現最佳的尺寸,還(hái)有在浏覽器中最能(néng)保持字形的抗鋸齒選項。

最佳狀态下,多數筆畫通常都(dōu)能(néng)排列在像素網格中——像素字體,如果你還(hái)記得的話,那些字體僅僅在字号調整到最佳狀态下才有效。

將(jiāng)字體設爲最佳狀态能(néng)形成(chéng)更強烈的對(duì)比。爲移動端設計時(shí),對(duì)比尤其重要,因爲戶外的強光可能(néng)分散注意。

你會(huì)發(fā)現,微調行距會(huì)使每行脫離完美像素匹配。我覺得,在移動設備屏幕上,對(duì)比的重要性勝過(guò)行距。所以如果你不得不在行距上妥協,來保持每行契合像素網格,那就(jiù)這(zhè)麼(me)做吧。

通常設計師通過(guò)基線網格來排列文字。但在移動設備上,我們需要使用x高度來代替(x高度顧名思義,就(jiù)是小寫字母x的高度)。從易讀性研究中,我們知道(dào)大腦識别的是文字頂部,而不是底部。所以要成(chéng)就(jiù)更加平順的視覺流,我們要确保字符頂部最契合像素網格。

五、不要忽視起(qǐ)伏邊

起(qǐ)伏邊是一段文字的邊緣。你讀的多數内容是居左對(duì)齊的(至少對(duì)于拉丁語系而言),導緻右邊沿參差不齊。

當視線從行尾跳至下一行首時(shí),大腦最好(hǎo)要能(néng)判斷出下一次跳躍的角度和距離。把每次跳躍都(dōu)想象成(chéng)跑過(guò)跳闆,如果間距保持一緻,就(jiù)會(huì)快很多。因此,文字左側邊緣應該是平的,每行從同一個地方開(kāi)始(對(duì)于從右至左的語言,恰好(hǎo)相反)。

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

通常文字會(huì)設置成(chéng)兩(liǎng)端對(duì)齊,這(zhè)意味著(zhe)每行文字所占空間相等,所以兩(liǎng)側都(dōu)不會(huì)有起(qǐ)伏邊。我懷疑兩(liǎng)端對(duì)齊的流行和響應式設計有關,它教設計師們以塊狀形 态思考。兩(liǎng)端對(duì)齊的文字産生的留白不統一。最糟的情況會(huì)導緻一行中隻有幾個字,相當不協調。更窄的行寬會(huì)加重兩(liǎng)端對(duì)齊的問題,所以兩(liǎng)端對(duì)齊的文字在移動端 是難以閱讀的。

從左至右:左對(duì)齊、居中對(duì)其、兩(liǎng)端對(duì)齊。

如果整潔真的非常重要,那麼(me)使用連字符号來讓起(qǐ)伏邊更平滑,絕不能(néng)在移動端使用兩(liǎng)端對(duì)齊。

文字右側是起(qǐ)伏邊在移動端還(hái)有一項額外好(hǎo)處:人們通常在易分心的場合閱讀文字,讀者視線頻繁地從文字上移開(kāi)——查看站名,或是接電話。起(qǐ)伏邊創造了一個随機形狀,讓右撇子的視線可以通過(guò)重讀最少的文字,回到剛才的位置。

六、減少反差

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

在移動端,實際可見的文字更少,所以反差被放大了。

其原因是我們的大腦基于環境來判斷重要性。在桌面(miàn)端,标題可能(néng)是正文字号的兩(liǎng)倍甚至三倍,因爲屏幕上有更多文字,所以這(zhè)是有效的。在移動端,實際可見的文字更少,所以反差被放大了。

多數設計師使用斐波那契數列式的字号組合。在移動端,應該縮小比率來減少字号間的反差。比如,如果你使用黃金比例1.618與字号相乘。在移動端,應該用更小的比例1.382來替代。

桌面(miàn)端屏幕比移動端容許更誇張的字号縮放。

七、按比例調整字間距

爲移動端調整字号時(shí),我們要意識到字間距發(fā)生了必要的變化。

(先說(shuō)一句,不應該調整固有字距。固有字距是兩(liǎng)個字母相互組合時(shí)的距離,使它們的間距與其他字母間距在視覺上統一。創作字體時(shí),就(jiù)納入了固有字距的考量,這(zhè)個過(guò)程可能(néng)要花上數月。如果你選用了一款專業的字體,它的固有字距就(jiù)是合适的,如果你覺得不對(duì),請換一個字體。)

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

大字号是個例外,拿标題和小号文字(比如腳注)舉例。大号文字需要減少字間距,小号文字需要增加字間距。前者是考慮到分組,後(hòu)者則是爲了增強對(duì)比。如果你在調整标題,或是用了通常字間距緊密的藝術字體,縮小時(shí)可能(néng)就(jiù)需要把字間距放開(kāi)一點。

總結

字體是一門工藝,設計師終其一生都(dōu)在精心打磨。的确如此,因爲每個文字、每種(zhǒng)字體和每項技術都(dōu)帶來了新的挑戰。沒(méi)有一成(chéng)不變的普适規律。

假如你追求易讀性,要牢記三條原則:行内的視覺流要平順,空間層級要清晰,要有足夠的對(duì)比。這(zhè)尤其适用于移動端頁面(miàn)。

沒(méi)有不可撼動的規則,全憑你雙眼決斷。不過(guò)本文的指南可以作爲理想的出發(fā)點,讓你在移動設備上優美地排列文字。

公益廣告

登錄 參與評論

評論

暫無任何評論