如何設計網頁正文

作者：龍 時(shí)間：2018-04-19 浏覽：

設計跟随内容，這(zhè)是一個(gè)大(dà)家經常聽(tīng)到的(de)詞。用(yòng)戶訪問網站的(de)目的(de)主要是爲了(le)查看内容，因而内容是否吸引人(rén)至關重要。而如何讓我們的(de)網頁内容能夠被用(yòng)戶所吸引，一份好的(de)網頁正文設計不可(kě)或缺。
 
　　Part 1. 如何組織網頁内容
　　用(yòng)戶在浏覽網頁時(shí)，主要目的(de)是爲了(le)獲取有用(yòng)信息。他(tā)們會使用(yòng)最舒服的(de)方式，去評估獲取信息的(de)可(kě)能性，隻有我們設計的(de)浏覽路徑足夠的(de)自然，且提示清晰，内容易懂(dǒng)，符合用(yòng)戶的(de)心理(lǐ)模型，用(yòng)戶才會使用(yòng)該路徑。用(yòng)戶會非常迅速的(de)決定該網頁内容是否值得(de)花時(shí)間閱讀，因此網頁正文設計的(de)好與壞非常重要，隻有制定的(de)設計策略能讓用(yòng)戶在尋找和(hé)使用(yòng)信息時(shí)，以最少的(de)投入獲得(de)最大(dà)的(de)利益，我們的(de)設計才有價值。
　　大(dà)部分(fēn)場(chǎng)景，用(yòng)戶隻會掃視頁面，不會進行在線閱讀。大(dà)部分(fēn)場(chǎng)景用(yòng)戶都是在查找自己想要和(hé)自己感興趣的(de)相關信息，而不是逐字閱讀。用(yòng)戶一般用(yòng)非線性的(de)方式閱讀屏幕内容，且不會去尋找最佳選擇，一般很快(kuài)就會做(zuò)出決定點擊還(hái)是離開，因爲看完全部内容去查找最佳選擇，太花費時(shí)間和(hé)精力了(le)。全部網頁内容中，隻有20%才會被用(yòng)戶閱讀，我們需要知道用(yòng)戶想要閱讀的(de)20%的(de)内容是什(shén)麽，從而有效的(de)确定頁面架構，編寫内容來(lái)捕捉用(yòng)戶的(de)注意力，以說服用(yòng)戶閱讀更多(duō)内容。
 
