無論是設(shè)計一款產(chǎn)品還是一個功能，“用戶體驗的5個層面”都會貫穿始終，從產(chǎn)品的方向骨架開始，逐漸豐富完善，直到細枝末節(jié)的處理。

近些年， 無論是媒體、社交、電商、音樂、視頻，移動應(yīng)用的社交化越來越成熟，都在培養(yǎng)用戶間或強或弱的社交關(guān)系。各種應(yīng)用中的“評論”功能已成為其不可或缺的一部分。“評論”不再以用戶發(fā)表意見為唯一目的，還營造出了一種隱藏在屏幕背后的社群關(guān)系。在很多應(yīng)用中，依靠這種“四兩撥千斤”的社群關(guān)系，涌現(xiàn)出無限的產(chǎn)品智慧。

而在手機app使用頻率蓋過pc網(wǎng)頁的背景下，人們出于不同目的、處在不同場景、在有限尺寸的屏幕上經(jīng)歷著不同復(fù)雜度的評論活動，縱使是多樣性十足的一個動作，設(shè)計工作也并不是沒有方法可循，接下來我們就一起探討一下。

假設(shè)你在設(shè)計一款新的app，并且初步認為需要評論功能，如何進行設(shè)計思考呢？

無論是設(shè)計一款產(chǎn)品還是一個功能，“用戶體驗的5個層面”都會貫穿始終，從產(chǎn)品的方向骨架開始，逐漸豐富完善，直到細枝末節(jié)的處理。

簡單復(fù)習(xí)一下這5個層次：

• “戰(zhàn)略層”：五要素中最重要的一層，是用戶體驗的起點，戰(zhàn)略可以演變和改變，決定著整個產(chǎn)品的走向。
• “范圍層“：戰(zhàn)略層形象化的第一步。帶著經(jīng)營者和用戶兩方面的需求，就能弄清楚如何滿足戰(zhàn)略目標(biāo)，提供怎么樣的功能。
• “結(jié)構(gòu)層”：開啟交互設(shè)計的第一步，即信息架構(gòu)的設(shè)計。將零散的需求組合為一個整體，并合理展現(xiàn)出來。
• “框架層”：交互設(shè)計的第二步，在這一步會確定很詳細的界面布局，確定整個產(chǎn)品的上下文。
• “表現(xiàn)層“：視覺設(shè)計的過程，也是用戶首先會注意到的方面，是冰山的最上一角。界面中的配色和風(fēng)格，都在這一步完成。

這5個層次可以很好地引導(dǎo)設(shè)計思路，我們可以把“評論區(qū)的設(shè)計問題”單獨拿出來，利用這5層來提出相應(yīng)的引導(dǎo)性問題（請從下往上看）：

利用用戶體驗5個層次提出引導(dǎo)性問題

接下來我會逐層說明，但會著重講解與“交互設(shè)計”相關(guān)的兩層。

一. 戰(zhàn)略層：確定產(chǎn)品類型和目標(biāo)

在最初階段，需要首先確定產(chǎn)品的類型。常見的移動App類型如社交、電商、服務(wù)、自媒體、新聞、社群、音樂、視頻類。但隨著互聯(lián)網(wǎng)的發(fā)展，越來越多的app都在向多重類型發(fā)展。舉個栗子：小紅書的“社區(qū)＋電商”的特征，其優(yōu)勢很明顯，用戶的粘性大幅增加，這構(gòu)成了小紅書一個非常強大的壁壘。多重類型的出現(xiàn)，展示了產(chǎn)品更多的可能性，是做產(chǎn)品的一種智慧。而如何確定類型，取決于對產(chǎn)品目標(biāo)的設(shè)定——解決什么問題？給誰用？怎樣算成功？確定了產(chǎn)品類型后，就有了整體的大方向，后面的每一步都是基于戰(zhàn)略層的決定而發(fā)展。

二. 范圍層：用戶有何需求？為什么要評論？

有了產(chǎn)品的戰(zhàn)略目標(biāo)，就要開始思考，提供哪些功能去實現(xiàn)它？如果你想提供評論功能，首先需要思考用戶為什么要評論。我們從“寫評論”和“看評論”兩方面來分析。

用戶為什么要寫評論？總的來說，縱觀市面主流app以及個人體會，用戶寫評論的動機可分為三大類：溝通感情、表達見解、求助。而用戶為什么要看評論？其動機與寫評論非常不同，頻率也高得多，可分為四大類：依靠評論做決策、尋找答案、尋找共鳴、查看反饋（比如朋友圈）。

