在我們進行界面設(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. 顏色
說到顏色竿拆，就有很多因素需要我們考慮，不同的顏色的色彩認(rèn)識都是不同的宾尚，比如：在界面設(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)建視覺層級上的認(rèn)知朦乏。