　　眼動追蹤熱(rè)力圖
　　用(yòng)戶閱讀網頁的(de)過程中，主要是掃描内容，查找他(tā)想要的(de)和(hé)感興趣的(de)相關信息。
　　網頁正文浏覽方式
　　常見的(de)浏覽軌迹像一個(gè)“F”形。這(zhè)種浏覽方式由3部分(fēn)組成：
　　水(shuǐ)平從左向右浏覽(本文討(tǎo)論的(de)是從左向右閱讀習(xí)慣的(de)用(yòng)戶群體)，一般首先會閱讀頂部的(de)主要内容區(qū)域;用(yòng)戶一般不會閱讀整個(gè)網頁，但會向下(xià)并再次沿水(shuǐ)平方向從左向右閱讀;沿正文區(qū)域左側垂直向下(xià)閱讀。
　　吸引用(yòng)戶注意的(de)網頁内容
　　剛才有提到，網頁中，近80%的(de)内容會被用(yòng)戶忽略，用(yòng)戶閱讀的(de)20%内容的(de)價值決定用(yòng)戶是否繼續花時(shí)間閱讀下(xià)去。
　　那20%的(de)内容是：
　　網頁标題網頁前面的(de)幾個(gè)句子突出顯示的(de)标題和(hé)副标題有趣标題或副标題附近正文的(de)前幾個(gè)字圖像标題
　　用(yòng)戶從不閱讀的(de)是：
　　長(cháng)段落與用(yòng)戶意圖無關的(de)首行标題、标題或副标題下(xià)的(de)内容
　　那如何運用(yòng)用(yòng)戶浏覽網頁的(de)這(zhè)些既定習(xí)慣去更好的(de)設計呢(ne)，一般我們可(kě)以采用(yòng)如下(xià)幾種設計策略：
　　将重要的(de)内容放在顯眼位置
　　前面提到了(le)用(yòng)戶閱讀網頁的(de)一般浏覽方式，以及習(xí)慣注意的(de)網頁内容，既然用(yòng)戶習(xí)慣于在特定的(de)地方查找感興趣的(de)信息，則可(kě)以利用(yòng)用(yòng)戶的(de)這(zhè)些閱讀習(xí)慣，将有用(yòng)的(de)或吸引人(rén)的(de)信息放置在用(yòng)戶最容易注意到的(de)地方。一般内容設計上，要注意的(de)地方是：
　　網頁最上面的(de)内容(用(yòng)戶最開始注意到的(de)内容)，要有足夠的(de)吸引力;内容要“頭重腳輕”，以吸引用(yòng)戶的(de)視線繼續往下(xià)移動;
　　把重要的(de)内容放在顯眼位置，即網頁首屏顯示區(qū)域,且考慮放在左側比右側更具有吸引力(用(yòng)戶從左向右閱讀)。用(yòng)戶很有可(kě)能不會滾動鼠标，查看屏幕以外的(de)内容。因爲用(yòng)戶不一定知道下(xià)面還(hái)有内容，如果頁面内容較多(duō)，重要内容無法一屏顯示完，設計需要考慮頁面布局能夠鼓勵用(yòng)戶繼續往下(xià)浏覽，如部分(fēn)可(kě)見的(de)圖片或文本，以及明(míng)顯的(de)提示。
 
　　騰訊雲官網首頁首屏内容，首屏下(xià)方，部分(fēn)内容可(kě)見，暗示用(yòng)戶還(hái)有更多(duō)内容。
　　倒金字塔格式
　　除了(le)在用(yòng)戶最容易注意到的(de)地方放置你最希望用(yòng)戶關注的(de)内容之外，正文内容是否能吸引用(yòng)戶真正閱讀下(xià)去也(yě)很重要。先抛出結論的(de)形式去組織正文内容，能夠幫助用(yòng)戶快(kuài)速掌握核心信息。
 
　　傳統寫作方式
　　如上圖，是傳統寫作方式的(de)内容組織形式，估計有很多(duō)人(rén)會閱讀一點開始的(de)内容，但很少有人(rén)會從頭讀到尾，而吸引眼球的(de)内容組織方式，是先抛結論，這(zhè)才是用(yòng)戶想要看的(de)信息，大(dà)多(duō)數人(rén)隻需要一個(gè)結論。
 
　　倒金字塔寫作方式
　　将關鍵信息放置在閱讀的(de)開始部分(fēn)，從而有效地吸引用(yòng)戶閱讀下(xià)去，通(tōng)過開頭的(de)一兩個(gè)短句吸引用(yòng)戶眼球并引導用(yòng)戶閱讀更多(duō)内容。可(kě)以考慮将用(yòng)戶感興趣的(de)内容，如内容結論放置在前面。
 
　　結尾與開頭呼應，顯示行動号召
　　結尾一般放置的(de)是背景信息與空洞内容的(de)地方，傳統觀念認爲列表最後一項閱讀的(de)人(rén)最少，但其實根據相關眼動追蹤測試表明(míng)，整個(gè)列表中最後一項得(de)到的(de)關注也(yě)較多(duō)。如果我們在結尾處放置一些有趣的(de)内容，或行動号召，則有可(kě)能吸引浏覽者繼續留在網站上，比如一張有趣的(de)品牌圖片，或一個(gè)引人(rén)注目的(de)操作提示。
 
