怎樣做好網站的字體設計讓用戶體驗變好?

來源:本站日期:2018-7-15

溝通在設計里起到至關重要的作用,有助于在網站和用戶之間建立起明確的關系,還可以幫助用戶實現他們的目標,這一點非常重要。當我們在網頁設計里談到溝通時,通常指的是文字。文字在溝通過程里起到至關重要的作用: ??“網站里95%以上的信息是以書面

溝通在設計里起到至關重要的作用,有助于在網站和用戶之間建立起明確的關系,還可以幫助用戶實現他們的目標,這一點非常重要。當我們在網頁設計里談到溝通時,通常指的是文字。文字在溝通過程里起到至關重要的作用:


??“網站里95%以上的信息是以書面語言的形式呈現的。”
??好的字體版式可以使閱讀毫不費力,而糟糕的排版則使用戶無法閱讀。優化字體版式可以優化你的用戶界面。接下來給大家講講字體排版的一些規則,幫助你增加文本的可讀性和易讀性。

??1、保持最少的字體使用數量
??使用超過3種以上的字體,會使網站看起來毫無結構,非常的不專業。請記住,太多的不同尺寸和類型的字體會破壞設計布局。要想避免這種狀況出現,就要限制字體的數量。
??總之,把字體數量限制到最少(兩種字體是足足有余的,通常一種就足夠了),保證整個網站使用相同的字體。如果使用超過一種字體的話,要確保根據字符寬度來匹配字體。以下面的組合為例,左邊Georgia和Verdana字體組合有相似的字型,而右邊的Baskerville和Impact組合中,Impact字型太粗而遮蓋了它配對字體的襯線部分。

??確保根據字符寬度來匹配字體,進行互補


??2、盡量使用標準字體
??字體嵌入服務(如Google Web Fonts或者Typekit)有很多有趣的字體供你選擇,給你的設計帶來一些新鮮、意想不到的效果。而且也非常容易操作使用。以Google為例:
???選擇任何一種字體比如Open Sans。
??生成代碼粘貼到你的HTML文檔中。
??完成啦!
??所以能出什么問題呢?
??不過這種方法卻有一個問題,用戶更習慣標準字體,因此標準字體閱讀起來會更快。除非你的網站對特定的字體有強烈的需求,比如為了品牌推廣或者創建一個身臨其境的體驗,不然一般情況下最好選擇系統字體。安全的做法是使用一種系統字體,比如Arial、Calibri、Trebuchet等等。要記住好的字體版式可以將讀者吸引到內容本身,而不是版式上。
??3、限制每一行的文字長度
??每一行的文字長度決定了文本的易讀性。不應該由設計來支配文本寬度,而是要由易讀性決定。看看下面Baymard Institute給出的建議:想要有一個良好的閱讀體驗,那么每一行大概要有60個字符左右的寬度。每一行正確的字符數是文本易讀性的關鍵。
??每一行如果太短的話,眼睛就得來回地看,會打破讀者的閱讀節奏;如果一行文字太長,讀者注意力會很難集中到內容上。圖片來源:Material Design
??對于手機端來說,每一行則應該在30至40個字符長度內。下面則是手機端的兩個網站例子。第一個每一行有50至75個字符(而這個應該是印刷和桌面端的理想長度),第二個則使用了最佳的30至40個字符長度。
??網頁設計里可以通過使用em或者pixel單位來限制文本寬度,來達到每一行最理想的字符數。
??4、選擇在不同尺寸下都有良好效果的字體
??用戶會通過不同的設備訪問你的網站,而不同的設備有不同的尺寸和分辨率。大多數的用戶界面需要不同尺寸的文本元素(復制按鈕、段落標簽、章節標題等等),選擇一個在不同尺寸和粗細下都能保持很好的可讀性和易讀性的字體,這點非常重要。
??Roboto字體,by Google
??確保你選擇的字體在更小的屏幕上也能閱讀。避免使用連體字,比如下面的Vivaldi字體,盡管它們很好看,但是很難閱讀。
??Vivaldi字體在小屏幕上很難閱讀

??5、選擇可以分辨不同字母的字體
??很多字體的有些字母會比較容易搞混,特別是“i”和“L”(比如說下面的例子),還有一些字母之間的間距太短,比如“r”和“n”在一起看起來像“m”。所以當你選擇字體時,確保你的字體在不同環境下不會給讀者帶來困擾。
??6、避免全都大寫
??所有文本都是大寫字母,在一些不需要閱讀的地方是可以的(比如縮略詞或者logo里),但是當你的信息需要讀者去閱讀時,不要強迫你的讀者去分辨所有的大寫段落。就像Miles Tinker在他的里程碑作品《Legibility of Print》中所說的,與小寫字體相比,大寫字體大大降低了瀏覽和閱讀的速度。
??7、不要過于減少行間距
??字體版式中,我們對于兩行字之間的空白距離稱作“行間距”。通過增加行間距,可以提高可讀性。一般來說,行間距應該比字符高度高30%左右,這樣有利于可讀性。
??合適的間距有助于可讀性,圖片來源:Microsoft
??Dmitry Fadeyev指出,正確使用段落之間的間距,可以提高20%的理解力。正確使用間距的技巧是提供給讀者易于理解的內容,然后去除多余的細節。
??左邊文字太擠了,右邊合適的間距有助于可讀性,圖片來源:Apple
??8、確保有足夠的顏色對比度
??文本和背景不要使用相同或相似的顏色。文字越明顯,用戶能更快的瀏覽和閱讀內容。W3C給我們建議了合適的文字和圖形的顏色對比度比例:
??小的文字和背景的對比度至少應該為4.5:1。
??大的文字(至少14號粗體或18號常規字體以上)比例至少為3:1.
??這兩段文字和背景的顏色對比不明顯,文字很難閱讀
??這兩段符合顏色對比比例,文字容易閱讀
??一旦你選定了顏色,要在大多數設備上都測試一下。如果測試發現了問題,那么能肯定用戶也會有同樣的問題。
??9、避免用紅色或者綠色著色文字
??色盲是一個常見的現象,特別是男性中8%的人是色盲。因此建議除顏色之外使用附加的信息來區分重要的內容。同樣要避免僅僅使用紅色和綠色來傳達信息,因為紅綠色盲是色盲里最常見的兩種。
??10、避免使用閃爍的文本
??閃爍的文本可能會引發敏感的個體不適的癥狀,而且可能會變得讓人討厭,讓用戶分心。
??字體排版是件大事,正確的版式可以讓你的網站煥然一新,讓人心情愉快。而不好的字體排版,則會使用戶分心。使字體版式可讀性、易讀性更高,易于理解,這些是非常重要的。
??“字體版式的存在是為了服務于內容的”字體版式是服務于內容的,永遠不要給用戶增加閱讀的負擔。
0
首頁
報價
案例
聯系
国产AⅤ国片精品青草社区