在我們進行界面設(shè)計的過程中，很多設(shè)計師可能都會遇到這種情況，需求方或者產(chǎn)品經(jīng)理看完設(shè)計稿后總是說：“我總感覺缺點什么”或者說：“太平了”、“有點單調(diào)” 其實這些都是缺乏層次的表現(xiàn)。
除了我們工作經(jīng)驗或者憑感覺來做，對于層次關(guān)系來說是可以發(fā)現(xiàn)規(guī)律的，建立視覺層次結(jié)構(gòu)，我們可以先把最基礎(chǔ)的做好，然后通過這些基礎(chǔ)的要素來構(gòu)成整個視覺層次結(jié)構(gòu)。
但是，究竟如何才能結(jié)合產(chǎn)品特色和用戶的真實需求，將頁面視覺內(nèi)容層級化，從而提供更加優(yōu)質(zhì)的用戶體驗?zāi)兀肯旅娣植煌S度為大家細致的剖析用戶界面設(shè)計過程中如何營造層次感
上圖兩封簡歷，大家看一下哪一份更能夠引起HR的關(guān)注，大部分人都會覺得是第一份，為什么？
作為一個每天會看幾百份簡歷的HR , 對于他們來說只會關(guān)心有價值的重點信息，如果一封簡歷在幾秒鐘內(nèi)沒有看到HR想要的信息，那樣有很大的可能會被PASS掉，大家可以看下第一份的視覺層次明顯要好于第二份，兩份簡歷的主要信息其實是相似的，不同的只是視覺層級的構(gòu)建。
關(guān)于界面設(shè)計來說，要面對的問題其實也一樣，我們也需要通過視覺層次讓界面有好的節(jié)奏和韻律，使界面有好的用戶使用體驗。
有哪些可以讓視覺層級有序的要素？
我們可以通過對視覺基本元素的組合來對視覺的層級進行構(gòu)建，大小、字重、顏色、留白，這是基礎(chǔ)的元素，任何設(shè)計都會包含這些要素，我們可以先掌握他們的排布技巧，然再靈活的運用到每個地方
1.?大小
通過界面元素的大小屬性，一些想要突出的元放大顯示，因為大的元素會首先吸引人們的閱讀視線。
facebook 把要推薦用戶操作的快拍等元素，做成卡片按鈕，放在用戶視角的第一個位置，這是對用戶比較重要的功能，能隨時分享用的動態(tài)，也是該app推薦的核心功能， Medium 則是把卡片做大放在首頁金剛區(qū)位置，目的則是要重點推薦用戶閱讀的推薦內(nèi)容，然后首頁的主次關(guān)系也就明朗起來了。
通過對英文字母的放大和加粗，來凸顯層次關(guān)系，可以使界面上的觀感有不小的提升。
2.?字重
見詞如意，我們可以用文字的粗細來構(gòu)建視覺的層次結(jié)構(gòu)，這樣界面主題的信息結(jié)構(gòu)會更加清晰。
上面的兩個版面，第二張的層次明顯要優(yōu)于第一張。在進行層級區(qū)分時只用顏色的深淺是不夠的，這就要用到字重來區(qū)分層級的主次關(guān)系。
上圖幾個案例中有網(wǎng)頁、圖書封面、界面等等，這些案例在設(shè)計的過程中都運用到了加粗加大字體來強烈的視覺層次對比。
3. 顏色
說到顏色，就有很多因素需要我們考慮，不同的顏色的色彩認識都是不同的，比如：在界面設(shè)計中，藍色文字的含義一般都是可點擊，紅色的含義大部分都是是錯誤或警示，在排版中來說黑色和紅色都是重量顏色，能夠吸引視覺重心，輕量色彩就的吸引力相對來說會比較弱。
上面的例子，有沒有發(fā)現(xiàn)視覺重心被有色彩的地方先吸引過去了，并且層次也有了，這樣對用戶來說就有了一個閱讀的先后次序，這個頁面視覺層次就是正確的。
上面幾個例子都使用了色彩、字重、大小用來區(qū)分視覺的層次。
4. 留白
留白是對界面布局的構(gòu)建，用留白去產(chǎn)生視覺層次關(guān)系，給予內(nèi)容充足的呼吸空間，我們可以使用網(wǎng)格系統(tǒng)來構(gòu)建規(guī)則有序的留白布局，這樣整體的視覺會比較干凈清爽。
留白構(gòu)建了視覺層級，創(chuàng)造了精彩的觀感，給用戶帶來了不同風(fēng)格的產(chǎn)品。
結(jié)語
看到這里如何去構(gòu)建好的視覺層次，大家應(yīng)該都明白了。對于設(shè)計師來說，還是要通過欣賞好的作品，多做元素組合使用的練習(xí)，去提升自己在構(gòu)建視覺層級上的認知。
