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

為什么要學(xué)習(xí)它

視覺(jué)層次能給產(chǎn)品帶來(lái)良好的視覺(jué)享受，用戶能夠很清晰的知道內(nèi)容的關(guān)鍵點(diǎn)和需要注意的地方。作為設(shè)計(jì)師，我們每天都面對(duì)各種需求設(shè)計(jì)，而且有時(shí)候經(jīng)常因?yàn)閷哟尾磺逦蛘邲](méi)有美感，經(jīng)常被同事或者領(lǐng)導(dǎo)Diss~

那么有沒(méi)有更好的辦法且能夠長(zhǎng)期支持我們這樣的工作呢？

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

為什么它如此重要？

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

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

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

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

設(shè)計(jì)呢？

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

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

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

1.?大小

通過(guò)大小屬性，我們可以對(duì)一些重要的操作內(nèi)容進(jìn)行放大顯示，因?yàn)槿藗兪紫乳喿x更大的東西，且這種趨勢(shì)實(shí)際上足以超越自上而下的規(guī)則。

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

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

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

2.?字重

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

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

上面幾個(gè)案例中有網(wǎng)頁(yè)、雜志、包裝等等，他們?cè)谠O(shè)計(jì)時(shí)候都運(yùn)用到了加粗加大字體形成強(qiáng)烈的視覺(jué)層次。

3. 顏色

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

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

上面這幾張圖都運(yùn)用了色彩、字重、大小來(lái)區(qū)分視覺(jué)層次。

4.?布局

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

gird system

案例

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

結(jié)語(yǔ)

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

#專欄作家#

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

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

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