Part 1. 如何組織網(wǎng)頁(yè)內(nèi)容
用戶在瀏覽網(wǎng)頁(yè)時(shí)，主要目的是為了獲取有用信息。他們會(huì)使用最舒服的方式，去評(píng)估獲取信息的可能性，只有我們?cè)O(shè)計(jì)的瀏覽路徑足夠的自然，且提示清晰，內(nèi)容易懂，符合用戶的心理模型，用戶才會(huì)使用該路徑。用戶會(huì)非常迅速的決定該網(wǎng)頁(yè)內(nèi)容是否值得花時(shí)間閱讀，因此網(wǎng)頁(yè)正文設(shè)計(jì)的好與壞非常重要，只有制定的設(shè)計(jì)策略能讓用戶在尋找和使用信息時(shí)，以最少的投入獲得最大的利益，我們的設(shè)計(jì)才有價(jià)值。
大部分場(chǎng)景，用戶只會(huì)掃視頁(yè)面，不會(huì)進(jìn)行在線閱讀。大部分場(chǎng)景用戶都是在查找自己想要和自己感興趣的相關(guān)信息，而不是逐字閱讀。用戶一般用非線性的方式閱讀屏幕內(nèi)容，且不會(huì)去尋找最佳選擇，一般很快就會(huì)做出決定點(diǎn)擊還是離開，因?yàn)榭赐耆績(jī)?nèi)容去查找最佳選擇，太花費(fèi)時(shí)間和精力了。全部網(wǎng)頁(yè)內(nèi)容中，只有20%才會(huì)被用戶閱讀，我們需要知道用戶想要閱讀的20%的內(nèi)容是什么，從而有效的確定頁(yè)面架構(gòu)，編寫內(nèi)容來(lái)捕捉用戶的注意力，以說(shuō)服用戶閱讀更多內(nèi)容。
眼動(dòng)追蹤熱力圖
用戶閱讀網(wǎng)頁(yè)的過(guò)程中，主要是掃描內(nèi)容，查找他想要的和感興趣的相關(guān)信息。
網(wǎng)頁(yè)正文瀏覽方式
常見的瀏覽軌跡像一個(gè)“F”形。這種瀏覽方式由3部分組成：
水平從左向右瀏覽（本文討論的是從左向右閱讀習(xí)慣的用戶群體），一般首先會(huì)閱讀頂部的主要內(nèi)容區(qū)域；
用戶一般不會(huì)閱讀整個(gè)網(wǎng)頁(yè)，但會(huì)向下并再次沿水平方向從左向右閱讀；
沿正文區(qū)域左側(cè)垂直向下閱讀。
“F”形瀏覽方式
此熱力圖顯示了一個(gè)典型的瀏覽方式，先閱讀前幾行，然后沿垂直方向向下瀏覽，當(dāng)遇到感興趣的內(nèi)容，會(huì)多閱讀一些，整體形狀看起來(lái)，像一個(gè)“F”形。
除了“F”形的瀏覽模式以外，根據(jù)網(wǎng)頁(yè)內(nèi)容吸引度的不同，可能會(huì)導(dǎo)致用戶更多的水平方向（“E”形）或更少水平方向（“L”形）的瀏覽。而如果用戶瀏覽的目的更加明確，是為了查找特定的信息，則瀏覽視線會(huì)更加不規(guī)則跳轉(zhuǎn)，同時(shí)不同的年齡，文化水平、互聯(lián)網(wǎng)使用經(jīng)驗(yàn)也會(huì)影響閱讀的模式。
吸引用戶注意的網(wǎng)頁(yè)內(nèi)容
剛才有提到，網(wǎng)頁(yè)中，近80%的內(nèi)容會(huì)被用戶忽略，用戶閱讀的20%內(nèi)容的價(jià)值決定用戶是否繼續(xù)花時(shí)間閱讀下去。
那20%的內(nèi)容是：
網(wǎng)頁(yè)標(biāo)題
網(wǎng)頁(yè)前面的幾個(gè)句子
突出顯示的標(biāo)題和副標(biāo)題
有趣標(biāo)題或副標(biāo)題附近正文的前幾個(gè)字
圖像標(biāo)題
用戶從不閱讀的是：
長(zhǎng)段落
與用戶意圖無(wú)關(guān)的首行標(biāo)題、標(biāo)題或副標(biāo)題下的內(nèi)容
那如何運(yùn)用用戶瀏覽網(wǎng)頁(yè)的這些既定習(xí)慣去更好的設(shè)計(jì)呢，一般我們可以采用如下幾種設(shè)計(jì)策略：
將重要的內(nèi)容放在顯眼位置
前面提到了用戶閱讀網(wǎng)頁(yè)的一般瀏覽方式，以及習(xí)慣注意的網(wǎng)頁(yè)內(nèi)容，既然用戶習(xí)慣于在特定的地方查找感興趣的信息，則可以利用用戶的這些閱讀習(xí)慣，將有用的或吸引人的信息放置在用戶最容易注意到的地方。一般內(nèi)容設(shè)計(jì)上，要注意的地方是：
網(wǎng)頁(yè)最上面的內(nèi)容（用戶最開始注意到的內(nèi)容），要有足夠的吸引力；
內(nèi)容要“頭重腳輕”，以吸引用戶的視線繼續(xù)往下移動(dòng)；
把重要的內(nèi)容放在顯眼位置，即網(wǎng)頁(yè)首屏顯示區(qū)域,且考慮放在左側(cè)比右側(cè)更具有吸引力（用戶從左向右閱讀）。用戶很有可能不會(huì)滾動(dòng)鼠標(biāo)，查看屏幕以外的內(nèi)容。因?yàn)橛脩舨灰欢ㄖ老旅孢€有內(nèi)容，如果頁(yè)面內(nèi)容較多，重要內(nèi)容無(wú)法一屏顯示完，設(shè)計(jì)需要考慮頁(yè)面布局能夠鼓勵(lì)用戶繼續(xù)往下瀏覽，如部分可見的圖片或文本，以及明顯的提示。
騰訊云官網(wǎng)首頁(yè)首屏內(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)鍵信息放置在閱讀的開始部分，從而有效地吸引用戶閱讀下去，通過(guò)開頭的一兩個(gè)短句吸引用戶眼球并引導(dǎo)用戶閱讀更多內(nèi)容。可以考慮將用戶感興趣的內(nèi)容，如內(nèi)容結(jié)論放置在前面。
結(jié)尾與開頭呼應(yīng)，顯示行動(dòng)號(hào)召
結(jié)尾一般放置的是背景信息與空洞內(nèi)容的地方，傳統(tǒng)觀念認(rèn)為列表最后一項(xiàng)閱讀的人最少，但其實(shí)根據(jù)相關(guān)眼動(dòng)追蹤測(cè)試表明，整個(gè)列表中最后一項(xiàng)得到的關(guān)注也較多。如果我們?cè)诮Y(jié)尾處放置一些有趣的內(nèi)容，或行動(dòng)號(hào)召，則有可能吸引瀏覽者繼續(xù)留在網(wǎng)站上，比如一張有趣的品牌圖片，或一個(gè)引人注目的操作提示。
騰訊云官網(wǎng)首頁(yè)最后，顯示一個(gè)行動(dòng)號(hào)召，吸引用戶繼續(xù)停留在網(wǎng)站上。
Part 2. 如何有效設(shè)計(jì)網(wǎng)頁(yè)正文
說(shuō)到網(wǎng)頁(yè)正文設(shè)計(jì)，其實(shí)就是排版，網(wǎng)頁(yè)排版設(shè)計(jì)需要考慮網(wǎng)站上的每一個(gè)元素，通過(guò)一系列的設(shè)計(jì)手段去降低用戶的閱讀負(fù)擔(dān)。
視覺層次
好的視覺層次可以引導(dǎo)用戶閱讀網(wǎng)頁(yè)的順序。在閱讀的過(guò)程中，用戶的視線會(huì)落在首行標(biāo)題、副標(biāo)題、短的文本塊上，原因是它們比周圍的文本更加顯眼，設(shè)計(jì)就是要達(dá)到這樣的效果。視覺層次可以幫助用戶理解網(wǎng)頁(yè)結(jié)構(gòu)，如何閱讀能夠選出最重要的信息或者幫助用戶決定哪里應(yīng)該停下來(lái)閱讀更多細(xì)節(jié)。
以我們所熟知的報(bào)紙為例，標(biāo)題闡述核心，尺寸最大，粗體強(qiáng)調(diào)，其次是副標(biāo)題，字體小點(diǎn)，再其次是正文，字體最小。如果打破了這種層次結(jié)構(gòu)，用戶會(huì)迷惑，哪些重要哪些其次，分不清楚。
上左圖沒有視覺層次，用戶無(wú)法看出哪些是主要信息，對(duì)比之下，上右圖用大小、加粗、顏色，間距把內(nèi)容做了區(qū)分，形成視覺層級(jí)，讓用戶很容易知道哪里是重點(diǎn)。
留白
留白不一定代表要用白色，在實(shí)際設(shè)計(jì)中，我們將留白稱之為“負(fù)空間”，它除了用白色以外，還可以是背景，指的是“未使用的區(qū)域”，內(nèi)容與內(nèi)容之間的間隙。在頁(yè)面空間中，將圖形、文字、圖片等元素通過(guò)合理的布局，展示一個(gè)較好的空間關(guān)系，提供了布局上的平衡，留白區(qū)域的環(huán)繞與陪襯，良好的襯托出中心區(qū)域的表現(xiàn)。
留白分類：
宏觀負(fù)空間： 不同內(nèi)容塊之間的空間
微觀負(fù)空間： 一個(gè)內(nèi)容塊內(nèi)不同文字或圖片之間的空間
某域名網(wǎng)站
Medium
合理的內(nèi)容布局，以及易于閱讀的字間距，段間距，頁(yè)邊距，能夠讓用戶更舒適的閱讀你的網(wǎng)頁(yè)正文，如上圖，Medium的網(wǎng)頁(yè)可以很輕松的指引用戶去尋找他想找的內(nèi)容，而另一張圖的網(wǎng)頁(yè)元素過(guò)多，用戶的注意力很容易分散，太多東西擠在一起，用戶會(huì)不知所措并忽略大部分內(nèi)容。
對(duì)齊
通過(guò)上文介紹的用戶常見瀏覽軌跡，了解到用戶瀏覽網(wǎng)頁(yè)時(shí)，一般很自然的沿著左側(cè)邊緣瀏覽文本，如果左側(cè)邊緣不齊，會(huì)增加用戶瀏覽和尋找信息的難度，盡可能的保持文本左對(duì)齊以符合自然的瀏覽行為。
Google搜索結(jié)果頁(yè)
左對(duì)齊文本比較方便用戶瀏覽，左邊緣與上下間距的一致性，用戶可以自然地下意識(shí)去尋找下一行或下一個(gè)詞語(yǔ)。
數(shù)字
文本中的數(shù)字，相比于其中的文字，會(huì)格外的吸引眼球，用戶在閱讀的過(guò)程中，對(duì)于數(shù)字會(huì)比較敏感，一般文本中的數(shù)字代表著數(shù)據(jù)和事實(shí)，這些可能正是用戶想要尋找的內(nèi)容。此外，數(shù)字也因?yàn)樾螤畹牟煌谖谋局袝?huì)比較顯眼。
網(wǎng)頁(yè)正文中數(shù)字的設(shè)計(jì)一般遵從如下幾點(diǎn)原則：
用阿拉伯?dāng)?shù)字寫，而非文字（如35，不是三十五）。
十億以下的大數(shù)用阿拉伯?dāng)?shù)字表示。
2,000,00比二十萬(wàn)的寫法要好。
兩萬(wàn)億比2,000,000,000,000的寫法好，大多數(shù)人數(shù)不過(guò)來(lái)這么多零。
作為折中，有些情況將數(shù)字寫成阿拉伯?dāng)?shù)字+文字的結(jié)構(gòu)會(huì)比較好，如350億（不是三百五十億或35,000,000,000）。
不能代表確切事實(shí)的數(shù)字用文字表示（只是表達(dá)估計(jì)或者想法，則應(yīng)該用文字表示數(shù)量級(jí)，比如“中國(guó)有接近兩千萬(wàn)人將成為光棍”）。
圖片
圖片可以吸引和引導(dǎo)注意力，人們非常習(xí)慣面部圖片和定向信號(hào)。在網(wǎng)頁(yè)中放置一張有人臉的圖片，則用戶的注意力很容易被吸引到圖片及周圍。而且如果圖片中的人物視線指向某個(gè)方向，則用戶的視線也會(huì)追隨其注視的內(nèi)容，這一原理適用于指向性提示，如將行動(dòng)號(hào)召或slogan放置在人物視線望去的方向，可大大吸引用戶的注意力。
摸著你的良心告訴我，上面哪個(gè)Banner圖更吸引你的注意力。
用戶瀏覽網(wǎng)頁(yè)時(shí)，會(huì)跟隨網(wǎng)頁(yè)圖片中的人物視線方向，移動(dòng)瀏覽視線，將重要內(nèi)容放置在此，可大大提高用戶的注意力。
字體與排版
文字排版需要考慮文字辨識(shí)度和頁(yè)面易讀性。好的網(wǎng)頁(yè)正文排版，應(yīng)該讓設(shè)計(jì)毫無(wú)痕跡，用戶很自然的關(guān)注內(nèi)容，而不是設(shè)計(jì)本身。影響文字閱讀舒適性的因素主要有 字 體、字體大小、行距、行長(zhǎng)、顏色 等。
字體
關(guān)于字體的選擇，襯線字體與無(wú)襯線字體都沒有關(guān)系，一般可辨性都差不多。但在一些特定的場(chǎng)景、字號(hào)下，某種特定字體可能會(huì)更合適，比如說(shuō)，在大量文本的場(chǎng)景下，如果使用小字號(hào)，如12號(hào)字的話，宋體的可辨性會(huì)好于微軟雅黑，且讀起來(lái)輕松，不容易產(chǎn)生疲勞。而Slogan或者Title之類的需要醒目的標(biāo)識(shí)適合使用非襯線體，如黑體、雅黑等字體，容易吸引用戶注意力。
第一個(gè)表格字體是微軟雅黑，第二個(gè)表格字體是宋體，對(duì)比來(lái)看，在小字號(hào)的字體上，宋體的辨識(shí)性會(huì)好于微軟雅黑。
字號(hào)
網(wǎng)頁(yè)正文使用的字號(hào)大小，也與該網(wǎng)站的定位、品牌及目標(biāo)用戶有關(guān)，一般正文字體大小采用12-14號(hào)字。舉個(gè)栗子：
豆瓣
百度知道
豆瓣正文使用的是12號(hào)字，百度知道正文使用的是14號(hào)字。從視覺上看，豆瓣的整體字號(hào)偏小，雖然用戶閱讀起來(lái)會(huì)容易產(chǎn)生疲勞，但小號(hào)字傳遞給人的感受很精致，符合豆瓣用戶群體的文藝氣息，所以它的的目標(biāo)用戶普遍都還是接受的。如果將豆瓣正文字號(hào)換成14號(hào)，如右圖，就會(huì)顯得有些粗糙，不夠精致細(xì)膩了。不同產(chǎn)品面對(duì)不同的用戶群體，百度知道的用戶群體覆蓋全年齡段，需要以閱讀的清晰度為主要考慮點(diǎn)。
行距
行距是影響可辨性的一個(gè)重要因素，字體越大，行距越大，行長(zhǎng)越長(zhǎng)，行距越大。一般行距是字體大小的1-1.5倍時(shí)，閱讀最有效。
過(guò)窄的行距，容易出現(xiàn)跳行，而過(guò)寬的行距會(huì)讓文字失去延續(xù)性，影響閱讀。
行長(zhǎng)
行長(zhǎng)不宜過(guò)長(zhǎng)，也不宜過(guò)短。過(guò)長(zhǎng)的話，用戶視線移動(dòng)距離長(zhǎng)，很難注意到段落起點(diǎn)和終點(diǎn)，閱讀比較困難。而過(guò)短的話，眼睛需要不停來(lái)回掃視，破壞閱讀節(jié)奏。因此，需要設(shè)定一個(gè)合適的行字?jǐn)?shù)，提高文字的易讀性。
為了讓用戶在閱讀過(guò)程中，能夠舒適的從一行換到下一行，需要在一行的結(jié)尾與下一行的開始之間保持一個(gè)合適的角度，行距應(yīng)該隨著行長(zhǎng)的增加而增加。
文字與背景顏色
文字和背景顏色的合理搭配，合適的對(duì)比可以提高文字的清晰度，增強(qiáng)可讀性，一般淺色背景下的深色文本比其他形式更容易閱讀，深色背景下的淺色文本會(huì)使閱讀速度明顯減慢。
如上圖對(duì)比來(lái)看，淺色背景下的深色文本會(huì)比深色背景下的淺色文本更容易閱讀。
必須要保證文字與背景有足夠強(qiáng)的對(duì)比度，確保文字能夠讓用戶清晰閱讀，如上圖，如果文字與背景顏色對(duì)比度過(guò)低的話，文字的可讀性會(huì)很差，用戶閱讀起來(lái)吃力。
總結(jié)
以上介紹的這些都是關(guān)于如何設(shè)計(jì)好網(wǎng)頁(yè)正文的一些基本知識(shí)，設(shè)計(jì)前，我們需要先了解我們用戶瀏覽網(wǎng)頁(yè)的習(xí)慣，然后結(jié)合我們的產(chǎn)品目標(biāo)、設(shè)計(jì)目標(biāo)，設(shè)計(jì)整體頁(yè)面架構(gòu)，以及合理的組織網(wǎng)頁(yè)內(nèi)容，然后再通過(guò)一些設(shè)計(jì)策略，向用戶清晰的傳遞出我們網(wǎng)頁(yè)正文的視覺層次，引導(dǎo)用戶按照我們既定的瀏覽路徑，舒適的瀏覽網(wǎng)頁(yè)正文，只有當(dāng)我們制定的設(shè)計(jì)策略能讓用戶在尋找和使用信息時(shí)以最少的投入獲得最大的利益時(shí)，我們的設(shè)計(jì)才有價(jià)值。
本文轉(zhuǎn)載自網(wǎng)絡(luò)，版權(quán)歸原作者所有！
文章轉(zhuǎn)載請(qǐng)保留網(wǎng)址：http://waterplane.cn/news/industry/1836.html
