評論區(qū)設(shè)計的三個維度、九個考量點
評論區(qū)是一個神奇的地方,它可以拉近用戶間的關(guān)系,也能增強用戶與產(chǎn)品的聯(lián)系。那么好的評論區(qū)該如何設(shè)計?本篇文章將通過三個維度、九個考量點對評論區(qū)的設(shè)計進行拆解,希望能對大家有所幫助。
一、從產(chǎn)品維度定義評論區(qū)類別
當拿到構(gòu)建評論區(qū)的需求時,別著急出方案,先看看自己的產(chǎn)品是什么類型、適合什么樣的評論區(qū);公眾號的評論是被作者選擇性地“曬”出,生鮮超市類app的評論區(qū)是只能看不能回——產(chǎn)品類型不同、其評論區(qū)類別也不一樣,這里有三種評論區(qū)類型供大家選擇:
▲從產(chǎn)品維度看評論類別
1. 單向評論區(qū)
單向評論偏向于讓用戶發(fā)表自己的觀點,重點在評論內(nèi)容本身的瀏覽上,用戶與用戶之間不可互動。如應(yīng)用商店、外賣app的內(nèi)容詳情頁中,評論內(nèi)容是用戶后續(xù)行為——下載應(yīng)用、下單外賣的影響因子之一。
2. 雙向評論區(qū)
雙向評論多應(yīng)用于作者與用戶之間的留言互動中。如公眾號的文章留言區(qū),用戶發(fā)表觀點、作者可選擇性地進行回復。雙向評論更強調(diào)作者、讀者之間的關(guān)系,整個評論區(qū)(留言區(qū))的互動性不強。
3. 多向評論區(qū)
多向評論區(qū)顧名思義,用戶可以在評論區(qū)發(fā)表自己的看法、也可與他人進行交流互動,這在社交app上、新聞資訊app等較為常見。
設(shè)計師需要根據(jù)自己的產(chǎn)品特性,在設(shè)計之前,先來選取最適合的評論區(qū)類型。
二、“看評論”時的五個設(shè)計考量點
在確定了評論區(qū)類別之后,就可以去設(shè)計用戶“看評論”的體驗了;這里可以通過以下五個考量點來分析:
- “用戶看到了什么” ——關(guān)系著評論區(qū)內(nèi)容元素、展示形式、排序方式的呈現(xiàn)。
- “用戶怎么看到的”——同正文與評論區(qū)間跳轉(zhuǎn)方式、以及一級二級評論的跳轉(zhuǎn)方式有關(guān)。
▲“看評論”時的五個設(shè)計考量點
1. “看評論”之內(nèi)容元素
評論區(qū)內(nèi)容元素主要分為兩部分,評論區(qū)入口+信息展示:
- 評論區(qū)入口——通常是評論icon、評論量數(shù)字、“評論“二字說明,設(shè)計師按照產(chǎn)品的調(diào)性直接設(shè)計即可。
- 評論區(qū)信息展示——分為說明類信息(e.g.評論內(nèi)容)和互動類信息(e.g.點贊、回復);設(shè)計時需注意各類信息展示的位置,以確保信息看起來動線流暢、用戶操作起來移動距離最小。
▲“看評論”·評論區(qū)內(nèi)容元素之信息展示
2. “看評論”之評論展示形式
app評論區(qū)常用的大致有四類展示形式——主題式、平鋪式、蓋樓式、引用式,這些“XX式”是什么意思,又適合在什么場景下用呢?
(1)主題式
如下圖,用戶對正文內(nèi)容發(fā)表的一級評論在上,他人的回復則折疊在下方;因為一級評論通常以熱度的形式排列,所以“主題式”可使優(yōu)質(zhì)評論獲得更多的曝光,更容易吸引其他用戶查看、并參與討論中去;
▲“看評論”·評論區(qū)展示形式之 “主題式”
(2)平鋪式
對于“平鋪式”的展示形式來說,評論和評論回復都處于同一個層級上,視覺上沒有明顯的層級區(qū)分。
以朋友圈為例,在熟人社交圈子中,大家評論回復的層級是相同的,朋友圈的用戶可以通過時間的先后順序直接瀏覽;舊版某乎的精選評論頁也為“平鋪式結(jié)構(gòu)”,當用戶對某條精選評論感興趣、進去詳情頁瀏覽時,只要從上往上依次閱讀即可;
▲“看評論”·評論區(qū)展示形式之 “平鋪式”
(3)蓋樓式
如同字面意思,評論區(qū)用戶之前的互動內(nèi)容像在蓋樓一樣,一層一層向下堆砌。應(yīng)用蓋樓式展示形式的典型例子就是某易新聞——用戶可以按照樓層依次向下瀏覽,雖然看得時候比較清晰,但因“蓋樓式”的結(jié)構(gòu)比較復雜、所占面積較大,在移動端上屏效會相對較低,可能影響用戶的閱讀效率。
▲“看評論”評論區(qū)展示形式之“蓋樓式”
(4)引用
從名稱上大家可以理解,用戶B回復用戶A時,B的回復內(nèi)容下方會顯示A的評論內(nèi)容?!耙檬健钡暮锰帟r便于讀者理解,但劣勢同“蓋樓式”一樣,移動端使用該樣式會影響用戶的瀏覽效率,在PC端上會更為適用。
▲“看評論”評論區(qū)展示形式之“引用式”
主題式、平鋪式、蓋樓式、引用式..展示形式雖然多樣,大家可以根據(jù)自己產(chǎn)品的需要來選取合適的展示形式。
3. “看評論”之評論排序方式
不僅評論區(qū)的展示形式有四種,評論內(nèi)容的展示順序也有四種排序方式:
(1)評論按時間正序排列
按時間正序排列意為內(nèi)容按照發(fā)布的時間由舊至新排列,其排列方式符合用戶閱讀時的邏輯順序,用戶可以通過時間線將大家的討論內(nèi)容串聯(lián)起來,方便閱讀、減輕了認知負擔。
(2)評論按時間倒序排列
與評論正序排列相反,倒序排列會將新評論在上、舊評論在下,更適用于強調(diào)內(nèi)容時效性的場景中。
(3)評論按熱門程度排列
大家??吹降摹熬x評論”便是按照熱門程度排列的——后臺會計算出各條評論的“熱度值”,衡量維度通常有評論的點贊數(shù)、回復數(shù)、或負反饋數(shù)等等。為了避免馬太效應(yīng),熱門程度的排列公式中通常也引入“時間衰退因子”,這對強調(diào)時效性的資訊app來說比較重要。
(4)評論按混合式排列
混合式排列方式簡單理解可為上方評論“按熱度”——展示精選評論,下方評論“按時間”——展示最新評論;這樣排序使得用戶既可以感受到熱評的趣味性、專業(yè)性,也更有意愿來參與大家的討論。
——看完了這些,你的產(chǎn)品評論區(qū)適合什么樣的排序方式呢?
4. “看評論”之正文、評論區(qū)的查看方式分析
講完了用戶“在評論區(qū)看到了什么”,那我們就再來講講用戶“怎么看去看評論”。首先是正文與評論區(qū)間的跳轉(zhuǎn),通常會用以下四種方式來實現(xiàn):
▲“看評論”正文、評論區(qū)的跳轉(zhuǎn)方式
(1)錨點定位、跳轉(zhuǎn)至評論區(qū)
這種是比較常見的交互形式——點擊評論icon后,通過頁面的錨點定位直接跳轉(zhuǎn)至評論區(qū);待用戶瀏覽完評論區(qū)內(nèi)容之后,用戶可再次點擊評論icon返回至正文位置;
(2)上滑頁面,評論區(qū)跟隨在正文后
很多資訊app的評論區(qū)都跟隨在正文尾部,在瀏覽完正文后,用戶通過上滑頁面便可以看到評論。對于用戶的行為路徑來說,這種方式是符合用戶先閱讀、后查看討論、參與討論的邏輯,但為了營收與數(shù)據(jù),正文、評論區(qū)之間會夾雜了相關(guān)推薦與廣告,會對用戶的正常瀏覽造成一定的干擾;
(3)手勢滑動、進入下一級頁面查看評論
以某訊新聞為例,用戶可以左滑直接進入評論頁瀏覽;手勢交互的好處是便于用戶操作,但也具有一些的小“缺點”,如滑動進入下一級頁面的操作是否符合用戶認知、滑動手勢是否在所有場景下都會適用等;
(4)評論內(nèi)容以彈層形式呈現(xiàn)
在用戶點擊評論icon后,評論區(qū)以彈層的形式彈出——這是大多數(shù)視頻類app常選用的,也是本次vivo瀏覽器評論區(qū)優(yōu)化所采取的跳轉(zhuǎn)形式。從手機屏幕的空間利用上,“正文內(nèi)容”處于二維的x、y軸上,評論區(qū)以彈層的形式在z軸空間里交互,提高了手機屏效;從用戶操作上來說,彈層的使用提高了操作效率,同時因彈層交互的普適性,用戶的學習成本也較低;從內(nèi)容的底層邏輯上來講,評論屬于資訊詳情的一部分,用戶通過彈層來進行資訊的延伸閱讀,這種分層交互也符合詳情頁瀏覽的邏輯結(jié)構(gòu)。
▲“看評論”·評論區(qū)以彈層形式呈現(xiàn)
5. “看評論”之評論、回復間的跳轉(zhuǎn)方式分析
對于“用戶怎么看評論”,除了“怎么查看評論區(qū)”,也還有“怎么查看評論與回復”;后者的查看方式整理后大概有下圖三種:
- 在原位置直接展開更多“回復”:以美版某乎為例,其優(yōu)勢是操作成本、瀏覽成本都很小,弊端則是會影響到用戶閱讀下一條評論(屏幕滑動距離更長);
- 在下一級頁面里再展示完整的“回復”;
- 以彈層的形式來進行“回復”的完整呈現(xiàn)。
▲“看評論”·評論區(qū)展示形式之評論、回復間的跳轉(zhuǎn)方式
根據(jù)以上五小考量點,大家可以根據(jù)自家的評論區(qū)特點及現(xiàn)狀,選取合適的方式方法去做用戶看評論的設(shè)計體驗。
三、“評論互動”時的三個設(shè)計考量點
當完成了“看評論”的設(shè)計分析,那下一步就需要進行評論區(qū)互動時的設(shè)計分析啦。大家可以通過以下三點來考量:功能支持、手勢操作、評論輸入。“功能支持”以大家各自的支持產(chǎn)品功能為準,本文就不再贅述;這里就為大家簡單講解一下后兩點的分析。
1. “評論互動”之手勢操作分析
下面是對在不同類型的產(chǎn)品中,用戶進行單擊、雙擊、長按、滑動等手勢操作反饋的整理:
(1)單擊評論區(qū)內(nèi)容
不同類型的產(chǎn)品,單擊評論區(qū)內(nèi)容的操作反饋會有所不同。如社交類app,除了“評論”,也有“轉(zhuǎn)發(fā)”等其他與之同等重要的功能,所以點擊該類型產(chǎn)品的評論區(qū)內(nèi)容時,會彈出“更多功能”彈層以讓用戶選擇功能的使用;對于新聞資訊類app,評論區(qū)是用戶交流想法的地方,所以當用戶點擊評論內(nèi)容,彈出輸入框和鍵盤會更符合當下的用戶預期,便于用戶的操作使用。
(2)雙擊評論區(qū)內(nèi)容
在社交appIG中,雙擊點贊的交互手勢在產(chǎn)品的各個模塊是通用的,用戶自然而然就會有評論區(qū)“雙擊可贊“的認知。然而其他產(chǎn)品中,“雙擊贊”可能并不具有通用性。如果大家要在自己產(chǎn)品中選用雙擊手勢的交互,可能要注意引導用戶學習噢~
▲“評論互動”·手勢操作分析之“單雙擊評論”
(3)長按評論區(qū)內(nèi)容
通常情況下,長按是去使用評論區(qū)的更多功能。如下圖,用戶長按評論區(qū),可以進行復制、分享、負反饋、翻譯等操作,以滿足用戶在評論區(qū)的期望型功能的使用。
▲“評論互動”手勢操作分析之“長按評論”
2. “評論互動”之評論輸入分析
發(fā)評論路徑分為了輸入的“前、中、后“三階段,大家設(shè)計時需注意以下三點:
▲“評論互動”·評論輸入之三階段
- 輸入前告知:評論框里的默認文案可以起到引導用戶評論、提示評論用語等的作用。如“說點什么吧”,可以促使用戶去發(fā)表看法;如“有愛評論,說點兒好聽的~”,可以側(cè)面提示用戶要文明評論等。大家可以結(jié)合自身的產(chǎn)品調(diào)性、設(shè)計目標,選擇適合自己的文案風格。
- 輸入時協(xié)同:評論輸入時,設(shè)計師需要考慮到不同場景下用戶的評論訴求,提供合適的功能以提升用戶的操作效率、使用體驗。如團購app發(fā)評論時,輸入框會提供“環(huán)境”、“服務(wù)”、“菜品”等標簽,既降低了用戶評論過程中的難度,也使得評論多維度、更豐富。同時,評論輸入時大家也要注意異常場景下的防錯設(shè)計,比方說誤操作、鍵盤收起時,用戶的編輯記錄要幫他留下來喔。
- 輸入后反饋:發(fā)送評論后,產(chǎn)品需要給予用戶明確的反饋結(jié)果,常見的有Toast反饋、評論區(qū)跳轉(zhuǎn)定位等。大家注意啦,做評論區(qū)跳轉(zhuǎn)定位時要給文本背景一個顏色變化的提示噢,避免用戶在茫茫字海中迷失~
四、總結(jié)
以上內(nèi)容就是評論區(qū)設(shè)計時需要掌握的對產(chǎn)品類別、看評論、評論互動三大維度、總計九個設(shè)計考量點的闡述。設(shè)計師們可以酌情參考文章內(nèi)容,通過在各個考量點的打磨、創(chuàng)新、組合,打造適合自家產(chǎn)品的“最佳評論區(qū)設(shè)計”。
作者:姚姚姚阿姚;編輯:姚馨怡
來源公眾號:VMIC UED(ID:gh_32761b1686b7),vivo互聯(lián)網(wǎng)UED——為美好而設(shè)計。
本文由人人都是產(chǎn)品經(jīng)理合作媒體 @VMIC UED 授權(quán)發(fā)布,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于 CC0 協(xié)議。
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
優(yōu)秀哦。