評(píng)論區(qū)是一個(gè)神奇的地方，它可以拉近用戶間的關(guān)系，也能增強(qiáng)用戶與產(chǎn)品的聯(lián)系。那么好的評(píng)論區(qū)該如何設(shè)計(jì)？本篇文章將通過(guò)三個(gè)維度、九個(gè)考量點(diǎn)對(duì)評(píng)論區(qū)的設(shè)計(jì)進(jìn)行拆解，希望能對(duì)大家有所幫助。

一、從產(chǎn)品維度定義評(píng)論區(qū)類別

當(dāng)拿到構(gòu)建評(píng)論區(qū)的需求時(shí)，別著急出方案，先看看自己的產(chǎn)品是什么類型、適合什么樣的評(píng)論區(qū)；公眾號(hào)的評(píng)論是被作者選擇性地“曬”出，生鮮超市類app的評(píng)論區(qū)是只能看不能回——產(chǎn)品類型不同、其評(píng)論區(qū)類別也不一樣，這里有三種評(píng)論區(qū)類型供大家選擇：

▲從產(chǎn)品維度看評(píng)論類別

1. 單向評(píng)論區(qū)

單向評(píng)論偏向于讓用戶發(fā)表自己的觀點(diǎn)，重點(diǎn)在評(píng)論內(nèi)容本身的瀏覽上，用戶與用戶之間不可互動(dòng)。如應(yīng)用商店、外賣(mài)app的內(nèi)容詳情頁(yè)中，評(píng)論內(nèi)容是用戶后續(xù)行為——下載應(yīng)用、下單外賣(mài)的影響因子之一。

2. 雙向評(píng)論區(qū)

雙向評(píng)論多應(yīng)用于作者與用戶之間的留言互動(dòng)中。如公眾號(hào)的文章留言區(qū)，用戶發(fā)表觀點(diǎn)、作者可選擇性地進(jìn)行回復(fù)。雙向評(píng)論更強(qiáng)調(diào)作者、讀者之間的關(guān)系，整個(gè)評(píng)論區(qū)（留言區(qū)）的互動(dòng)性不強(qiáng)。

3. 多向評(píng)論區(qū)

多向評(píng)論區(qū)顧名思義，用戶可以在評(píng)論區(qū)發(fā)表自己的看法、也可與他人進(jìn)行交流互動(dòng)，這在社交app上、新聞資訊app等較為常見(jiàn)。

設(shè)計(jì)師需要根據(jù)自己的產(chǎn)品特性，在設(shè)計(jì)之前，先來(lái)選取最適合的評(píng)論區(qū)類型。

二、“看評(píng)論”時(shí)的五個(gè)設(shè)計(jì)考量點(diǎn)

在確定了評(píng)論區(qū)類別之后，就可以去設(shè)計(jì)用戶“看評(píng)論”的體驗(yàn)了；這里可以通過(guò)以下五個(gè)考量點(diǎn)來(lái)分析：

• “用戶看到了什么” ——關(guān)系著評(píng)論區(qū)內(nèi)容元素、展示形式、排序方式的呈現(xiàn)。
• “用戶怎么看到的”——同正文與評(píng)論區(qū)間跳轉(zhuǎn)方式、以及一級(jí)二級(jí)評(píng)論的跳轉(zhuǎn)方式有關(guān)。

▲“看評(píng)論”時(shí)的五個(gè)設(shè)計(jì)考量點(diǎn)

1. “看評(píng)論”之內(nèi)容元素

評(píng)論區(qū)內(nèi)容元素主要分為兩部分，評(píng)論區(qū)入口+信息展示：

• 評(píng)論區(qū)入口——通常是評(píng)論icon、評(píng)論量數(shù)字、“評(píng)論“二字說(shuō)明，設(shè)計(jì)師按照產(chǎn)品的調(diào)性直接設(shè)計(jì)即可。
• 評(píng)論區(qū)信息展示——分為說(shuō)明類信息（e.g.評(píng)論內(nèi)容）和互動(dòng)類信息（e.g.點(diǎn)贊、回復(fù))；設(shè)計(jì)時(shí)需注意各類信息展示的位置，以確保信息看起來(lái)動(dòng)線流暢、用戶操作起來(lái)移動(dòng)距離最小。

