POST TIME:2018-12-03 17:24
注:優化網站文字排版也是優化用戶界面的一種方式。 在本文,作者將分享一組幫手你提高文本內容的可讀性和易讀性的規則。
“溝通”在設計中起著至關重要的作用 – 它能建立網站和用戶之間的聯系,并幫手用戶完成他們的目標。 當我們談論在網頁設計方面的溝通時,通常是指文本的輸出。
排版在這個過程中起著至關重要的作用:網絡上的信息95%以上的是在書面語言的形式存在。良好的文字排版使閱讀的行為輕松,而體驗欠好的文字排版導致用戶關閉網頁。“網頁設計是95%排版設計”:
優化排版是優化界面可讀性,可拜候性,可用性,使整體平衡的關鍵。
換句話說:優化網站文字排版也是優化用戶界面的一種方式。 不才面的文章中,我將提供一組幫手你提高文本內容的可讀性和易讀性的規則。
1.盡量使用少的字體
使用超過 3 種差別的字體會使網站看起來缺乏結構化和不專業。 注意,較多的字體樣式使用一次都可能破壞所有布局。
為了防止這樣的情況,嘗試將字體數量減少
一般來說,將字體數量限制在最小限度(兩個算多的,一個是正好的)。 如果你使用一個以上的字體,確保字體具有系列感,且基于其字符寬度是相得益彰。 采取下面的字體組合的例子。 Georgia和Verdana(左)的結合,共同創建一個和諧的配對相似的價值不雅觀。 與此比擬,Baskerville和Impact( 右),極大地掩蓋了襯線相對應的不匹配度,形成較好的視覺體驗。
在基于其字符寬度的尺度下確保字體系列相得益彰
2.嘗試使用尺度字體
字體嵌入辦事(如Google Web字體或Typekit)有許多有趣的字體,可以為您的設計提供創新、新鮮的和意想不到的效果,它們使用起來也非常便利。以Google為例:
選擇任何字體,如Open Sans。
生成代碼并粘貼到HTML文檔中。
完成!
這個情況下不會出錯么?
其實這種做法有兩個問題
不是每個人開啟瀏覽器都可以拜候到同一種字體,這意味因為您選擇的用戶體驗較好的字體將無法展示在所有用戶面前。
用戶更熟悉尺度字體,,因此可以更快地讀取它們想要的信息。
除非您的網站有足夠吸引人的自定義字體(如品牌宣傳或創建身臨其境的體驗),不然最好使用系統字體。更為安適的做法是使用的系統字體是:Arial,Calibri,Trebuchet等。請記住,良好的文字排版會將讀者吸引到內容,而不是文字自己。
3.限制文本線長度
每行放置適當的字符數量是文本可讀性的關鍵,它不但是你的設計,決定你的文本的寬度,它也應該是一個可讀性的問題。從Baymard研究所考慮有關可讀性和文本線長度的建議:
“如果你想要一個很好的閱讀體驗,你應該限制每行大概 60 個字符。每行擁有適當的字符數量是文本可讀性的關鍵。”
如果一行文本太短,眼睛必需經常轉回,打破讀者的節奏。 如果一行文本太長,用戶的眼睛也難長期專注于單行文本。 圖片來源:材料設計
對于移動設備,基本連結每行30- 40 個字符。 以下是在移動設備上查看的兩個網站的示例。 第一個使用每行(每行字符印刷和桌面的最佳數量)50- 75 個字符,而第二個使用最佳30- 40 字符。
在網頁設計中,您可以通過使用像素限制文本塊的寬度來實現每行最佳數量的字符。