網(wǎng)頁(yè)設(shè)計(jì)中文字排版的10點(diǎn)技巧!

2023-09-26    分類: 網(wǎng)站建設(shè)

1.不要使用過(guò)多的字體
網(wǎng)站排版中建議最多不要超過(guò)3種字體類型,不然會(huì)使網(wǎng)站看起來(lái)松散和不專業(yè),不僅太多的字體類型會(huì)造成這種問(wèn)題,太多的字體尺寸也會(huì)破壞網(wǎng)頁(yè)布局。
2.盡量使用標(biāo)準(zhǔn)字體
在Google Web Font或者Typekit,和國(guó)內(nèi)的“有字庫(kù)”的字體嵌入式服務(wù)有很多有趣的字體,對(duì)于國(guó)內(nèi)設(shè)計(jì)師來(lái)說(shuō),痛苦的是中文字體會(huì)很大,一個(gè)字體動(dòng)則幾兆,十幾兆的,這樣用戶在會(huì)增加用戶瀏覽網(wǎng)站的載入時(shí)間;反之英文字體26個(gè)字母大小寫,加數(shù)字標(biāo)點(diǎn)符號(hào)一共幾百k的字體是很容易在網(wǎng)頁(yè)中使用的。
盡可能選擇標(biāo)準(zhǔn)字體(近幾年網(wǎng)頁(yè)中通常使用思源黑體,PingFang,英文可以使用Arial,Calibri或者其他常見(jiàn)的易于屏幕閱讀的黑體字,如沒(méi)有特殊概念指導(dǎo)盡可能避免使用襯線字體,如宋體)
不是每位用戶都可以在終端上看到同一個(gè)字體,意味著你選擇的適合的字體,用戶有可能看不到。
用戶更熟悉標(biāo)準(zhǔn)字體,因此他們可以更快的閱讀
特殊的、并且少量的字體可以制作成.svg格式的素材嵌入Web使用
良好的排版會(huì)使用戶更加關(guān)注內(nèi)容本身,而不是字體的類型。
3.限制一行文字的長(zhǎng)度
保證每一行文字的字符數(shù)量是文本可讀的關(guān)鍵。不是設(shè)計(jì)師來(lái)定義文本的寬度,而是根據(jù)用戶的可讀性來(lái)定義。
太寬-會(huì)使得單行文字太長(zhǎng),讀者的眼睛會(huì)難于專注文字。因?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)行良好的字體以保證它的不同尺寸的字體都具有極高可讀性(Readability)和可用性(Usability)也是非常重要的。
5.使用識(shí)別度高的字體
在選擇英文體的時(shí)候,有些字體的個(gè)別字母極易混淆,特別是“i”和“L”(如下圖所示);以及文字之間的間距。許多中文字體在使用較小字體的時(shí)候筆畫會(huì)粘到一起(上圖),不容易辨別;所以在選擇字體類型的時(shí)候,請(qǐng)檢查你選擇使用的字體,確保不會(huì)為用戶和產(chǎn)品造成不必要的損失。
6.避免在界面中大段的使用大寫字母
不要所有文本使用大寫字母,強(qiáng)制用戶閱讀大寫字母,首字母大寫,具有特殊含義的縮寫等情況除外,與小寫字母相比,大量的使用大寫字母會(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ì)比度
9.避免將文字著色為紅色或綠色
色盲和色弱是我必須要照顧到的一部分用戶,特別是在男性中(8%的男性是色盲)建議使用處顏色以外的其他方式來(lái)區(qū)分重要的信息(如下劃線,加粗等)。避免使用紅色和綠色單獨(dú)傳達(dá)信息。因?yàn)榧t綠色盲是最常見(jiàn)的色盲形式。
10.避免文字閃爍
閃爍的文字或內(nèi)容可能會(huì)讓某些用戶感到不適,對(duì)于一般用戶而言,這可能分散他們的注意力或者使他們感到煩躁。

當(dāng)前文章:網(wǎng)頁(yè)設(shè)計(jì)中文字排版的10點(diǎn)技巧!
網(wǎng)頁(yè)網(wǎng)址:http://www.muchs.cn/news42/283792.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司網(wǎng)站策劃、虛擬主機(jī)、商城網(wǎng)站搜索引擎優(yōu)化、品牌網(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í)需注明來(lái)源: 創(chuàng)新互聯(lián)

微信小程序開(kāi)發(fā)