▲“看評(píng)論”·評(píng)論區(qū)內(nèi)容元素之信息展示

2. “看評(píng)論”之評(píng)論展示形式

app評(píng)論區(qū)常用的大致有四類展示形式——主題式、平鋪式、蓋樓式、引用式，這些“XX式”是什么意思，又適合在什么場(chǎng)景下用呢？

（1）主題式

如下圖，用戶對(duì)正文內(nèi)容發(fā)表的一級(jí)評(píng)論在上，他人的回復(fù)則折疊在下方；因?yàn)橐患?jí)評(píng)論通常以熱度的形式排列，所以“主題式”可使優(yōu)質(zhì)評(píng)論獲得更多的曝光，更容易吸引其他用戶查看、并參與討論中去；

▲“看評(píng)論”·評(píng)論區(qū)展示形式之 “主題式”

（2）平鋪式

對(duì)于“平鋪式”的展示形式來(lái)說(shuō)，評(píng)論和評(píng)論回復(fù)都處于同一個(gè)層級(jí)上，視覺(jué)上沒(méi)有明顯的層級(jí)區(qū)分。

什么是B端产品经理？和C端产品经理有什么区别？

B端产品经理中的B是Business，商业的意思，B端产品经理首先就要理解这个职位的重要性，要设计出更适合这个项目需求的产品方案，B最终产品经理在日常工作中...

查看详情 >

以朋友圈為例，在熟人社交圈子中，大家評(píng)論回復(fù)的層級(jí)是相同的，朋友圈的用戶可以通過(guò)時(shí)間的先后順序直接瀏覽；舊版某乎的精選評(píng)論頁(yè)也為“平鋪式結(jié)構(gòu)”，當(dāng)用戶對(duì)某條精選評(píng)論感興趣、進(jìn)去詳情頁(yè)瀏覽時(shí)，只要從上往上依次閱讀即可；

▲“看評(píng)論”·評(píng)論區(qū)展示形式之 “平鋪式”

（3）蓋樓式

如同字面意思，評(píng)論區(qū)用戶之前的互動(dòng)內(nèi)容像在蓋樓一樣，一層一層向下堆砌。應(yīng)用蓋樓式展示形式的典型例子就是某易新聞——用戶可以按照樓層依次向下瀏覽，雖然看得時(shí)候比較清晰，但因“蓋樓式”的結(jié)構(gòu)比較復(fù)雜、所占面積較大，在移動(dòng)端上屏效會(huì)相對(duì)較低，可能影響用戶的閱讀效率。

▲“看評(píng)論”評(píng)論區(qū)展示形式之“蓋樓式”

（4）引用

從名稱上大家可以理解，用戶B回復(fù)用戶A時(shí)，B的回復(fù)內(nèi)容下方會(huì)顯示A的評(píng)論內(nèi)容?！耙檬健钡暮锰帟r(shí)便于讀者理解，但劣勢(shì)同“蓋樓式”一樣，移動(dòng)端使用該樣式會(huì)影響用戶的瀏覽效率，在PC端上會(huì)更為適用。

▲“看評(píng)論”評(píng)論區(qū)展示形式之“引用式”

主題式、平鋪式、蓋樓式、引用式..展示形式雖然多樣，大家可以根據(jù)自己產(chǎn)品的需要來(lái)選取合適的展示形式。

3. “看評(píng)論”之評(píng)論排序方式

不僅評(píng)論區(qū)的展示形式有四種，評(píng)論內(nèi)容的展示順序也有四種排序方式：

（1）評(píng)論按時(shí)間正序排列

