溝通在設(shè)計(jì)里起到至關(guān)重要的作用，有助于在網(wǎng)站和用戶之間建立起明確的關(guān)系，還可以幫助用戶實(shí)現(xiàn)他們的目標(biāo)，這一點(diǎn)非常重要。當(dāng)我們?cè)诰W(wǎng)頁設(shè)計(jì)里談到溝通時(shí)，通常指的是文字。文字在溝通過程里起到至關(guān)重要的作用：

“網(wǎng)站里95%以上的信息是以書面語言的形式呈現(xiàn)的?！?/p>

好的字體版式可以使閱讀毫不費(fèi)力，而糟糕的排版則使用戶無法閱讀。優(yōu)化字體版式可以優(yōu)化你的用戶界面。接下來給大家講講字體排版的一些規(guī)則，幫助你增加文本的可讀性和易讀性。

1、保持最少的字體使用數(shù)量

使用超過3種以上的字體，會(huì)使網(wǎng)站看起來毫無結(jié)構(gòu)，非常的不專業(yè)。請(qǐng)記住，太多的不同尺寸和類型的字體會(huì)破壞設(shè)計(jì)布局。要想避免這種狀況出現(xiàn)，就要限制字體的數(shù)量。

總之，把字體數(shù)量限制到最少(兩種字體是足足有余的，通常一種就足夠了)，保證整個(gè)網(wǎng)站使用相同的字體。如果使用超過一種字體的話，要確保根據(jù)字符寬度來匹配字體。以下面的組合為例，左邊Georgia和Verdana字體組合有相似的字型，而右邊的Baskerville和Impact組合中，Impact字型太粗而遮蓋了它配對(duì)字體的襯線部分。

確保根據(jù)字符寬度來匹配字體，進(jìn)行互補(bǔ)

2、盡量使用標(biāo)準(zhǔn)字體

字體嵌入服務(wù)(如Google WebFonts或者Typekit)有很多有趣的字體供你選擇，給你的設(shè)計(jì)帶來一些新鮮、意想不到的效果。而且也非常容易操作使用。以Google為例：

?選擇任何一種字體比如Open Sans。

生成代碼粘貼到你的HTML文檔中。

完成啦!

所以能出什么問題呢?

不過這種方法卻有一個(gè)問題，用戶更習(xí)慣標(biāo)準(zhǔn)字體，因此標(biāo)準(zhǔn)字體閱讀起來會(huì)更快。除非你的網(wǎng)站對(duì)特定的字體有強(qiáng)烈的需求，比如為了品牌推廣或者創(chuàng)建一個(gè)身臨其境的體驗(yàn)，不然一般情況下最好選擇系統(tǒng)字體。安全的做法是使用一種系統(tǒng)字體，比如Arial、Calibri、Trebuchet等等。要記住好的字體版式可以將讀者吸引到內(nèi)容本身，而不是版式上。

3、限制每一行的文字長度

每一行的文字長度決定了文本的易讀性。不應(yīng)該由設(shè)計(jì)來支配文本寬度，而是要由易讀性決定。看看下面BaymardInstitute給出的建議：想要有一個(gè)良好的閱讀體驗(yàn)，那么每一行大概要有60個(gè)字符左右的寬度。每一行正確的字符數(shù)是文本易讀性的關(guān)鍵。

每一行如果太短的話，眼睛就得來回地看，會(huì)打破讀者的閱讀節(jié)奏;如果一行文字太長，讀者注意力會(huì)很難集中到內(nèi)容上。圖片來源：MaterialDesign

對(duì)于手機(jī)端來說，每一行則應(yīng)該在30至40個(gè)字符長度內(nèi)。下面則是手機(jī)端的兩個(gè)網(wǎng)站例子。第一個(gè)每一行有50至75個(gè)字符(而這個(gè)應(yīng)該是印刷和桌面端的理想長度)，第二個(gè)則使用了好的30至40個(gè)字符長度。

網(wǎng)頁設(shè)計(jì)里可以通過使用em或者pixel單位來限制文本寬度，來達(dá)到每一行最理想的字符數(shù)。

4、選擇在不同尺寸下都有良好效果的字體

