什么樣的網(wǎng)站設(shè)計用戶體驗好？

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

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

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

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

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

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

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

2、盡量使用標準字體

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

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

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

完成啦!

所以能出什么問題呢?

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

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

每一行的文字長度決定了文本的易讀性。不應該由設(shè)計來支配文本寬度，而是要由易讀性決定?？纯聪旅鍮aymardInstitute給出的建議：想要有一個良好的閱讀體驗，那么每一行大概要有60個字符左右的寬度。每一行正確的字符數(shù)是文本易讀性的關(guān)鍵。

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

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

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

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

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

Roboto字體，by Google

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

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

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

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

6、避免全都大寫

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

7、不要過于減少行間距

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

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

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

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

8、確保有足夠的顏色對比度

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

小的文字和背景的對比度至少應該為4.5:1。

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

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

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

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

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

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

10、避免使用閃爍的文本

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

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

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

網(wǎng)頁標題：什么樣的網(wǎng)站設(shè)計用戶體驗好？
文章源于：http://www.muchs.cn/news37/23937.html

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

廣告

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