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

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

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

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

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

簡(jiǎn)單復(fù)習(xí)一下這5個(gè)層次：

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

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

利用用戶(hù)體驗(yàn)5個(gè)層次提出引導(dǎo)性問(wèn)題

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

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

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

二. 范圍層：用戶(hù)有何需求？為什么要評(píng)論？

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

用戶(hù)為什么要寫(xiě)評(píng)論？總的來(lái)說(shuō)，縱觀(guān)市面主流app以及個(gè)人體會(huì)，用戶(hù)寫(xiě)評(píng)論的動(dòng)機(jī)可分為三大類(lèi)：溝通感情、表達(dá)見(jiàn)解、求助。而用戶(hù)為什么要看評(píng)論？其動(dòng)機(jī)與寫(xiě)評(píng)論非常不同，頻率也高得多，可分為四大類(lèi)：依靠評(píng)論做決策、尋找答案、尋找共鳴、查看反饋（比如朋友圈）。

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

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

在我們了解了用戶(hù)評(píng)論的諸多動(dòng)機(jī)，也就是需求來(lái)源之后，如何把零散的需求可視化？魔力就在這一步。

我們還是從“寫(xiě)評(píng)論”和“看評(píng)論”兩方面來(lái)分析。

3.1 寫(xiě)評(píng)論

這個(gè)動(dòng)作可輕可重，輕到點(diǎn)擊圖標(biāo)，重到長(zhǎng)篇大論。觸發(fā)評(píng)論的入口該如何設(shè)計(jì)？

3.1.1 點(diǎn)擊圖標(biāo)

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

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

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

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

3.1.2 編輯文字

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

（1）溝通感情

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

社交中的評(píng)論入口

（2）表達(dá)見(jiàn)解

可分為依次遞進(jìn)的三個(gè)層次，一般見(jiàn)解、有態(tài)度的評(píng)判、深度探討。

1）一般見(jiàn)解

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

一般見(jiàn)解的評(píng)論入口

一些實(shí)際參考：

實(shí)例1

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

通常在消費(fèi)，或體驗(yàn)過(guò)后進(jìn)行評(píng)價(jià)。特征：非即時(shí)性——需要體驗(yàn)的時(shí)間，例如網(wǎng)購(gòu)、打車(chē)、看電影。所以在用戶(hù)未體驗(yàn)時(shí)，不應(yīng)提供入口，識(shí)別用戶(hù)體驗(yàn)完畢的時(shí)間點(diǎn)并將用戶(hù)完成的訂單收集起來(lái)，再提供評(píng)價(jià)入口，如下圖：

有態(tài)度的評(píng)價(jià)入口

一些實(shí)際參考：

實(shí)例2

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

3）話(huà)題探討

深度討論一個(gè)問(wèn)題，用戶(hù)的表達(dá)欲比較強(qiáng)烈，對(duì)反饋期望很高。特征：篇幅可能較長(zhǎng)、有即時(shí)性。對(duì)于這種評(píng)論，應(yīng)提供寫(xiě)作氛圍濃厚的獨(dú)立頁(yè)面，如下圖：

話(huà)題探討評(píng)論入口

一些實(shí)際參考：

實(shí)例3

（3）求助

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

實(shí)例4-好好住，網(wǎng)友詢(xún)問(wèn)家具鏈接

3.2 看評(píng)論

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

3.2.1 依靠評(píng)論做決策

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

幫助決策的評(píng)論展示方式

一些實(shí)際參考：

實(shí)例5

可以把這種展示方式稱(chēng)為：半沉浸式。

3.2.2 尋找答案

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

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

一些實(shí)際參考：

實(shí)例6

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

3.2.3 尋找共鳴

影評(píng)、書(shū)評(píng)、樂(lè)評(píng)，都可以幫助看客們找到共鳴。

（1）樂(lè)評(píng)

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

實(shí)例7

可把這種展示方式稱(chēng)為：沉浸式

（2） 影評(píng)、書(shū)評(píng)

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

影評(píng)、書(shū)評(píng)展示方式

對(duì)于長(zhǎng)評(píng)和短評(píng)本身來(lái)說(shuō)，也相當(dāng)于是半沉浸式的展現(xiàn)方式。

3.2.4 查看反饋

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

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

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

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

4.1 依靠評(píng)論做決策

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

4.2 尋找答案

答案分為兩種，一種有確定的對(duì)與錯(cuò)，而另一種則是仁者見(jiàn)仁，智者見(jiàn)智。而用戶(hù)在刷這兩種答案時(shí)，行為稍有不同。

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

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

4.3 尋找共鳴

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

4.4 查看回復(fù)

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

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

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

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

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

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

5.1 風(fēng)格&色彩

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

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

5.2 字體

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

字體混搭的效果

所以通常只需要一種字體貫穿全文，重點(diǎn)強(qiáng)調(diào)的部分通過(guò)放大字號(hào)或加粗來(lái)處理。

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

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

5.3 圖標(biāo)

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

5.3.1 語(yǔ)義

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

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

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

這是“下載”的意思嗎？

（2）相似的語(yǔ)義需要更深層的分析

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

5.3.2 尺寸

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

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

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

（2）尺寸不宜過(guò)多

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

實(shí)例8

（3）注意視差平衡

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

視差平衡

5.3.3 樣式

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

（1）正負(fù)形一致

正形圖標(biāo)，是以“面“繪制的圖標(biāo)，面積占比大，視覺(jué)強(qiáng)度也大。負(fù)形圖標(biāo)，以“線(xiàn)”繪制的圖標(biāo)，簡(jiǎn)潔抽象，理解的門(mén)檻稍高，視覺(jué)強(qiáng)度小?？捎脕?lái)表達(dá)選中/未選中的狀態(tài)，如實(shí)例9，但在同一狀態(tài)下，不建議混合使用，如實(shí)例10：

實(shí)例9-選中為正形，未選中為負(fù)形

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

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

細(xì)節(jié)的處理方式，包括圓角與直角的設(shè)置，線(xiàn)條的粗細(xì)是否均勻，圖標(biāo)上的斷點(diǎn)處理等，例如下面的圖中，每一組圖標(biāo)都是因?yàn)橛邢嗨频募?xì)節(jié)處理，整體看起來(lái)有著非常強(qiáng)的一致性。

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

結(jié)語(yǔ)

看到這里的都是真愛(ài)。之所以會(huì)有這篇文章，是因?yàn)橛幸惶焱聠?wèn)我的一個(gè)問(wèn)題：

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

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

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

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

作者：Dannii（楊玲蘊(yùn)）

來(lái)源：https://www.jianshu.com/p/419df3865524

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

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