從前端和后臺出發(fā),詳述評論功能的設(shè)計(jì)門道

26 評論 18235 瀏覽 140 收藏 17 分鐘

“評論”功能是圍繞著內(nèi)容展開的“輕社交”,幾乎是所有產(chǎn)品的“標(biāo)配”了。那么小小的評論區(qū),該如何設(shè)計(jì)呢?本文將從前端和后臺的需求出發(fā),詳述評論功能的設(shè)計(jì)門道。

總體來說:產(chǎn)品最終呈現(xiàn)的形態(tài)是商業(yè)目標(biāo)和核心流程的體現(xiàn),因此產(chǎn)品設(shè)計(jì)成什么樣子是與產(chǎn)品類型和商業(yè)目標(biāo)緊密相聯(lián)的。

一、前端需求及設(shè)計(jì)

1. 為什么做評論功能

用戶評論可以打通用戶與用戶、用戶與產(chǎn)品之間的界限,提供雙向甚至多向的溝通手段,增強(qiáng)產(chǎn)品的關(guān)系留存。評論功能不再以用戶發(fā)表意見為唯一目的,同時還營造出了一種隱藏在屏幕背后的社群關(guān)系。

2. 評論分類

評論可以區(qū)分為一級評論及二級評論(回復(fù))兩種,詳細(xì)定義如下:

小評論區(qū)的大門道——記半年評論功能設(shè)計(jì)心得

3. 從用戶查看/發(fā)表評論兩種行為出發(fā)分析用戶的使用動機(jī)

用戶對評論功能的使用可區(qū)分為查看及發(fā)表兩種行為。

總體說來:

  • 用戶查看評論:核心動機(jī)在于能夠有所收獲,這就要求評論內(nèi)容必須具有價(jià)值;
  • 用戶發(fā)表評論:核心動機(jī)在于表達(dá)并能夠獲得反饋及得到認(rèn)同。

產(chǎn)品類型不同,查看及發(fā)表評論動機(jī)差異較大,詳見如下分析:

小評論區(qū)的大門道——記半年評論功能設(shè)計(jì)心得

4. 從自己產(chǎn)品出發(fā),詳述產(chǎn)品功能不同用戶使用動機(jī)的差異

就我們自己的產(chǎn)品而言,作為國企背景運(yùn)營商類工具型應(yīng)用,存在如下特殊性:

功能模塊的多樣性,評論作用有差異:評論機(jī)制多與業(yè)務(wù)辦理、客服服務(wù)相結(jié)合,同時隨著產(chǎn)品中增加了資訊類內(nèi)容, 評論功能也會出現(xiàn)在資訊內(nèi)容下。

對于以上三種不同功能(業(yè)務(wù)辦理、客戶服務(wù)及資訊),用戶使用評論動機(jī)也有所不同:

小評論區(qū)的大門道——記半年評論功能設(shè)計(jì)心得

5. 評論功能產(chǎn)品設(shè)計(jì)詳述

不同類型產(chǎn)品的評論功能的設(shè)計(jì)也應(yīng)不同,產(chǎn)品的最終形態(tài)是為產(chǎn)品功能的核心作用服務(wù)的。

以下從評論功能的頁面元素來分析評論區(qū)的細(xì)節(jié)設(shè)計(jì):

(1)頁面整體設(shè)計(jì)

評論功能大體上可分為內(nèi)嵌評論頁及獨(dú)立評論頁,內(nèi)嵌評論頁是指評論直接展現(xiàn)在內(nèi)容/商品下方的頁面的設(shè)計(jì)方式,如淘寶、今日頭條、微博等;獨(dú)立評論頁是指需要跳轉(zhuǎn)才能看到評論的頁面設(shè)計(jì)方式,如知乎等。

