UI設(shè)計(jì)中移動端的評論區(qū)該如何設(shè)計(jì)

　　作為一個設(shè)計(jì)師，我們不能只看到這些表面的東西，需要去分析一下它們背后的邏輯，知道它們有哪些不同之處，又是基于什么原因而做得不一樣。網(wǎng)易云音樂近幾年一直深受大家喜歡，一個重要原因就是它走心的評論;視頻網(wǎng)站的彈幕文化，也都是基于這一原因而出現(xiàn)的。
 

　　所以，今天AAA教育郭老師就和大家分享一下移動端評論區(qū)的設(shè)計(jì)樣式及原理。
 

　　01
 

　　評論區(qū)樣式
 

　　...
 

　　1. 回復(fù)別人時(shí)，內(nèi)容下方帶上原帖內(nèi)容
 

　　如下圖網(wǎng)易云音樂，回復(fù)別人的時(shí)候，在帖子下方會帶上原帖，也就是回復(fù)的那個人發(fā)的文字。

 

　　優(yōu)點(diǎn)
 

　　a.能讓人一眼就看到回復(fù)的是哪條帖子，信息層級明顯、容易區(qū)分;
 

　　b.活躍了評論區(qū)的氛圍，每一條回復(fù)都會新增一條評論動態(tài)，給人一種很多人在用的感覺，適合產(chǎn)品早期用戶體量小的時(shí)候。
 

　　缺點(diǎn)
 

　　a.當(dāng)回復(fù)信息較多時(shí)，每次都附帶一條原帖內(nèi)容，沒有前因后果，摸不著頭腦，對話感不強(qiáng);
 

　　b.不適合帶圖片的評論，圖片所占位置太大，一屏內(nèi)顯示不了幾條評論。而且當(dāng)多人回復(fù)同一條評論的時(shí)候，圖片重復(fù)次數(shù)多。
 

　　2. 回復(fù)別人時(shí)，回復(fù)內(nèi)容在原文的下方
 

　　社交類、服務(wù)類的產(chǎn)品較常使用這種方式，即回復(fù)別人的帖子，回復(fù)內(nèi)容在原文的下方。例如視頻網(wǎng)站這一類產(chǎn)品用戶體量較大，回復(fù)同一條帖子的幾率較大，每一條回復(fù)都帶上原帖，顯然不合理。
 

　　當(dāng)同一條內(nèi)容評論人數(shù)過多，沒有空間展示所有的回復(fù)內(nèi)容，可以只展示幾條回復(fù)內(nèi)容，再用其他的方式如“查看全部n條回復(fù)”的鏈接，讓用戶知道還有其他的評論，誘導(dǎo)他們點(diǎn)擊進(jìn)入下一頁查看所有評論。

 

　　優(yōu)點(diǎn)
 

　　a.用戶之間互動強(qiáng)，就像在現(xiàn)實(shí)生活中小組討論一樣，大家都爭對同一個主題，發(fā)表自己的言論，帶入感強(qiáng);
 

　　b.信息層級明確，針對同一條內(nèi)容的回復(fù)都在一個頁面同一個層級內(nèi)。
 

　　缺點(diǎn)
 

　　a.需要點(diǎn)擊跳轉(zhuǎn)到新的頁面，才能看到針對這條評論的所有回復(fù)，流程了多了一步;
 

　　b.每條評論都展示幾條回復(fù)的話，占據(jù)了太多的屏幕空間。
 

　　3. 只展示評論數(shù)量，回復(fù)需要點(diǎn)擊進(jìn)入詳情頁
 

　　現(xiàn)在很多App都開始用這種方式，只在外面展示回復(fù)、點(diǎn)贊、轉(zhuǎn)發(fā)的數(shù)量，想要回復(fù)或者查看其他人回復(fù)的內(nèi)容的時(shí)候，需要點(diǎn)擊跳轉(zhuǎn)到評論詳情頁。這就相當(dāng)于我們?nèi)ヒ粋€陌生的地方逛一樣，都是自己不知道的店鋪，那我們只能通過店里的人流量(點(diǎn)贊數(shù))、大家的推薦指數(shù)(轉(zhuǎn)發(fā)數(shù))、店鋪裝修風(fēng)格(觸動人的文案或圖片)等，來選擇進(jìn)入哪家店鋪。

 

　　優(yōu)點(diǎn)
 

　　a.節(jié)省了頁面空間，同樣大小的區(qū)域能夠展示更多的內(nèi)容;
 

　　b.給用戶選擇的余地，他只需要點(diǎn)自己感興趣的內(nèi)容去回復(fù)，同時(shí)和所有對這條評論感興趣的人一起溝通交流，而不是置身于一個大雜燴的場景之中。
 

　　缺點(diǎn)
 

　　a.操作比較復(fù)雜，需要點(diǎn)擊進(jìn)入新的頁面，多了一步頁面操作，且引導(dǎo)性不夠;
 

