設計跟隨內(nèi)容，這是一個大家經(jīng)常聽到的詞。用戶訪問網(wǎng)站的目的主要是為了查看內(nèi)容，因而內(nèi)容是否吸引人至關重要。而如何讓我們的網(wǎng)頁內(nèi)容能夠被用戶所吸引，一份好的網(wǎng)頁正文設計不可或缺。

Part 1. 如何組織網(wǎng)頁內(nèi)容

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

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

眼動追蹤熱力圖

用戶閱讀網(wǎng)頁的過程中，主要是掃描內(nèi)容，查找他想要的和感興趣的相關信息。

網(wǎng)頁正文瀏覽方式

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

水平從左向右瀏覽(本文討論的是從左向右閱讀習慣的用戶群體)，一般首先會閱讀頂部的主要內(nèi)容區(qū)域;

用戶一般不會閱讀整個網(wǎng)頁，但會向下并再次沿水平方向從左向右閱讀;

沿正文區(qū)域左側(cè)垂直向下閱讀。

“F”形瀏覽方式

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

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

吸引用戶注意的網(wǎng)頁內(nèi)容

剛才有提到，網(wǎng)頁中，近80%的內(nèi)容會被用戶忽略，用戶閱讀的20%內(nèi)容的價值決定用戶是否繼續(xù)花時間閱讀下去。

那20%的內(nèi)容是：

網(wǎng)頁標題

網(wǎng)頁前面的幾個句子

突出顯示的標題和副標題

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

圖像標題

用戶從不閱讀的是：

長段落

與用戶意圖無關的首行標題、標題或副標題下的內(nèi)容

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

將重要的內(nèi)容放在顯眼位置

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

網(wǎng)頁最上面的內(nèi)容(用戶最開始注意到的內(nèi)容)，要有足夠的吸引力;

內(nèi)容要“頭重腳輕”，以吸引用戶的視線繼續(xù)往下移動;

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

騰訊云官網(wǎng)首頁首屏內(nèi)容，首屏下方，部分內(nèi)容可見，暗示用戶還有更多內(nèi)容。

倒金字塔格式

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

傳統(tǒng)寫作方式

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

倒金字塔寫作方式

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

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

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

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

Part 2. 如何有效設計網(wǎng)頁正文

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

視覺層次

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

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

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

留白

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

留白分類：

宏觀負空間：不同內(nèi)容塊之間的空間

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

某域名網(wǎng)站

Medium

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

對齊

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

Google搜索結果頁

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

數(shù)字

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

網(wǎng)頁正文中數(shù)字的設計一般遵從如下幾點原則：

用阿拉伯數(shù)字寫，而非文字(如35，不是三十五)。

十億以下的大數(shù)用阿拉伯數(shù)字表示。

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

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

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

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

圖片

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

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

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

字體與排版

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

字體

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

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

字號

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

豆瓣

百度知道

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

行距

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

過窄的行距，容易出現(xiàn)跳行，而過寬的行距會讓文字失去延續(xù)性，影響閱讀。

行長

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

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

文字與背景顏色

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

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

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

總結

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

分享標題：如何設計網(wǎng)頁正文
本文網(wǎng)址：http://jinyejixie.com/news25/164525.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、外貿(mào)網(wǎng)站建設、網(wǎng)站收錄、小程序開發(fā)、全網(wǎng)營銷推廣、App設計

廣告

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