　　騰訊雲官網首頁最後，顯示一個(gè)行動号召，吸引用(yòng)戶繼續停留在網站上。
　　Part 2. 如何有效設計網頁正文
　　說到網頁正文設計，其實就是排版，網頁排版設計需要考慮網站上的(de)每一個(gè)元素，通(tōng)過一系列的(de)設計手段去降低用(yòng)戶的(de)閱讀負擔。
　　視覺層次
　　好的(de)視覺層次可(kě)以引導用(yòng)戶閱讀網頁的(de)順序。在閱讀的(de)過程中，用(yòng)戶的(de)視線會落在首行标題、副标題、短的(de)文本塊上，原因是它們比周圍的(de)文本更加顯眼，設計就是要達到這(zhè)樣的(de)效果。視覺層次可(kě)以幫助用(yòng)戶理(lǐ)解網頁結構，如何閱讀能夠選出最重要的(de)信息或者幫助用(yòng)戶決定哪裏應該停下(xià)來(lái)閱讀更多(duō)細節。
　　以我們所熟知的(de)報紙爲例，标題闡述核心，尺寸最大(dà)，粗體強調，其次是副标題，字體小點，再其次是正文，字體最小。如果打破了(le)這(zhè)種層次結構，用(yòng)戶會迷惑，哪些重要哪些其次，分(fēn)不清楚。
 
　　上左圖沒有視覺層次，用(yòng)戶無法看出哪些是主要信息，對(duì)比之下(xià)，上右圖用(yòng)大(dà)小、加粗、顔色，間距把内容做(zuò)了(le)區(qū)分(fēn)，形成視覺層級，讓用(yòng)戶很容易知道哪裏是重點。
　　留白
　　留白不一定代表要用(yòng)白色，在實際設計中，我們将留白稱之爲“負空間”，它除了(le)用(yòng)白色以外，還(hái)可(kě)以是背景，指的(de)是“未使用(yòng)的(de)區(qū)域”，内容與内容之間的(de)間隙。在頁面空間中，将圖形、文字、圖片等元素通(tōng)過合理(lǐ)的(de)布局，展示一個(gè)較好的(de)空間關系，提供了(le)布局上的(de)平衡，留白區(qū)域的(de)環繞與陪襯，良好的(de)襯托出中心區(qū)域的(de)表現。
　　留白分(fēn)類：
　　宏觀負空間：不同内容塊之間的(de)空間微觀負空間：一個(gè)内容塊内不同文字或圖片之間的(de)空間
　　合理(lǐ)的(de)内容布局，以及易于閱讀的(de)字間距，段間距，頁邊距，能夠讓用(yòng)戶更舒适的(de)閱讀你的(de)網頁正文，如上圖，Medium的(de)網頁可(kě)以很輕松的(de)指引用(yòng)戶去尋找他(tā)想找的(de)内容，而另一張圖的(de)網頁元素過多(duō)，用(yòng)戶的(de)注意力很容易分(fēn)散，太多(duō)東西擠在一起，用(yòng)戶會不知所措并忽略大(dà)部分(fēn)内容。
　　對(duì)齊
　　通(tōng)過上文介紹的(de)用(yòng)戶常見浏覽軌迹，了(le)解到用(yòng)戶浏覽網頁時(shí)，一般很自然的(de)沿著(zhe)左側邊緣浏覽文本，如果左側邊緣不齊，會增加用(yòng)戶浏覽和(hé)尋找信息的(de)難度，盡可(kě)能的(de)保持文本左對(duì)齊以符合自然的(de)浏覽行爲。
 