按時(shí)間正序排列意為內(nèi)容按照發(fā)布的時(shí)間由舊至新排列，其排列方式符合用戶閱讀時(shí)的邏輯順序，用戶可以通過(guò)時(shí)間線將大家的討論內(nèi)容串聯(lián)起來(lái)，方便閱讀、減輕了認(rèn)知負(fù)擔(dān)。

（2）評(píng)論按時(shí)間倒序排列

與評(píng)論正序排列相反，倒序排列會(huì)將新評(píng)論在上、舊評(píng)論在下，更適用于強(qiáng)調(diào)內(nèi)容時(shí)效性的場(chǎng)景中。

（3）評(píng)論按熱門(mén)程度排列

大家?？吹降摹熬x評(píng)論”便是按照熱門(mén)程度排列的——后臺(tái)會(huì)計(jì)算出各條評(píng)論的“熱度值”，衡量維度通常有評(píng)論的點(diǎn)贊數(shù)、回復(fù)數(shù)、或負(fù)反饋數(shù)等等。為了避免馬太效應(yīng)，熱門(mén)程度的排列公式中通常也引入“時(shí)間衰退因子”，這對(duì)強(qiáng)調(diào)時(shí)效性的資訊app來(lái)說(shuō)比較重要。

（4）評(píng)論按混合式排列

混合式排列方式簡(jiǎn)單理解可為上方評(píng)論“按熱度”——展示精選評(píng)論，下方評(píng)論“按時(shí)間”——展示最新評(píng)論；這樣排序使得用戶既可以感受到熱評(píng)的趣味性、專業(yè)性，也更有意愿來(lái)參與大家的討論。

——看完了這些，你的產(chǎn)品評(píng)論區(qū)適合什么樣的排序方式呢？

4. “看評(píng)論”之正文、評(píng)論區(qū)的查看方式分析

講完了用戶“在評(píng)論區(qū)看到了什么”，那我們就再來(lái)講講用戶“怎么看去看評(píng)論”。首先是正文與評(píng)論區(qū)間的跳轉(zhuǎn)，通常會(huì)用以下四種方式來(lái)實(shí)現(xiàn)：

▲“看評(píng)論”正文、評(píng)論區(qū)的跳轉(zhuǎn)方式

（1）錨點(diǎn)定位、跳轉(zhuǎn)至評(píng)論區(qū)

這種是比較常見(jiàn)的交互形式——點(diǎn)擊評(píng)論icon后，通過(guò)頁(yè)面的錨點(diǎn)定位直接跳轉(zhuǎn)至評(píng)論區(qū)；待用戶瀏覽完評(píng)論區(qū)內(nèi)容之后，用戶可再次點(diǎn)擊評(píng)論icon返回至正文位置；

（2）上滑頁(yè)面，評(píng)論區(qū)跟隨在正文后

很多資訊app的評(píng)論區(qū)都跟隨在正文尾部，在瀏覽完正文后，用戶通過(guò)上滑頁(yè)面便可以看到評(píng)論。對(duì)于用戶的行為路徑來(lái)說(shuō)，這種方式是符合用戶先閱讀、后查看討論、參與討論的邏輯，但為了營(yíng)收與數(shù)據(jù)，正文、評(píng)論區(qū)之間會(huì)夾雜了相關(guān)推薦與廣告，會(huì)對(duì)用戶的正常瀏覽造成一定的干擾；

（3）手勢(shì)滑動(dòng)、進(jìn)入下一級(jí)頁(yè)面查看評(píng)論

以某訊新聞為例，用戶可以左滑直接進(jìn)入評(píng)論頁(yè)瀏覽；手勢(shì)交互的好處是便于用戶操作，但也具有一些的小“缺點(diǎn)”，如滑動(dòng)進(jìn)入下一級(jí)頁(yè)面的操作是否符合用戶認(rèn)知、滑動(dòng)手勢(shì)是否在所有場(chǎng)景下都會(huì)適用等；

（4）評(píng)論內(nèi)容以彈層形式呈現(xiàn)

