Part 1. 如何組織網頁內容

用戶在瀏覽網頁時，主要目的是為了獲取有用信息。他們會使用最舒服的方式，去評估獲取信息的可能性，只有我們設計的瀏覽路徑足夠的自然，且提示清晰，內容易懂，符合用戶的心理模型，用戶才會使用該路徑。用戶會非常迅速的決定該網頁內容是否值得花時間閱讀，因此網頁正文設計的好與壞非常重要，只有制定的設計策略能讓用戶在尋找和使用信息時，以最少的投入獲得大的利益，我們的設計才有價值。

大部分場景，用戶只會掃視頁面，不會進行在線閱讀。大部分場景用戶都是在查找自己想要和自己感興趣的相關信息，而不是逐字閱讀。用戶一般用非線性的方式閱讀屏幕內容，且不會去尋找好選擇，一般很快就會做出決定點擊還是離開，因為看完全部內容去查找好選擇，太花費時間和精力了。全部網頁內容中，只有20%才會被用戶閱讀，我們需要知道用戶想要閱讀的20%的內容是什么，從而有效的確定頁面架構，編寫內容來捕捉用戶的注意力，以說服用戶閱讀更多內容。

眼動追蹤熱力圖

用戶閱讀網頁的過程中，主要是掃描內容，查找他想要的和感興趣的相關信息。

網頁正文瀏覽方式

常見的瀏覽軌跡像一個“F”形。這種瀏覽方式由3部分組成：

水平從左向右瀏覽（本文討論的是從左向右閱讀習慣的用戶群體），一般首先會閱讀頂部的主要內容區域；

用戶一般不會閱讀整個網頁，但會向下并再次沿水平方向從左向右閱讀；

沿正文區域左側垂直向下閱讀。

“F”形瀏覽方式

此熱力圖顯示了一個典型的瀏覽方式，先閱讀前幾行，然后沿垂直方向向下瀏覽，當遇到感興趣的內容，會多閱讀一些，整體形狀看起來，像一個“F”形。

除了“F”形的瀏覽模式以外，根據網頁內容吸引度的不同，可能會導致用戶更多的水平方向（“E”形）或更少水平方向（“L”形）的瀏覽。而如果用戶瀏覽的目的更加明確，是為了查找特定的信息，則瀏覽視線會更加不規則跳轉，同時不同的年齡，文化水平、互聯網使用經驗也會影響閱讀的模式。

吸引用戶注意的網頁內容

剛才有提到，網頁中，近80%的內容會被用戶忽略，用戶閱讀的20%內容的價值決定用戶是否繼續花時間閱讀下去。

那20%的內容是：

網頁標題

網頁前面的幾個句子

突出顯示的標題和副標題

有趣標題或副標題附近正文的前幾個字

圖像標題

用戶從不閱讀的是：

長段落

與用戶意圖無關的首行標題、標題或副標題下的內容

那如何運用用戶瀏覽網頁的這些既定習慣去更好的設計呢，一般我們可以采用如下幾種設計策略：

將重要的內容放在顯眼位置

前面提到了用戶閱讀網頁的一般瀏覽方式，以及習慣注意的網頁內容，既然用戶習慣于在特定的地方查找感興趣的信息，則可以利用用戶的這些閱讀習慣，將有用的或吸引人的信息放置在用戶最容易注意到的地方。一般內容設計上，要注意的地方是：

網頁最上面的內容（用戶最開始注意到的內容），要有足夠的吸引力；

內容要“頭重腳輕”，以吸引用戶的視線繼續往下移動；

把重要的內容放在顯眼位置，即網頁首屏顯示區域,且考慮放在左側比右側更具有吸引力（用戶從左向右閱讀）。用戶很有可能不會滾動鼠標，查看屏幕以外的內容。因為用戶不一定知道下面還有內容，如果頁面內容較多，重要內容無法一屏顯示完，設計需要考慮頁面布局能夠鼓勵用戶繼續往下瀏覽，如部分可見的圖片或文本，以及明顯的提示。

騰訊云官網首頁首屏內容，首屏下方，部分內容可見，暗示用戶還有更多內容。

倒金字塔格式

除了在用戶最容易注意到的地方放置你最希望用戶關注的內容之外，正文內容是否能吸引用戶真正閱讀下去也很重要。先拋出結論的形式去組織正文內容，能夠幫助用戶快速掌握核心信息。

傳統寫作方式

