網(wǎng)頁(yè)中的信息主要是通過(guò)文字來(lái)傳達(dá)的，純文本文字或是圖片中的文字，都是在傳達(dá)信息，圖片作為輔助讓網(wǎng)頁(yè)更加精致美觀。網(wǎng)頁(yè)設(shè)計(jì)使用文字的注意點(diǎn)有很多，比如文字的字體、大小、顏色、排版等等都是有技巧的，要合理有效的組織起來(lái)。
接下來(lái)跟著網(wǎng)頁(yè)設(shè)計(jì)一起來(lái)看使用文字的技巧。
1、不要使用過(guò)多的字體
網(wǎng)站排版中建議最多不要超過(guò)3種字體類(lèi)型，不然會(huì)使網(wǎng)站看起來(lái)松散和不專(zhuān)業(yè)，不僅太多的字體類(lèi)型會(huì)造成這種問(wèn)題，太多的字體尺寸也會(huì)破壞網(wǎng)頁(yè)布局。當(dāng)然在圖片中可以使用一些創(chuàng)意性字體如手寫(xiě)字體，讓頁(yè)面更加鮮活。
而在中英文排版中，建議大家中文使用標(biāo)準(zhǔn)中文字體，而英文、數(shù)字和字符使用標(biāo)準(zhǔn)的英文字體。以下面的圖為例，是否可以對(duì)比處那個(gè)美觀一些。
2、使用標(biāo)準(zhǔn)字體
網(wǎng)頁(yè)設(shè)計(jì)時(shí)使用標(biāo)準(zhǔn)字體，一是這些字體是用戶熟悉的字體、方便更好的閱讀，二是確保各個(gè)設(shè)備都支持這些字體。中文網(wǎng)站常用的標(biāo)準(zhǔn)字體有微軟雅黑、宋體，英文網(wǎng)站常用的標(biāo)準(zhǔn)字體有Arial、Calibri，盡可能選擇標(biāo)準(zhǔn)字體，不是每位用戶都可以在自己的設(shè)備上看到同一個(gè)字體，如果用戶設(shè)備上沒(méi)有適合的字體，用戶有可能看不到。
3、限制一行文字的長(zhǎng)度
限制一行文字的長(zhǎng)度，方便用戶閱讀的同時(shí)也讓網(wǎng)頁(yè)更加規(guī)范。保證每一行文字的字符數(shù)量是文本可讀的關(guān)鍵。不是設(shè)計(jì)師來(lái)定義文本的寬度，而是根據(jù)用戶的可讀性來(lái)定義。
太寬-會(huì)使得單行文字太長(zhǎng)，讀者的眼睛會(huì)難于專(zhuān)注文字。因?yàn)殚L(zhǎng)時(shí)間閱讀容易串行，大段的文本中很難找到正確的行。
太短-會(huì)使得用戶的眼睛經(jīng)?；氐较乱恍形谋?，會(huì)打破讀者的閱讀節(jié)奏，長(zhǎng)時(shí)間閱讀造成視覺(jué)疲勞。太短也會(huì)傾向于向讀者發(fā)出一種信號(hào)，使得讀者沒(méi)有讀完當(dāng)前這行就去跳到下一行閱讀，可能會(huì)忽略潛在的重要詞句。
4.選擇用有多個(gè)字重并顯示良好的字體
用戶將通過(guò)不同屏幕分辨率的終端設(shè)備訪問(wèn)你的網(wǎng)站，大多數(shù)用戶界面需要各種大小尺寸的文本(標(biāo)題、副標(biāo)題、文本、標(biāo)注等等)。選擇一款能夠在不同屏幕分辨率的設(shè)備上運(yùn)行良好的字體以保證它的不同尺寸的字體都具有極高可讀性和可用性也是非常重要的。
注意，為了保證在屏幕上清晰可辨，盡量避免使用襯線體，盡管他們很漂亮。
5、使用識(shí)別度高的字體
在選擇英文體的時(shí)候，有些字體的個(gè)別字母極易混淆，特別是“i”和“L”(如下圖所示);以及文字之間的間距。許多中文字體在使用較小字體的時(shí)候筆畫(huà)會(huì)粘到一起(上圖)，不容易辨別;所以在選擇字體類(lèi)型的時(shí)候，請(qǐng)檢查你選擇使用的字體，確保不會(huì)為用戶和產(chǎn)品造成不必要的損失。
6、避免在界面中大段的使用大寫(xiě)字母
不要所有文本使用大寫(xiě)字母，強(qiáng)制用戶閱讀大寫(xiě)字母，首字母大寫(xiě)，具有特殊含義的縮寫(xiě)等情況除外，與小寫(xiě)字母相比，大量的使用大寫(xiě)字母會(huì)嚴(yán)重降低用戶的閱讀效率和愉悅感。
7、將行間距控制在字體的1.5-2倍之間
在文字文字排版中，我們又一個(gè)特殊的術(shù)語(yǔ)，用于表示行與行之間的距離：行間距(或行高)。為了保證文本的可讀性和易讀性，使文本形成線性的閱讀感受，將行間距控制在字體大小的1.5-2倍之間(中文字體)。英文字體推薦使用默認(rèn)行間距，或根據(jù)默認(rèn)行間距微調(diào)。
8、適當(dāng)?shù)念伾珜?duì)比度
通常情況下，文本和背景盡量避免使用相同或相似的顏色。文本越明顯，用戶能夠掃描和閱讀的速度越快。當(dāng)然，學(xué)會(huì)通過(guò)文本顏色、大小和背景的顏色關(guān)系來(lái)控制視覺(jué)層級(jí)也是必要的。
與背景相比，小文本和背景的對(duì)比度至少為4.5:1
大文本(14px/18px以上)應(yīng)該保持與背景3:1以上的對(duì)比度
灰色通常作為輔助色使用，根據(jù)之前的項(xiàng)目經(jīng)驗(yàn)，給大家分享一套我自己一直在使用的灰色，灰的有層次，清晰的區(qū)分信息層級(jí)是必要的
9、避免將文字著色為紅色或綠色
色盲和色弱是必須要照顧到的一部分用戶，特別是在男性中(8%的男性是色盲)建議使用處顏色以外的其他方式來(lái)區(qū)分重要的信息(如下劃線，加粗等)。避免使用紅色和綠色單獨(dú)傳達(dá)信息。因?yàn)榧t綠色盲是最常見(jiàn)的色盲形式。
雖然在日常生活中我們總是用這種方式告知用戶綠色是表示正確的操作，紅色表示錯(cuò)誤的操作，反思一下我們是否有去考慮色盲用戶的操作和體驗(yàn)?；蛟S我們是不是可以考慮換一個(gè)方式去表達(dá)正確或錯(cuò)誤?
10、避免文字閃爍
閃爍的文字或內(nèi)容可能會(huì)讓某些用戶感到不適，對(duì)于一般用戶而言，這可能分散他們的注意力或者使他們感到煩躁。
總之，文字是網(wǎng)頁(yè)重要的部分，在文字設(shè)計(jì)、文字排版的時(shí)候，要考慮目標(biāo)用戶群體的閱讀習(xí)慣，就好比網(wǎng)站用戶群體主要是老年人的時(shí)候字體、間距就要大一些，否則他們閱讀不方便。
