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

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

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獲取信息；重度用戶則重視內容品質，在門戶首頁縱覽多元化的要聞后，更容易被垂直網站吸引去。

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

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

原創地址：http://firecacada.blog.163.com/blog/static/707437620111119114840862/

轉載于:https://www.cnblogs.com/hanwenyu2002/archive/2011/12/31/2308747.html

總結

以上是生活随笔為你收集整理的[转载]内容首页设计经验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。