前言

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

評(píng)論區(qū)設(shè)計(jì)的三個(gè)維度&十個(gè)考量點(diǎn)

從產(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)用商店、外賣 app 的內(nèi)容詳情頁中，評(píng)論內(nèi)容是用戶后續(xù)行為——下載應(yīng)用、下單外賣的影響因子之一；

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 等較為常見；

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

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

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

1. ?“用戶看到了什么” ——關(guān)系著評(píng)論區(qū)內(nèi)容元素、展示形式、排序方式的呈現(xiàn)；
2. ?“用戶怎么看到的”——同正文與評(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)論“二字說明，設(shè)計(jì)師按照產(chǎn)品的調(diào)性直接設(shè)計(jì)即可；

評(píng)論區(qū)信息展示——分為說明類信息（e.g.評(píng)論內(nèi)容）和互動(dòng)類信息（e.g.點(diǎn)贊、回復(fù))；設(shè)計(jì)時(shí)需注意各類信息展示的位置，以確保信息看起來動(dòng)線流暢、用戶操作起來移動(dòng)距離最小。

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

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

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

• 主題式：

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

• 平鋪式：

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

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

• 蓋樓式：

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

• 引用式：

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

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

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

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

• 評(píng)論按時(shí)間正序排列：

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

• 評(píng)論按時(shí)間倒序排列：

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

• 評(píng)論按熱門程度排列：

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

• 評(píng)論按混合式排列：

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

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

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

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

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

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

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

• 上滑頁面，評(píng)論區(qū)跟隨在正文后：

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

• 手勢(shì)滑動(dòng)、進(jìn)入下一級(jí)頁面查看評(píng)論：

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

• 評(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ī)屏效；從用戶操作上來說，彈層的使用提高了操作效率，同時(shí)因彈層交互的普適性，用戶的學(xué)習(xí)成本也較低；從內(nèi)容的底層邏輯上來講，評(píng)論屬于資訊詳情的一部分，用戶通過彈層來進(jìn)行資訊的延伸閱讀，這種分層交互也符合詳情頁瀏覽的邏輯結(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ù)”；后者的查看方式整理后大概有下圖三種：

1）在原位置直接展開更多“回復(fù)”：以美版某乎為例，其優(yōu)勢(shì)是操作成本、瀏覽成本都很小，弊端則是會(huì)影響到用戶閱讀下一條評(píng)論（屏幕滑動(dòng)距離更長(zhǎng)）；

2）在下一級(jí)頁面里再展示完整的“回復(fù)”；

3）以彈層的形式來進(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ì)分析啦。大家可以通過以下三點(diǎn)來考量：功能支持、手勢(shì)操作、評(píng)論輸入?！肮δ苤С帧币源蠹腋髯缘闹С之a(chǎn)品功能為準(zhǔn)，本文就不再贅述；這里就為大家簡(jiǎn)單講解一下后兩點(diǎn)的分析。

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

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

• 單擊評(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)容，彈出輸入框和鍵盤會(huì)更符合當(dāng)下的用戶預(yù)期，便于用戶的操作使用；

• 雙擊評(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í)噢~

• 長(zhǎng)按評(píng)論區(qū)內(nèi)容：

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

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)論用語等的作用。如“說點(diǎn)什么吧”，可以促使用戶去發(fā)表看法；如“有愛評(píng)論，說點(diǎn)兒好聽的~"，可以側(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)購 app 發(fā)評(píng)論時(shí)，輸入框會(huì)提供“環(huán)境”、“服務(wù)”、“菜品”等標(biāo)簽，既降低了用戶評(píng)論過程中的難度，也使得評(píng)論多維度、更豐富。

同時(shí)，評(píng)論輸入時(shí)大家也要注意異常場(chǎng)景下的防錯(cuò)設(shè)計(jì)，比方說誤操作、鍵盤收起時(shí)，用戶的編輯記錄要幫他留下來喔；

• 輸入后反饋：

發(fā)送評(píng)論后，產(chǎn)品需要給予用戶明確的反饋結(jié)果，常見的有 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)容，通過在各個(gè)考量點(diǎn)的打磨、創(chuàng)新、組合，打造適合自家產(chǎn)品的“最佳評(píng)論區(qū)設(shè)計(jì)”。

歡迎關(guān)注作者微信公眾號(hào)：「VMIC UED」