仔細分析用戶的動機，可以知道產(chǎn)品提供此功能的意義在何處。如果你的app經(jīng)過戰(zhàn)略層和范圍層的過濾，結(jié)論是不需要任何評論功能，那也是產(chǎn)品方向上相當(dāng)大的邁進。例如唯品會，在移動app端并不設(shè)有評論功能，原因在于它的快銷特征，當(dāng)用戶收貨后想要夸贊或吐槽時，相應(yīng)的產(chǎn)品可能已經(jīng)甩光，評論則失去了意義。

三. 結(jié)構(gòu)層：如果需要評論，采用什么樣的展現(xiàn)形式？

在我們了解了用戶評論的諸多動機，也就是需求來源之后，如何把零散的需求可視化？魔力就在這一步。

我們還是從“寫評論”和“看評論”兩方面來分析。

3.1 寫評論

這個動作可輕可重，輕到點擊圖標(biāo)，重到長篇大論。觸發(fā)評論的入口該如何設(shè)計？

3.1.1 點擊圖標(biāo)

社交中的贊，多媒體中的下載和分享，電商中的收藏，社群中的頂和踩，都能非常精準(zhǔn)地表達用戶的態(tài)度。如何取舍？

具有“評論”功能的常用圖標(biāo)

“贊”/“收藏”/“頂”/“下載”/“分享”——這五個動作都有表示喜歡和贊賞的意思。按程度來看，“贊”、“收藏”、“頂”的程度相似，在一個app中只需出現(xiàn)最貼近產(chǎn)品語義的那個；而“下載”和“分享”則表示更高階的喜歡，“下載”是想要長久保留一件東西的態(tài)度，而“分享”是把喜歡一件東西的心情宣揚出去，讓更多人喜歡，所以程度更強烈。以上幾個功能可以根據(jù)用戶的需求，酌情選擇。

“踩”——無論在電商，音樂視頻，社群，服務(wù)型app中，都有與“踩”語義相似的功能，例如淘寶中的“差評”，音樂app中的“不感興趣”，知乎中的“不同意”。而在社交app中，除了曾經(jīng)短暫出現(xiàn)于facebook中之外，現(xiàn)在已經(jīng)沒有實例。因此，在設(shè)計“踩”功能時需要慎重考慮用戶的玻璃心，如果你的app是社交類，尤其是強關(guān)系社交，則不建議使用。

3.1.2 編輯文字

前文中提出的用戶在寫評論時的三大動機：溝通感情、表達見解、求助，它們特征不同，這會導(dǎo)致評論的入口展現(xiàn)形式也不同。

（1）溝通感情

多出現(xiàn)在強關(guān)系社交app中，例如微信朋友圈。特征：很強的針對性、有即時性。所以寫評論的入口需要設(shè)置在每一個人的動態(tài)后，如下圖：

社交中的評論入口

（2）表達見解

可分為依次遞進的三個層次，一般見解、有態(tài)度的評判、深度探討。

1）一般見解

包括對自媒體、音樂、新聞等內(nèi)容的評價，對反饋期望不高。特征：簡潔快速、有即時性。所以入口需要設(shè)置在方便點擊且明顯的位置，考慮到拇指觸達最舒適的區(qū)域，可將輸入框放在頁面下方，如下圖：

一般見解的評論入口

一些實際參考：

實例1

2）有態(tài)度的評判

通常在消費，或體驗過后進行評價。特征：非即時性——需要體驗的時間，例如網(wǎng)購、打車、看電影。所以在用戶未體驗時，不應(yīng)提供入口，識別用戶體驗完畢的時間點并將用戶完成的訂單收集起來，再提供評價入口，如下圖：

有態(tài)度的評價入口

一些實際參考：

實例2

在消費類的參考實例中，有一個例外——大眾點評。由于它無法精確識別用戶是否到店，而自身又是點評類app，所以它的評價入口設(shè)在了通用位置。除此之外，另需注意此類評論的時效性，例如時隔一年后再來評價曾經(jīng)住過的酒店是否有意義？因此過了時效后，則不應(yīng)該允許用戶評論。

3）話題探討

深度討論一個問題，用戶的表達欲比較強烈，對反饋期望很高。特征：篇幅可能較長、有即時性。對于這種評論，應(yīng)提供寫作氛圍濃厚的獨立頁面，如下圖：

話題探討評論入口

一些實際參考：

實例3

（3）求助

在評論中提問，通常會得到其他人或樓主的解答。特征：簡潔快速、有即時性，與剛才講到的“一般見解”特征類似，所以表現(xiàn)形式也類似，在方便點擊且明顯的位置。實際參考：

實例4-好好住，網(wǎng)友詢問家具鏈接

3.2 看評論

