網(wǎng)頁設(shè)計(jì)之首頁頻道設(shè)計(jì)要點(diǎn)總結(jié)

網(wǎng)頁設(shè)計(jì)之頻道首頁設(shè)計(jì) 

1、定位

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

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

2、通透

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

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

3、頭條

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

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

4、欄目

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

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

5、落點(diǎn)

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

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

6、還是落點(diǎn)

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

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

7、下劃線

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

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

8、tab

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

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

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

9、騙點(diǎn)

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

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

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

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

10、危機(jī)

這個(gè)月我發(fā)了條微博，講“資訊門戶”的大框架正在沒落。

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

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

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