如何更好的建立視覺層次結(jié)構(gòu)？有沒有更好的辦法？今天和大家分享一些通用基本方法~

為什么要學習它

視覺層次能給產(chǎn)品帶來良好的視覺享受，用戶能夠很清晰的知道內(nèi)容的關(guān)鍵點和需要注意的地方。作為設(shè)計師，我們每天都面對各種需求設(shè)計，而且有時候經(jīng)常因為層次不清晰或者沒有美感，經(jīng)常被同事或者領(lǐng)導Diss~

那么有沒有更好的辦法且能夠長期支持我們這樣的工作呢？

除了我們工作經(jīng)驗或者憑感覺來做，那么其實它是有規(guī)律可循的，建立視覺層次結(jié)構(gòu)，我們可以先把最基礎(chǔ)的做好，然后通過這些基礎(chǔ)的要素來構(gòu)成整個視覺層次結(jié)構(gòu)，這些基礎(chǔ)要素影響排版的有如下4大點： 大小、字重、顏色、布局等，這四大點構(gòu)成任何視覺層級結(jié)構(gòu)的基礎(chǔ)，因此我們只要熟悉掌握他們的運行方式規(guī)律，那么做設(shè)計就沒那么難了。

為什么它如此重要？

圖片來自網(wǎng)絡(luò)

上面兩封簡歷，大家第一眼看，短時間內(nèi)，誰吸引了你? 誰最引起的你注意? 很明細肯定是圖1，為什么？

因為一個公司的HR，每天會面對很多簡歷，那么他們一般只關(guān)注重要信息，如果你的簡歷上，在幾秒鐘之內(nèi)看不到啥重點信息，你的簡歷很可能會石沉大海，大家可以看下右邊的視覺層次明顯沒有左邊強，其實他們內(nèi)容是幾乎一樣，只是視覺層次結(jié)構(gòu)發(fā)生了變化。

上面只是一個簡單的例子，在我們?nèi)粘ＴO(shè)計中，特別是剛做設(shè)計不久的小伙伴，很容易犯這樣的錯誤，設(shè)計上毫無層次結(jié)構(gòu)，其實好的視覺就像一首動聽的曲子，他是有節(jié)奏感在里面的，正式因為有了節(jié)奏和韻律，歌曲那么才如此好聽。

設(shè)計呢？

也是同樣的道理，我們也需要通過層次來構(gòu)建節(jié)奏感和韻律感，從而達到一種愉悅感受。

有哪些方法可以輕松構(gòu)建層次

其實我們可以通過視覺語言的基本元素來構(gòu)建視覺層次，大小、字重、顏色、布局，這也是最基礎(chǔ)的，包括任何復雜的設(shè)計都基本包含這些要素，所以我們可以先掌握他們的運用技巧，然后靈活巧妙的運用到整體設(shè)計中去，下面我會將和大家一起探討下。

1.?大小

通過大小屬性，我們可以對一些重要的操作內(nèi)容進行放大顯示，因為人們首先閱讀更大的東西，且這種趨勢實際上足以超越自上而下的規(guī)則。

左邊f(xié)acebook 把發(fā)布信息內(nèi)容，做成卡片按鈕，放在用戶視角順序的第一個位置（從左往右的閱讀習慣），這個功能對用戶來說十分重要，預(yù)示著是否可以隨時能發(fā)布內(nèi)容，也是facebook比較核心的一個功能，第二張截圖 Medium? 它把卡片單獨做大 放在首頁頂部位置，目的也是為了強調(diào)重點推薦內(nèi)容，同時它們之間層次關(guān)系就顯示出來了。

通過放大和加粗英文字母，來凸顯層次關(guān)系，同事視覺上提升不少可觀感。

上面三個例子通過放大主體內(nèi)容或者標題來突出視覺層次關(guān)系，突出主要內(nèi)容。

2.?字重

顧名思義，我們可以使用粗細來創(chuàng)建視覺層次結(jié)構(gòu)，這樣信息結(jié)構(gòu)更加清晰。

上面兩張卡片，下面的比上面的層次更明顯。有時候僅僅用顏色深淺來區(qū)分層級是不夠的，我們需要集合字重來區(qū)分主次關(guān)系。

上面幾個案例中有網(wǎng)頁、雜志、包裝等等，他們在設(shè)計時候都運用到了加粗加大字體形成強烈的視覺層次。

3. 顏色

當我們談?wù)擃伾珪r候，就需要考慮的因素很多了，每種色彩對應(yīng)的認知是不一樣的，比如：UI界面設(shè)計中，藍色文字代表可點擊，紅色代表是出錯等向，在排版中黑色和紅色比較吸引注意力，輕量色彩就沒有那么強吸引力。

如上，有沒有發(fā)現(xiàn)有色彩的地方首先吸引你，且層次也出來了，用戶有一個閱讀頁面的優(yōu)先級，那么這個頁面就是正確的設(shè)計。

上面這幾張圖都運用了色彩、字重、大小來區(qū)分視覺層次。

4.?布局

布局其實就是對留白把控，通過留白來產(chǎn)生視覺層次關(guān)系，給予內(nèi)容充足的呼吸空間，那么我們可以通過網(wǎng)格系統(tǒng)來制定有規(guī)則的留白空間，這樣層次出來了，然后視覺上整齊度很高。

gird system

案例

留白創(chuàng)造了層次，創(chuàng)造精彩的視覺感官體驗，創(chuàng)造不同性格的產(chǎn)品

結(jié)語

到這里就結(jié)束了，構(gòu)建視覺層次的思路大家應(yīng)該很清晰了，我們可以通過這四大基礎(chǔ)元素的組合使用，達到我們所需要的設(shè)計要求。當然我們平時去欣賞優(yōu)秀作品時候，也可以去仔細觀察下，為什么會如此吸引你？它好在哪里？是色彩吸引你? 還是排版層次很舒服等等，通過這樣不斷去鍛煉來提升自己在這方向上的認知。

#專欄作家#

Tony，微信公眾號：洞見設(shè)計，人人都是產(chǎn)品經(jīng)理專欄作家。百度設(shè)計師。很樂意幫助年輕設(shè)計師成長，簡歷指導，每周分享最有價值的設(shè)計經(jīng)驗，擅長產(chǎn)品體驗設(shè)計，關(guān)注【洞見設(shè)計】后臺回復“彩蛋”領(lǐng)取設(shè)計資料。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議