評論頁面整體設(shè)計(jì)除了展現(xiàn)樣式以外,還涉及到邏輯的設(shè)定,比如一級評論是按照時間順序排列還是按照點(diǎn)贊數(shù)倒敘排列,當(dāng)發(fā)表時間一致點(diǎn)贊數(shù)量一致時該如何排序,都需要產(chǎn)品經(jīng)理根據(jù)自己產(chǎn)品的特性來決定。

小評論區(qū)的大門道——記半年評論功能設(shè)計(jì)心得

就我們自己的產(chǎn)品而言,由于頁面來源和性質(zhì)不同,一部分頁面為自有頁面,可進(jìn)行改造增加評論區(qū),因此設(shè)計(jì)成嵌評論頁;一部分頁面為外部H5頁面,由于無法修改頁面內(nèi)容,所以增加了留言浮窗,需要跳轉(zhuǎn)后可以查看及發(fā)表評論。

(2)發(fā)表評論入口設(shè)計(jì)

發(fā)表評論的入口可區(qū)分為發(fā)表一級評論和二級評論的入口。

發(fā)表一級評論的入口一般會存在于頁面當(dāng)中,位置可能是常駐頁面某個位置,如常駐在頁面底部:網(wǎng)易云音樂、今日頭條等;或者是以懸浮框形式常駐頁面右下角:百度知道,發(fā)表評論的引導(dǎo)性較強(qiáng)。

也可能是在頁面中央,如:公眾號及得到“寫留言”入口,放置在頁面中央,需要對內(nèi)容有一定的了解后才可有發(fā)表評論;亦或需要完成某種行為才可發(fā)表評論,一般發(fā)表評論入口在其他頁面:淘寶,需要在我的-待評價(jià)中發(fā)表評論,一級評論的發(fā)表入口設(shè)計(jì)可根據(jù)自己產(chǎn)品需要自行決定。

發(fā)表二級評論的入口可跟隨內(nèi)容露出留言按鈕,引導(dǎo)性較強(qiáng);也可通過點(diǎn)擊交互給出回復(fù)入口,引導(dǎo)性較弱。

二級評論的發(fā)表入口設(shè)計(jì)也需要根據(jù)自己產(chǎn)品的需要自行決定。

小評論區(qū)的大門道——記半年評論功能設(shè)計(jì)心得

小評論區(qū)的大門道——記半年評論功能設(shè)計(jì)心得

小評論區(qū)的大門道——記半年評論功能設(shè)計(jì)心得

(3)評論內(nèi)容輸入頁面設(shè)計(jì)

按照評論內(nèi)容的長短可將評論內(nèi)容區(qū)分為長評和短評兩種,頁面交互方式可分為當(dāng)前頁輸入和跳轉(zhuǎn)后輸入兩種方式:

1)較長評論

輸入框占位需要較大,甚至可以占用整頁空間,可隨時查看之前輸入的內(nèi)容,以便形成章節(jié)體系。

如:知乎的回答問題頁面,長評輸入一般需要跳轉(zhuǎn)到新的頁面,但需要在跳轉(zhuǎn)后的頁面中提示用戶是針對何內(nèi)容發(fā)表的評論,因此一般會展現(xiàn)出文章的主題或者商品名稱等。

2)短評

輸入框給出一行空間即可,如:今日頭條的評論;由于用戶發(fā)表的內(nèi)容本身也不會很長,所以輸入框無需很大。短評的輸入框一般在當(dāng)前頁即可。

在豆瓣書評中,按照評論長短區(qū)分了短評和討論兩塊區(qū)域,美妝類產(chǎn)品“閨蜜美妝”可針對產(chǎn)品發(fā)表長評或者短評,滿足不同受眾的不同需求。

除以上交互方式以外,輸入框中可輸入的內(nèi)容可以是文字、圖片、甚至是視頻、音頻等,對于電商類產(chǎn)品可以增加星級評分等元素。

小評論區(qū)的大門道——記半年評論功能設(shè)計(jì)心得

(4)二級評論樣式設(shè)計(jì)

