內(nèi)容首頁(yè)設(shè)計(jì)經(jīng)驗(yàn)

0 評(píng)論 6713 瀏覽 12 收藏 13 分鐘

前些日子,有位老同事來(lái)和我討論頻道首頁(yè)的設(shè)計(jì),這才想起來(lái)我原來(lái)是做媒體的,以前還畫(huà)過(guò)不少內(nèi)容頁(yè)面原型。悲慘的是,我對(duì)內(nèi)容頁(yè)面的理解在轉(zhuǎn)型產(chǎn)品后才漸漸成熟,以前畫(huà)的那些都挺平庸。做媒體的又有幾個(gè)人去研究?jī)?nèi)容界面的交互心理呢?

過(guò)去從實(shí)踐與反省中得來(lái)的經(jīng)驗(yàn)之談,不妨講講。

1、定位
第一條和界面設(shè)計(jì)沒(méi)關(guān)系,和定位有關(guān)系。做網(wǎng)媒最大的陷阱就是“貪”,從平媒轉(zhuǎn)網(wǎng)媒的人尤其貪,覺(jué)得內(nèi)容容量無(wú)限大,轉(zhuǎn)載成本無(wú)限低,什么東西都想往里邊塞。但你的推廣位是有限的,最多20條;你的要聞區(qū)也是有限的,最多30條;二三十條內(nèi)容想傳遞清晰有力的媒體形象,必然貪心不得,有所取舍。取舍之道并不取決于你有怎樣的內(nèi)容情懷,而是針對(duì)主站用戶群去作因地制宜的篩選。

有人說(shuō),除了推廣位和要聞區(qū),我還有更多的欄目區(qū)塊和欄目頁(yè)面嘛。此話謬矣。推廣位和要聞區(qū)是新用戶接觸你的必經(jīng)之路,也是整個(gè)頻道的門面。掛羊頭賣狗肉這種事情,沒(méi)得好下場(chǎng)。所以“定位”的加減法,是考驗(yàn)頻道主編的核心能力。

2、通透
設(shè)計(jì)內(nèi)容頁(yè)面,最重要的術(shù)語(yǔ)是“通透”,意思是從上至下保持統(tǒng)一的分欄布局,同時(shí)在主欄維持相似的內(nèi)容樣式。通透的好處是容易形成瀏覽慣性,用戶從上往下拉的過(guò)程中沒(méi)有跳躍感,隔斷感,即便閱讀沖動(dòng)漸漸淡化,也還是習(xí)慣性地一直拉下去,增加接觸新內(nèi)容的機(jī)會(huì)。

很多網(wǎng)媒人喜歡追求內(nèi)容的視覺(jué)表現(xiàn)力,希望在樣式上與眾不同,鶴立雞群。我以前也犯過(guò)這毛病。以一個(gè)過(guò)來(lái)人的身份告訴你,這很蠢。樣式追求基本上就是自我陶醉,越是與眾不同,越多理解障礙。內(nèi)容視圖統(tǒng)一有助于用戶高效率地獲取信息,瀏覽過(guò)程越是簡(jiǎn)潔流暢,則PV越高,用戶停留時(shí)間也越長(zhǎng)。視覺(jué)上的賣弄只會(huì)產(chǎn)生更多的“隔斷”——這不會(huì)引起不適,但產(chǎn)生了“一頓一頓”的不良節(jié)奏。跨欄總不如長(zhǎng)跑持久。

3、頭條
內(nèi)容頁(yè)面的結(jié)構(gòu)千篇一律,首先是要聞區(qū),后面跟一長(zhǎng)排欄目區(qū)塊。前文提到的老同事來(lái)與我討論要聞區(qū)頭條的設(shè)計(jì),按舊例有兩種思路:大頭條下面放摘要,或是大頭條下面放12px的小頭條。前者不可取,15-20字的標(biāo)題都講不清楚賣點(diǎn),難道還有資格上頭條?摘要堆在下面只能說(shuō)視覺(jué)上比較美觀,但浪費(fèi)了寸土寸金的頭屏要聞空間。

如果放12px的小頭條,按照理想化的設(shè)計(jì)思路,應(yīng)該是頭條相關(guān)報(bào)道,合并成微型專題,讓用戶快速接觸到更多同主題的內(nèi)容。但有時(shí)候就是找不到有分量的,對(duì)應(yīng)這頭條的相關(guān)報(bào)道,只好放一些近似報(bào)道上去,效果不甚理想。因此小頭條不宜多,網(wǎng)易新聞與新浪新聞通常控制在一行(3-4條),既有微型專題的效果,又不太發(fā)愁編排的難度。

