在網(wǎng)頁設(shè)計中,排版對于網(wǎng)站與用戶之間建立良好的溝通,幫助用戶實現(xiàn)自己的目標起著重要的作用。當(dāng)我們談到網(wǎng)頁是否能與用戶建立有效的溝通時,這里通常指的是文本布局的作用:
網(wǎng)頁中95%以上的信息是文本
好的排版讓用戶更容易閱讀,而混亂的排版讓用戶失去繼續(xù)瀏覽的意圖。正如奧利弗·賴森斯坦在他的文章《網(wǎng)頁設(shè)計是95%的印刷術(shù)》中所寫,排版的目的是優(yōu)化可讀性、訪問率、可用性以及與圖形的平衡
換句話說,優(yōu)化布局也有助于優(yōu)化界面。在本文中,我們提供了一組規(guī)則,這些規(guī)則將幫助您提高文本內(nèi)容的可讀性和可讀性。
1.不要使用太多字體
建議在網(wǎng)站布局中不要超過三種字體類型,否則網(wǎng)站會顯得松散和不專業(yè)。太多的字體不僅會導(dǎo)致這個問題,而且太多的字體大小也會破壞網(wǎng)頁的布局。
一般來說,將字體系列的數(shù)量限制在最低限度(2個是多個,1個通常就足夠了),整個網(wǎng)站都遵循同樣的原則。如果使用多個字體,請確保兩個字體協(xié)調(diào)。以下面的字體組合為例。佐治亞州和威爾達那州相輔相成,相對和諧。與對巴斯克維爾的影響相比,會有明顯的沖突感。非線性沖擊明顯超過巴斯克維爾的視覺沖擊。
在中英文排版中,建議使用標準的中文字體,英文、數(shù)字和字符使用標準的英文字體。以下圖為例,看看能不能比較一下美。
2.嘗試使用標準字體
Google Web字體或typekit中有很多有趣的字體,中國的“字體庫”中也有字體嵌入服務(wù)。對于國內(nèi)設(shè)計師來說,痛苦的是中文字體會非常大,一個字體會移動幾兆和十兆,因此用戶會增加瀏覽網(wǎng)站的加載時間;相反,26個英文字母和數(shù)百個K數(shù)字標點符號在網(wǎng)頁中很容易使用。
盡量選擇標準字體(近年來,網(wǎng)站通常使用思源、平房的粗體字體,英文可以使用Arial、Calibri或其他屏幕上容易閱讀的常用粗體字。如果沒有特別的概念指導(dǎo),盡量避免使用襯線字體,如宋體)
不是每個用戶都能在終端上看到相同的字體,這意味著用戶可能看不到您選擇的適當(dāng)字體。
用戶更熟悉標準字體,因此閱讀速度更快
特殊的和少量的字體可以做成。SVG格式的嵌入到web中供使用的材料
好的字體設(shè)計允許用戶更多地關(guān)注內(nèi)容本身而不是字體類型。
3.限制文本行的長度
文本可讀性的關(guān)鍵是確保每行中的字符數(shù)。不是設(shè)計師定義文本的寬度,而是用戶的可讀性。
太寬-會使單行文字太長,讀者的眼睛很難集中在文字上。由于長時間閱讀容易連讀,在一大段文字中很難找到正確的行。
太短-會使用戶的眼睛經(jīng)?;氐较乱恍形淖?,會打破讀者的閱讀節(jié)奏,長時間閱讀會造成視覺疲勞。太短也容易向讀者發(fā)出信號,使讀者在閱讀當(dāng)前行之前跳到下一行,并可能忽略潛在的重要單詞和句子。
以谷歌和百度為例。我們可以看到
對于移動設(shè)備,每行應(yīng)為30-40個字符(半角),顯示的具體字數(shù)取決于屏幕、文本寬度和不同分辨率的字體大小。設(shè)計原則是保證用戶能順利閱讀文字,文字不能太小或太大。以IOS(手機)為例,文本的最小字體大小不能小于24px,對于用戶來說太小,無法閱讀。比如百度,可以作為參考。
4.選擇具有多個字號和良好顯示效果的字體
用戶將通過具有不同屏幕分辨率的終端設(shè)備訪問您的網(wǎng)站。大多數(shù)用戶界面需要不同大小的文本(標題、副標題、文本、注釋等)。選擇一種能夠在不同屏幕分辨率的設(shè)備上運行良好的字體,以確保其不同大小的字體具有較高的可讀性和可用性,這一點也非常重要。
近兩年來,無論是流行的思源粗體還是平房字體都是不錯的選擇。當(dāng)然,我認為漢儀旗黑色在家族字體數(shù)量、字體質(zhì)量、屏幕顯示和紙張打印等方面都不遜于前兩種字體。參與字體設(shè)計的設(shè)計師都表示,思源粗體還是一種比較粗糙的字體。
此外,為了確保它們在屏幕上清晰可見,請盡量避免使用襯線,即使它們很漂亮。
5.使用識別度高的字體
在選擇英文字體時,有些字體的個別字母容易混淆,特別是“I”和“L”(如下圖所示),以及字距。使用較小字體(如上圖)時,許多中文字體會粘在一起,不易區(qū)分;因此,在選擇字體類型時,請檢查您選擇使用的字體,確保不會給用戶和產(chǎn)品造成不必要的損失。
6.避免在界面的大部分使用大寫字母
不要對所有文本使用大寫字母,強迫用戶閱讀大寫字母、大寫字母、有特殊意義的縮寫等,只是大量的大寫字母會比小寫字母嚴重降低用戶的閱讀效率和閱讀樂趣。
7.將行距控制在字體的1.5-2倍之間
在文本排版中,另一個特殊術(shù)語用來表示行之間的距離:行距(或行高)。為了保證文本的可讀性和可讀性,使文本形成線性閱讀體驗,將行距控制在字號(中文字體)的1.5-2倍之間。建議使用英文字體的默認行距,或根據(jù)默認行距進行微調(diào)。
8.適當(dāng)?shù)念伾珜Ρ榷?
一般來說,盡量避免對文本和背景使用相同或相似的顏色。文本越明顯,用戶掃描和閱讀的速度就越快。當(dāng)然,也要學(xué)會通過文本顏色、大小和背景的顏色關(guān)系來控制視覺層次。
小文本與背景的對比度至少為背景的4.5:1
大文本(14px/18px以上)應(yīng)與背景保持3:1以上的對比度
灰色通常用作輔助色。根據(jù)之前的項目經(jīng)驗,有必要共享一組灰色、灰色和層次結(jié)構(gòu),并清楚地區(qū)分我一直使用的信息級別
9.避免將文本染成紅色或綠色
色盲和色弱是我必須照顧的一些用戶,特別是男性(其中8%是色盲)。建議使用其他方式區(qū)分重要信息(如下劃線、粗體等),而不是顏色。避免使用紅色和綠色作為單獨的消息。因為紅綠色盲是色盲中最常見的一種。(現(xiàn)在想一想,那些因為紅綠色盲而不能拿到駕照的童鞋,是否恨那些每分鐘都要制定紅綠燈規(guī)則的人。當(dāng)然,這只是個玩笑。交通燈的使用是因為光學(xué)的物理通信,這里沒有解釋。)
雖然在我們的日常生活中,我們總是用這種方式告訴用戶,綠色意味著正確的操作,紅色意味著錯誤的操作。反思一下我們是否考慮過色盲用戶的操作和體驗?;蛟S我們可以考慮用另一種方式來表達對與錯?
10.避免文本閃爍
閃爍的文本或內(nèi)容可能會讓一些用戶感到不舒服,這可能會分散或惹惱普通用戶的注意力。
盡管在網(wǎng)頁設(shè)計中還有很多事情需要注意,最后,我想和大家分享一個觀點,排版在網(wǎng)頁設(shè)計中是非常重要的。正確的排版可以讓你的網(wǎng)站煥然一新,而糟糕的排版會分散用戶的注意力,傾向于關(guān)注他們的感受,而不是他們的內(nèi)容。排版的關(guān)鍵是使信息層次清晰,便于用戶閱讀,并確保文本可讀。文字排版不應(yīng)增加使用者的認知整合,以達到尊重內(nèi)容和使用者的目的。
TAG:
網(wǎng)站建設(shè)案例
黃巖醫(yī)藥
華逸逸品
樂夢科技
小聰明幼兒園
力松機械
網(wǎng)站建設(shè)資訊導(dǎo)航
相關(guān)資訊
分站導(dǎo)航