激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

「UI設(shè)計(jì)」輕松掌握視覺層次結(jié)構(gòu)的四大武器

發(fā)布時(shí)間：2024-03-12 09:48:56 瀏覽量：228次

轉(zhuǎn)自：功夫UX（ID：UX-Talk）

作者：Tony

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

好的視覺層次使產(chǎn)品擁有好的形象，好的視覺，能夠引導(dǎo)用戶很清晰的找到內(nèi)容的關(guān)鍵點(diǎn)和需要注意的地方。作為設(shè)計(jì)師，我們每天都面對各種需求，而且有時(shí)候經(jīng)常因?yàn)榻缑媾虐婊靵y或者設(shè)計(jì)沒有節(jié)奏感，經(jīng)常被同事或者領(lǐng)導(dǎo)Diss~

那么有沒有更好的辦法能夠長期支持我們今天快節(jié)奏的工作呢？除了我們憑借多年工作經(jīng)驗(yàn)又或者憑感覺來做，但是這些對于新手設(shè)計(jì)師來說，是不太現(xiàn)實(shí)的，“設(shè)計(jì)”它是有規(guī)律可循的，建立視覺層次結(jié)構(gòu)，我們可以先把最基礎(chǔ)的做好，然后通過這些基礎(chǔ)的要素來搭建整體視覺層次結(jié)構(gòu)，這些基礎(chǔ)要素影響排版的有如下4大點(diǎn)： 大小、字重、顏色、布局等，這四大點(diǎn)也是構(gòu)成任何視覺層次結(jié)構(gòu)的基石，因此我們只要熟悉掌握他們的運(yùn)行方式規(guī)律，那么做設(shè)計(jì)就沒那么難了。

為什么它如此重要

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

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

上面只是一個(gè)簡單的例子，在我們?nèi)粘ＴO(shè)計(jì)中，特別是剛做設(shè)計(jì)不久的小伙伴，很容易犯這樣的錯(cuò)誤，設(shè)計(jì)毫無層次，好的視覺就像一首動(dòng)聽的曲子，他是有節(jié)奏感在里面的，正式因?yàn)橛辛斯?jié)奏和韻律，歌曲才如此好聽。設(shè)計(jì)也是同樣的道理，我們也需要通過層次來構(gòu)建節(jié)奏感和韻律感，從而達(dá)到一種愉悅視覺享受。

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

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

1. 大小

通過大小屬性，我們可以對一些重要的操作內(nèi)容進(jìn)行放大顯示，因?yàn)榇蟮臇|西更吸引眼球，且這種趨勢實(shí)際上足以超越自上而下的規(guī)則

左邊f(xié)acebook 把發(fā)布信息內(nèi)容，做成卡片按鈕，放在用戶視角順序的第一個(gè)位置（從左往右的閱讀習(xí)慣），這個(gè)功能對用戶來說十分重要，預(yù)示著是否可以隨時(shí)能發(fā)布內(nèi)容，也是facebook比較核心的一個(gè)功能，

第二張截圖 Medium 它把卡片單獨(dú)做大 放在首頁頂部位置，目的也是為了強(qiáng)調(diào)重點(diǎn)推薦內(nèi)容。同時(shí)它們之間層次關(guān)系就顯示出來了

通過放大和加粗英文字母，來凸顯層次，同時(shí)視覺上提升不少設(shè)計(jì)感

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

2. 字重

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

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

上面幾個(gè)案例中有網(wǎng)頁、雜志，包裝等等，在設(shè)計(jì)時(shí)候都運(yùn)用到了加粗加大字體形成強(qiáng)烈的視覺沖突關(guān)系

3. 顏色

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

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

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

4. 布局

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

gird system

留白創(chuàng)造了層次，創(chuàng)造精彩的視覺感官體驗(yàn)，創(chuàng)造不同性格的產(chǎn)品，大家可以更多在設(shè)計(jì)中去運(yùn)用這些基礎(chǔ)技巧來提高設(shè)計(jì)品質(zhì)感

結(jié)語

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

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會在第一時(shí)間與您取得聯(lián)系，請保持電話暢通！
確定