4、欄目
網(wǎng)媒運(yùn)營(yíng)有個(gè)常見(jiàn)的錯(cuò)誤,用內(nèi)容的物理屬性來(lái)劃分欄目,覺(jué)得它就應(yīng)該是A類B類C類。這個(gè)取向背離了欄目設(shè)置的初衷。為什么頻道下面要設(shè)欄目?因?yàn)橛脩籼貏e愛(ài)看某一類型的內(nèi)容,你用欄目將這批內(nèi)容歸納起來(lái),方便用戶查找。所以欄目的劃分標(biāo)準(zhǔn),只能以用戶的檢索標(biāo)準(zhǔn)為依據(jù)。他們愛(ài)搜哪些類型的內(nèi)容,你就劃分出哪些方面的欄目。

說(shuō)白了,網(wǎng)媒是信息服務(wù)行業(yè),基本不具備平媒的啟發(fā)性,指引性。網(wǎng)媒需要服務(wù)于用戶的直接需求而不是攬鏡自賞,需要多研究你的用戶,而不是去炫耀你的才華。

5、落點(diǎn)
再介紹一個(gè)內(nèi)容頁(yè)面設(shè)計(jì)的術(shù)語(yǔ):“落點(diǎn)”。用戶視線的落點(diǎn)在哪里?在前三屏,用戶瀏覽的耐心比較多,愿意逐條往下讀。再往后則耐心不斷衰竭,有可能飛快地拉到自己常去的欄目區(qū)塊。因此欄目區(qū)塊應(yīng)該有醒目的區(qū)隔標(biāo)識(shí),方便用戶定位。

還有種用戶習(xí)慣是飛快地把頁(yè)面拉到底,因此欄目區(qū)塊(中欄)宜加入頭條設(shè)計(jì),讓頁(yè)面在快速滾動(dòng)的過(guò)程中,視線容易被一些突出的內(nèi)容元素?cái)r截下來(lái)?!邦^條”是攔截注意力又不產(chǎn)生隔斷感的最佳形式。

6、還是落點(diǎn)
接著講落點(diǎn)。當(dāng)視線定在一個(gè)點(diǎn)之后,余光通常會(huì)以這個(gè)點(diǎn)為軸心,掃射到附近的一小片位置。有經(jīng)驗(yàn)者的設(shè)計(jì)者會(huì)在中欄放頭條,左欄和右欄放少量圖片,或表格,或刻意留白,設(shè)置適度的落點(diǎn)。左欄和右欄的圖片不能多,尤其不能爭(zhēng)功,在同一條水平線上,左輕則右重,右輕則左重,引導(dǎo)用戶的視線更多在左中,或中右的兩欄之間移動(dòng)。

這是因?yàn)殚喿x的最佳寬度是500-600px,如果眼球左右轉(zhuǎn)動(dòng)的距離過(guò)長(zhǎng),眼部很容易疲累,從左欄到右欄橫向的大跳躍應(yīng)極力避免。頁(yè)面上到處都是落點(diǎn)的話,視線飄忽,看似琳瑯滿目(這在內(nèi)容頁(yè)面評(píng)價(jià)中是個(gè)貶義詞),卻降低了用戶的瀏覽耐心與停留時(shí)間。

7、下劃線
我以前在知乎回答過(guò)一個(gè)問(wèn)題,為什么網(wǎng)易新聞不帶下劃線,新浪帶下劃線?當(dāng)時(shí)的回答內(nèi)容有點(diǎn)長(zhǎng),挑緊要的再講一次。帶下劃線的優(yōu)點(diǎn)是容易區(qū)分同一行的多條標(biāo)題,缺點(diǎn)是視覺(jué)上過(guò)于“漲,滿”而不夠清爽。

因此網(wǎng)易的視覺(jué)風(fēng)格為人稱道,但同樣面積內(nèi)的信息密度比新浪更低(主副標(biāo)題在我看來(lái)并不是成功的設(shè)計(jì))。如果非要一行放多條標(biāo)題,用戶分不清楚到底是一行多條,還是一條標(biāo)題用空格分了多截。這就是清爽的代價(jià),也是網(wǎng)易和新浪的媒體風(fēng)格差異。

8、tab
盡量避免在頻道首頁(yè)使用tab。即便在寸土寸金的網(wǎng)站首頁(yè),也要盡量避免tab。在滿屏的圖文鏈接中,用戶注意力落在小小的tab上,這真不容易。內(nèi)容直接露出與tab內(nèi)的點(diǎn)擊量可以相差10倍——只能用“聊勝于無(wú)”四個(gè)字來(lái)形容。

不過(guò),這道理也并非絕對(duì)。tab的設(shè)置與欄目相似,針對(duì)的是用戶的檢索需求。如果tab恰好與用戶的檢索關(guān)鍵字相同,相當(dāng)于他對(duì)這個(gè)題材的內(nèi)容高度敏感,就有可能主動(dòng)點(diǎn)擊tab,總比打開(kāi)一個(gè)新的頻道或欄目頁(yè)面更快吧。在這里權(quán)衡的是信息獲取效率。

另外,建議同一欄的tab不要超過(guò)3個(gè),否則極不利于用戶的辨識(shí)與記憶。