在用戶點(diǎn)擊評(píng)論icon后，評(píng)論區(qū)以彈層的形式彈出——這是大多數(shù)視頻類app常選用的，也是本次vivo瀏覽器評(píng)論區(qū)優(yōu)化所采取的跳轉(zhuǎn)形式。從手機(jī)屏幕的空間利用上，“正文內(nèi)容”處于二維的x、y軸上，評(píng)論區(qū)以彈層的形式在z軸空間里交互，提高了手機(jī)屏效；從用戶操作上來(lái)說(shuō)，彈層的使用提高了操作效率，同時(shí)因彈層交互的普適性，用戶的學(xué)習(xí)成本也較低；從內(nèi)容的底層邏輯上來(lái)講，評(píng)論屬于資訊詳情的一部分，用戶通過(guò)彈層來(lái)進(jìn)行資訊的延伸閱讀，這種分層交互也符合詳情頁(yè)瀏覽的邏輯結(jié)構(gòu)。

▲“看評(píng)論”·評(píng)論區(qū)以彈層形式呈現(xiàn)

5. “看評(píng)論”之評(píng)論、回復(fù)間的跳轉(zhuǎn)方式分析

對(duì)于“用戶怎么看評(píng)論”，除了“怎么查看評(píng)論區(qū)”，也還有“怎么查看評(píng)論與回復(fù)”；后者的查看方式整理后大概有下圖三種：

• 在原位置直接展開(kāi)更多“回復(fù)”：以美版某乎為例，其優(yōu)勢(shì)是操作成本、瀏覽成本都很小，弊端則是會(huì)影響到用戶閱讀下一條評(píng)論（屏幕滑動(dòng)距離更長(zhǎng)）；
• 在下一級(jí)頁(yè)面里再展示完整的“回復(fù)”；
• 以彈層的形式來(lái)進(jìn)行“回復(fù)”的完整呈現(xiàn)。

▲“看評(píng)論”·評(píng)論區(qū)展示形式之評(píng)論、回復(fù)間的跳轉(zhuǎn)方式

根據(jù)以上五小考量點(diǎn)，大家可以根據(jù)自家的評(píng)論區(qū)特點(diǎn)及現(xiàn)狀，選取合適的方式方法去做用戶看評(píng)論的設(shè)計(jì)體驗(yàn)。

三、“評(píng)論互動(dòng)”時(shí)的三個(gè)設(shè)計(jì)考量點(diǎn)

當(dāng)完成了“看評(píng)論”的設(shè)計(jì)分析，那下一步就需要進(jìn)行評(píng)論區(qū)互動(dòng)時(shí)的設(shè)計(jì)分析啦。大家可以通過(guò)以下三點(diǎn)來(lái)考量：功能支持、手勢(shì)操作、評(píng)論輸入。“功能支持”以大家各自的支持產(chǎn)品功能為準(zhǔn)，本文就不再贅述；這里就為大家簡(jiǎn)單講解一下后兩點(diǎn)的分析。

1. “評(píng)論互動(dòng)”之手勢(shì)操作分析

下面是對(duì)在不同類型的產(chǎn)品中，用戶進(jìn)行單擊、雙擊、長(zhǎng)按、滑動(dòng)等手勢(shì)操作反饋的整理：

（1）單擊評(píng)論區(qū)內(nèi)容

不同類型的產(chǎn)品，單擊評(píng)論區(qū)內(nèi)容的操作反饋會(huì)有所不同。如社交類app，除了“評(píng)論”，也有“轉(zhuǎn)發(fā)”等其他與之同等重要的功能，所以點(diǎn)擊該類型產(chǎn)品的評(píng)論區(qū)內(nèi)容時(shí)，會(huì)彈出“更多功能”彈層以讓用戶選擇功能的使用；對(duì)于新聞資訊類app，評(píng)論區(qū)是用戶交流想法的地方，所以當(dāng)用戶點(diǎn)擊評(píng)論內(nèi)容，彈出輸入框和鍵盤(pán)會(huì)更符合當(dāng)下的用戶預(yù)期，便于用戶的操作使用。

