如何設(shè)計(jì)網(wǎng)頁正文

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

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

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

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

眼動(dòng)追蹤熱力圖

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

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

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

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

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

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

“F”形瀏覽方式

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

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

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

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

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

網(wǎng)頁標(biāo)題

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

突出顯示的標(biāo)題和副標(biāo)題

有趣標(biāo)題或副標(biāo)題附近正文的前幾個(gè)字

圖像標(biāo)題

用戶從不閱讀的是：

長段落

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

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

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

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

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

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

把重要的內(nèi)容放在顯眼位置，即網(wǎng)頁首屏顯示區(qū)域,且考慮放在左側(cè)比右側(cè)更具有吸引力(用戶從左向右閱讀)。用戶很有可能不會(huì)滾動(dòng)鼠標(biāo)，查看屏幕以外的內(nèi)容。因?yàn)橛脩舨灰欢ㄖ老旅孢€有內(nèi)容，如果頁面內(nèi)容較多，重要內(nèi)容無法一屏顯示完，設(shè)計(jì)需要考慮頁面布局能夠鼓勵(lì)用戶繼續(xù)往下瀏覽，如部分可見的圖片或文本，以及明顯的提示。

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

倒金字塔格式

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

傳統(tǒng)寫作方式

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

倒金字塔寫作方式

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

結(jié)尾與開頭呼應(yīng)，顯示行動(dòng)號召

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

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

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

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

視覺層次

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

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

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

留白

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

留白分類：

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

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

某域名網(wǎng)站

Medium

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

對齊

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

Google搜索結(jié)果頁

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

數(shù)字

文本中的數(shù)字，相比于其中的文字，會(huì)格外的吸引眼球，用戶在閱讀的過程中，對于數(shù)字會(huì)比較敏感，一般文本中的數(shù)字代表著數(shù)據(jù)和事實(shí)，這些可能正是用戶想要尋找的內(nèi)容。此外，數(shù)字也因?yàn)樾螤畹牟煌谖谋局袝?huì)比較顯眼。

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

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

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

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

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

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

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

圖片

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

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

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

字體與排版

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

字體

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

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

字號

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

豆瓣

百度知道

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

行距

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

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

行長

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

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

文字與背景顏色

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

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

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

總結(jié)

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

分享標(biāo)題：如何設(shè)計(jì)網(wǎng)頁正文
本文網(wǎng)址：http://muchs.cn/news25/164525.html

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

廣告

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