二級評論設(shè)計(jì)主要分為兩種形式(具體須根據(jù)產(chǎn)品特性及二級評論數(shù)量決定采用何種展現(xiàn)方式):

1)折疊式

以一級評論為主,展示所有二級評論,優(yōu)點(diǎn)是一級評論及對應(yīng)的二級評論可以形成清晰地對應(yīng)關(guān)系,上下文聯(lián)系緊密;缺點(diǎn)為評論展示的位置受限,假設(shè)如果二級留言內(nèi)容較多,用戶發(fā)表的評論需要多次點(diǎn)擊才能展現(xiàn)出來。

同時二級評論的點(diǎn)贊限制較多,如下圖從百度知道評論區(qū)可以看出二級評論難以給出點(diǎn)贊區(qū)域。

針對折疊式,一般優(yōu)先露出n條二級評論,其他評論可在當(dāng)前頁面中無限展開或需要跳轉(zhuǎn)到新的頁面查看全部;如:微博、百度貼吧等。

如果二級評論和一級評論之間聯(lián)系緊密,比如問答類產(chǎn)品建議采用該種方式,如果二級評論數(shù)量較多建議采用跳轉(zhuǎn)到新的頁面查看全部二級評論的交互方式。

2)平鋪式

打破一級及二級評論的差異,將所有評論平鋪開。

缺點(diǎn)是一級評論和二級評論之間的上線文聯(lián)系較弱,優(yōu)點(diǎn)為展示位置較靈活,不必須折疊在一級評論中,如:網(wǎng)易新聞。

小評論區(qū)的大門道——記半年評論功能設(shè)計(jì)心得

(5)互動機(jī)制(點(diǎn)贊、回復(fù)入口、認(rèn)可、水等)設(shè)計(jì)

互動機(jī)制可分為強(qiáng)互動和弱互動兩種方式:

  1. 強(qiáng)互動為回復(fù)他人評論;
  2. 弱互動為點(diǎn)贊、認(rèn)可、水等。

反饋機(jī)制是評論區(qū)必備設(shè)計(jì),可增強(qiáng)用戶之間的聯(lián)系;用戶可根據(jù)自身需要選擇強(qiáng)弱互動方式。

不同產(chǎn)品之間互動機(jī)制有所差異,一般評論區(qū)標(biāo)配的互動機(jī)制包含回復(fù)(包括用戶之間回復(fù)及用戶與運(yùn)營人員之間的回復(fù))及點(diǎn)贊這兩種。

對于垂直社區(qū)類產(chǎn)品,如某問答平臺中可對他人評論進(jìn)行認(rèn)可、水、分享等。其他的交互邏輯,比如是否支持用戶回復(fù)自己評論、是否支持他人刪除自己留言、是否可對二級評論進(jìn)行點(diǎn)贊等邏輯可以根據(jù)產(chǎn)品需要自行設(shè)計(jì)。

小評論區(qū)的大門道——記半年評論功能設(shè)計(jì)心得

(6)評論功能分區(qū)

如網(wǎng)易新聞將評論區(qū)劃分為熱門跟帖和最新跟帖兩個區(qū)域,豆瓣書評分為評論和討論區(qū)兩個模塊:淘寶區(qū)分評論區(qū)和問大家區(qū);產(chǎn)品經(jīng)理可根據(jù)產(chǎn)品特性及評論數(shù)量決定是否需要分區(qū)。

(7)其他關(guān)聯(lián)功能設(shè)計(jì)

與評論功能緊密相關(guān)的功能為消息提醒功能,對于用戶之間互動方式的不同,提醒方式也應(yīng)做差別處理。

如:針對運(yùn)營人員或者其他用戶的的回復(fù),這種強(qiáng)互動方式需要及時推送,以便活躍氛圍,并且可在消息提醒中點(diǎn)擊查看完整回復(fù)內(nèi)容、可快捷回復(fù)、可跳轉(zhuǎn)回發(fā)表評論頁面等;而針對點(diǎn)贊、認(rèn)可等其他弱互動方式,就無需進(jìn)行推送,支持跳轉(zhuǎn)回發(fā)表評論頁面即可。