上一層中，我們分析出用戶在看評論時的四大動機：依靠評論做決策、尋找答案、尋找共鳴、查看反饋。同樣需要依據(jù)它們的不同特征，設(shè)計不同的展現(xiàn)形式。

3.2.1 依靠評論做決策

用戶的消費決策通常需要基于其他人對商品的評價。特征：評論數(shù)量不斷增長、需要引導(dǎo)性入口、評論間無互動、有即時性。由于數(shù)量的增長，為了保持頁面篇幅穩(wěn)定，需要將評論隔離出來，建立新的頁面；但需要一個引導(dǎo)性入口，所以可放置熱門/最新評論在前一頁；評論間無互動，只需提供單純的評論列表，如下圖:

幫助決策的評論展示方式

一些實際參考：

實例5

可以把這種展示方式稱為：半沉浸式。

3.2.2 尋找答案

搜索問題，尋找自己想要的答案。特征：問題篇幅較短、評論間有互動、有即時性。由于問題簡練，頁面下方仍有很多空間，可以跟隨瀑布式評論；評論間的互動既可以用嵌套，也可以用跳轉(zhuǎn)的方式展示，選擇哪一種取決于評論內(nèi)容的篇幅長短，短評則可以用層層嵌套的方式，而如果產(chǎn)品性質(zhì)導(dǎo)致評論需要一定篇幅，則建議用跳轉(zhuǎn)方式，如下圖。

左：嵌套式，右：跳轉(zhuǎn)式

一些實際參考：

實例6

可把這種展示方式稱為：瀑布流式＋嵌套式/瀑布流式＋跳轉(zhuǎn)式

3.2.3 尋找共鳴

影評、書評、樂評，都可以幫助看客們找到共鳴。

（1）樂評

特征：評論篇幅較短、偶爾有互動、有即時性。音樂解放了用戶的眼睛，可以實時看評論，但播放頁面已無操作空間，所以需要提供獨立沉浸式頁面展示評論，互動的評論可以嵌套展示，如下圖：

實例7

可把這種展示方式稱為：沉浸式

（2） 影評、書評

特征：有長評與短評之分、評論間有互動、有即時性。在頁面中需要分出長評、短評區(qū)域，為避免兩種評論羅列使頁面過長，需將所有兩種評論分別隔離到新頁面；在新頁面中，由于長評論篇幅較長，利用列表管理時需截成統(tǒng)一篇幅，這導(dǎo)致完整的評論需再次被隔離到新頁面。因此短評需要兩個頁面，長評則需要三個頁面，如下圖。

影評、書評展示方式

對于長評和短評本身來說，也相當(dāng)于是半沉浸式的展現(xiàn)方式。

3.2.4 查看反饋

發(fā)表朋友圈或文章后，用戶通常會迫不及待地查看反饋。特征：評論數(shù)量有限、有互動性、即時性。由于評論與正文相關(guān)性極強，并且通常較為簡練，可使用瀑布流式的展現(xiàn)方式，可參照微信朋友圈。

以上針對“寫評論”與“看評論”時用戶的不同動機，推薦了相應(yīng)的界面展現(xiàn)方式。這些結(jié)論并非權(quán)威，但可以作為思考的切入點。完成這一步，評論區(qū)的展示用幾個界面，如何跳轉(zhuǎn)，便可以確定了。接下來的一步就要開始思考界面具體內(nèi)容。

四. 框架層：如何安排評論的順序才更有意義？

用戶寫完評論后都會不自覺地提出這樣一個問題：我的評論去哪了？而你的評論去哪，取決于評論如何排序。怎樣的排序才合理，針對不同的用戶需求，標(biāo)準(zhǔn)也是不同的。仍然根據(jù)用戶看評論的四個動機：依靠評論做決策、尋找答案、尋找共鳴、查看反饋來分析。

4.1 依靠評論做決策

通過上文了解到，此類需求多發(fā)生在電商、服務(wù)類app中。而商家給出的評論列表，與消費者真正期望看到的并不十分匹配。商家制定了一些規(guī)則來決定評論的順序，例如通過評論字?jǐn)?shù)、圖片數(shù)量、用戶信譽等級、被贊次數(shù)等將優(yōu)質(zhì)評論置頂，甚至花錢購買好評，導(dǎo)致首先進入用戶眼簾的一定是好評，而商品卻不一定真的這么好。因此需要幫助消費者看到更客觀的評價，例如：按時間排序，提供好評/中評/差評之間的比例，只看圖片等。

4.2 尋找答案

答案分為兩種，一種有確定的對與錯，而另一種則是仁者見仁，智者見智。而用戶在刷這兩種答案時，行為稍有不同。

