編輯導語：自古評論出人才，而評論區，不但能拉近作者和用戶間的距離，還能增強用戶黏性。那評論區如何設計，才能讓用戶喜歡呢？本篇文章中，作者分享了自己的設計思路和方法，感興趣的小夥伴不妨來看看。

評論區是一個神奇的地方，它可以拉近用戶間的關系，也能增強用戶與産品的聯系。

那麼好的評論區該如何設計？本篇文章将通過三個維度、九個考量點對評論區的設計進行拆解。

評論區設計的三個維度&十個考量點

一、從産品維度定義評論區類别

當拿到構建評論區的需求時，别着急出方案，先看看自己的産品是什麼類型、适合什麼樣的評論區；

公衆号的評論是被作者選擇性地“曬”出，生鮮超市類app的評論區是隻能看不能回；

産品類型不同、其評論區類别也不一樣。

這裡有三種評論區類型供大家選擇：

從産品維度看評論類别

1. 單向評論區

單向評論偏向于讓用戶發表自己的觀點，重點在評論内容本身的浏覽上，用戶與用戶之間不可互動。

如應用商店、外賣app的内容詳情頁中，評論内容是用戶後續行為：下載應用、下單外賣的影響因子之一。

2. 雙向評論區

雙向評論多應用于作者與用戶之間的留言互動中。

如公衆号的文章留言區，用戶發表觀點、作者可選擇性地進行回複。

雙向評論更強調作者、讀者之間的關系，整個評論區（留言區）的互動性不強；

3. 多向評論區

多向評論區顧名思義，用戶可以在評論區發表自己的看法、也可與他人進行交流互動，這在社交app上、新聞資訊app等較為常見；

設計師需要根據自己的産品特性，在設計之前，先來選取最适合的評論區類型。

二、“看評論”時的五個設計考量點

在确定了評論區類别之後，就可以去設計用戶“看評論”的體驗了。

這裡可以通過以下五個考量點來分析：

1. “用戶看到了什麼”——關系着評論區内容元素、展示形式、排序方式的呈現；
2. “用戶怎麼看到的”——同正文與評論區間跳轉方式、以及一級二級評論的跳轉方式有關。

“看評論”時的五個設計考量點

1. “看評論”之内容元素

評論區内容元素主要分為兩部分，評論區入口 信息展示：

1. 評論區入口——通常是評論icon、評論量數字、“評論“二字說明，設計師按照産品的調性直接設計即可；
2. 評論區信息展示——分為說明類信息（e.g.評論内容）和互動類信息（e.g.點贊、回複)。

設計時需注意各類信息展示的位置，以确保信息看起來動線流暢、用戶操作起來移動距離最小。

“看評論”·評論區内容元素之信息展示

2. “看評論”之評論展示形式

app評論區常用的大緻有四類展示形式——主題式、平鋪式、蓋樓式、引用式，這些“XX式”是什麼意思，又适合在什麼場景下用呢？

（1）主題式

如下圖，用戶對正文内容發表的一級評論在上，他人的回複則折疊在下方。

因為一級評論通常以熱度的形式排列，所以“主題式”可使優質評論獲得更多的曝光，更容易吸引其他用戶查看、并參與讨論中去。

“看評論”·評論區展示形式之 “主題式”

（2）平鋪式

對于“平鋪式”的展示形式來說，評論和評論回複都處于同一個層級上，視覺上沒有明顯的層級區分；

以朋友圈為例，在熟人社交圈子中，大家評論回複的層級是相同的，朋友圈的用戶可以通過時間的先後順序直接浏覽；

舊版某乎的精選評論頁也為“平鋪式結構”，當用戶對某條精選評論感興趣、進去詳情頁浏覽時，隻要從上往上依次閱讀即可。

“看評論”·評論區展示形式之 “平鋪式”

（3）蓋樓式

如同字面意思，評論區用戶之前的互動内容像在蓋樓一樣，一層一層向下堆砌。

應用蓋樓式展示形式的典型例子就是某易新聞——用戶可以按照樓層依次向下浏覽。

