字體在網(wǎng)頁設(shè)計中的作用不容忽視,那么怎樣做會使得網(wǎng)站設(shè)計用戶體驗好?
1、保持最少的字體使用數(shù)量使用超過3種以上的字體,會使網(wǎng)站看起來毫無結(jié)構(gòu),非常的不專業(yè)。請記住,太多的不同尺寸和類型的字體會破壞設(shè)計布局。要想避免這種狀況出現(xiàn),就要限制字體的數(shù)量。
總之,把字體數(shù)量限制到最少(兩種字體是足足有余的,通常一種就足夠了),保證整個網(wǎng)站使用相同的字體。如果使用超過一種字體的話,要確保根據(jù)字符寬度來匹配字體。以下面的組合為例,左邊Georgia和Verdana字體組合有相似的字型,而右邊的Baskerville和Impact組合中,Impact字型太粗而遮蓋了它配對字體的襯線部分。
確保根據(jù)字符寬度來匹配字體,進(jìn)行互補(bǔ)
2、盡量使用標(biāo)準(zhǔn)字體字體嵌入服務(wù)(如Google Web Fonts或者Typekit)有很多有趣的字體供你選擇,給你的設(shè)計帶來一些新鮮、意想不到的效果。而且也非常容易操作使用。以Google為例:選擇任何一種字體比如Open Sans。
所以能出什么問題呢?
不過這種方法卻有一個問題,用戶更習(xí)慣標(biāo)準(zhǔn)字體,因此標(biāo)準(zhǔn)字體閱讀起來會更快。除非你的網(wǎng)站對特定的字體有強(qiáng)烈的需求,比如為了品牌推廣或者創(chuàng)建一個身臨其境的體驗,不然一般情況下最好選擇系統(tǒng)字體。安全的做法是使用一種系統(tǒng)字體,比如Arial、Calibri、Trebuchet等等。要記住好的字體版式可以將讀者吸引到內(nèi)容本身,而不是版式上。
3、限制每一行的文字長度每一行的文字長度決定了文本的易讀性。不應(yīng)該由設(shè)計來支配文本寬度,而是要由易讀性決定。看看下面Baymard Institute給出的建議:想要有一個良好的閱讀體驗,那么每一行大概要有60個字符左右的寬度。每一行正確的字符數(shù)是文本易讀性的關(guān)鍵。
每一行如果太短的話,眼睛就得來回地看,會打破讀者的閱讀節(jié)奏;如果一行文字太長,讀者注意力會很難集中到內(nèi)容上。圖片來源:Material Design
對于手機(jī)端來說,每一行則應(yīng)該在30至40個字符長度內(nèi)。下面則是手機(jī)端的兩個網(wǎng)站例子。第一個每一行有50至75個字符(而這個應(yīng)該是印刷和桌面端的理想長度),第二個則使用了好的30至40個字符長度。
網(wǎng)頁設(shè)計里可以通過使用em或者pixel單位來限制文本寬度,來達(dá)到每一行最理想的字符數(shù)。
4、選擇在不同尺寸下都有良好效果的字體用戶會通過不同的設(shè)備訪問你的網(wǎng)站,而不同的設(shè)備有不同的尺寸和分辨率。大多數(shù)的用戶界面需要不同尺寸的文本元素(復(fù)制按鈕、段落標(biāo)簽、章節(jié)標(biāo)題等等),選擇一個在不同尺寸和粗細(xì)下都能保持很好的可讀性和易讀性的字體,這點(diǎn)非常重要。
Roboto字體,by Google
確保你選擇的字體在更小的屏幕上也能閱讀。避免使用連體字,比如下面的Vivaldi字體,盡管它們很好看,但是很難閱讀。
Vivaldi字體在小屏幕上很難閱讀
5、選擇可以分辨不同字母的字體很多字體的有些字母會比較容易搞混,特別是“i”和“L”(比如說下面的例子),還有一些字母之間的間距太短,比如“r”和“n”在一起看起來像“m”。所以當(dāng)你選擇字體時,確保你的字體在不同環(huán)境下不會給讀者帶來困擾。
6、避免全都大寫所有文本都是大寫字母,在一些不需要閱讀的地方是可以的(比如縮略詞或者logo里),但是當(dāng)你的信息需要讀者去閱讀時,不要強(qiáng)迫你的讀者去分辨所有的大寫段落。就像Miles Tinker在他的里程碑作品《Legibility of Print》中所說的,與小寫字體相比,大寫字體大大降低了瀏覽和閱讀的速度。
7、不要過于減少行間距字體版式中,我們對于兩行字之間的空白距離稱作“行間距”。通過增加行間距,可以提高可讀性。一般來說,行間距應(yīng)該比字符高度高30%左右,這樣有利于可讀性。
合適的間距有助于可讀性,圖片來源:Microsoft
Dmitry Fadeyev指出,正確使用段落之間的間距,可以提高20%的理解力。正確使用間距的技巧是提供給讀者易于理解的內(nèi)容,然后去除多余的細(xì)節(jié)。
左邊文字太擠了,右邊合適的間距有助于可讀性。
8、確保有足夠的顏色對比度文本和背景不要使用相同或相似的顏色。文字越明顯,用戶能更快的瀏覽和閱讀內(nèi)容。W3C給我們建議了合適的文字和圖形的顏色對比度比例:
小的文字和背景的對比度至少應(yīng)該為4.5:1。
大的文字(至少14號粗體或18號常規(guī)字體以上)比例至少為3:1.
這兩段文字和背景的顏色對比不明顯,文字很難閱讀
這兩段符合顏色對比比例,文字容易閱讀
一旦你選定了顏色,要在大多數(shù)設(shè)備上都測試一下。如果測試發(fā)現(xiàn)了問題,那么能肯定用戶也會有同樣的問題。
9、避免用紅色或者綠色著色文字色盲是一個常見的現(xiàn)象,特別是男性中8%的人是色盲。因此建議除顏色之外使用附加的信息來區(qū)分重要的內(nèi)容。同樣要避免僅僅使用紅色和綠色來傳達(dá)信息,因為紅綠色盲是色盲里最常見的兩種。
10、避免使用閃爍的文本閃爍的文本可能會引發(fā)敏感的個體不適的癥狀,而且可能會變得讓人討厭,讓用戶分心。
字體排版是件大事,正確的版式可以讓你的網(wǎng)站煥然一新,讓人心情愉快。而不好的字體排版,則會使用戶分心。使字體版式可讀性、易讀性更高,易于理解,這些是非常重要的。
“字體版式的存在是為了服務(wù)于內(nèi)容的”字體版式是服務(wù)于內(nèi)容的,永遠(yuǎn)不要給用戶增加閱讀的負(fù)擔(dān)。
本文標(biāo)題:怎樣做會使得網(wǎng)站設(shè)計用戶體驗好?
分享URL:http://m.rwnh.cn/news31/162631.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有用戶體驗、網(wǎng)站設(shè)計等
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)