梳理超多大廠案例后，我總結(jié)了點(diǎn)贊和評(píng)論的萬能設(shè)計(jì)框架

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

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

更多設(shè)計(jì)細(xì)節(jié)深度分析：

一、我的點(diǎn)贊、評(píng)論是什么

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

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

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

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

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

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

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

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

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

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

1. 我的評(píng)論-雙模塊動(dòng)態(tài)流

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

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

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

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

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

2. 我的評(píng)論-單模塊動(dòng)態(tài)流

這個(gè)框架的特征，是只包含了「用戶模塊」，不存在「互動(dòng)模塊」。競(jìng)品中只有 UC 這一個(gè)例子，互動(dòng)屬性被截?cái)啵尳缑嬲w更加沉浸。另外，相比前一個(gè)框架，屏效也有明顯的提升。

說完了「我的評(píng)論」場(chǎng)景，再來看看「我的點(diǎn)贊」。

3. 我的點(diǎn)贊-雙模塊動(dòng)態(tài)流

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

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

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

至于為什么這么搞，后面會(huì)說。

4. 我的點(diǎn)贊-單模塊列表流

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

5. 我的點(diǎn)贊-零模塊列表流

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

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

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

三、框架背后的邏輯

任何內(nèi)容型平臺(tái)的正向循環(huán)，都離不開三個(gè)方面：內(nèi)容創(chuàng)作者、內(nèi)容和內(nèi)容消費(fèi)者。

宏觀上說，內(nèi)容平臺(tái)需要做的就是去不斷得強(qiáng)化這個(gè)閉環(huán)，讓三者互相賦能，以此收獲長(zhǎng)期穩(wěn)定的收益。

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

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

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

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

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

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

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

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

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

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

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

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

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

最后，來大致梳理下每種框架的使用場(chǎng)景。

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

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

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

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

最后

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

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

歡迎關(guān)注作者微信公眾號(hào)：「Andrew的設(shè)計(jì)筆記」