雖然看得時候比較清晰，但因“蓋樓式”的結構比較複雜、所占面積較大，在移動端上屏效會相對較低，可能影響用戶的閱讀效率；

“看評論”·評論區展示形式之“蓋樓式”

（4）引用式

從名稱上大家可以理解，用戶B回複用戶A時，B的回複内容下方會顯示A的評論内容。

“引用式”的好處時便于讀者理解，但劣勢同“蓋樓式”一樣，移動端使用該樣式會影響用戶的浏覽效率，在PC端上會更為适用；

“看評論”·評論區展示形式之“引用式”

主題式、平鋪式、蓋樓式、引用式..展示形式雖然多樣，大家可以根據自己産品的需要來選取合适的展示形式。

3. “看評論”之評論排序方式

不僅評論區的展示形式有四種，評論内容的展示順序也有四種排序方式：

（1）評論按時間正序排列

按時間正序排列意為内容按照發布的時間由舊至新排列，其排列方式符合用戶閱讀時的邏輯順序，用戶可以通過時間線将大家的讨論内容串聯起來，方便閱讀、減輕了認知負擔；

（2）評論按時間倒序排列

與評論正序排列相反，倒序排列會将新評論在上、舊評論在下，更适用于強調内容時效性的場景中；

（3）評論按熱門程度排列

大家常看到的“精選評論”便是按照熱門程度排列的——後台會計算出各條評論的“熱度值”，衡量維度通常有評論的點贊數、回複數、或負反饋數等等。

為了避免馬太效應，熱門程度的排列公式中通常也引入“時間衰退因子”，這對強調時效性的資訊app來說比較重要；

（4）評論按混合式排列

混合式排列方式簡單理解可為上方評論“按熱度”——展示精選評論，下方評論“按時間”——展示最新評論；

這樣排序使得用戶既可以感受到熱評的趣味性、專業性，也更有意願來參與大家的讨論。

看完了這些，你的産品評論區适合什麼樣的排序方式呢？

4. “看評論”之正文、評論區的查看方式分析

講完了用戶“在評論區看到了什麼”，那我們就再來講講用戶“怎麼看去看評論”。

首先是正文與評論區間的跳轉，通常會用以下四種方式來實現：

“看評論”·正文、評論區的跳轉方式

（1）錨點定位、跳轉至評論區

這種是比較常見的交互形式——點擊評論icon後，通過頁面的錨點定位直接跳轉至評論區；

待用戶浏覽完評論區内容之後，用戶可再次點擊評論icon返回至正文位置。

（2）上滑頁面，評論區跟随在正文後

很多資訊app的評論區都跟随在正文尾部，在浏覽完正文後，用戶通過上滑頁面便可以看到評論。

對于用戶的行為路徑來說，這種方式是符合用戶先閱讀、後查看讨論、參與讨論的邏輯。

但為了營收與數據，正文、評論區之間會夾雜了相關推薦與廣告，會對用戶的正常浏覽造成一定的幹擾。

（3）手勢滑動、進入下一級頁面查看評論

以某訊新聞為例，用戶可以左滑直接進入評論頁浏覽；

手勢交互的好處是便于用戶操作，但也具有一些的小“缺點”。

如滑動進入下一級頁面的操作是否符合用戶認知、滑動手勢是否在所有場景下都會适用等。

評論内容以彈層形式呈現：在用戶點擊評論icon後，評論區以彈層的形式彈出。

這是大多數視頻類app常選用的，也是本次vivo浏覽器評論區優化所采取的跳轉形式。

從手機屏幕的空間利用上，“正文内容”處于二維的x、y軸上，評論區以彈層的形式在z軸空間裡交互，提高了手機屏效。

從用戶操作上來說，彈層的使用提高了操作效率，同時因彈層交互的普适性，用戶的學習成本也較低；

從内容的底層邏輯上來講，評論屬于資訊詳情的一部分，用戶通過彈層來進行資訊的延伸閱讀，這種分層交互也符合詳情頁浏覽的邏輯結構。

“看評論”·評論區以彈層形式呈現

5. “看評論”之評論、回複間的跳轉方式分析

