點贊和評論對于內(nèi)容型產(chǎn)品來說是一個基礎(chǔ)功能，但對于產(chǎn)品設(shè)計師來說，深藏一些值得深挖和思考的細(xì)節(jié)。本文作者對此進(jìn)行了分析，希望對你有幫助。

當(dāng)用戶可以和內(nèi)容發(fā)生互動時，產(chǎn)品中往往會加入「我的點贊和評論」功能。

對于設(shè)計師來說，這個界面看似沒有任何挑戰(zhàn)，可能覺得「不就一列表嘛分分鐘搞定」，但其中卻深藏一些值得深挖和思考的細(xì)節(jié)。

之前在做類似需求時，我花了些時間去挖掘這個界面背后的邏輯，并將思考過程和成果沉淀成文章，希望對你有所啟發(fā)。

一、我的點贊、評論是什么

這個功能入口一般在個人中心，并且和其他功能聚合在獨立的版塊中，比如「消息私信」、「我的收藏」、「瀏覽歷史」、「下載管理」等等。

「我的評論」功能優(yōu)先級一般弱于「我的點贊」，因此有的產(chǎn)品不會外顯，而是和「我的點贊」聚合到二級頁的tab上，便于用戶橫劃手勢切換。

從業(yè)務(wù)屬性上看，貌似是單純的體驗導(dǎo)向型功能，和業(yè)務(wù)并不搭嘎（其實并不是）。

用戶需求上看，主要滿足用戶「信息的獲取、調(diào)用和刪除」。比如瀏覽或查找之前贊、評過的內(nèi)容，或者刪除自己的評論。

根據(jù)BJ Fogg提出的福格行為模型，一個人行為的發(fā)生至少要滿足三個條件：動機、能力和觸發(fā)。這個場景下，用戶動機是「信息的獲取、調(diào)用和刪除」，觸發(fā)通常是用戶的內(nèi)部觸發(fā)（也就是主動發(fā)起的決策和行為），能力即用戶在此付出的成本。

動機和觸發(fā)的可發(fā)揮空間小，因此設(shè)計師能夠發(fā)力的點，就是降低用戶在此頁面的能力要求，幫助用戶高效得完成查找、閱讀和點擊行為。

要實現(xiàn)這個目標(biāo)，無非是縮短路徑、層級清晰、建少視噪等等。但是一開始的布局框架又該如何搭建？下面，我結(jié)合市面主流的內(nèi)容型競品，從宏觀角度上來探索是否存在一個萬用的、固定的框架類型。

二、關(guān)于布局框架

因為標(biāo)題具有最高的決策權(quán)重，因此信息流側(cè)重長文本展示。另外，「我的點贊、評論」必定遵循時間排序來符合用戶習(xí)慣，所以這兩個因子決定了這個界面，只能以縱向的內(nèi)容流展示。

但這樣太籠統(tǒng)了，通過內(nèi)容型競品的研究拆分，我發(fā)現(xiàn)這個場景下的框架基本分為兩大類：動態(tài)流和列表流。再細(xì)分的話，又可以根據(jù)「用戶模塊」和「互動模塊」的有無分為五類，先來說說「我的評論」。

1. 我的評論-雙模塊動態(tài)流

這個框架的特征，除了必要的內(nèi)容區(qū)外，同時包含了「用戶模塊」和「互動模塊」

用戶模塊即包含了用戶頭像、用戶昵稱和發(fā)布時間的版塊。這個模塊符合功能預(yù)期，通過自身信息的露出來強化「我的」掌控感。另外頭像錨點也利于視覺錨定，快速瀏覽。

而互動模塊即用戶對內(nèi)容的操作集合，包括點贊、評論、分享等等。這個模塊多是為了強調(diào)互動，引導(dǎo)用戶繼續(xù)參與到內(nèi)容中；

所有競品中，百度、騰訊新聞、頭條和qq瀏覽器均維持了這樣的布局，其中時間位置、新聞樣式有差異。