二、后臺需求及設(shè)計(jì)

評論功能不僅涉及到前端交互也涉及到后臺邏輯,以下為根據(jù)自己產(chǎn)品整理的后臺設(shè)計(jì)思路(備注:我們的評論區(qū)名稱為留言區(qū)):

1. 后臺需求匯總

就我們自己產(chǎn)品而言,具有公司具有國企背景,產(chǎn)品具有平臺屬性,不僅TO C,也要TO B,因此在滿足用戶的需求的同時也要滿足各省運(yùn)營人員的需求,由該屬性出發(fā),后臺需求匯總?cè)缦拢?/p>

01

由于公司具有國企屬性,又是運(yùn)營商性質(zhì),因此用戶評論內(nèi)容傾向不確定(可能會有辱罵等內(nèi)容),因此增設(shè)審核機(jī)制,以確保內(nèi)容的健康性。

審核機(jī)制包括機(jī)器審核和人工審核兩種,其中人工審核需要在留言后臺完成。

具體說來:對于健康內(nèi)容可審核通過展現(xiàn)在用戶前端界面中,對于存在問題的內(nèi)容可審核不通過,運(yùn)營人員可通過私信方式回復(fù)用戶,從而最大程度上滿足用戶個性化需求。

而且對于不同功能模塊審核需求不同,如業(yè)務(wù)辦理模塊可能發(fā)生用戶辱罵等內(nèi)容較多,需要審核,而資訊模塊,由于不涉及到辦理等與金錢掛鉤的敏感問題,因此審核需求不大。

02

由于用戶希望能夠在產(chǎn)品中獲得相關(guān)問題答案,需要運(yùn)營人員可回復(fù)用戶留言。

因此在后臺增設(shè)回復(fù)機(jī)制,其中回復(fù)功能的設(shè)計(jì)邏輯包括是否可以多次回復(fù)、回復(fù)后是否可以刪除等,根據(jù)各自產(chǎn)品特性自行決定。

03

由于用戶反饋問題較為集中,因此增設(shè)置頂功能,提高用戶使用效率。

在設(shè)計(jì)置頂功能時特別糾結(jié)以下兩點(diǎn):

  1. 是否需要像大眾點(diǎn)評一樣,將優(yōu)質(zhì)留言蓋上“優(yōu)質(zhì)點(diǎn)評”的標(biāo)簽?
  2. 是否需要將置頂?shù)膬?nèi)容永遠(yuǎn)置頂?

最后還是希望業(yè)務(wù)辦理類模塊能夠更加公正客觀(至少看起來是這樣的),而非用“優(yōu)質(zhì)”標(biāo)簽來強(qiáng)迫用戶閱讀,而且不希望用戶在多次進(jìn)入留言頁時看到相同的置頂內(nèi)容。

所以采用了通過后臺調(diào)整點(diǎn)贊數(shù)的方式,使得置頂內(nèi)容能夠暫時排序第一位,至于能夠排在第一位多久,還需要依靠其他用戶的投票。

04

由于公司架構(gòu)區(qū)分總部和各省分公司,因此需要劃分角色權(quán)限。

在留言后臺可設(shè)置總管理員和分省運(yùn)營人員兩種角色,不同角色擁有的權(quán)限不同:

  • 總管理員:可看到全國內(nèi)容、可對留言進(jìn)行復(fù)審、并且可看到分省運(yùn)營人員的操作記錄,實(shí)現(xiàn)整體上把控整個產(chǎn)品的運(yùn)營的質(zhì)量;
  • 分省管理員:僅可審核、回復(fù)本省用戶發(fā)表的留言;角色權(quán)限劃分可使功能使用范圍更加明確,有助于評論功能健康發(fā)展。

