「評論設計」的8個思考維度

來自專欄沁園的設計小跑

近些年，各類移動應用都或多或少的融入了社交屬性。其中，「評論」功能作為人與人、人與內容、人與產品之間交流的工具，已成為不可或缺的一部分。

最近我負責的社區類產品就涉及評論模塊的設計，結合網上的相關文章整理了一套評論設計的思考維度。

1. 內容元素

一般有以下表現形式：

• 圖標+標籤+數量：加入標籤這樣的文字說明可以更清晰地表意
• 圖標+數量：在圖標表意清晰的情況下使用
• 圖標+數量角標：需要更節省空間的情況下，可以將數量設計成小角標的形式

（註：此處需注意數量的位數，一般做多展示4位，5位以上展示「X萬+」）

1.2 評論部分

一般包括：

• 頭像
• 昵稱
• 頭銜：例如微博會有會員標識
• 評論發布時間：要注意時間的展示規則，例如是展示「XX小時前」還是展示「XX時XX分」？
• 評論內容：一般是文字，也可以支持圖片和視頻
• 互動：例如回復、點贊
• 操作：複製、舉報、刪除……

1.3 輸入評論部分

一般包括：

• 輸入框
• 添加圖片按鈕
• 添加表情按鈕
• 艾特按鈕
• 發送按鈕

2. 展示形式

目前常見的樣式有兩級式、引用式、蓋樓式、平鋪式（都是我自己起的名字）。

2.1 兩級式——小紅書

所謂兩級，主動發出的評論算一級，這條評論的所有回復算二級，且回復按時間順序排列。這種形式使回復的內容更聚焦於該條評論的「主題」，可以很順暢地瀏覽並理解回復。並且讓優質評論更能浮出水面，形成討論氛圍。

2.2 引用式——網易雲音樂

回復和評論都算一級，且回復的內容會引用被回復的內容。這種形式可以讓回復更多地被曝光，也能適當了解是針對什麼內容進行的回復。

2.3 蓋樓式——網易新聞

網易新聞無意中創造的「蓋樓式」評論成為其一大特色，以層層嵌套的方式把每一層回復都露出，蓋樓在視覺上氣勢磅礴，但是看多了也顯得過於複雜，容易視覺疲勞。雖然信息連貫，但是前面的信息幾乎都是一樣的，只是最後一條不同，導致大量信息重複。解決方法是由前端判斷重複的樓層，默認收縮隱藏。

2.4 平鋪式——知乎

注重單條信息（評論/回復）的展示，不重視信息的連貫性，增加了理解成本。知乎就是典型的平鋪式，但是它在每條評論/回復下都有「查看對話」的按鈕，點擊可以查看上下文，一定程度上彌補了這方面的不足。

3. 操作

這部分僅討論和用戶有關的操作，不包括後台編輯人員的操作。操作主要有以下幾種：

3.1 回復：

• 不允許回復。

用戶是否可以自行設置允不允許別人回復？例如微博和知乎都允許用戶自行設置別人不可以評論自己發布的帖子，給予用戶表達自己觀點但是不接受評價的權利。

還有一種情況是由於一些特殊原因，產品暫時關閉了評論功能，例如抖音最近因為評論的審查監管問題關閉了評論功能。

• 只允許作者回復。例如微信公眾號的文章，通過篩選的留言才能被公開，並且只允許作者回復。這樣設計也許是為了讓公眾號能更好地維護自身的形象。
• 允許所有人回復。最常見的一種情況，有利於營造自由討論的氛圍。

3.2 點贊：

讓用戶可以快速表達正面的反饋。不僅是點贊，還可以是點愛心、支持、頂、鼓掌等。

反對：快速表達負面反饋。還可以是踩、不喜歡等。一般負面反饋都會隱藏得比較深。

3.3 轉發：

讓評論更廣地傳播，例如微博和知乎想法都有轉發的功能。

3.4 刪除：

• 是否允許自己刪除自己的評論/回復
• 是否允許作者刪除別人的評論/回復

3.5 複製

3.6 舉報

……

4. 防錯設計

4.1 提示用戶字數限制。

