10個(gè)關(guān)鍵點(diǎn)，告訴你如何設(shè)計(jì)產(chǎn)品評(píng)論模塊

這兩天一直在構(gòu)思36氪評(píng)論優(yōu)化方案，也就整理了行業(yè)內(nèi)做評(píng)論的常見方法，這篇文章我們就來(lái)聊聊設(shè)計(jì)評(píng)論功能時(shí)，需要考慮的那些事兒。

總的來(lái)看，評(píng)論功能的設(shè)計(jì)，需要考慮如下10個(gè)關(guān)鍵點(diǎn)：

• 展示樣式
• 排序規(guī)則
• 操作行為
• 跳轉(zhuǎn)邏輯
• 運(yùn)營(yíng)操作
• 被刪除/屏蔽后顯示邏輯
• 防呆設(shè)計(jì)
• 快捷操作
• 富媒體支持
• 細(xì)節(jié)支持

一. 展示樣式

目前市面上流行樣式有平鋪式、主題式、蓋樓式、對(duì)話式、混合式幾種。

1. 平鋪式

指所有評(píng)論都在一個(gè)層級(jí)，包括原評(píng)論，和對(duì)評(píng)論的回復(fù)，并行顯示。對(duì)于回復(fù)評(píng)論樣式，有的是直接顯示回復(fù)內(nèi)容，如微信朋友圈的回復(fù)樣式；有的是把原評(píng)論顯示出來(lái)，如36氪App線上版本的回復(fù)樣式。

2. 主題式

指把原評(píng)論作為一級(jí)評(píng)論，對(duì)原評(píng)論的回復(fù)，作為二級(jí)評(píng)論，排在一級(jí)評(píng)論下方。也就是說(shuō)，將一級(jí)評(píng)論作為「主題」，允許針對(duì)某個(gè)「主題」展開討論。相比平鋪式評(píng)論，主題式評(píng)論能讓討論主題更聚焦，讓優(yōu)質(zhì)評(píng)論更能浮出水面，形成討論氛圍。對(duì)運(yùn)營(yíng)而言，還可以針對(duì)優(yōu)質(zhì)評(píng)論展開討論，促進(jìn)曝光，提高運(yùn)營(yíng)效果。市面上很多注重評(píng)論的內(nèi)容平臺(tái)均選用該樣式，如貼吧、最右、簡(jiǎn)書、微博等。

3. 蓋樓式

指每次對(duì)原評(píng)論的回復(fù)，都把原評(píng)論內(nèi)容露出，并帶上自己的評(píng)論，以“圈層”樣式呈現(xiàn)，久而久之就形成無(wú)限嵌套的方框樣式，叫做「蓋樓」。將這一樣式發(fā)揚(yáng)光大的當(dāng)屬網(wǎng)易新聞，這也是它的特色之一，由此誕生出很多經(jīng)典評(píng)論效果。但是，蓋樓式評(píng)論在樓層多的情況下勢(shì)必要進(jìn)行多層隱藏，且不好對(duì)評(píng)論進(jìn)行追蹤，視覺效果也容易引起疲勞，不太建議使用。

4. 對(duì)話式

指每次對(duì)原評(píng)論的回復(fù)，就是和評(píng)論發(fā)布者的一次對(duì)話，這種對(duì)話本身也可分為一級(jí)、二級(jí)，乃至多級(jí)對(duì)話，分別是對(duì)評(píng)論者、評(píng)論回復(fù)者，回復(fù)評(píng)論回復(fù)者的人，以此類推。知乎就是典型的對(duì)話式評(píng)論。對(duì)話式會(huì)讓評(píng)論互動(dòng)更鮮明，但其樣式的設(shè)計(jì)卻增加了理解成本，慎用。

5. 混合式

指以上幾種樣式的混合，有的是一級(jí)評(píng)論用主題式，二級(jí)評(píng)論用平鋪式；有的是一級(jí)評(píng)論用主題式，二級(jí)評(píng)論用對(duì)話式；還有的是一級(jí)主題、二級(jí)對(duì)話、三級(jí)平鋪。具體用哪種，也是根據(jù)用戶理解程度和內(nèi)容運(yùn)營(yíng)傾向性來(lái)選擇。

