當前位置:首頁(yè) > 新聞中心 > 互聯(lián)網(wǎng)動(dòng)態(tài)
吸引用戶(hù)注意的網(wǎng)頁(yè)設計責任編輯 :李飛    文章來(lái)源 :星翼創(chuàng )想(www.16qt59sf.cn)    發(fā)布時(shí)間 :2017-07-26    閱讀次數:2683     專(zhuān)題 :網(wǎng)站運營(yíng)

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


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


大部分場(chǎng)景,用戶(hù)只會(huì )掃視頁(yè)面,不會(huì )進(jìn)行在線(xiàn)閱讀。大部分場(chǎng)景用戶(hù)都是在查找自己想要和自己感興趣的相關(guān)信息,而不是逐字閱讀。用戶(hù)一般用非線(xiàn)性的方式閱讀屏幕內容,且不會(huì )去尋找最佳選擇,一般很快就會(huì )做出決定點(diǎn)擊還是離開(kāi),因為看完全部?jì)热萑ゲ檎易罴堰x擇,太花費時(shí)間和精力了。全部網(wǎng)頁(yè)內容中,只有20%才會(huì )被用戶(hù)閱讀,我們需要知道用戶(hù)想要閱讀的20%的內容是什么,從而有效的確定頁(yè)面架構,編寫(xiě)內容來(lái)捕捉用戶(hù)的注意力,以說(shuō)服用戶(hù)閱讀更多內容。



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


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


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


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


水平從左向右瀏覽(本文討論的是從左向右閱讀習慣的用戶(hù)群體),一般首先會(huì )閱讀頂部的主要內容區域;

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

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


“F”形瀏覽方式


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


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


吸引用戶(hù)注意的網(wǎng)頁(yè)內容


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


那20%的內容是:


網(wǎng)頁(yè)標題

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

突出顯示的標題和副標題

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

圖像標題

用戶(hù)從不閱讀的是:


長(cháng)段落

與用戶(hù)意圖無(wú)關(guān)的首行標題、標題或副標題下的內容

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


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


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


網(wǎng)頁(yè)最上面的內容(用戶(hù)最開(kāi)始注意到的內容),要有足夠的吸引力;

內容要“頭重腳輕”,以吸引用戶(hù)的視線(xiàn)繼續往下移動(dòng);

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



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


倒金字塔格式


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



傳統寫(xiě)作方式


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



倒金字塔寫(xiě)作方式


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



結尾與開(kāi)頭呼應,顯示行動(dòng)號召


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



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


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


說(shuō)到網(wǎng)頁(yè)正文設計,其實(shí)就是排版,網(wǎng)頁(yè)排版設計需要考慮網(wǎng)站上的每一個(gè)元素,通過(guò)一系列的設計手段去降低用戶(hù)的閱讀負擔。


視覺(jué)層次


好的視覺(jué)層次可以引導用戶(hù)閱讀網(wǎng)頁(yè)的順序。在閱讀的過(guò)程中,用戶(hù)的視線(xiàn)會(huì )落在首行標題、副標題、短的文本塊上,原因是它們比周?chē)奈谋靖语@眼,設計就是要達到這樣的效果。視覺(jué)層次可以幫助用戶(hù)理解網(wǎng)頁(yè)結構,如何閱讀能夠選出最重要的信息或者幫助用戶(hù)決定哪里應該停下來(lái)閱讀更多細節。


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



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


留白


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


留白分類(lèi):


宏觀(guān)負空間: 不同內容塊之間的空間

微觀(guān)負空間: 一個(gè)內容塊內不同文字或圖片之間的空間


某域名網(wǎng)站



Medium


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


對齊


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



Google搜索結果頁(yè)


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


數字


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


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


用阿拉伯數字寫(xiě),而非文字(如35,不是三十五)。

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

2,000,00比二十萬(wàn)的寫(xiě)法要好。

兩萬(wàn)億比2,000,000,000,000的寫(xiě)法好,大多數人數不過(guò)來(lái)這么多零。

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

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

圖片


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




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



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


字體與排版


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


字體


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



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


字號


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



豆瓣



百度知道


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


行距


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



過(guò)窄的行距,容易出現跳行,而過(guò)寬的行距會(huì )讓文字失去延續性,影響閱讀。


行長(cháng)


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



為了讓用戶(hù)在閱讀過(guò)程中,能夠舒適的從一行換到下一行,需要在一行的結尾與下一行的開(kāi)始之間保持一個(gè)合適的角度,行距應該隨著(zhù)行長(cháng)的增加而增加。


文字與背景顏色


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



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



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


總結


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


本文轉載自網(wǎng)絡(luò ),版權歸原作者所有!



文章轉載請保留網(wǎng)址:http://www.16qt59sf.cn/news/industry/1836.html

掃碼添加微信
159 8667 8737
24小時(shí)電話(huà)