　　b.當(dāng)單條評論不夠有吸引力的時(shí)候，用戶沒有點(diǎn)擊欲望，長此以往，每條評論的回復(fù)太少，會打擊用戶的積極性，后續(xù)可能就不想?yún)⑴c了。
 

　　4. 特定情況才能評論
 

　　以淘寶為例，用戶購買之后才有評價(jià)的資格，否則只能回復(fù)別人的評論。買過才有發(fā)言權(quán)，這能在一定程度上維持評論區(qū)的和諧，不至于出現(xiàn)一片倒的水軍。針對一些惡意差評，商家的回復(fù)信息可以直接顯示在下方，信息展示明確，在一定程度上能緩解用戶的反感。

 

　　02
 

　　評論的排列方式
 

　　...
 

　　評論的排序方式也有很多種，目前最主流的排序方式就是按照評論、點(diǎn)贊的數(shù)量依次排序，或者是按照時(shí)間，最早回復(fù)的在下面，最晚回復(fù)的在最上面。
 

　　1. 按照點(diǎn)贊數(shù)多少排序
 

　　按照點(diǎn)贊數(shù)的多少排序，當(dāng)點(diǎn)贊數(shù)一樣的時(shí)候，按時(shí)間倒序排列。

 

　　這樣的話能優(yōu)先看到熱門的評論，看到別人都在說什么。而且一旦自己的評論被人點(diǎn)贊上了排行榜前幾名，能給用戶帶來極大的成就感，激勵著他繼續(xù)使用這個產(chǎn)品。但是這種方式有一個弊端，當(dāng)自己回復(fù)別人的帖子后，按照點(diǎn)贊數(shù)排序的話，自己的評論會被掩蓋在熱門評論下，很難找到自己評論的內(nèi)容，會讓用戶以為操作沒有成功。
 

　　2. 按照評論時(shí)間正序排列
 

　　這種方式比較符合正常人的思維邏輯以及視覺流程，從上到下，先來的先顯示，后來的后顯示。

 

　　但是卻不太適合移動端的體驗(yàn)，當(dāng)用戶一打開最先看到的是時(shí)間最久的評論時(shí)，會覺得這個App信息更新得太不及時(shí)，跟不上潮流。而且一些優(yōu)質(zhì)的評論會因?yàn)榘l(fā)布時(shí)間晚排在很下面，從而被用戶忽視。
 

　　3. 按照評論時(shí)間倒序排列
 

　　這種方式下，用戶自己回復(fù)的內(nèi)容立馬就能看得到，操作有反饋，體驗(yàn)較好，但相應(yīng)的優(yōu)質(zhì)評論容易被時(shí)間淹沒。

 

　　4.熱評和時(shí)間排序組合起來使用
 

　　知乎改版后就結(jié)合了點(diǎn)贊數(shù)和時(shí)間正序這兩種方式，在最上方顯示十幾條精彩評論，按點(diǎn)贊數(shù)排序;下方按照時(shí)間倒序排序，在一定程度上滿足了用戶既想看到熱門的評論內(nèi)容，又想實(shí)時(shí)看到自己發(fā)布的內(nèi)容的心理。

 

　　不過這種方式仍有弊端，熱門評論較多，十幾條評論需要劃過好幾屏，對我這種很少看知乎的用戶來說，聽到好文章難得去評論一下，結(jié)果半天沒找到自己的評論在哪里。試了好幾次，劃了好幾屏才看到自己的回復(fù)內(nèi)容安靜地躺在最下面的最新評論里。
 

　　5.用戶根據(jù)需要選擇排列方式
 

　　網(wǎng)易云則單獨(dú)進(jìn)行了分類，用戶可以根據(jù)自己需要選擇評論排列方式，默認(rèn)是推薦。

 

　　03
 

　　劃重點(diǎn)
 

　　...
 

　　1.當(dāng)你的產(chǎn)品評論時(shí)效性較強(qiáng)的時(shí)候，評論排序方式可以選擇時(shí)間倒序，最新的評論顯示在最上方。如視頻類App，回復(fù)內(nèi)容大多類似，所以按照時(shí)間來排序最好不過了。
 

　　2.當(dāng)你的產(chǎn)品是希望用內(nèi)容來吸引用戶，那你可以選擇按點(diǎn)贊數(shù)排序，點(diǎn)贊最多的顯示在最上方，如新聞類App。
 

　　3.至于回復(fù)別人評論的時(shí)候怎么顯示，可以根據(jù)自己產(chǎn)品的調(diào)性而定，當(dāng)前期產(chǎn)品活躍度不夠，評論較少的時(shí)候，可以采取每條回復(fù)都帶上原帖，這樣會顯得評論區(qū)的內(nèi)容多，氛圍活躍一些;當(dāng)產(chǎn)品評論數(shù)量多的時(shí)候，可以把針對一條評論的所有回復(fù)內(nèi)容放置到一個新的頁面，這樣用戶在看別人的評論以及回復(fù)的時(shí)候有針對性，也有前因后果，能夠知道誰回復(fù)了誰，誰又評論了誰。
 

　　因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。