　　Google搜索結果頁
　　左對(duì)齊文本比較方便用(yòng)戶浏覽，左邊緣與上下(xià)間距的(de)一緻性，用(yòng)戶可(kě)以自然地下(xià)意識去尋找下(xià)一行或下(xià)一個(gè)詞語。
　　數字
　　文本中的(de)數字，相比于其中的(de)文字，會格外的(de)吸引眼球，用(yòng)戶在閱讀的(de)過程中，對(duì)于數字會比較敏感，一般文本中的(de)數字代表著(zhe)數據和(hé)事實，這(zhè)些可(kě)能正是用(yòng)戶想要尋找的(de)内容。此外，數字也(yě)因爲形狀的(de)不同而在文本中會比較顯眼。
　　網頁正文中數字的(de)設計一般遵從如下(xià)幾點原則：
　　用(yòng)阿拉伯數字寫，而非文字(如35，不是三十五)。十億以下(xià)的(de)大(dà)數用(yòng)阿拉伯數字表示。2,000,00比二十萬的(de)寫法要好。兩萬億比2,000,000,000,000的(de)寫法好，大(dà)多(duō)數人(rén)數不過來(lái)這(zhè)麽多(duō)零。作爲折中，有些情況将數字寫成阿拉伯數字+文字的(de)結構會比較好，如350億(不是三百五十億或35,000,000,000)。不能代表确切事實的(de)數字用(yòng)文字表示(隻是表達估計或者想法，則應該用(yòng)文字表示數量級，比如“中國有接近兩千萬人(rén)将成爲光(guāng)棍”)。圖片
　　圖片可(kě)以吸引和(hé)引導注意力，人(rén)們非常習(xí)慣面部圖片和(hé)定向信号。在網頁中放置一張有人(rén)臉的(de)圖片，則用(yòng)戶的(de)注意力很容易被吸引到圖片及周圍。而且如果圖片中的(de)人(rén)物(wù)視線指向某個(gè)方向，則用(yòng)戶的(de)視線也(yě)會追随其注視的(de)内容，這(zhè)一原理(lǐ)适用(yòng)于指向性提示，如将行動号召或slogan放置在人(rén)物(wù)視線望去的(de)方向，可(kě)大(dà)大(dà)吸引用(yòng)戶的(de)注意力。
 
　　摸著(zhe)你的(de)良心告訴我，上面哪個(gè)Banner圖更吸引你的(de)注意力。
 
　　用(yòng)戶浏覽網頁時(shí)，會跟随網頁圖片中的(de)人(rén)物(wù)視線方向，移動浏覽視線，将重要内容放置在此，可(kě)大(dà)大(dà)提高(gāo)用(yòng)戶的(de)注意力。
　　字體與排版
　　文字排版需要考慮文字辨識度和(hé)頁面易讀性。好的(de)網頁正文排版，應該讓設計毫無痕迹，用(yòng)戶很自然的(de)關注内容，而不是設計本身。影(yǐng)響文字閱讀舒适性的(de)因素主要有字體、字體大(dà)小、行距、行長(cháng)、顔色等。
　　字體
　　關于字體的(de)選擇，襯線字體與無襯線字體都沒有關系，一般可(kě)辨性都差不多(duō)。但在一些特定的(de)場(chǎng)景、字号下(xià)，某種特定字體可(kě)能會更合适，比如說，在大(dà)量文本的(de)場(chǎng)景下(xià)，如果使用(yòng)小字号，如12号字的(de)話(huà)，宋體的(de)可(kě)辨性會好于微軟雅黑(hēi)，且讀起來(lái)輕松，不容易産生疲勞。而Slogan或者Title之類的(de)需要醒目的(de)标識适合使用(yòng)非襯線體，如黑(hēi)體、雅黑(hēi)等字體，容易吸引用(yòng)戶注意力。
 
