運(yùn)用分組建立層次 

在設(shè)計(jì)中，相鄰的元素比分開(kāi)較遠(yuǎn)的元素會(huì)更加吸引人注意，在做設(shè)計(jì)閱讀順序時(shí)，利用設(shè)計(jì)分組是一個(gè)非常有效的方法，將不同信息進(jìn)行視覺(jué)間距分組。能提升用戶(hù)對(duì)于內(nèi)容上的理解。

▲如上圖slack的設(shè)計(jì)，插畫(huà)引導(dǎo)圖和底部按鈕上面文字拉開(kāi)了距離，使得內(nèi)容更聚焦。第二個(gè)界面的頂部頭像和下面的文字也是通過(guò)分組形成了對(duì)比。

▲stadium-live的產(chǎn)品設(shè)計(jì)上，登錄頁(yè)面按鈕為一組，頂部品牌LOGO和slogan一組，人物為一組，每組信息之間分組非常明確，互相都不會(huì)對(duì)對(duì)方視覺(jué)產(chǎn)生干擾，后面兩張頁(yè)面也是如此，頂部的導(dǎo)航，和下面表單信息，以及頭像和底部按鈕，通過(guò)分組處理，內(nèi)容更加符合用戶(hù)的視覺(jué)動(dòng)線(xiàn)。

▲在球員定制的處理上，最右邊那張圖，通過(guò)卡片和線(xiàn)條分組處理，從視覺(jué)上很清晰的看見(jiàn)排名；哪兩個(gè)球隊(duì)之間正在進(jìn)行比賽。

▲當(dāng)一組信息比較接近時(shí)，證明他們是有關(guān)聯(lián)的，如果距離比較遠(yuǎn)，這意味著這組信息和他們是不同的，簡(jiǎn)單來(lái)說(shuō)，通過(guò)鄰近性原則創(chuàng)造這些關(guān)系，為信息帶來(lái)層次。

運(yùn)用空白建立視覺(jué)層次 

空白也是視覺(jué)設(shè)計(jì)元素，并不是留白就是空著，如果設(shè)計(jì)中留白運(yùn)用合理，可以幫助用戶(hù)理解很多信息，因此任何設(shè)計(jì)都需要通過(guò)適當(dāng)?shù)呢?fù)空間來(lái)傳遞信息。

▲如上圖我喜歡的一個(gè)應(yīng)用classpass設(shè)計(jì)非常極簡(jiǎn)，頁(yè)面中大量運(yùn)用留白來(lái)凸顯內(nèi)容。

▲classpass的設(shè)計(jì)不會(huì)使用太多的視覺(jué)元素，而是運(yùn)用留白把內(nèi)容進(jìn)行分組，每個(gè)頁(yè)面的留白恰到好處，同時(shí)留白本身就是對(duì)信息進(jìn)行區(qū)分，所以頁(yè)面中減少了很多線(xiàn)條使用，會(huì)更加干凈有品質(zhì)感。

▲must是一款電影軟件，整體設(shè)計(jì)非常雜志風(fēng)，頁(yè)面就是通過(guò)圖文處理，以及留白空間的處理，增加對(duì)比，基本產(chǎn)品使用過(guò)程中你不會(huì)感覺(jué)到視覺(jué)負(fù)擔(dān)，元素之間的信息組織的非常清晰。

▲在電影展示頁(yè)面，信息的處理，以及打分設(shè)計(jì)上，多次運(yùn)用留白來(lái)處理信息層級(jí)，在設(shè)計(jì)中，當(dāng)你元素周?chē)舭自蕉啵a(chǎn)生聚焦注意力的作用也越強(qiáng)，如右邊的打分頁(yè)面，幾乎所有焦點(diǎn)都在這個(gè)彈窗上。

▲Artsy是一款藝術(shù)品電商網(wǎng)站，整個(gè)app的設(shè)計(jì)也充滿(mǎn)了藝術(shù)氣息，每次我設(shè)計(jì)找不到感覺(jué)的時(shí)候就會(huì)去打開(kāi)看看，里面的排版、還有設(shè)計(jì)的細(xì)節(jié)處理，都值得我學(xué)習(xí)，但我喜歡的還是他對(duì)于板式和留白空間的處理。

▲在首頁(yè)設(shè)計(jì)，我最喜歡他相框的設(shè)計(jì)，就像欣賞美術(shù)館的一幅畫(huà)，頁(yè)面留白也非常大，襯線(xiàn)體和非襯線(xiàn)體的對(duì)比也運(yùn)用的非常好。

▲整個(gè)APP的設(shè)計(jì)被大量留白包圍，雖然現(xiàn)在流行各種質(zhì)感，光感，C4D的設(shè)計(jì)，但是大量視覺(jué)元素會(huì)讓頁(yè)面過(guò)于飽和，如果沒(méi)有很好的視覺(jué)引導(dǎo)，用戶(hù)會(huì)感到不知所措。這種簡(jiǎn)單的返璞歸真，也能讓人視覺(jué)不容易產(chǎn)生疲勞。

運(yùn)用氛圍建立層次 

