產(chǎn)品的視覺體驗(yàn)本身要有意義，而不能僅僅是單純的好看没咙、漂亮猩谊。這里的意義，其中很重要的一點(diǎn)就是體現(xiàn)出層次來祭刚。專業(yè)人士與非專業(yè)的區(qū)別牌捷，就在于看到一個(gè)產(chǎn)品時(shí)，不僅僅能看到外在的表象涡驮，更能看到表象之中的肌理暗甥，看到層次。
#界面的視覺設(shè)計(jì)需要有意義捉捅，形式追隨功能撤防。每一處設(shè)計(jì)都應(yīng)該有原因。#
內(nèi)容與功能優(yōu)先級(jí)的高低棒口，同樣要體現(xiàn)在產(chǎn)品界面的視覺上寄月。如果某個(gè)元素從內(nèi)容和功能上來說優(yōu)先級(jí)最高，那么對(duì)應(yīng)的无牵，在界面上一眼看過去漾肮，它也應(yīng)該是最被突出和強(qiáng)調(diào)的。如果不是茎毁，那設(shè)計(jì)一定出了問題克懊。
對(duì)于通常我們看到的二維界面，不僅僅存在X軸和Y軸，實(shí)際上還隱藏著Z軸保檐。Z軸有兩層含義耕蝉，一方面是純視覺層面的，如光影的變化等等夜只，另一方面就是意義層面的垒在，當(dāng)我們抽象掉顏色、形狀等等之后扔亥，應(yīng)該能夠看到信息內(nèi)容和功能的組織也有同樣對(duì)應(yīng)的層次场躯。在做產(chǎn)品決策時(shí)，看到一個(gè)界面旅挤，需要跳出來在抽象的角度上踢关，看看能否找到與之對(duì)應(yīng)的層次關(guān)系。
#視覺設(shè)計(jì)的層次粘茄，要和內(nèi)容信息與功能的優(yōu)先級(jí)對(duì)應(yīng)起來#
層次意味著有強(qiáng)有弱签舞，有要強(qiáng)調(diào)的元素，就一定要有需要弱化的元素柒瓣。突出一個(gè)事物最好的方式儒搭，是弱化周圍的事物，有主體有背景芙贫。聽上去很簡(jiǎn)單搂鲫，但是這往往是容易出問題的地方，因?yàn)檎T惑太多了磺平，哪個(gè)元素都想強(qiáng)調(diào)魂仍，哪個(gè)都舍不得放棄，最終就是所有的地方都在搶眼拣挪，就沒有地方能夠搶眼了擦酌。這樣的錯(cuò)誤發(fā)生在很多公司的產(chǎn)品當(dāng)中，特別是在沒有互聯(lián)網(wǎng)經(jīng)驗(yàn)菠劝、設(shè)計(jì)經(jīng)驗(yàn)仑氛，而又覺得自己有很多資源的公司里很常見。
層次也意味著分組和條理闸英。類似或者相關(guān)的元素應(yīng)該放在一起，將分散的點(diǎn)變成面介袜，再將面組合起來捏萍。設(shè)計(jì)有時(shí)像讀心術(shù)合搅，你需要提前預(yù)測(cè)用戶會(huì)認(rèn)為哪些元素應(yīng)該在一起，就像日常生活中，你家里的藥品都放在一起局齿，而工具則在另一個(gè)地方一樣棚壁。讓用戶先找到大類、大方向，再深入到下一個(gè)層次找到準(zhǔn)確的位置秋麸。
在寫作中，有一個(gè)著名的金字塔原理炬太，由麥肯錫的咨詢師巴巴拉·明托（Barbara Minto）發(fā)明灸蟆，提倡按照讀者的閱讀習(xí)慣來組織文章，先由一個(gè)總的思想統(tǒng)領(lǐng)多組思想亲族，然后依次往下炒考，下面的每一層，都是對(duì)上面一層的解釋霎迫。這樣的方式用在商務(wù)寫作中很有效斋枢。
在通過界面?zhèn)鬟_(dá)信息時(shí)，我們也是在「寫作」知给，只是是以更豐富的形式瓤帚。用戶進(jìn)入界面，應(yīng)該能夠迅速的抓住我們希望傳達(dá)的首要信息涩赢，然后戈次，是再下一層的信息，如此等等谒主。
前些年很多醫(yī)藥廣告都還在走報(bào)紙朝扼、雜志的渠道（真正的可信程度就不用說了）。這些做營銷的人霎肯，某種程度上也算是現(xiàn)在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)領(lǐng)域的「先行者」擎颖。例如下面這張圖：
? 文字有大小之分，大的文字用來顯示最頂層的信息观游，關(guān)鍵的信息搂捧；
? 使用不同灰度的顏色來區(qū)分重要性不同的文字。例如重要的文字懂缕，用黑色允跑、粗體；相對(duì)不重要的文字搪柑，用灰色來使它淡下去聋丝；
? 使用區(qū)塊來劃分不同組別和層次的信息。
他們想必也會(huì)通過轉(zhuǎn)化率來優(yōu)化廣告方案和渠道投放吧工碾。這不正是今天我們?cè)诨ヂ?lián)網(wǎng)產(chǎn)品領(lǐng)域工作的一部分么弱睦？
我們?cè)诳创a(chǎn)品的界面時(shí)，同樣要如此渊额。
先確定信息的層次况木，哪些是重要的垒拢，哪些是次要的，哪些是要分在一組的火惊。然后求类，根據(jù)信息的層次和重要性，決定如何運(yùn)用圖形屹耐、顏色尸疆、材質(zhì)等等來展現(xiàn)它們。
例如张症，粗體是用來強(qiáng)調(diào)文字的仓技，但是我們不能把整頁的文字都加粗（的確曾經(jīng)有見過這么用的），那樣就相當(dāng)于什么都沒有加俗他。使用灰色的文字脖捻，往往可以幫助區(qū)分出層級(jí)，讓用戶了解第一眼先看什么兆衅，然后再看什么地沮。
進(jìn)入任何一個(gè)電商網(wǎng)站的詳情頁面，類似「立即購買」「加入購物車」一定是最突出的羡亩，一方面在這背后是因?yàn)樗麄儚墓δ芙嵌鹊膬?yōu)先級(jí)非常高摩疑，另一方面，為了突出它們畏铆，可以使用顏色來突出雷袋，也可以在周圍留白、弱化其它元素形成背景等等辞居。
在進(jìn)入詳情頁面之前楷怒，內(nèi)容型的產(chǎn)品往往都有列表。在列表上瓦灶，首先從信息層面要挑選哪些內(nèi)容應(yīng)該被顯示出來鸠删，只有在這個(gè)層次上對(duì)用戶做決策最有幫助的內(nèi)容才應(yīng)該放出來。然后贼陶，這些內(nèi)容就需要通過圖形化（例如評(píng)星）刃泡、顏色（色相，就是通常說的各種色彩碉怔，或者明度烘贴、明暗）來區(qū)隔開，確保用戶掃一眼就能抓到一個(gè)層面的信息撮胧，需要找尋相關(guān)信息時(shí)可以快速篩選和過濾桨踪。
人們認(rèn)知資源的稀缺性，使得我們必須注意產(chǎn)品界面中的層次趴樱，處理好表面下的和表面上的優(yōu)先級(jí)關(guān)系馒闷。界面設(shè)計(jì)并不僅僅是畫圖，本質(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í)啤呼，我們要悄悄的默念：漂亮不僅僅是漂亮卧秘，背后要有意義，界面要有層次官扣，視覺的層次要服務(wù)于內(nèi)容信息和功能的層次翅敌。
--
這是我正在寫的系列連載文章，關(guān)于產(chǎn)品設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì)的思維方式惕蹄。在過去的10年里蚯涮，我一直希望探索產(chǎn)品背后的本質(zhì)規(guī)律，為做互聯(lián)網(wǎng)的人們（產(chǎn)品經(jīng)理卖陵、設(shè)計(jì)師遭顶、工程師、運(yùn)營泪蔫、管理者等等）找到一個(gè)可以共通的思維框架棒旗，當(dāng)我們一起討論問題時(shí)，能夠有共同語言撩荣，這會(huì)是產(chǎn)品語言或者設(shè)計(jì)語言铣揉。
如果你是一個(gè)管理者，你提的需求可以不是「簡(jiǎn)單大氣國際化」婿滓，而是更具體的「界面需要體現(xiàn)出層次老速，區(qū)分優(yōu)先級(jí)」，如果你是一個(gè)產(chǎn)品經(jīng)理凸主、設(shè)計(jì)師橘券、工程師、運(yùn)營卿吐，也能夠?yàn)槊恳粋€(gè)產(chǎn)品和設(shè)計(jì)決策找到依據(jù)旁舰。這是戰(zhàn)術(shù)層面上的戰(zhàn)略思考，通過一些具體的點(diǎn)來幫助我們更好的改進(jìn)產(chǎn)品嗡官、改進(jìn)產(chǎn)品的用戶體驗(yàn)箭窜、運(yùn)營效率甚至推廣、傳播和變現(xiàn)效率衍腥。
專業(yè)是一種力量磺樱。
文章目錄：
一個(gè)產(chǎn)品人與設(shè)計(jì)師的成長
產(chǎn)品思維與設(shè)計(jì)思維：
【連載1】優(yōu)先級(jí)
【連載2】視覺優(yōu)先級(jí)
設(shè)計(jì)師入門與成長之路：
----
我們目前還在做的一件事情是“產(chǎn)品設(shè)計(jì)訓(xùn)練營”纳猫，主要針對(duì)想進(jìn)入互聯(lián)網(wǎng)行業(yè)的應(yīng)屆生和傳統(tǒng)行業(yè)想轉(zhuǎn)行的同學(xué)。很多人在選擇進(jìn)入互聯(lián)網(wǎng)行業(yè)之前對(duì)行業(yè)現(xiàn)狀竹捉、職位要求芜辕、如何入門以及長遠(yuǎn)規(guī)劃都不甚了解，我們主要就是幫大家解決這些問題块差。
訓(xùn)練營到目前已經(jīng)舉辦了20多期侵续，累計(jì)有幾萬同學(xué)通過和我們?cè)谝黄饘W(xué)習(xí)找到了方向，如果你現(xiàn)在也想進(jìn)入互聯(lián)網(wǎng)行業(yè)成為 UI 設(shè)計(jì)師憨闰、交互設(shè)計(jì)師或產(chǎn)品經(jīng)理状蜗，可以關(guān)注我們的訓(xùn)練營。
每周開營鹉动，線上學(xué)習(xí)轧坎，會(huì)有同事專門組織上課。
