視覺(jué)層次結(jié)構(gòu)的4大武器
如何更好的建立視覺(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)粘TO(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é)議
有沒(méi)有web的設(shè)計(jì),分享一下,多謝大師
Web 設(shè)計(jì),給你推薦一本書看,中文書名:不要讓我思考