做了很久的設(shè)計(jì)，有時(shí)候真的還是會(huì)遇到這樣的情況，做完后發(fā)現(xiàn)還是少了些什么？想改都不知道從哪里入手，反正就是頁面太平淡無奇了，沒什么起伏感層次感。 

什么是頁面的層次感？層次感是在符合視覺合理性的基礎(chǔ)上，把要強(qiáng)調(diào)或要突出的重點(diǎn)部分與畫面中其它的元素區(qū)分開來，讓頁面有重點(diǎn)，有次要?？梢酝ㄟ^一些小元素的大小，遠(yuǎn)近，前后，色彩對(duì)比等多種方法讓人區(qū)分開來主次關(guān)系。讓用戶在瀏覽時(shí)有明顯得變化和思考的自由空間和時(shí)間 。有自由的時(shí)間才能更好的選擇與思考。 

再講直白一點(diǎn)就是以用戶的角度去看一個(gè)頁面，給用戶輕松愉快的感，既能提升閱讀效率，又能讓頁面主次分明。那么如何提高網(wǎng)站制作中的層次感？ 

一、用文字來區(qū)分 

文字應(yīng)該算是區(qū)分主次層級(jí)的重要因素，通過調(diào)節(jié)字體的字號(hào)、大小、字重、色彩等來拉開文字的層級(jí)。比如標(biāo)題使用大號(hào)字體，再加粗。如果加粗讓頁面感厚重了就可以通過改變色彩來調(diào)節(jié)。 

在很多海報(bào)中大家看到過通過首級(jí)文字拉開對(duì)比，讓用戶一眼就看到這個(gè)是重點(diǎn)。區(qū)分層級(jí)的案例給大家看看。下圖是大家熟悉的餓了么APP，店鋪名稱最重要放在一級(jí)，大字，純黑，加粗，相對(duì)于第二第三層，文字顏色和大小都有減弱。這樣形成對(duì)比，大家不自覺的都會(huì)先看店鋪名。 

二、上重下輕，左重右輕 

這個(gè)是考慮人的視覺習(xí)慣是從下至下，從左至右的，所以先看的都是重點(diǎn)。主流的布局都是上方 是信息標(biāo)題，下面是補(bǔ)充說明 。這是迎合用戶瀏覽習(xí)慣的一種習(xí)慣。 

三、文字層次中的統(tǒng)一、對(duì)比與調(diào)和 

文字也要講究大方向上的統(tǒng)一，局部對(duì)比與調(diào)和。什么叫大方向的統(tǒng)一？就是頁面中相同屬性板塊，要保持板塊上的統(tǒng)一。比如列表這種通過的樣式，只要出現(xiàn)類似FEED列表就需要套用產(chǎn)品內(nèi)能過的規(guī)范組件，而調(diào)和是指如果在一個(gè)列表信息中 
有N種不同的信息字段，并不一定每一種字段都要進(jìn)行樣式上的區(qū)分，一些不必要做區(qū)分的字段可以保持統(tǒng)一，這就是調(diào)和的作用?？匆韵逻@個(gè)APP案例，標(biāo)題是一級(jí)，簡介是二級(jí)，用戶名、點(diǎn)贊、評(píng)論則是三級(jí)，他們的功能和用途在是差不多的，沒必要再分級(jí)，可以同級(jí)。級(jí)分太多會(huì)容易造成混亂。 

四、圖標(biāo)的復(fù)雜程度體現(xiàn)頁面層次感 

比如在不太重要的層級(jí)使用復(fù)雜的圖標(biāo)或者圖片，而在重要的頁面則使用簡單的圖片和圖標(biāo)，則讓頁面的層次感亂了。如圖這個(gè)APP,左邊是重要的頁面首頁，功能性的圖標(biāo)，有引導(dǎo)性的重要圖標(biāo)則使用了線條粗顏色亮的圖標(biāo)。而進(jìn)入個(gè)人中心全部是功能的頁面，就使用的單色細(xì)線條的圖標(biāo)，讓頁面主次分明，層次感加強(qiáng)。 記住主要的重要的頁面使用圖標(biāo)要復(fù)雜一點(diǎn)，豐富一點(diǎn)。次要的頁面則要簡單。 

五、插圖要使用在重要的場(chǎng)景 

現(xiàn)在越來越多的APP使用了插圖，插圖能頁面情感化，但是插圖也不能亂用，我們常見的插圖出現(xiàn)在啟動(dòng)頁、空白提示頁、斷網(wǎng)頁、等一些需要補(bǔ)充說明的地方。什么時(shí)候不能用插畫，比如層級(jí)很深的頁面為空，或者較長的詳情頁某一板發(fā)起人為空時(shí)，就沒必要用插畫了，會(huì)顯得層級(jí)高，有點(diǎn)亂了。只能用在層級(jí)本來就高的頁面中。 

六、間距大小體現(xiàn)頁面層次感 

一般大家見得比較多的是首頁等幾個(gè)主要功能頁面大量留白的比較多，因?yàn)榍逦牟季肿岉撁婵雌饋砀p松，呼吸感更強(qiáng)，但是二級(jí)三級(jí)頁面，如果再大量的留白就顯得太單調(diào)了，因?yàn)橹黜撌莾?nèi)容太多，為了讓用戶瀏覽輕松一點(diǎn)才大量留白，二級(jí)頁面一般內(nèi)容不會(huì)太多，適當(dāng)留白就好了。