如上圖，是傳統寫作方式的內容組織形式，估計有很多人會閱讀一點開始的內容，但很少有人會從頭讀到尾，而吸引眼球的內容組織方式，是先拋結論，這才是用戶想要看的信息，大多數人只需要一個結論。

倒金字塔寫作方式

將關鍵信息放置在閱讀的開始部分，從而有效地吸引用戶閱讀下去，通過開頭的一兩個短句吸引用戶眼球并引導用戶閱讀更多內容?？梢钥紤]將用戶感興趣的內容，如內容結論放置在前面。

結尾與開頭呼應，顯示行動號召

結尾一般放置的是背景信息與空洞內容的地方，傳統觀念認為列表最后一項閱讀的人最少，但其實根據相關眼動追蹤測試表明，整個列表中最后一項得到的關注也較多。如果我們在結尾處放置一些有趣的內容，或行動號召，則有可能吸引瀏覽者繼續留在網站上，比如一張有趣的品牌圖片，或一個引人注目的操作提示。

騰訊云官網首頁最后，顯示一個行動號召，吸引用戶繼續停留在網站上。

Part 2. 如何有效設計網頁正文

說到網頁正文設計，其實就是排版，網頁排版設計需要考慮網站上的每一個元素，通過一系列的設計手段去降低用戶的閱讀負擔。

視覺層次

好的視覺層次可以引導用戶閱讀網頁的順序。在閱讀的過程中，用戶的視線會落在首行標題、副標題、短的文本塊上，原因是它們比周圍的文本更加顯眼，設計就是要達到這樣的效果。視覺層次可以幫助用戶理解網頁結構，如何閱讀能夠選出最重要的信息或者幫助用戶決定哪里應該停下來閱讀更多細節。

以我們所熟知的報紙為例，標題闡述核心，尺寸大，粗體強調，其次是副標題，字體小點，再其次是正文，字體最小。如果打破了這種層次結構，用戶會迷惑，哪些重要哪些其次，分不清楚。

上左圖沒有視覺層次，用戶無法看出哪些是主要信息，對比之下，上右圖用大小、加粗、顏色，間距把內容做了區分，形成視覺層級，讓用戶很容易知道哪里是重點。

留白

留白不一定代表要用白色，在實際設計中，我們將留白稱之為“負空間”，它除了用白色以外，還可以是背景，指的是“未使用的區域”，內容與內容之間的間隙。在頁面空間中，將圖形、文字、圖片等元素通過合理的布局，展示一個較好的空間關系，提供了布局上的平衡，留白區域的環繞與陪襯，良好的襯托出中心區域的表現。

留白分類：

宏觀負空間： 不同內容塊之間的空間

微觀負空間： 一個內容塊內不同文字或圖片之間的空間

某域名網站

Medium

合理的內容布局，以及易于閱讀的字間距，段間距，頁邊距，能夠讓用戶更舒適的閱讀你的網頁正文，如上圖，Medium的網頁可以很輕松的指引用戶去尋找他想找的內容，而另一張圖的網頁元素過多，用戶的注意力很容易分散，太多東西擠在一起，用戶會不知所措并忽略大部分內容。

對齊

通過上文介紹的用戶常見瀏覽軌跡，了解到用戶瀏覽網頁時，一般很自然的沿著左側邊緣瀏覽文本，如果左側邊緣不齊，會增加用戶瀏覽和尋找信息的難度，盡可能的保持文本左對齊以符合自然的瀏覽行為。

Google搜索結果頁

左對齊文本比較方便用戶瀏覽，左邊緣與上下間距的一致性，用戶可以自然地下意識去尋找下一行或下一個詞語。

數字

文本中的數字，相比于其中的文字，會格外的吸引眼球，用戶在閱讀的過程中，對于數字會比較敏感，一般文本中的數字代表著數據和事實，這些可能正是用戶想要尋找的內容。此外，數字也因為形狀的不同而在文本中會比較顯眼。

網頁正文中數字的設計一般遵從如下幾點原則：

用阿拉伯數字寫，而非文字（如35，不是三十五）。

十億以下的大數用阿拉伯數字表示。

2,000,00比二十萬的寫法要好。

兩萬億比2,000,000,000,000的寫法好，大多數人數不過來這么多零。

作為折中，有些情況將數字寫成阿拉伯數字+文字的結構會比較好，如350億（不是三百五十億或35,000,000,000）。

不能代表確切事實的數字用文字表示（只是表達估計或者想法，則應該用文字表示數量級，比如“中國有接近兩千萬人將成為光棍”）。

圖片