　　第一個(gè)表格字體是微軟雅黑(hēi)，第二個(gè)表格字體是宋體，對(duì)比來(lái)看，在小字号的(de)字體上，宋體的(de)辨識性會好于微軟雅黑(hēi)。
　　字号
　　豆瓣正文使用(yòng)的(de)是12号字，百度知道正文使用(yòng)的(de)是14号字。從視覺上看，豆瓣的(de)整體字号偏小，雖然用(yòng)戶閱讀起來(lái)會容易産生疲勞，但小号字傳遞給人(rén)的(de)感受很精緻，符合豆瓣用(yòng)戶群體的(de)文藝氣息，所以它的(de)的(de)目标用(yòng)戶普遍都還(hái)是接受的(de)。如果将豆瓣正文字号換成14号，如右圖，就會顯得(de)有些粗糙，不夠精緻細膩了(le)。不同産品面對(duì)不同的(de)用(yòng)戶群體，百度知道的(de)用(yòng)戶群體覆蓋全年齡段，需要以閱讀的(de)清晰度爲主要考慮點。
　　行距
　　行距是影(yǐng)響可(kě)辨性的(de)一個(gè)重要因素，字體越大(dà)，行距越大(dà)，行長(cháng)越長(cháng)，行距越大(dà)。一般行距是字體大(dà)小的(de)1-1.5倍時(shí)，閱讀最有效。
 
　　過窄的(de)行距，容易出現跳行，而過寬的(de)行距會讓文字失去延續性，影(yǐng)響閱讀。
　　行長(cháng)
　　行長(cháng)不宜過長(cháng)，也(yě)不宜過短。過長(cháng)的(de)話(huà)，用(yòng)戶視線移動距離長(cháng)，很難注意到段落起點和(hé)終點，閱讀比較困難。而過短的(de)話(huà)，眼睛需要不停來(lái)回掃視，破壞閱讀節奏。因此，需要設定一個(gè)合适的(de)行字數，提高(gāo)文字的(de)易讀性。
 
　　爲了(le)讓用(yòng)戶在閱讀過程中，能夠舒适的(de)從一行換到下(xià)一行，需要在一行的(de)結尾與下(xià)一行的(de)開始之間保持一個(gè)合适的(de)角度，行距應該随著(zhe)行長(cháng)的(de)增加而增加。
　　文字與背景顔色
　　文字和(hé)背景顔色的(de)合理(lǐ)搭配，合适的(de)對(duì)比可(kě)以提高(gāo)文字的(de)清晰度，增強可(kě)讀性，一般淺色背景下(xià)的(de)深色文本比其他(tā)形式更容易閱讀，深色背景下(xià)的(de)淺色文本會使閱讀速度明(míng)顯減慢(màn)。
 
　　如上圖對(duì)比來(lái)看，淺色背景下(xià)的(de)深色文本會比深色背景下(xià)的(de)淺色文本更容易閱讀。
 
　　必須要保證文字與背景有足夠強的(de)對(duì)比度，确保文字能夠讓用(yòng)戶清晰閱讀，如上圖，如果文字與背景顔色對(duì)比度過低的(de)話(huà)，文字的(de)可(kě)讀性會很差，用(yòng)戶閱讀起來(lái)吃(chī)力。
　　總結
　　以上介紹的(de)這(zhè)些都是關于如何設計好網頁正文的(de)一些基本知識，設計前，我們需要先了(le)解我們用(yòng)戶浏覽網頁的(de)習(xí)慣，然後結合我們的(de)産品目标、設計目标，設計整體頁面架構，以及合理(lǐ)的(de)組織網頁内容，然後再通(tōng)過一些設計策略，向用(yòng)戶清晰的(de)傳遞出我們網頁正文的(de)視覺層次，引導用(yòng)戶按照(zhào)我們既定的(de)浏覽路徑，舒适的(de)浏覽網頁正文，隻有當我們制定的(de)設計策略能讓用(yòng)戶在尋找和(hé)使用(yòng)信息時(shí)以最少的(de)投入獲得(de)最大(dà)的(de)利益時(shí)，我們的(de)設計才有價值。
　　武漢互赢網絡
　　手 機：15972109576
　　聯系人(rén)：龍經理(lǐ)
　　Q Q: 562257562 848467306
　　郵 箱：848467306@whtlnet.com
　　地 址：武漢市武昌靜安路6号創意産業園401室
　　公司提供一切網絡建站服務