產(chǎn)品的視覺(jué)體驗(yàn)本身要有意義，而不能僅僅是單純的好看、漂亮。這里的意義，其中很重要的一點(diǎn)就是體現(xiàn)出層次來(lái)。專業(yè)人士與非專業(yè)的區(qū)別，就在于看到一個(gè)產(chǎn)品時(shí)，不僅僅能看到外在的表象，更能看到表象之中的肌理，看到層次。

界面的視覺(jué)設(shè)計(jì)需要有意義，形式追隨功能

每一處設(shè)計(jì)都應(yīng)該有原因。

內(nèi)容與功能優(yōu)先級(jí)的高低，同樣要體現(xiàn)在產(chǎn)品界面的視覺(jué)上。如果某個(gè)元素從內(nèi)容和功能上來(lái)說(shuō)優(yōu)先級(jí)最高，那么對(duì)應(yīng)的，在界面上一眼看過(guò)去，它也應(yīng)該是最被突出和強(qiáng)調(diào)的。如果不是，那設(shè)計(jì)一定出了問(wèn)題。

對(duì)于通常我們看到的二維界面，不僅僅存在X軸和Y軸，實(shí)際上還隱藏著Z軸。Z軸有兩層含義，一方面是純視覺(jué)層面的，如光影的變化等等，另一方面就是意義層面的，當(dāng)我們抽象掉顏色、形狀等等之后，應(yīng)該能夠看到信息內(nèi)容和功能的組織也有同樣對(duì)應(yīng)的層次。在做產(chǎn)品決策時(shí)，看到一個(gè)界面，需要跳出來(lái)在抽象的角度上，看看能否找到與之對(duì)應(yīng)的層次關(guān)系。

視覺(jué)設(shè)計(jì)的層次，要和內(nèi)容信息與功能的優(yōu)先級(jí)對(duì)應(yīng)起來(lái)

層次意味著有強(qiáng)有弱，有要強(qiáng)調(diào)的元素，就一定要有需要弱化的元素。突出一個(gè)事物最好的方式，是弱化周圍的事物，有主體有背景。聽(tīng)上去很簡(jiǎn)單，但是這往往是容易出問(wèn)題的地方，因?yàn)檎T惑太多了，哪個(gè)元素都想強(qiáng)調(diào)，哪個(gè)都舍不得放棄，最終就是所有的地方都在搶眼，就沒(méi)有地方能夠搶眼了。這樣的錯(cuò)誤發(fā)生在很多公司的產(chǎn)品當(dāng)中，特別是在沒(méi)有互聯(lián)網(wǎng)經(jīng)驗(yàn)、設(shè)計(jì)經(jīng)驗(yàn)，而又覺(jué)得自己有很多資源的公司里很常見(jiàn)。

層次也意味著分組和條理。類似或者相關(guān)的元素應(yīng)該放在一起，將分散的點(diǎn)變成面，再將面組合起來(lái)。設(shè)計(jì)有時(shí)像讀心術(shù)，你需要提前預(yù)測(cè)用戶會(huì)認(rèn)為哪些元素應(yīng)該在一起，就像日常生活中，你家里的藥品都放在一起，而工具則在另一個(gè)地方一樣。讓用戶先找到大類、大方向，再深入到下一個(gè)層次找到準(zhǔn)確的位置。

在寫(xiě)作中，有一個(gè)著名的金字塔原理，由麥肯錫的咨詢師巴巴拉·明托（Barbara Minto）發(fā)明，提倡按照讀者的閱讀習(xí)慣來(lái)組織文章，先由一個(gè)總的思想統(tǒng)領(lǐng)多組思想，然后依次往下，下面的每一層，都是對(duì)上面一層的解釋。這樣的方式用在商務(wù)寫(xiě)作中很有效。

在通過(guò)界面?zhèn)鬟_(dá)信息時(shí)，我們也是在「寫(xiě)作」，只是是以更豐富的形式。用戶進(jìn)入界面，應(yīng)該能夠迅速的抓住我們希望傳達(dá)的首要信息，然后，是再下一層的信息，如此等等。