對于“用戶怎麼看評論”，除了“怎麼查看評論區”，也還有“怎麼查看評論與回複”；後者的查看方式整理後大概有下圖三種：

在原位置直接展開更多“回複”：以美版某乎為例，其優勢是操作成本、浏覽成本都很小，弊端則是會影響到用戶閱讀下一條評論（屏幕滑動距離更長）；

在下一級頁面裡再展示完整的“回複”，以彈層的形式來進行“回複”的完整呈現。

“看評論”·評論區展示形式之評論、回複間的跳轉方式

根據以上五小考量點，大家可以根據自家的評論區特點及現狀，選取合适的方式方法去做用戶看評論的設計體驗。

三、“評論互動”時的三個設計考量點

當完成了“看評論”的設計分析，那下一步就需要進行評論區互動時的設計分析啦。

大家可以通過以下三點來考量：功能支持、手勢操作、評論輸入。

“功能支持”以大家各自的支持産品功能為準，本文就不再贅述；這裡就為大家簡單講解一下後兩點的分析。

1. “評論互動”之手勢操作分析

下面是對在不同類型的産品中，用戶進行單擊、雙擊、長按、滑動等手勢操作反饋的整理：

（1）單擊評論區内容

不同類型的産品，單擊評論區内容的操作反饋會有所不同。

如社交類app，除了“評論”，也有“轉發”等其他與之同等重要的功能。

所以點擊該類型産品的評論區内容時，會彈出“更多功能”彈層以讓用戶選擇功能的使用；

對于新聞資訊類app，評論區是用戶交流想法的地方，所以當用戶點擊評論内容，彈出輸入框和鍵盤會更符合當下的用戶預期，便于用戶的操作使用。

（2）雙擊評論區内容

在社交appIG中，雙擊點贊的交互手勢在産品的各個模塊是通用的，用戶自然而然就會有評論區“雙擊可贊“的認知。

然而其他産品中，“雙擊贊”可能并不具有通用性。

如果大家要在自己産品中選用雙擊手勢的交互，可能要注意引導用戶學習噢~

“評論互動”·手勢操作分析之“單雙擊評論”

（3）長按評論區内容

通常情況下，長按是去使用評論區的更多功能。

如下圖，用戶長按評論區，可以進行複制、分享、負反饋、翻譯等操作，以滿足用戶在評論區的期望型功能的使用。

“評論互動”·手勢操作分析之“長按評論”

2. “評論互動”之評論輸入分析

發評論路徑分為了輸入的“前、中、後“三階段，大家設計時需注意以下三點：

“評論互動”·評論輸入之三階段

（1）輸入前告知

評論框裡的默認文案可以起到引導用戶評論、提示評論用語等的作用。

如“說點什麼吧”，可以促使用戶去發表看法；

如“有愛評論，說點兒好聽的~”，可以側面提示用戶要文明評論等。

大家可以結合自身的産品調性、設計目标，選擇适合自己的文案風格；

（2）輸入時協同

評論輸入時，設計師需要考慮到不同場景下用戶的評論訴求，提供合适的功能以提升用戶的操作效率、使用體驗。

如團購app發評論時，輸入框會提供“環境”、“服務”、“菜品”等标簽，既降低了用戶評論過程中的難度，也使得評論多維度、更豐富。

同時，評論輸入時大家也要注意異常場景下的防錯設計，比方說誤操作、鍵盤收起時，用戶的編輯記錄要幫他留下來喔；

（3）輸入後反饋

發送評論後，産品需要給予用戶明确的反饋結果，常見的有Toast反饋、評論區跳轉定位等。

大家注意啦，做評論區跳轉定位時要給文本背景一個顔色變化的提示噢，避免用戶在茫茫字海中迷失～

四、總結

以上内容就是評論區設計時需要掌握的對産品類别、看評論、評論互動三大維度、總計九個設計考量點的闡述。

設計師們可以酌情參考文章内容，通過在各個考量點的打磨、創新、組合，打造适合自家産品的“最佳評論區設計”。

作者：姚姚姚阿姚，公衆号：VMIC UED

本文由＠VMIC UED 原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部