05

由于公司框架特性,帶來的另一個問題是針對全國用戶可見內(nèi)容——業(yè)務(wù)辦理也好,faq內(nèi)容也好,由于不同省份之間規(guī)則差異,不同省份用戶之間會形成比較,容易造成用戶投訴,因此留言可見范圍可勾選——實(shí)現(xiàn)用戶留言及運(yùn)營人員回復(fù)可針對用戶自己可見、可對本省用戶可見及全國可見。

06

其它常規(guī)后臺需求包括時間篩選、功能模塊篩選、省份篩選、審核類型篩選、回復(fù)類型篩選、置頂類型篩選、留言內(nèi)容搜索等,能夠滿足運(yùn)營人員精準(zhǔn)化查找的需求。

2. 前端與后臺的關(guān)聯(lián)如下流程圖所示

整理好產(chǎn)品前后臺關(guān)聯(lián)邏輯有助于后臺產(chǎn)品的設(shè)計(jì),如下流程圖為我整理的自己產(chǎn)品的前后臺邏輯:

小評論區(qū)的大門道——記半年評論功能設(shè)計(jì)心得

3. 后臺設(shè)計(jì)最終原型

根據(jù)以上分析,輸出留言后臺最終產(chǎn)品產(chǎn)品原型,之后開發(fā)并優(yōu)化迭代。

完(?′?‵?)I L???????~多有不足,歡迎討論交流~~

 

本文由 @根本停不下來~ 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于 CC0 協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 11

    來自北京 回復(fù)
    1. 11

      來自廣東 回復(fù)
  2. 1

    來自浙江 回復(fù)
  3. 試試回車

    OK的

    來自廣東 回復(fù)
  4. 我也測試一下評論是非需要審核 ??還有表情

    來自廣東 回復(fù)
  5. 學(xué)到了

    來自江蘇 回復(fù)
  6. ??

    回復(fù)
  7. 測試評論是否可立馬見

    來自福建 回復(fù)
  8. 一級評論和二級評論在后臺應(yīng)該如何管理呢

    來自廣東 回復(fù)
  9. ??

    來自北京 回復(fù)
    1. ??

      來自北京 回復(fù)
    2. 看看

      來自湖北 回復(fù)
    3. 看看回復(fù)

      來自江西 回復(fù)
    4. 11

      來自江西 回復(fù)
    5. 111

      來自江西 回復(fù)
  10. 很棒

    來自北京 回復(fù)
    1. 123

      回復(fù)
    2. 123

      回復(fù)
  11. 文章寫得不錯!學(xué)到了。不過有一個問題,個人覺得評論和評價(jià)是兩個不同的東西,應(yīng)做區(qū)分。

    來自廣東 回復(fù)
  12. 評論在一定程度上是增加用戶粘性的一個很好的方法
    一個很接地氣的評論 說不懂比文章更吸引用戶評論

    回復(fù)
    1. ??

      來自北京 回復(fù)
  13. 想問下大神們,前臺用戶發(fā)表評論,先展示評論,再后臺審核是否通過與文中前臺用戶發(fā)表評論,后臺審核后再展示,這兩種分別有什么優(yōu)缺點(diǎn)呢

    來自江蘇 回復(fù)
    1. 如何使嚴(yán)肅的產(chǎn)品,最理想的是用戶發(fā)表時機(jī)器審核,前期僅對發(fā)表用戶可見,后審核后對全部用戶可見。

      來自北京 回復(fù)
    2. 網(wǎng)易新聞中,每次發(fā)完評論審核沒通過的話一點(diǎn)反饋都沒有,也沒有保存,也沒有私信和通知,就是憑空消失,我想復(fù)制修改都不行,體驗(yàn)極差

      來自湖北 回復(fù)
    3. 機(jī)器先過濾,審核不通過人工再審?

      來自四川 回復(fù)