二. 排序規(guī)則

主流排序規(guī)則有按發(fā)布時(shí)間、按熱門程度，再加上人工精選。

1. 按發(fā)布時(shí)間

通常默認(rèn)是按發(fā)布時(shí)間倒序，再進(jìn)一步可支持用戶可選正序、倒序排列。值得注意的是，對(duì)主題式評(píng)論，通常一級(jí)評(píng)論默認(rèn)倒序，目的是讓用戶看到最新評(píng)論，一級(jí)評(píng)論下的二級(jí)評(píng)論則是默認(rèn)正序，目的是讓用戶理解討論進(jìn)展。還有一點(diǎn)，就是一級(jí)評(píng)論默認(rèn)倒序的時(shí)間，建議取一級(jí)評(píng)論下，二級(jí)評(píng)論的最新發(fā)布時(shí)間，這樣能保證一級(jí)評(píng)論的排序是按評(píng)論本身的討論進(jìn)展來(lái)更新的。

2. 按熱門程度

需要計(jì)算所有評(píng)論的「熱度值」，根據(jù)此來(lái)排序。熱度值一般取評(píng)論的點(diǎn)贊數(shù)、回復(fù)數(shù)兩個(gè)維度，按權(quán)重進(jìn)行線性求和計(jì)算，有的還支持「點(diǎn)踩數(shù)」、「舉報(bào)數(shù)」等負(fù)面維度。此外，為了避免馬太效應(yīng)，還要考慮加入時(shí)間衰減因子，算法優(yōu)化方案有很多。

三. 操作行為

主流操作行為有點(diǎn)贊、回復(fù)、復(fù)制、舉報(bào)、刪除、分享。

• 點(diǎn)贊：要考慮點(diǎn)贊、取消點(diǎn)贊后的贊數(shù)變更邏輯，是否需要服務(wù)端同步更新，點(diǎn)擊后的動(dòng)效，點(diǎn)贊后的消息提醒機(jī)制等。
• 回復(fù)：要考慮回復(fù)彈窗的出現(xiàn)、收起時(shí)機(jī)，回復(fù)字符限制，回復(fù)是否支持換行符，是否支持鍵盤提交，是否允許空字符提交，回復(fù)頁(yè)面彈窗大小，按鈕布局等。
• 復(fù)制：要考慮可復(fù)制區(qū)域，復(fù)制交互（長(zhǎng)按/點(diǎn)擊），復(fù)制后的提示效果等。
• 舉報(bào)：要考慮是舉報(bào)文字還是舉報(bào)人，舉報(bào)后的提示，舉報(bào)后的數(shù)據(jù)審核等。
• 刪除：要考慮發(fā)布人支持刪除功能，刪除時(shí)是否出現(xiàn)彈窗提醒？刪除后狀態(tài)何時(shí)同步？刪除是硬刪除還是軟刪除？等等。
• 分享：要考慮可分享平臺(tái)，分享文案，分享后的打開樣式，是分享成網(wǎng)頁(yè)還是分享成圖片等。

四. 跳轉(zhuǎn)邏輯

跳轉(zhuǎn)邏輯，主要是考慮由于發(fā)布了評(píng)論，或回復(fù)了評(píng)論，哪些地方會(huì)產(chǎn)生相關(guān)入口，以及這些入口點(diǎn)擊的跳轉(zhuǎn)位置，包括以下。

1. 我發(fā)布的

通常會(huì)在「我的」里面，或者「消息中心」，可查找自己發(fā)布過(guò)的評(píng)論，這些評(píng)論點(diǎn)擊后可跳轉(zhuǎn)到對(duì)應(yīng)評(píng)論頁(yè)面。如果是主題式評(píng)論，對(duì)應(yīng)跳轉(zhuǎn)到評(píng)論二級(jí)頁(yè)。