（2）雙擊評(píng)論區(qū)內(nèi)容

在社交appIG中，雙擊點(diǎn)贊的交互手勢(shì)在產(chǎn)品的各個(gè)模塊是通用的，用戶自然而然就會(huì)有評(píng)論區(qū)“雙擊可贊“的認(rèn)知。然而其他產(chǎn)品中，“雙擊贊”可能并不具有通用性。如果大家要在自己產(chǎn)品中選用雙擊手勢(shì)的交互，可能要注意引導(dǎo)用戶學(xué)習(xí)噢~

▲“評(píng)論互動(dòng)”·手勢(shì)操作分析之“單雙擊評(píng)論”

（3）長(zhǎng)按評(píng)論區(qū)內(nèi)容

通常情況下，長(zhǎng)按是去使用評(píng)論區(qū)的更多功能。如下圖，用戶長(zhǎng)按評(píng)論區(qū)，可以進(jìn)行復(fù)制、分享、負(fù)反饋、翻譯等操作，以滿足用戶在評(píng)論區(qū)的期望型功能的使用。

▲“評(píng)論互動(dòng)”手勢(shì)操作分析之“長(zhǎng)按評(píng)論”

2. “評(píng)論互動(dòng)”之評(píng)論輸入分析

發(fā)評(píng)論路徑分為了輸入的“前、中、后“三階段，大家設(shè)計(jì)時(shí)需注意以下三點(diǎn)：

▲“評(píng)論互動(dòng)”·評(píng)論輸入之三階段

• 輸入前告知：評(píng)論框里的默認(rèn)文案可以起到引導(dǎo)用戶評(píng)論、提示評(píng)論用語(yǔ)等的作用。如“說(shuō)點(diǎn)什么吧”，可以促使用戶去發(fā)表看法；如“有愛(ài)評(píng)論，說(shuō)點(diǎn)兒好聽(tīng)的~”，可以側(cè)面提示用戶要文明評(píng)論等。大家可以結(jié)合自身的產(chǎn)品調(diào)性、設(shè)計(jì)目標(biāo)，選擇適合自己的文案風(fēng)格。
• 輸入時(shí)協(xié)同：評(píng)論輸入時(shí)，設(shè)計(jì)師需要考慮到不同場(chǎng)景下用戶的評(píng)論訴求，提供合適的功能以提升用戶的操作效率、使用體驗(yàn)。如團(tuán)購(gòu)app發(fā)評(píng)論時(shí)，輸入框會(huì)提供“環(huán)境”、“服務(wù)”、“菜品”等標(biāo)簽，既降低了用戶評(píng)論過(guò)程中的難度，也使得評(píng)論多維度、更豐富。同時(shí)，評(píng)論輸入時(shí)大家也要注意異常場(chǎng)景下的防錯(cuò)設(shè)計(jì)，比方說(shuō)誤操作、鍵盤(pán)收起時(shí)，用戶的編輯記錄要幫他留下來(lái)喔。
• 輸入后反饋：發(fā)送評(píng)論后，產(chǎn)品需要給予用戶明確的反饋結(jié)果，常見(jiàn)的有Toast反饋、評(píng)論區(qū)跳轉(zhuǎn)定位等。大家注意啦，做評(píng)論區(qū)跳轉(zhuǎn)定位時(shí)要給文本背景一個(gè)顏色變化的提示噢，避免用戶在茫茫字海中迷失～

四、總結(jié)

以上內(nèi)容就是評(píng)論區(qū)設(shè)計(jì)時(shí)需要掌握的對(duì)產(chǎn)品類別、看評(píng)論、評(píng)論互動(dòng)三大維度、總計(jì)九個(gè)設(shè)計(jì)考量點(diǎn)的闡述。設(shè)計(jì)師們可以酌情參考文章內(nèi)容，通過(guò)在各個(gè)考量點(diǎn)的打磨、創(chuàng)新、組合，打造適合自家產(chǎn)品的“最佳評(píng)論區(qū)設(shè)計(jì)”。