如何做好網頁排版 這十種錯誤千萬不要犯

@短腿僵尸木:網絡上95%以上的信息是書面形式的。優(yōu)化排版則是優(yōu)化可讀性,可訪問性,可用性,整體圖形平衡。換句話說:優(yōu)化排版也是優(yōu)化用戶界面。本文將提供一組規(guī)則,幫助您提高文本內容的可讀性和易讀性。
1. 最少使用字體數(shù)量
使用超過 3 種不同的字體使網站看起來非結構化和不專業(yè),太多的類型尺寸和樣式一次也可能破壞任何布局。
一般來說,整個網站字體的數(shù)量限制在最多兩種,一種一般就足夠了。如果您使用多個字體,請確保字體系基于字符寬度互補。如圖:左邊組的字體相對就比較和諧,而右邊字體的粗細對比太明顯,則顯得輕重比例很不和諧了。
2. 嘗試使用標準字體
字體嵌入服務(如Google Web字體或Typekit)有許多有趣而標準的系統(tǒng)字體,而因為用戶更加熟悉標準字體,所以可以更快地讀取它們。
除非您的網站對于自定義字體(如品牌宣傳或創(chuàng)建身臨其境的體驗)非常有吸引力,否則通常最好使用系統(tǒng)字體。
3. 限制線長度
如果你想要一個良好的閱讀體驗,你應該每行約 60 個字符。在每行上擁有適當?shù)淖址麛?shù)量是您的文本可讀性的關鍵。如果每行文字太短,視線必須反復折回來,打破讀者的節(jié)奏。如果一行文字太長,用戶的眼睛將很難專注于文本。
對于移動設備,您應該每行30- 40 個字符 。以下是在移動設備上查看的兩個網站的示例。第一個使用每行50- 75 個字符(打印和桌面的每行最佳字符數(shù)),而第二個使用最佳30- 40 個字符。
4. 選擇各種尺寸的字體
確保您選擇的字體在較小的屏幕上清晰可辨!
維瓦爾第字體將難以在小屏幕上閱讀:
5. 使用可區(qū)分字母的字體
許多字體使得很容易混淆類似的字母,特別是與“i”和“L”(如下圖所示),所以當選擇你的字體類型時,請確保在不同的上下文中檢查你的類型,以確保不會為你的用戶造成問題。
6. 避免英文全部大寫
請勿強制用戶閱讀所有大寫字母,與小寫類型相比,那只會大大延緩了用戶掃描和閱讀的速度,讓他們分分鐘爆炸。
7. 不要最小化線間距
行間距一般是字符高度的30%,以便良好的可讀性。
而段落之間的間距可以比行間距提高20%,留白可以為用戶提供消化內容的時間。下圖左:幾乎重疊的文字。右:良好的間距有助于可讀性。
8. 確保您有足夠的顏色對比度
不要對文本和背景使用相同或相似的顏色。文本越明顯,用戶能夠掃描和閱讀的速度越快。
△ 這些文本行不符合顏色對比度建議,難以根據(jù)背景顏色進行閱讀
△ 這些文本行符合顏色對比度建議,并且易于閱讀背景顏色
9. 避免將文字著色為紅色或綠色
建議使用除顏色以外的其他線索來區(qū)分重要信息。也避免單獨使用紅色和綠色來傳達信息,避免有色盲用戶無法順利閱讀的情況。
10. 避免使用閃爍的文字
閃爍或閃爍的內容可能會使一些敏感人群發(fā)瘋,并且對于一般使用者來說,這可能是令人討厭或分心的。
結論
使排版具有可讀性,可理解性、清晰明了至關重要。至關重要。好的排版可以讓您的網站感覺清爽而令人眼前一亮。另一方面,糟糕的排版選擇令人分心。排版是為了內容更好的呈現(xiàn),應以不會增加用戶認知負荷的方式來尊重內容。
相關閱讀:
四種自助建站排版技術有什么優(yōu)缺點?優(yōu)劣對比分析
相關文章
- 簡單而片面的說,爬蟲就是由計算機自動與服務器交互獲取數(shù)據(jù)的工具,這篇文章主要想談談爬蟲獲取數(shù)據(jù)的這一部分。爬蟲請注意網站的Robot.txt文件,不要讓爬蟲違法,也不要2017-12-18
- 設計師可能無法減少App加載頁面的等待時間,但是可以讓等待時間變得有趣~,本文主要為大家淺淡App加載頁面的等待體驗設計技巧,有興趣的朋友們就來了解下吧2017-12-15
- 表單無論實在網頁設置中,還是在APP、應用程序、軟件界面中都被廣泛運行,從而一個好的表單設計就非常重要了,本文主要為大家分享幾個交互好且轉化率高的表單設計技巧,有2017-11-20
適配iPhone X要點:十分鐘快速掌握iPhone X UI界面適配技巧
目前,第一批預約iPhone X手機的朋友們已經拿到真機了,目前還沒有適配iPhone X的應用運營商,相信都在加班加點適配呢,本文為大家?guī)砹诉m配iPhone X的要點,讓你十分鐘快2017-11-08如何讓網頁可讀性更強?善用F式布局設計增強網頁可讀性方法解答
雖然網頁排版方式千變萬化,但是布局方式通常都遵循著幾種常見的規(guī)則,F(xiàn)式布局式設計能夠增強網頁可讀性,這種說法是有跡可循的,本文就為大家介紹如何運用F式布局,有興趣2017-11-08- 在網頁的設計中表單都是界面中最常見,也是最重要的組件之一,對于設計師、前端和開發(fā)者而言,應當對于表單的設計盡量多上心,讓它們更加易用,細致的設計對于用戶的體驗、2017-10-26
- 有很多東西下意識地影響了我們的日常決策,這里面很多都是微妙的心理因素在起作用,大家都知道用戶體驗設計跟心理學相關,甚至會直接影響產品的轉化率,那么,登錄頁面怎么2017-10-10
網站評論模塊怎么設計 10個關鍵點告訴你如何設計產品評論模塊
網站不僅內容很重要,評論模塊同樣也很重要,那么,網站評論模塊怎么設計呢?對此,本文就為大家詳細介紹10個關鍵點告訴你如何設計產品評論模塊,有興趣的朋友們就來了解下2017-09-25網站導航設計怎么才是符合搜索引擎優(yōu)化?SEO網站導航建設技巧分享
搭建網站的任何細節(jié)都需要考慮到是否利于SEO優(yōu)化,在網站導航設計的過程中,我們應該怎么樣進行操作才是符合搜索引擎優(yōu)化的呢?對此,本文就為大家進行簡單解答2017-09-21- 在做網站設計的過程當中,很多人可能會對于頁腳這個方面產生忽略,但是實際上在我們平時的使用下來的整體的分析數(shù)據(jù)表明,頁腳對于一個網站來說還是有非常重要的作用的,那2017-09-04