視覺層次在界面中非常重要，一切創(chuàng)新和趨勢都是建立在視覺原則基礎(chǔ)上的，這些規(guī)則才是做好設(shè)計的基石，今天我們繼續(xù)來探討，還有有哪些技巧是可以加強(qiáng)視覺層次的。

運用分組建立層次

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

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

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

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

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

運用空白建立視覺層次 

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

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

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

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

▲在電影展示頁面，信息的處理，以及打分設(shè)計上，多次運用留白來處理信息層級，在設(shè)計中，當(dāng)你元素周圍留白越多，它產(chǎn)生聚焦注意力的作用也越強(qiáng)，如右邊的打分頁面，幾乎所有焦點都在這個彈窗上。

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

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

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

運用氛圍建立層次 

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

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

▲其它場景上氛圍紋理的運用，卡片上通過系列插畫的塑造，頁面雖然有很多插畫，但是頁面平衡感同樣被把握的很好。用的時候需要考慮用戶在不同界面看見的元素視覺感受是一致的。

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

▲如上圖是里面一個注冊登錄場景，界面中，除了背景灰色底紋通過幾何圖形來烘托視覺層次，同時在插畫上也非常巧妙，用戶輸出時，完成后，整個插畫到品牌圖形的連貫變化體驗非常好。

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

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

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

運用字體對比建立層次

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

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

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

總結(jié) 

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

相關(guān)閱讀文章推薦：

原文來自微信公眾號：我們的設(shè)計日記