阿甲科技:網頁設計中文字排版的10點技巧!

阿甲科技:網頁設計中文字排版的10點技巧!

在網頁設計中,文字排版為什麼對於網站和用戶之間建立良好的溝通以及幫助用戶實現目標起著重要的作用的10點建議。

1.不要使用過多的字體

網站排版中建議最多不要超過3種字體類型,不然會使網站看起來鬆散和不專業,不僅太多的字體類型會造成這種問題,太多的字體尺寸也會破壞網頁布局。

2.盡量使用標準字體

在Google Web Font或者Typekit,和國內的「有字型檔」的字體嵌入式服務有很多有趣的字體,對於國內設計師來說,痛苦的是中文字體會很大,一個字體動則幾兆,十幾兆的,這樣用戶在會增加用戶瀏覽網站的載入時間;反之英文字體26個字母大小寫,加數字標點符號一共幾百k的字體是很容易在網頁中使用的。

3.限制一行文字的長度

保證每一行文字的字元數量是文本可讀的關鍵。不是設計師來定義文本的寬度,而是根據用戶的可讀性來定義。

4.選擇用有多個字重並顯示良好的字體

用戶將通過不同屏幕解析度的終端設備訪問你的網站,大多數用戶界面需要各種大小尺寸的文本(標題、副標題、文本、標註等等)。選擇一款能夠在不同屏幕解析度的設備上運行良好的字體以保證它的不同尺寸的字體都具有極高可讀性(Readability)和可用性(Usability)也是非常重要的。

5.使用識別度高的字體

在選擇英文體的時候,有些字體的個別字母極易混淆,特別是「i」和「L」(如下圖所示);以及文字之間的間距。許多中文字體在使用較小字體的時候筆畫會粘到一起(上圖),不容易辨別;所以在選擇字體類型的時候,請檢查你選擇使用的字體,確保不會為用戶和產品造成不必要的損失。

6.避免在界面中大段的使用大寫字母

不要所有文本使用大寫字母,強制用戶閱讀大寫字母,首字母大寫,具有特殊含義的縮寫等情況除外,與小寫字母相比,大量的使用大寫字母會嚴重降低用戶的閱讀效率和愉悅感

7.將行間距控制在字體的1.5-2倍之間

在文字文字排版中,我們又一個特殊的術語,用於表示行與行之間的距離:行間距(或行高)。為了保證文本的可讀性和易讀性,使文本形成線性的閱讀感受,將行間距控制在字體大小的1.5-2倍之間(中文字體)。英文字體推薦使用默認行間距,或根據默認行間距微調。

8.適當的顏色對比度

通常情況下,文本和背景盡量避免使用相同或相似的顏色。文本越明顯,用戶能夠掃描和閱讀的速度越快。當然,學會通過文本顏色、大小和背景的顏色關係來控制視覺層級也是必要的。

9.避免將文字著色為紅色或綠色

色盲和色弱是我必須要照顧到的一部分用戶,特別是在男性中(8%的男性是色盲)建議使用處顏色以外的其他方式來區分重要的信息(如下劃線,加粗等)。避免使用紅色和綠色單獨傳達信息。因為紅綠色盲是最常見的色盲形式

10.避免文字閃爍

閃爍的文字或內容可能會讓某些用戶感到不適,對於一般用戶而言,這可能分散他們的注意力或者使他們感到煩躁。

雖然在網頁設計中依然有很多需要我們注意的地方,最後,分享給大家一個想法就是:網頁設計中排版很重要。做出正確的排版可以讓你的網站感覺清爽,糟糕的網頁排版會令用戶分心,傾向於關注自己的感受而非內容。


推薦閱讀:

小小咖啡蓋的模版化設計
交互設計師的價值是什麼?
輝光陰影的使用小技巧
視覺設計分享 | Flùr 文青不可錯過的花店
帶有日本元素的餐廳

TAG:視覺設計 | 平面設計 |