用戶會(huì)通過不同的設(shè)備訪問你的網(wǎng)站，而不同的設(shè)備有不同的尺寸和分辨率。大多數(shù)的用戶界面需要不同尺寸的文本元素(復(fù)制按鈕、段落標(biāo)簽、章節(jié)標(biāo)題等等)，選擇一個(gè)在不同尺寸和粗細(xì)下都能保持很好的可讀性和易讀性的字體，這點(diǎn)非常重要。

Roboto字體，by Google

確保你選擇的字體在更小的屏幕上也能閱讀。避免使用連體字，比如下面的Vivaldi字體，盡管它們很好看，但是很難閱讀。

Vivaldi字體在小屏幕上很難閱讀

5、選擇可以分辨不同字母的字體

很多字體的有些字母會(huì)比較容易搞混，特別是“i”和“L”(比如說下面的例子)，還有一些字母之間的間距太短，比如“r”和“n”在一起看起來像“m”。所以當(dāng)你選擇字體時(shí)，確保你的字體在不同環(huán)境下不會(huì)給讀者帶來困擾。

6、避免全都大寫

所有文本都是大寫字母，在一些不需要閱讀的地方是可以的(比如縮略詞或者logo里)，但是當(dāng)你的信息需要讀者去閱讀時(shí)，不要強(qiáng)迫你的讀者去分辨所有的大寫段落。就像MilesTinker在他的里程碑作品《Legibility of Print》中所說的，與小寫字體相比，大寫字體大大降低了瀏覽和閱讀的速度。

7、不要過于減少行間距

字體版式中，我們對(duì)于兩行字之間的空白距離稱作“行間距”。通過增加行間距，可以提高可讀性。一般來說，行間距應(yīng)該比字符高度高30%左右，這樣有利于可讀性。

合適的間距有助于可讀性，圖片來源：Microsoft

DmitryFadeyev指出，正確使用段落之間的間距，可以提高20%的理解力。正確使用間距的技巧是提供給讀者易于理解的內(nèi)容，然后去除多余的細(xì)節(jié)。

左邊文字太擠了，右邊合適的間距有助于可讀性，圖片來源：Apple

8、確保有足夠的顏色對(duì)比度

文本和背景不要使用相同或相似的顏色。文字越明顯，用戶能更快的瀏覽和閱讀內(nèi)容。W3C給我們建議了合適的文字和圖形的顏色對(duì)比度比例：

小的文字和背景的對(duì)比度至少應(yīng)該為4.5:1。

大的文字(至少14號(hào)粗體或18號(hào)常規(guī)字體以上)比例至少為3:1.

這兩段文字和背景的顏色對(duì)比不明顯，文字很難閱讀

這兩段符合顏色對(duì)比比例，文字容易閱讀

一旦你選定了顏色，要在大多數(shù)設(shè)備上都測試一下。如果測試發(fā)現(xiàn)了問題，那么能肯定用戶也會(huì)有同樣的問題。

9、避免用紅色或者綠色著色文字

色盲是一個(gè)常見的現(xiàn)象，特別是男性中8%的人是色盲。因此建議除顏色之外使用附加的信息來區(qū)分重要的內(nèi)容。同樣要避免僅僅使用紅色和綠色來傳達(dá)信息，因?yàn)榧t綠色盲是色盲里最常見的兩種。

10、避免使用閃爍的文本

閃爍的文本可能會(huì)引發(fā)敏感的個(gè)體不適的癥狀，而且可能會(huì)變得讓人討厭，讓用戶分心。

字體排版是件大事，正確的版式可以讓你的網(wǎng)站煥然一新，讓人心情愉快。而不好的字體排版，則會(huì)使用戶分心。使字體版式可讀性、易讀性更高，易于理解，這些是非常重要的。

“字體版式的存在是為了服務(wù)于內(nèi)容的”字體版式是服務(wù)于內(nèi)容的，永遠(yuǎn)不要給用戶增加閱讀的負(fù)擔(dān)。

本文標(biāo)題：什么樣的網(wǎng)站設(shè)計(jì)用戶體驗(yàn)好？
網(wǎng)頁路徑：http://jinyejixie.com/news/23937.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)、用戶體驗(yàn)等

廣告

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