另外，騰訊直接把評論的刪除按鈕外顯并強化了，雖說對內(nèi)容有明顯的視覺干擾，但基本符合大部分用戶來到這里的動機，對，就是來刪評的，所以倒沒什么可說的。

2. 我的評論-單模塊動態(tài)流

這個框架的特征，是只包含了「用戶模塊」，不存在「互動模塊」。競品中只有UC這一個例子，互動屬性被截斷，讓界面整體更加沉浸。另外，相比前一個框架，屏效也有明顯的提升。

說完了「我的評論」場景，再來看看「我的點贊」。

3. 我的點贊-雙模塊動態(tài)流

此處可以再細(xì)分兩類，一類是共同包含了「用戶模塊」和「互動模塊」，另一類則把「用戶模塊」給替換成了「創(chuàng)作者模塊」。

前者一共2個競品使用了此框架：知乎和qq瀏覽器。除了表現(xiàn)層的樣式、布局外基本沒有什么差別。

后者則包括頭條和微博。他們直接保留了原創(chuàng)作者的模塊，而且一旦內(nèi)容對應(yīng)的創(chuàng)作者沒被你關(guān)注，還直接外顯關(guān)注按鈕。并且樣式上看，微博很明顯在特意強化創(chuàng)作者模塊，不論是較大的頭像尺寸、還是主色強顯的昵稱和關(guān)注按鈕。

至于為什么這么搞，后面會說。

4. 我的點贊-單模塊列表流

這個框架的特征，是只包含了「用戶模塊」，不存在「互動模塊」。和「我的評論」一樣，只有uc一個競品。相比前者，同樣提升了內(nèi)容的沉浸。

5. 我的點贊-零模塊列表流

這個框架只保留了內(nèi)容模塊，因此可以完全聚焦于某一類型內(nèi)容的聚合，強調(diào)瀏覽效率，所以模塊上更加精簡和單一。優(yōu)勢上無疑是更加沉浸，效率更高，屏效更高。

競品中，網(wǎng)易、騰訊新聞均使用了此框架。雖然輔助信息用文字的形式標(biāo)明了來源和評論數(shù)，但整體依舊歸屬于內(nèi)容。

那么問題來了，這些框架的背后有什么客觀依據(jù)可以支持？它們和各自產(chǎn)品的業(yè)務(wù)本身主張又有什么關(guān)聯(lián)？

三、框架背后的邏輯

任何內(nèi)容型平臺的正向循環(huán)，都離不開三個方面：內(nèi)容創(chuàng)作者、內(nèi)容和內(nèi)容消費者。宏觀上說，內(nèi)容平臺需要做的就是去不斷得強化這個閉環(huán)，讓三者互相賦能，以此收獲長期穩(wěn)定的收益。

比如平臺通過各類激勵政策（如流量包、現(xiàn)金獎勵）、創(chuàng)作工具（如剪映、各色各樣的道具模板）和對優(yōu)質(zhì)內(nèi)容的扶持，來激勵創(chuàng)作者生產(chǎn)內(nèi)容。優(yōu)質(zhì)內(nèi)容又可以反向提升創(chuàng)作者影響力。

另外，通過鼓勵消費者對創(chuàng)作者的關(guān)注，來沉淀關(guān)系鏈，一方面內(nèi)容供給滿足個性化訂閱的需要，另一方面反向激勵創(chuàng)作者持續(xù)產(chǎn)出。雙方收獲了各自的利益，也就更難以離開平臺。

而創(chuàng)作者和消費者之間，又是滿足和反哺的關(guān)系。因此正是這樣的背后邏輯支撐了內(nèi)容型產(chǎn)品的發(fā)展。

當(dāng)然，對于「我的點贊、評論」來說，因為用戶的動機導(dǎo)致內(nèi)容成分占主導(dǎo)地位。所以，社交屬性、內(nèi)容互動的增減與否，主要受產(chǎn)品自身定位、以及業(yè)務(wù)方向的影響。