▲每個(gè)紋理的運(yùn)用，有設(shè)計(jì)感的紋理從視覺(jué)感受上比簡(jiǎn)約主義更能吸引用戶(hù)注意力，但是背景紋理的運(yùn)用不能為了設(shè)計(jì)而設(shè)計(jì)，而是需要和產(chǎn)品內(nèi)容有關(guān)系。比如紋理和文字內(nèi)容、和信息是密切相關(guān)的。如上圖，是一款打車(chē)軟件，背景結(jié)合了打車(chē)的地圖，公路線(xiàn)路，用車(chē)場(chǎng)景；讓頁(yè)面對(duì)比和設(shè)計(jì)層次更加突出。

▲Jour這款產(chǎn)品在設(shè)計(jì)上，背景通過(guò)有層次的氛圍紋理和質(zhì)感，使得頁(yè)面氛圍感很強(qiáng)，層次細(xì)節(jié)更加豐富，當(dāng)然在設(shè)計(jì)時(shí)候切忌對(duì)于設(shè)計(jì)氛圍過(guò)度運(yùn)用，那樣會(huì)讓用戶(hù)分散注意力。

▲其它場(chǎng)景上氛圍紋理的運(yùn)用，卡片上通過(guò)系列插畫(huà)的塑造，頁(yè)面雖然有很多插畫(huà)，但是頁(yè)面平衡感同樣被把握的很好。用的時(shí)候需要考慮用戶(hù)在不同界面看見(jiàn)的元素視覺(jué)感受是一致的。

▲氛圍除了圖形，其實(shí)色彩也是很重要一種方式，我很喜歡的ASANS的設(shè)計(jì)，在背景上就是運(yùn)用了一些幾何圖形的肌理效果讓整個(gè)空間感更加豐富，這些幾何圖形豐富細(xì)節(jié)的同時(shí)也讓整個(gè)內(nèi)容更加凸顯。

▲如上圖是里面一個(gè)注冊(cè)登錄場(chǎng)景，界面中，除了背景灰色底紋通過(guò)幾何圖形來(lái)烘托視覺(jué)層次，同時(shí)在插畫(huà)上也非常巧妙，用戶(hù)輸出時(shí)，完成后，整個(gè)插畫(huà)到品牌圖形的連貫變化體驗(yàn)非常好。

▲Sift是一款新聞?lì)愰喿x產(chǎn)品，這類(lèi)型產(chǎn)品設(shè)計(jì)一般就是文字排版，設(shè)計(jì)簡(jiǎn)約為主，但是sift運(yùn)用了一種大膽的設(shè)計(jì)，背景氛圍上采用一些點(diǎn)線(xiàn)底紋的肌理效果，和內(nèi)容結(jié)合的平衡感把握的很不錯(cuò)。

▲Lugg是一款貨車(chē)APP有點(diǎn)像國(guó)內(nèi)的貨拉拉，整個(gè)設(shè)計(jì)氛圍感也非常強(qiáng)，運(yùn)用的全插畫(huà)設(shè)計(jì)，從引導(dǎo)頁(yè)，到核心功能頁(yè)面的設(shè)計(jì)都能看見(jiàn)完整插畫(huà)的運(yùn)用，是我目前見(jiàn)過(guò)運(yùn)用插畫(huà)氛圍作為主設(shè)計(jì)最好的產(chǎn)品。

▲感興趣的同學(xué)可以去美國(guó)蘋(píng)果商店下載使用，頁(yè)面中增加氛圍是一種增加層次很好用的方式，但是同樣需要注意好視覺(jué)平衡，不要本末倒置。

運(yùn)用字體對(duì)比建立層次 

▲運(yùn)用襯線(xiàn)字體和非襯線(xiàn)字體對(duì)比是非常常用的方式，如上圖運(yùn)用了Adelle Sans和Tiempos這兩款字體的對(duì)比讓頁(yè)面內(nèi)容結(jié)構(gòu)非常清晰

▲上圖官網(wǎng)的設(shè)計(jì)，干凈的排版，通過(guò)字體大小、字型進(jìn)行對(duì)比，體現(xiàn)出視覺(jué)層次。

字體的選擇本身也是設(shè)計(jì)中很重要的因素，好的設(shè)計(jì)不僅能提升設(shè)計(jì)品質(zhì)，同時(shí)也能讓頁(yè)面視覺(jué)層次更加分明。

寫(xiě)在結(jié)尾 

回歸我們?cè)O(shè)計(jì)本質(zhì)，其實(shí)我一直覺(jué)得設(shè)計(jì)就是一個(gè)翻譯官，我們的使命是讓用戶(hù)能更容易理解產(chǎn)品復(fù)雜或晦澀難懂的專(zhuān)業(yè)信息，同時(shí)我們能提前規(guī)避他們可能遇到的問(wèn)題，而不僅僅是專(zhuān)注在界面美觀上，今天分享的這些提升設(shè)計(jì)層次的技巧，是為了讓頁(yè)面有更好的體驗(yàn)，也希望大家能通過(guò)實(shí)踐去運(yùn)用的更好。

作者：sky