前些年很多醫(yī)藥廣告都還在走報(bào)紙、雜志的渠道（真正的可信程度就不用說(shuō)了）。這些做營(yíng)銷的人，某種程度上也算是現(xiàn)在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)領(lǐng)域的「先行者」。例如下面這張圖：

• 文字有大小之分，大的文字用來(lái)顯示最頂層的信息，關(guān)鍵的信息；
• 使用不同灰度的顏色來(lái)區(qū)分重要性不同的文字。例如重要的文字，用黑色、粗體；相對(duì)不重要的文字，用灰色來(lái)使它淡下去；
• 使用區(qū)塊來(lái)劃分不同組別和層次的信息。

他們想必也會(huì)通過(guò)轉(zhuǎn)化率來(lái)優(yōu)化廣告方案和渠道投放吧。這不正是今天我們?cè)诨ヂ?lián)網(wǎng)產(chǎn)品領(lǐng)域工作的一部分么？

我們?cè)诳创a(chǎn)品的界面時(shí)，同樣要如此。

先確定信息的層次，哪些是重要的，哪些是次要的，哪些是要分在一組的。然后，根據(jù)信息的層次和重要性，決定如何運(yùn)用圖形、顏色、材質(zhì)等等來(lái)展現(xiàn)它們。

例如，粗體是用來(lái)強(qiáng)調(diào)文字的，但是我們不能把整頁(yè)的文字都加粗（的確曾經(jīng)有見(jiàn)過(guò)這么用的），那樣就相當(dāng)于什么都沒(méi)有加。使用灰色的文字，往往可以幫助區(qū)分出層級(jí)，讓用戶了解第一眼先看什么，然后再看什么。

進(jìn)入任何一個(gè)電商網(wǎng)站的詳情頁(yè)面，類似「立即購(gòu)買」「加入購(gòu)物車」一定是最突出的，一方面在這背后是因?yàn)樗麄儚墓δ芙嵌鹊膬?yōu)先級(jí)非常高，另一方面，為了突出它們，可以使用顏色來(lái)突出，也可以在周圍留白、弱化其它元素形成背景等等。

在進(jìn)入詳情頁(yè)面之前，內(nèi)容型的產(chǎn)品往往都有列表。在列表上，首先從信息層面要挑選哪些內(nèi)容應(yīng)該被顯示出來(lái)，只有在這個(gè)層次上對(duì)用戶做決策最有幫助的內(nèi)容才應(yīng)該放出來(lái)。然后，這些內(nèi)容就需要通過(guò)圖形化（例如評(píng)星）、顏色（色相，就是通常說(shuō)的各種色彩，或者明度、明暗）來(lái)區(qū)隔開(kāi)，確保用戶掃一眼就能抓到一個(gè)層面的信息，需要找尋相關(guān)信息時(shí)可以快速篩選和過(guò)濾。

人們認(rèn)知資源的稀缺性，使得我們必須注意產(chǎn)品界面中的層次，處理好表面下的和表面上的優(yōu)先級(jí)關(guān)系。界面設(shè)計(jì)并不僅僅是畫(huà)圖，本質(zhì)上即是藝術(shù)的，也是工程的。當(dāng)我們?cè)诳吹疆a(chǎn)品后臺(tái)數(shù)據(jù)的波動(dòng)時(shí)，一定不要忘記在產(chǎn)品的最前端呈現(xiàn)給用戶的層次。產(chǎn)品設(shè)計(jì)在相當(dāng)大的程度上是在探索和照顧用戶的認(rèn)知行為和認(rèn)知心理。

因此，看到一個(gè)產(chǎn)品時(shí)，我們要悄悄的默念：漂亮不僅僅是漂亮，背后要有意義，界面要有層次，視覺(jué)的層次要服務(wù)于內(nèi)容信息和功能的層次。

相關(guān)閱讀

產(chǎn)品設(shè)計(jì)的思考方式：優(yōu)先級(jí)（一）

#專欄作家#

馬力，最美應(yīng)用創(chuàng)始人&CEO，人人都是產(chǎn)品經(jīng)理專欄作家。擅長(zhǎng)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)、需求挖掘、流量和用戶體驗(yàn)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。