9、騙點(diǎn)
很多人都罵網(wǎng)站喪心病狂,利欲熏心,點(diǎn)擊標(biāo)題不直接進(jìn)文章頁(yè),非要把你帶到專題頁(yè),甚至頻道首頁(yè),欄目首頁(yè),非逼(騙)你多點(diǎn)一次不可。

這個(gè)嘛,也不完全是騙點(diǎn)。編輯會(huì)想,我辛辛苦苦做個(gè)專題不容易啊,這還滾動(dòng)更新呢,但外部推廣位上的標(biāo)題總得每天換換,然后把專題頭條放出去,鏈接還是到專題。而主編會(huì)想,我的頻道很贊啊,但大部分用戶就在主站推廣位點(diǎn)幾條要聞,他根本不進(jìn)來(lái),怎么知道里邊別有洞天呢?所以把外部推廣位的新聞?chuàng)Q成了頻道首頁(yè)的url。換句話說(shuō),直鏈專題頁(yè)的純潔動(dòng)機(jī)是保證推廣位更新的同時(shí),增加進(jìn)行中專題的曝光量;而直鏈頻道首頁(yè)的純潔動(dòng)機(jī)則是打打廣告,讓你知道里邊還有更多好東西……

用戶可不管你動(dòng)機(jī)純潔不純潔,他開(kāi)口就罵,但罵完了也不走。網(wǎng)易有段時(shí)間執(zhí)行硬性規(guī)定,禁止“騙點(diǎn)”操作,這么搞了一兩年之后,也沒(méi)發(fā)現(xiàn)賺來(lái)多少額外的口碑,連提都不見(jiàn)人提起這一點(diǎn),推廣和PV上的損失卻是實(shí)打?qū)嵉摹:髞?lái)便不再作此堅(jiān)持。

在我看來(lái),直鏈頻道、欄目首頁(yè)的動(dòng)機(jī)雖然有其合理性,但收效甚微。用戶主動(dòng)點(diǎn)進(jìn)頻道首頁(yè),根本性的動(dòng)力不是里邊花團(tuán)錦簇,而是他需要比主站推廣位更多得多的內(nèi)容。如果這需求存在,通過(guò)推廣位接觸并認(rèn)同頻道品質(zhì)之后,他自然會(huì)摸進(jìn)來(lái);反之,即便被騙過(guò)去也會(huì)飛快地再點(diǎn)一次標(biāo)題并關(guān)掉當(dāng)前頁(yè)面。因此即便開(kāi)禁,網(wǎng)易首頁(yè)也只有部分頻道搞直鏈,可見(jiàn)各位主編對(duì)此的理解迥異。

10、危機(jī)
這個(gè)月我發(fā)了條微博,講“資訊門戶”的大框架正在沒(méi)落。

門戶用戶對(duì)瀏覽熱門新聞的熱情未減,但只需要門戶首頁(yè)或新聞中心即可滿足。由于信息獲取渠道的增加,對(duì)“頻道”這種垂直聚合頁(yè)面的依賴性不斷下降。新聞讀者的兩極分化越來(lái)越嚴(yán)重——輕度用戶重視瀏覽效率,更愿意在一個(gè)頁(yè)面(如門戶首頁(yè))瀏覽熱門新聞,另從常去的微博、社交網(wǎng)站、APP獲取信息;重度用戶則重視內(nèi)容品質(zhì),在門戶首頁(yè)縱覽多元化的要聞后,更容易被垂直網(wǎng)站吸引去。

在此大背景下,門戶首頁(yè)的設(shè)計(jì)權(quán)衡極為艱難。如果信息量少,不能順應(yīng)用戶需求的變化;如果信息量大,愈發(fā)分流了有可能進(jìn)入頻道首頁(yè)的用戶。這使得頻道的地位尷尬,雖是廣告收益主力,卻更多扮演門戶首頁(yè)信息提供者的角色。長(zhǎng)遠(yuǎn)看,意味著門戶廣告價(jià)值的萎縮,以及維持龐大編輯團(tuán)隊(duì)的性價(jià)比日漸低下。

從頁(yè)面設(shè)計(jì)的角度來(lái)講,這難題基本無(wú)解。信息入口分散是大勢(shì)所趨,而用戶必然在“瀏覽效率”與“內(nèi)容品質(zhì)”的雙重驅(qū)動(dòng)下,尋找自己的最優(yōu)解。門戶>頻道>欄目的多級(jí)索引結(jié)構(gòu),并不符合這個(gè)最優(yōu)解,內(nèi)容路徑的扁平化是難以阻擋的轉(zhuǎn)變方向。網(wǎng)絡(luò)媒體的舊模式正在受到挑戰(zhàn),危機(jī)與機(jī)遇并存。夏末秋初,冬去春來(lái)。

來(lái)源:http://firecacada.blog.163.com/blog/static/707437620111119114840862/

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!