大家一定都熟悉知乎上的那種問題：XXXXX是一種怎樣的體驗？這是典型的沒有所謂正確答案的問題，而在查看它的評論時，用戶往往希望刷到更多的不同觀點，甚至參與其中一起探討。無法用對與錯來評判的情況下，只能用質(zhì)量高與低來排列評論的順序，于是一個評論的字?jǐn)?shù)、被贊同與不贊同的比例、回復(fù)數(shù)、用戶本身的粉絲數(shù)、回復(fù)問題的次數(shù)等，就作為評判其質(zhì)量高低的因素。

而對于另一種只能用對與錯來回答的問題，用戶得到確定的答復(fù)之后，就會停止刷下去。所以對于這類評論，所謂的“熱度”并不一定起作用，而“準(zhǔn)確度”才是用戶真正需要的。例如在百度知道中經(jīng)常會看到，一個比較簡單的提問，一樓卻復(fù)制粘貼一些文章、論文來回答問題，但答案可以用簡潔的一句話概括。因此對于此類答案的排序，字?jǐn)?shù)、贊同數(shù)、回復(fù)數(shù)、賞金數(shù)往往不一定說明問題，而提問者經(jīng)過實際驗證過后，對答案的“認證標(biāo)志”可作為一個非常重要的指標(biāo)。

4.3 尋找共鳴

影評、書評、樂評中的評論通常百家爭鳴，用戶極容易陷入評論的漩渦。由于此類評論內(nèi)容靈活性太高，給沒有分類的海量評論排序似乎有失合理性。既然是“尋找共鳴”，用戶就一定是帶著自己的目的而來，所以在提供評論區(qū)域的同時，是否可以考慮加入一些輕度篩選，例如針對影視劇，可以允許用戶選擇集數(shù)或里面的主要角色，對于書籍，可提供章節(jié)的篩選，在每一個篩選條件下，再按照字?jǐn)?shù)、贊同數(shù)、回復(fù)數(shù)、用戶影響力與等級等條件來排序。

4.4 查看回復(fù)

這里出現(xiàn)的所有評論，都是針對用戶自己的，在這種場景下用戶的注意力更多是在每條回復(fù)的內(nèi)容上，對順序需求反而比較簡單，因此，保存完好的“上下文”，按時間線排序即可。

以上這些場景中，為了實現(xiàn)排序的規(guī)則，少不了廣大用戶的配合，例如：按照贊同、不贊同、回復(fù)數(shù)量等排序，需要真正有用戶去點贊、點踩、回復(fù)。所以需要在每一條評論上設(shè)置這些功能，如圖:

網(wǎng)易云音樂－輕互動決定著排序

以上是針對評論區(qū)的主體——評論內(nèi)容的順序所做的一番思考，同樣的方法可用在其他頁面。在已搭好的框架上添枝加葉，整個頁面的細節(jié)會逐漸清晰到每行文字、每個圖標(biāo)，接下來便可以進入最后一層的工作。

五. 表現(xiàn)層：如何設(shè)計圖標(biāo)、字體等元素才能保持界面和諧？

視覺設(shè)計的結(jié)果是用戶最先接觸到的對象，人們通常用“好看、丑、酷炫、清爽”等來描述自己對整個app的第一感覺。有些時候視覺設(shè)計的目的并不單純?yōu)榱嗣烙^和酷炫，比這些更重要的是如何保持app中所有界面的統(tǒng)一、和諧，而這些方面，并不只是視覺設(shè)計師才需要做。

5.1 風(fēng)格&色彩

app的整體風(fēng)格可以擬物化，也可以扁平化，色彩可以多碰撞，也可以很素雅，而選擇哪種風(fēng)格，取決于產(chǎn)品的性質(zhì)和用戶的使用場景及時長。

文章中提到的所有app幾乎都以功能性和文字信息為主，通常會持續(xù)使用一段時間（例如購物、刷知乎），用戶對于內(nèi)容本身的關(guān)注要高于界面元素的外觀，因此，文字內(nèi)容的呈現(xiàn)需要清晰，不宜使用過強的對比色，也不宜做得很難識別，保證可讀性的前提下，盡量保護用戶的眼睛，延緩疲勞，常用的背景色值為#eeeeee。

5.2 字體

為保持頁面和諧一致，一個app中不要出現(xiàn)兩種以上的字體，不明確而繁瑣的字體搭配會導(dǎo)致整個畫面失調(diào)，甚至聽到“有點LOW”這樣的評價。

字體混搭的效果

所以通常只需要一種字體貫穿全文，重點強調(diào)的部分通過放大字號或加粗來處理。

