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

app評(píng)論區(qū)常用的大致有四類(lèi)展示形式——主題式、平鋪式、蓋樓式、引用式，這些“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ū)分；

以朋友圈為例，在熟人社交圈子中，大家評(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）引用式

從名稱(chēng)上大家可以理解，用戶B回復(fù)用戶A時(shí)，B的回復(fù)內(nèi)容下方會(huì)顯示A的評(píng)論內(nèi)容。

“引用式”的好處時(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)程度排列

大家常看到的“精選評(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)的趣味性、專(zhuān)業(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ì)適用等。

評(píng)論內(nèi)容以彈層形式呈現(xiàn)：在用戶點(diǎn)擊評(píng)論icon后，評(píng)論區(qū)以彈層的形式彈出。

這是大多數(shù)視頻類(lèi)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ì)在不同類(lèi)型的產(chǎn)品中，用戶進(jìn)行單擊、雙擊、長(zhǎng)按、滑動(dòng)等手勢(shì)操作反饋的整理：

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

不同類(lèi)型的產(chǎn)品，單擊評(píng)論區(qū)內(nèi)容的操作反饋會(huì)有所不同。

如社交類(lèi)app，除了“評(píng)論”，也有“轉(zhuǎn)發(fā)”等其他與之同等重要的功能。

所以點(diǎn)擊該類(lèi)型產(chǎn)品的評(píng)論區(qū)內(nèi)容時(shí)，會(huì)彈出“更多功能”彈層以讓用戶選擇功能的使用；

對(duì)于新聞資訊類(lèi)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)論輸入之三階段

（1）輸入前告知

評(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)格；

（2）輸入時(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)喔；

（3）輸入后反饋

發(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)品類(lèi)別、看評(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ì)”。

作者：姚姚姚阿姚，公眾號(hào)：VMIC UED

本文由＠VMIC UED　原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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