產品的視覺體驗本身要有意義，而不能僅僅是單純的好看、漂亮。這里的意義，其中很重要的一點就是體現出層次來。專業人士與非專業的區別，就在于看到一個產品時，不僅僅能看到外在的表象，更能看到表象之中的肌理，看到層次。

界面的視覺設計需要有意義，形式追隨功能

每一處設計都應該有原因。

內容與功能優先級的高低，同樣要體現在產品界面的視覺上。如果某個元素從內容和功能上來說優先級最高，那么對應的，在界面上一眼看過去，它也應該是最被突出和強調的。如果不是，那設計一定出了問題。

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

視覺設計的層次，要和內容信息與功能的優先級對應起來

層次意味著有強有弱，有要強調的元素，就一定要有需要弱化的元素。突出一個事物最好的方式，是弱化周圍的事物，有主體有背景。聽上去很簡單，但是這往往是容易出問題的地方，因為誘惑太多了，哪個元素都想強調，哪個都舍不得放棄，最終就是所有的地方都在搶眼，就沒有地方能夠搶眼了。這樣的錯誤發生在很多公司的產品當中，特別是在沒有互聯網經驗、設計經驗，而又覺得自己有很多資源的公司里很常見。

層次也意味著分組和條理。類似或者相關的元素應該放在一起，將分散的點變成面，再將面組合起來。設計有時像讀心術，你需要提前預測用戶會認為哪些元素應該在一起，就像日常生活中，你家里的藥品都放在一起，而工具則在另一個地方一樣。讓用戶先找到大類、大方向，再深入到下一個層次找到準確的位置。

在寫作中，有一個著名的金字塔原理，由麥肯錫的咨詢師巴巴拉·明托（Barbara Minto）發明，提倡按照讀者的閱讀習慣來組織文章，先由一個總的思想統領多組思想，然后依次往下，下面的每一層，都是對上面一層的解釋。這樣的方式用在商務寫作中很有效。

在通過界面傳達信息時，我們也是在「寫作」，只是是以更豐富的形式。用戶進入界面，應該能夠迅速的抓住我們希望傳達的首要信息，然后，是再下一層的信息，如此等等。

前些年很多醫藥廣告都還在走報紙、雜志的渠道（真正的可信程度就不用說了）。這些做營銷的人，某種程度上也算是現在互聯網產品設計領域的「先行者」。例如下面這張圖：

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

他們想必也會通過轉化率來優化廣告方案和渠道投放吧。這不正是今天我們在互聯網產品領域工作的一部分么？

我們在看待產品的界面時，同樣要如此。

先確定信息的層次，哪些是重要的，哪些是次要的，哪些是要分在一組的。然后，根據信息的層次和重要性，決定如何運用圖形、顏色、材質等等來展現它們。

例如，粗體是用來強調文字的，但是我們不能把整頁的文字都加粗（的確曾經有見過這么用的），那樣就相當于什么都沒有加。使用灰色的文字，往往可以幫助區分出層級，讓用戶了解第一眼先看什么，然后再看什么。

進入任何一個電商網站的詳情頁面，類似「立即購買」「加入購物車」一定是最突出的，一方面在這背后是因為他們從功能角度的優先級非常高，另一方面，為了突出它們，可以使用顏色來突出，也可以在周圍留白、弱化其它元素形成背景等等。

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

人們認知資源的稀缺性，使得我們必須注意產品界面中的層次，處理好表面下的和表面上的優先級關系。界面設計并不僅僅是畫圖，本質上即是藝術的，也是工程的。當我們在看到產品后臺數據的波動時，一定不要忘記在產品的最前端呈現給用戶的層次。產品設計在相當大的程度上是在探索和照顧用戶的認知行為和認知心理。

因此，看到一個產品時，我們要悄悄的默念：漂亮不僅僅是漂亮，背后要有意義，界面要有層次，視覺的層次要服務于內容信息和功能的層次。

相關閱讀

產品設計的思考方式：優先級（一）

#專欄作家#

馬力，最美應用創始人&CEO，人人都是產品經理專欄作家。擅長互聯網產品設計、需求挖掘、流量和用戶體驗。

本文原創發布于人人都是產品經理。未經許可，禁止轉載。