• iOS常選用的中文字體：蘋果簡體黑，方正蘭亭纖黑，冬青黑體，華文細黑；英文字體：Helvetica,
• 安卓常用的中文字體：Noto, 思源黑體；英文字體：Roboto。
• 常用字號：大標(biāo)題40-42px，正文字號32px，副文本26px，小字20px。
• 字體顏色：很少看到純黑純白的色彩搭配，通常正文會用低調(diào)而清晰的深灰色，顏色值＃333333；副文本可用稍微淺一點的顏色，顏色值＃666666；而輔助信息的小字則用淺灰，顏色值＃999999。

這樣字體便有了層次和節(jié)奏感，信息的重點也在無形中被突出。

5.3 圖標(biāo)

圖標(biāo)在任何界面設(shè)計中都不可避免，如何保證其易讀、一致、美觀？

5.3.1 語義

圖標(biāo)替代的是更為易懂的文字描述，所以對其語義傳達的準(zhǔn)確性要求很高。在設(shè)計圖標(biāo)時需注意：

（1）沿用主流設(shè)計

不適宜的創(chuàng)新會帶來更大的認知負荷。例如，你覺得這兩個圖標(biāo)可以準(zhǔn)確表達“下載”的意思嗎？

這是“下載”的意思嗎？

（2）相似的語義需要更深層的分析

同樣是表達“贊”，在社交app中與社群app中的語義也不同。例如，作為溝通情感的工具，你更喜歡“一顆心”，還是喜歡“大拇指？” 顯然，對于朋友間的贊美，“心”可以將喜歡傳達的更準(zhǔn)確，而對于知乎上的一個客觀答案，“大拇指”可以帶來更多的成就感。

5.3.2 尺寸

在圖標(biāo)的尺寸設(shè)計上，需注意：

（1）點擊區(qū)域足夠大

有限的手機屏幕上，點擊的舒適區(qū)更有限。人手指正常觸摸屏幕的最小點擊區(qū)域大概為44px * 44px，圖標(biāo)的設(shè)計尺寸可以依靠視覺效果來定，但在開發(fā)時都應(yīng)保證點擊范圍足夠大。

（2）尺寸不宜過多

雖然尺寸大小可以幫助用戶區(qū)分信息的重要程度，但過于零散的尺寸會讓界面顯得非常混亂。例如下面的對比：蝦米音樂的首頁有至少3種尺寸的圖標(biāo)，稍顯混亂，而網(wǎng)易云音樂首頁上的圖標(biāo)尺寸一致，界面看起來干凈統(tǒng)一。如下圖：

實例8

（3）注意視差平衡

同一個尺寸規(guī)格，形狀不同，會導(dǎo)致面積占比引起視差，同樣是撐滿邊框的圖標(biāo)，大小看起來卻不同，因此要在參考尺寸范圍內(nèi)進行調(diào)整。

視差平衡

5.3.3 樣式

圖標(biāo)樣式的一致性對整體頁面的影響也比較大，需要注意以下幾點：

（1）正負形一致

正形圖標(biāo)，是以“面“繪制的圖標(biāo)，面積占比大，視覺強度也大。負形圖標(biāo)，以“線”繪制的圖標(biāo)，簡潔抽象，理解的門檻稍高，視覺強度小?？捎脕肀磉_選中/未選中的狀態(tài)，如實例9，但在同一狀態(tài)下，不建議混合使用，如實例10：

實例9-選中為正形，未選中為負形

實例10-都是未選中，混合了兩種方式，不夠統(tǒng)一

（2）細節(jié)處理方式一致

細節(jié)的處理方式，包括圓角與直角的設(shè)置，線條的粗細是否均勻，圖標(biāo)上的斷點處理等，例如下面的圖中，每一組圖標(biāo)都是因為有相似的細節(jié)處理，整體看起來有著非常強的一致性。

圖標(biāo)來自于http://www.iconwerk.com/

結(jié)語

看到這里的都是真愛。之所以會有這篇文章，是因為有一天同事問我的一個問題：

“手機app設(shè)計有模板么？你看這樣一個app怎么布局？”

在討論到評論區(qū)時我也曾不停地打開各種app取經(jīng)，發(fā)現(xiàn)形式非常多樣，于是便開始思考為什么，最后就有了這篇“不成熟的小建議”，感謝這位同事妹子。

文中有遺漏或不準(zhǔn)確之處，歡迎重重地拍磚。

最后，感謝您的閱讀^_^

作者：Dannii（楊玲蘊）

來源：https://www.jianshu.com/p/419df3865524

本文由 @楊玲蘊 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議