在有限制字數的情況下，實時提醒用戶已經輸入了幾個字，超出字數時給予明顯提示。

4.2 保存功能。

在做出刪除等不可恢復的操作之前，給予用戶是否保存的提示，例如微博；而某些產品則提供了自動保存草稿的功能，例如知乎。

5. 情感化

5.1 情感化互動

許多產品會讓反饋結合動效來展現，增加愉悅感。

5.2 多種互動方式

Facebook花了1年多的時間重新設計了互動反饋功能。在項目前期，他們做了許多調研工作來尋找人們最常表達哪些情緒，最終確定了6種情感反饋，分別是喜歡、愛、哈哈、驚訝、生氣和傷心。結合表情設計和動效設計，讓用戶之間的互動反饋更加精準、多元且有趣。

5.3 情感化文案

有趣的文案可以更好地引發用戶評論的興趣。

5.4 情感化Toast提示

5.5 視覺樣式

Facebook在改版後將評論的UI設計成類似聊天氣泡的樣式，增添了一種大家在聊天的感覺，增加用戶的參與感。

6. 後台設計

6.1 編輯許可權：

• 標記：將評論標記為精華或者熱門
• 人工排序：置頂或者指定序列
• 刪除：永久刪除
• 隱藏：隱藏不展示

6.2 審核機制：

• 先審核後發送。提示用戶評論的內容會經過審核或篩選之後才會可見，例如對微信公眾號的評論。還有一種做法是在審核速度很快的情況下，在前端先讓用戶以為發送成功了。
• 先發送後審核

6.3 敏感詞過濾：

考慮評論中如果有違禁詞該怎麼處理，是屏蔽違禁詞還是屏蔽整條評論。

7. 排序規則

整理了幾個App的評論排序：

• 知乎：精選評論+ 時間順序排序
• 抖音：3條熱門評論+時間倒序排序
• 網易新聞：熱門評論（點贊數最高）+精彩蓋樓（回複數最多）+時間倒序排序
• 網易雲音樂：精彩評論（點贊數從高到低）+近期熱評（點贊數從高到低）+時間倒序排序
• 微博：熱度排序/時間倒序排序（用戶可手動切換）
• 小紅書：回複數從多到少+時間倒序排序
• 豆瓣：時間順序排序

排序規則可以從以下幾個角度來制定：

• 時間：分為順序排序和倒序排序。評論一般是倒序排序，用戶每次都能看到不一樣的最新評論；回復一般是順序排序，符合信息閱讀順序。
• 點贊數：點贊數最多的在前。
• 評論字數：例如淘寶的評價列表頁里，排在前幾個的都是字數多、並且帶圖片的。
• 回複數：回複數最多的在前。
• 評論人身份：比如優先展示大V、明星的評論。
• 人工排序：置頂或者指定序列
• 權重值演算法： 舉個例子，權重值=(評論字數*點贊數)+(關注數+15)*(關注/粉絲值+0.1)*10%+被回複數*15

……

8. 消息提醒

評論模塊和消息提醒功能密不可分，需要給用戶發送消息來提醒Ta有人評論了或是有人回復了，對社區的活躍度至關重要。

8.1 消息分類：當消息的種類有很多時，就需要對消息進行分類。

8.2 聚合邏輯：當同類消息過多時，為了避免讓用戶一次性看到N條相似的詳細，需要對同類型的消息進行聚合展示，例如知乎。

8.3 已讀/未讀：區分已讀和未讀消息，考慮是否提供用戶」全部設置成已讀「的按鈕。

8.4 過期時間：過期意味著消息消失，需要考慮用戶已讀的內容多長時間會過期。

……

總結

本文總結了評論設計的8個思考維度。在具體的評論設計時，需要基於【產品特性】和【評論目的】來思考各個細節。

參考文章：

《實例分析：4種常用的評論結構設計》 http://www.woshipm.com/pd/572400.html

《10個關鍵點，告訴你如何設計產品評論模塊》http://www.sohu.com/a/194400984_11481

《Facebook:除了點贊我還想點點兒別的》http://www.ui.cn/detail/107706.html

推薦閱讀：