內容首頁設計經驗

　　前些日子，有位老同事來和我討論頻道首頁的設計，這才想起來我原來是做媒體的，以前還畫過不少內容頁面原型。悲慘的是，我對內容頁面的理解在轉型產品後才漸漸成熟，以前畫的那些都挺平庸。做媒體的又有幾個人去研究內容界面的交互心理呢?

　　過去從實踐與反省中得來的經驗之談，不妨講講。

　　1、定位

　　第一條和界面設計沒關系，和定位有關系。做網媒最大的陷阱就是“貪”，從平媒轉網媒的人尤其貪，覺得內容容量無限大，轉載成本無限低，什麼東西都想往裡邊塞。但你的推廣位是有限的，最多20條;你的要聞區也是有限的，最多30條;二三十條內容想傳遞清晰有力的媒體形象，必然貪心不得，有所取捨。取捨之道並不取決於你有怎樣的內容情懷，而是針對主站用戶群去作因地制宜的篩選。

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

　　2、通透

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

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

　　3、頭條

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

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

　　4、欄目

　　網媒運營有個常見的錯誤，用內容的物理屬性來劃分欄目，覺得它就應該是A類B類C類。這個取向背離了欄目設置的初衷。為什麼頻道下面要設欄目?因為用戶特別愛看某一類型的內容，你用欄目將這批內容歸納起來，方便用戶查找。所以欄目的劃分標准，只能以用戶的檢索標准為依據。他們愛搜哪些類型的內容，你就劃分出哪些方面的欄目。

　　說白了，網媒是信息服務行業，基本不具備平媒的啟發性，指引性。網媒需要服務於用戶的直接需求而不是攬鏡自賞，需要多研究你的用戶，而不是去炫耀你的才華。

　　5、落點

　　再介紹一個內容頁面設計的術語：“落點”。用戶視線的落點在哪裡?在前三屏，用戶浏覽的耐心比較多，願意逐條往下讀。再往後則耐心不斷衰竭，有可能飛快地拉到自己常去的欄目區塊。因此欄目區塊應該有醒目的區隔標識，方便用戶定位。

　　還有種用戶習慣是飛快地把頁面拉到底，因此欄目區塊(中欄)宜加入頭條設計，讓頁面在快速滾動的過程中，視線容易被一些突出的內容元素攔截下來。“頭條”是攔截注意力又不產生隔斷感的最佳形式。

　　6、還是落點

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

　　這是因為閱讀的最佳寬度是500-600px，如果眼球左右轉動的距離過長，眼部很容易疲累，從左欄到右欄橫向的大跳躍應極力避免。頁面上到處都是落點的話，視線飄忽，看似琳琅滿目(這在內容頁面評價中是個貶義詞)，卻降低了用戶的浏覽耐心與停留時間。

　　7、下劃線

　　我以前在知乎回答過一個問題，為什麼網易新聞不帶下劃線，新浪帶下劃線?當時的回答內容有點長，挑緊要的再講一次。帶下劃線的優點是容易區分同一行的多條標題，缺點是視覺上過於“漲，滿”而不夠清爽。

　　因此網易的視覺風格為人稱道，但同樣面積內的信息密度比新浪更低(主副標題在我看來並不是成功的設計)。如果非要一行放多條標題，用戶分不清楚到底是一行多條，還是一條標題用空格分了多截。這就是清爽的代價，也是網易和新浪的媒體風格差異。

　　8、tab

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

　　不過，這道理也並非絕對。tab的設置與欄目相似，針對的是用戶的檢索需求。如果tab恰好與用戶的檢索關鍵字相同，相當於他對這個題材的內容高度敏感，就有可能主動點擊tab，總比打開一個新的頻道或欄目頁面更快吧。在這裡權衡的是信息獲取效率。

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

　　9、騙點

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

　　這個嘛，也不完全是騙點。編輯會想，我辛辛苦苦做個專題不容易啊，這還滾動更新呢，但外部推廣位上的標題總得每天換換，然後把專題頭條放出去，鏈接還是到專題。而主編會想，我的頻道很贊啊，但大部分用戶就在主站推廣位點幾條要聞，他根本不進來，怎麼知道裡邊別有洞天呢?所以把外部推廣位的新聞換成了頻道首頁的url。換句話說，直鏈專題頁的純潔動機是保證推廣位更新的同時，增加進行中專題的曝光量;而直鏈頻道首頁的純潔動機則是打打廣告，讓你知道裡邊還有更多好東西……

　　用戶可不管你動機純潔不純潔，他開口就罵，但罵完了也不走。網易有段時間執行硬性規定，禁止“騙點”操作，這麼搞了一兩年之後，也沒發現賺來多少額外的口碑，連提都不見人提起這一點，推廣和PV上的損失卻是實打實的。後來便不再作此堅持。

　　在我看來，直鏈頻道、欄目首頁的動機雖然有其合理性，但收效甚微。用戶主動點進頻道首頁，根本性的動力不是裡邊花團錦簇，而是他需要比主站推廣位更多得多的內容。如果這需求存在，通過推廣位接觸並認同頻道品質之後，他自然會摸進來;反之，即便被騙過去也會飛快地再點一次標題並關掉當前頁面。因此即便開禁，網易首頁也只有部分頻道搞直鏈，可見各位主編對此的理解迥異。

　　10、危機

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

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

　　在此大背景下，門戶首頁的設計權衡極為艱難。如果信息量少，不能順應用戶需求的變化;如果信息量大，愈發分流了有可能進入頻道首頁的用戶。這使得頻道的地位尴尬，雖是廣告收益主力，卻更多扮演門戶首頁信息提供者的角色。長遠看，意味著門戶廣告價值的萎縮，以及維持龐大編輯團隊的性價比日漸低下。

　　從頁面設計的角度來講，這難題基本無解。信息入口分散是大勢所趨，而用戶必然在“浏覽效率”與“內容品質”的雙重驅動下，尋找自己的最優解。門戶>頻道>欄目的多級索引結構，並不符合這個最優解，內容路徑的扁平化是難以阻擋的轉變方向。網絡媒體的舊模式正在受到挑戰，危機與機遇並存。夏末秋初，冬去春來。

　　作者：純銀

　　文章來源：壞脾氣的小肥