圖片可以吸引和引導注意力，人們非常習慣面部圖片和定向信號。在網頁中放置一張有人臉的圖片，則用戶的注意力很容易被吸引到圖片及周圍。而且如果圖片中的人物視線指向某個方向，則用戶的視線也會追隨其注視的內容，這一原理適用于指向性提示，如將行動號召或slogan放置在人物視線望去的方向，可大大吸引用戶的注意力。

摸著你的良心告訴我，上面哪個Banner圖更吸引你的注意力。

用戶瀏覽網頁時，會跟隨網頁圖片中的人物視線方向，移動瀏覽視線，將重要內容放置在此，可大大提高用戶的注意力。

字體與排版

文字排版需要考慮文字辨識度和頁面易讀性。好的網頁正文排版，應該讓設計毫無痕跡，用戶很自然的關注內容，而不是設計本身。影響文字閱讀舒適性的因素主要有 字 體、字體大小、行距、行長、顏色 等。

字體

關于字體的選擇，襯線字體與無襯線字體都沒有關系，一般可辨性都差不多。但在一些特定的場景、字號下，某種特定字體可能會更合適，比如說，在大量文本的場景下，如果使用小字號，如12號字的話，宋體的可辨性會好于微軟雅黑，且讀起來輕松，不容易產生疲勞。而Slogan或者Title之類的需要醒目的標識適合使用非襯線體，如黑體、雅黑等字體，容易吸引用戶注意力。

第一個表格字體是微軟雅黑，第二個表格字體是宋體，對比來看，在小字號的字體上，宋體的辨識性會好于微軟雅黑。

字號

網頁正文使用的字號大小，也與該網站的定位、品牌及目標用戶有關，一般正文字體大小采用12-14號字。舉個栗子：

豆瓣

百度知道

豆瓣正文使用的是12號字，百度知道正文使用的是14號字。從視覺上看，豆瓣的整體字號偏小，雖然用戶閱讀起來會容易產生疲勞，但小號字傳遞給人的感受很精致，符合豆瓣用戶群體的文藝氣息，所以它的的目標用戶普遍都還是接受的。如果將豆瓣正文字號換成14號，如右圖，就會顯得有些粗糙，不夠精致細膩了。不同產品面對不同的用戶群體，百度知道的用戶群體覆蓋全年齡段，需要以閱讀的清晰度為主要考慮點。

行距

行距是影響可辨性的一個重要因素，字體越大，行距越大，行長越長，行距越大。一般行距是字體大小的1-1.5倍時，閱讀最有效。

過窄的行距，容易出現跳行，而過寬的行距會讓文字失去延續性，影響閱讀。

行長

行長不宜過長，也不宜過短。過長的話，用戶視線移動距離長，很難注意到段落起點和終點，閱讀比較困難。而過短的話，眼睛需要不停來回掃視，破壞閱讀節奏。因此，需要設定一個合適的行字數，提高文字的易讀性。

為了讓用戶在閱讀過程中，能夠舒適的從一行換到下一行，需要在一行的結尾與下一行的開始之間保持一個合適的角度，行距應該隨著行長的增加而增加。

文字與背景顏色

文字和背景顏色的合理搭配，合適的對比可以提高文字的清晰度，增強可讀性，一般淺色背景下的深色文本比其他形式更容易閱讀，深色背景下的淺色文本會使閱讀速度明顯減慢。

如上圖對比來看，淺色背景下的深色文本會比深色背景下的淺色文本更容易閱讀。

必須要保證文字與背景有足夠強的對比度，確保文字能夠讓用戶清晰閱讀，如上圖，如果文字與背景顏色對比度過低的話，文字的可讀性會很差，用戶閱讀起來吃力。

總結

以上介紹的這些都是關于如何設計好網頁正文的一些基本知識，設計前，我們需要先了解我們用戶瀏覽網頁的習慣，然后結合我們的產品目標、設計目標，設計整體頁面架構，以及合理的組織網頁內容，然后再通過一些設計策略，向用戶清晰的傳遞出我們網頁正文的視覺層次，引導用戶按照我們既定的瀏覽路徑，舒適的瀏覽網頁正文，只有當我們制定的設計策略能讓用戶在尋找和使用信息時以最少的投入獲得大的利益時，我們的設計才有價值。

分享文章：吸引用戶注意的網頁設計
文章網址：http://m.newbst.com/news48/71148.html

成都網站建設公司_創新互聯，為您提供微信小程序、網站內鏈、網站排名、品牌網站制作、企業建站、網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