怎樣做會(huì)使得網(wǎng)站設(shè)計(jì)用戶體驗(yàn)好？

字體在網(wǎng)頁設(shè)計(jì)中的作用不容忽視，那么怎樣做會(huì)使得網(wǎng)站設(shè)計(jì)用戶體驗(yàn)好？

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 Web Fonts或者Typekit)有很多有趣的字體供你選擇，給你的設(shè)計(jì)帶來一些新鮮、意想不到的效果。而且也非常容易操作使用。以Google為例：選擇任何一種字體比如Open Sans。

所以能出什么問題呢?

不過這種方法卻有一個(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ì)來支配文本寬度，而是要由易讀性決定。看看下面Baymard Institute給出的建議：想要有一個(gè)良好的閱讀體驗(yàn)，那么每一行大概要有60個(gè)字符左右的寬度。每一行正確的字符數(shù)是文本易讀性的關(guān)鍵。
每一行如果太短的話，眼睛就得來回地看，會(huì)打破讀者的閱讀節(jié)奏;如果一行文字太長，讀者注意力會(huì)很難集中到內(nèi)容上。圖片來源：Material Design
對(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)迫你的讀者去分辨所有的大寫段落。就像Miles Tinker在他的里程碑作品《Legibility of Print》中所說的，與小寫字體相比，大寫字體大大降低了瀏覽和閱讀的速度。

7、不要過于減少行間距
字體版式中，我們對(duì)于兩行字之間的空白距離稱作“行間距”。通過增加行間距，可以提高可讀性。一般來說，行間距應(yīng)該比字符高度高30%左右，這樣有利于可讀性。
合適的間距有助于可讀性，圖片來源：Microsoft
Dmitry Fadeyev指出，正確使用段落之間的間距，可以提高20%的理解力。正確使用間距的技巧是提供給讀者易于理解的內(nèi)容，然后去除多余的細(xì)節(jié)。

左邊文字太擠了，右邊合適的間距有助于可讀性。

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)。

本文名稱：怎樣做會(huì)使得網(wǎng)站設(shè)計(jì)用戶體驗(yàn)好？
網(wǎng)頁網(wǎng)址：http://www.muchs.cn/news/162631.html

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

廣告

聲明：本網(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)