2. 回復(fù)我的

有人回復(fù)我的評(píng)論，在「我的」或「消息中心」會(huì)收到消息，該消息需要可點(diǎn)擊跳轉(zhuǎn)到評(píng)論頁(yè)面。

3. 個(gè)人動(dòng)態(tài)

用戶發(fā)布評(píng)論或回復(fù)評(píng)論，都屬于個(gè)人行為，如果產(chǎn)品存在個(gè)人主頁(yè)，那應(yīng)該將該行為記錄在個(gè)人主頁(yè)，以「動(dòng)態(tài)」形式出現(xiàn)，其他人可在查看用戶動(dòng)態(tài)時(shí)，找到該用戶對(duì)哪個(gè)文章發(fā)表了哪些評(píng)論，并支持評(píng)論頁(yè)跳轉(zhuǎn)和文章頁(yè)跳轉(zhuǎn)。

五. 運(yùn)營(yíng)操作

所謂運(yùn)營(yíng)操作，是指運(yùn)營(yíng)可以從后臺(tái)干涉用戶的評(píng)論行為和評(píng)論結(jié)果。正向干涉包括：評(píng)論加精、評(píng)論置頂；負(fù)向干涉包括：評(píng)論屏蔽、評(píng)論刪除、評(píng)論人封禁、敏感詞替換等。

1.?正向干涉

• 評(píng)論加精：支持運(yùn)營(yíng)挑選優(yōu)質(zhì)評(píng)論，在前端給予「精華」的標(biāo)記，有的App也叫「神評(píng)論」、「有用」等。
• 評(píng)論置頂：如字面意思，將某個(gè)評(píng)論，置頂?shù)皆u(píng)論列表首位，給予公示。

2.?負(fù)向干涉

• 評(píng)論屏蔽：將某條評(píng)論暫時(shí)對(duì)他人不可見。體驗(yàn)更好的做法，還可以通知發(fā)布評(píng)論人其內(nèi)容被屏蔽，要求其修改后申請(qǐng)解除屏蔽，經(jīng)審核后評(píng)論可重新出現(xiàn)。
• 評(píng)論刪除：直接從后臺(tái)將評(píng)論刪除，不可恢復(fù)。
• 評(píng)論人封禁：通常是和「舉報(bào)」關(guān)聯(lián)，對(duì)于頻繁發(fā)布垃圾評(píng)論者予以封禁，令其不可再發(fā)評(píng)論。當(dāng)然也應(yīng)該允許其申請(qǐng)解封。
• 敏感詞替換：通常做法是構(gòu)建敏感詞庫(kù)，如果評(píng)論某些文字命中詞庫(kù)，則將敏感詞替換為「*」。

六. 被刪除/屏蔽后顯示邏輯

當(dāng)某條評(píng)論被刪除，或屏蔽后，可以有兩種做法，要么是直接刪除，要么是當(dāng)前區(qū)塊保留，被刪除文字變成「評(píng)論已刪除」。尤其是主題式評(píng)論，由于某條一級(jí)評(píng)論可能關(guān)聯(lián)多條二級(jí)評(píng)論，如果一級(jí)評(píng)論被刪除，其二級(jí)評(píng)論是否需要全部刪除，需要產(chǎn)品經(jīng)理根據(jù)評(píng)論價(jià)值來(lái)決策。建議這種情況還是保留二級(jí)評(píng)論。

七. 防呆設(shè)計(jì)

所謂防呆設(shè)計(jì)，是指需要思考如何通過(guò)產(chǎn)品設(shè)計(jì)，防止用戶誤操作。包括：

• 評(píng)論草稿箱：也就是說(shuō)評(píng)論框輸入文字，未發(fā)送前，如果誤點(diǎn)擊了取消區(qū)域，自動(dòng)替用戶保存當(dāng)前輸入文字，而再次出現(xiàn)評(píng)論框時(shí)，還能將之前文字恢復(fù)。這個(gè)功能還有個(gè)降級(jí)方案，就是用戶取消輸入框時(shí)，彈出Alert告知用戶是否要取消。
• 評(píng)論字?jǐn)?shù)提醒：當(dāng)字?jǐn)?shù)輸入過(guò)多時(shí)，通過(guò)紅字提醒用戶超限，「發(fā)送」按鈕置灰。

