從前端和后臺(tái)出發(fā),詳述評(píng)論功能的設(shè)計(jì)門(mén)道

26 評(píng)論 18171 瀏覽 140 收藏 17 分鐘

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

總體來(lái)說(shuō):產(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. 為什么做評(píng)論功能

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

2. 評(píng)論分類

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

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

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

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

總體說(shuō)來(lái):

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1)較長(zhǎng)評(píng)論

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

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

2)短評(píng)

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

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

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

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

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

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

1)折疊式

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

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

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

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

2)平鋪式

打破一級(jí)及二級(jí)評(píng)論的差異,將所有評(píng)論平鋪開(kāi)。

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

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

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

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

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

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

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

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

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

(6)評(píng)論功能分區(qū)

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

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

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

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

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

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

1. 后臺(tái)需求匯總

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

01

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

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

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

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

02

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

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

03

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

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

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

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

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

04

由于公司架構(gòu)區(qū)分總部和各省分公司,因此需要?jiǎng)澐纸巧珯?quán)限。

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

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

05

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

06

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

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

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

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

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

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

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

 

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

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

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

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

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

    來(lái)自浙江 回復(fù)
  3. 試試回車(chē)

    OK的

    來(lái)自廣東 回復(fù)
  4. 我也測(cè)試一下評(píng)論是非需要審核 ??還有表情

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

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

    回復(fù)
  7. 測(cè)試評(píng)論是否可立馬見(jiàn)

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

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

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

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

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

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

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

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

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

      回復(fù)
    2. 123

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

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

    回復(fù)
    1. ??

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

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

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

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

      來(lái)自四川 回復(fù)