這也可以解釋為什么微博保留了up主信息模塊，就是由于微博本身定位強社交，絕大部分的內(nèi)容生產(chǎn)、傳播基于產(chǎn)品內(nèi)沉淀的社交鏈，甚至你關(guān)注的人點贊了什么內(nèi)容，都會通過底tab的紅點來吸引你去點擊。

也正因此，微博在「我的點贊」界面中，采用的是「創(chuàng)作者模塊」來表達(dá)社交屬性，以此鼓勵、引導(dǎo)用戶去社交互動。此框架下，除了內(nèi)容外，還強調(diào)了消費者對創(chuàng)作者、及其內(nèi)容的關(guān)系。

而頭條本身定位是個性化資訊服務(wù)，但后續(xù)的業(yè)務(wù)方向也開始向社交傾斜，不論是早前就有的新人推薦卡片、微頭條還是創(chuàng)作者門檻的降低，都意味著頭條正在朝著微博社交化的道路不斷邁進(jìn)。

頭條目的很明顯，將過去松散的用戶關(guān)系，通過社交鏈的沉淀來轉(zhuǎn)化為關(guān)注+粉絲的強關(guān)系。（提一嘴，頭條和微博一開始其實是互惠抱團(tuán)的關(guān)系，后來頭條開始涉足社交后，因為觸碰到了微博對市場的獨有控制，兩家就開始不斷互撕，其實歸根究底還是為了利益）

也正因此，頭條的框架和微博一致，都采用了「創(chuàng)作者模塊」，而非常規(guī)的「用戶模塊」。

而其他的雙模塊框架，即「用戶模塊」+「互動模塊」，除了內(nèi)容外，則只強調(diào)消費者和內(nèi)容的互動關(guān)系，這和產(chǎn)品本身并非強社交的定位有關(guān)。

單模塊框架，除了內(nèi)容外，只強調(diào)消費者個人身份，此時缺失了和內(nèi)容、創(chuàng)作者的關(guān)系，互動感弱化，沉浸感開始強化。

零模塊框架，則讓用戶完完全全得聚焦到內(nèi)容當(dāng)中，沉浸感最高。此時「我的點贊」更多得類似收藏功能，來作為承載個性化內(nèi)容的容器。

四、使用場景總結(jié)

最后，來大致梳理下每種框架的使用場景。

如果產(chǎn)品當(dāng)前定位與微博類似都傾向于強社交，或者業(yè)務(wù)方向開始向社交偏移，那么可以使用內(nèi)容+創(chuàng)作者模塊+互動模塊的框架（「我的評論」涉及用戶自己的評論，需要用用戶模塊）；

如果產(chǎn)品當(dāng)前對社交沒有那么重的需求，那么可以根據(jù)實際場景細(xì)分兩類：

1.希望強調(diào)用戶對內(nèi)容的互動：可使用內(nèi)容+用戶模塊+互動模塊的框架；

2.希望用戶沉浸于內(nèi)容中，可以使用內(nèi)容+用戶模塊，或者純內(nèi)容的框架。前者的優(yōu)勢在于保留互動以及通過自身信息的露出來強化「我的」掌控感，另外頭像錨點也利于視覺錨定，快速瀏覽；后者的優(yōu)勢在于高屏效和完完全全的沉浸感。

一句話，根據(jù)產(chǎn)品當(dāng)前的狀態(tài)和訴求，框架沒有絕對的對錯之分，只是適不適合而已。

五、最后

任何的設(shè)計形式，任何看似簡單的細(xì)節(jié)，必然存在一個客觀依據(jù)作為支撐，要么是業(yè)務(wù)、要么是用戶。所以，我們設(shè)計師要做的，就是多從這兩個維度，不斷得去理性思考、深挖背后的邏輯，從而做出更合理的決策，讓設(shè)計有理有據(jù)。

希望這篇干貨對你有所啟發(fā)。

我是Andrew，我們下期見。