八. 快捷操作

輸入文字對(duì)用戶而言是個(gè)高成本的事，而評(píng)論本身是個(gè)表達(dá)態(tài)度的渠道，那我們是否可以設(shè)計(jì)一些簡(jiǎn)單的交互行為幫助用戶迅速表態(tài)呢？所謂快捷操作，就是針對(duì)這點(diǎn)的解決方案。可以是：

• 快速表態(tài)：在評(píng)論區(qū)設(shè)計(jì)表態(tài)按鈕，比如，踩、一般、贊、太棒了，用戶直接點(diǎn)擊即可，類似投票行為。典型案例如天天快報(bào)、橘子娛樂。
• 評(píng)論區(qū)直接輸入表情/顏文字：用戶可在發(fā)評(píng)論時(shí)，選擇表情圖發(fā)布，或快速選擇顏文字發(fā)布。像搜狐新聞、鳳凰新聞、網(wǎng)易新聞都可以直接發(fā)表情。

九. 富媒體支持

對(duì)某些UGC向的內(nèi)容產(chǎn)品，評(píng)論區(qū)甚至支持發(fā)靜態(tài)圖、發(fā)音頻、發(fā)GIF動(dòng)圖、發(fā)視頻，這時(shí)也就需要對(duì)應(yīng)的發(fā)布流程設(shè)計(jì)和后臺(tái)存儲(chǔ)邏輯。

十. 細(xì)節(jié)支持

這里就要從用戶體驗(yàn)角度，考慮各種特殊情況的產(chǎn)品細(xì)節(jié)了，我能想到的比如下面這些。

1. 評(píng)論支持識(shí)別超鏈接

• 超鏈接的識(shí)別邏輯：需要頭部是http或https，尾部是空格進(jìn)行識(shí)別。
• 超鏈接的字?jǐn)?shù)計(jì)算：對(duì)于限制字?jǐn)?shù)的輸入框，超鏈接可以統(tǒng)一為10個(gè)字符。
• 超鏈接發(fā)布后的顯示樣式：簡(jiǎn)單的可以直接顯示鏈接地址。
• 好一點(diǎn)的顯示為「鏈接地址」四個(gè)字。
• 再好一點(diǎn)的取鏈接地址對(duì)于網(wǎng)址的title顯示，如知乎。

2. 發(fā)評(píng)論時(shí)，鍵盤設(shè)置問(wèn)題

評(píng)論框輸入評(píng)論時(shí)，需要考慮是否將「發(fā)布」按鈕設(shè)置在鍵盤上。如果需要考慮評(píng)論換行，那「完成」鍵應(yīng)該作為換行鍵，否則點(diǎn)擊“完成”應(yīng)該是直接提交。

3. 評(píng)論點(diǎn)擊區(qū)域細(xì)節(jié)

評(píng)論區(qū)有很多元素，需要告知開發(fā)哪些區(qū)域可點(diǎn)，點(diǎn)擊跳轉(zhuǎn)到哪些地方。如下圖所示：

以上就是我能想到的所有做評(píng)論功能時(shí)，需要注意的方面，希望對(duì)大家有幫助。有問(wèn)題歡迎隨時(shí)給我留言。

歡迎關(guān)注作者的微信公眾號(hào)：「互聯(lián)網(wǎng)悅讀筆記」

「好的交互設(shè)計(jì)還需要注意這些細(xì)節(jié)」

• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之單元控件類》
• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之提示類》
• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之加載類》
• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之網(wǎng)絡(luò)異常類》
• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之引導(dǎo)類》
• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之導(dǎo)航類》
• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之空數(shù)據(jù)類》
• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之操作類》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com