構(gòu)建視覺(jué)層次的4個(gè)技巧
2021-8-18 資深UI設(shè)計(jì)者
設(shè)計(jì)行業(yè)每天發(fā)生著翻天覆地的變化，隨著專業(yè)的發(fā)展，我們也在不斷的學(xué)習(xí)新的技巧和趨勢(shì)，但同時(shí)我們也要明白，設(shè)計(jì)中那些基礎(chǔ)的UI準(zhǔn)則，才是好的趨勢(shì)和風(fēng)格建立的基礎(chǔ)。今天我們就一起來(lái)聊聊做好設(shè)計(jì)最重要的能力之一：區(qū)分視覺(jué)層次。
什么是視覺(jué)層次
視覺(jué)層次你可以理解為，通過(guò)將界面元素進(jìn)行設(shè)計(jì)上的區(qū)分，引導(dǎo)用戶的注意力，并使用戶的注意力始終集中在頁(yè)面的關(guān)鍵地方。但是今天沒(méi)有一個(gè)方法可以一直控制用戶注意力，就像我們今天做設(shè)計(jì)一樣，不同的產(chǎn)品要用不同的設(shè)計(jì)手法去設(shè)計(jì)，才能達(dá)到幫助用戶分清主次的作用。
視覺(jué)層次不僅僅包含文字有關(guān)，它還包含我們的圖片，視頻按鈕以及文字以外的視覺(jué)元素。所以當(dāng)你設(shè)計(jì)一個(gè)網(wǎng)頁(yè)時(shí)候，除了網(wǎng)站整體的顏色，排版，圖片也能夠影響視覺(jué)層次。那么如何讓設(shè)計(jì)的層次更清晰，常用方法有哪些，今天我們一起來(lái)聊聊關(guān)于設(shè)計(jì)層次，希望可以幫助到你。
運(yùn)用尺寸大小建立層次
▲大小是建立視覺(jué)層次非常重要的方式，這里的大小不僅僅是文字，還包括圖形，插畫(huà)，圖片等等。 作為設(shè)計(jì)師我們必須了解屏幕上每個(gè)元素的優(yōu)先級(jí)，根據(jù)優(yōu)先級(jí)來(lái)判斷它的使用大小。
▲當(dāng)我們談到尺寸的時(shí)候，相信很多設(shè)計(jì)師有過(guò)被要求各種元素放大的經(jīng)歷，確實(shí)大的元素能更好的吸引用戶。 但是當(dāng)元素越大，其實(shí)設(shè)計(jì)的復(fù)雜性也越高，所以在設(shè)計(jì)時(shí)候需要更注意整體節(jié)奏，把握好一個(gè)度。
▲如上圖插畫(huà)的比重很大，在設(shè)計(jì)這種大的元素時(shí)，你的每個(gè)元素比例和細(xì)節(jié)處理都被同時(shí)放大了，我們可以看見(jiàn)這副插畫(huà)四周還運(yùn)用了很多元素，讓頁(yè)面達(dá)到平衡，同時(shí)這個(gè)畫(huà)面和旁邊的文字場(chǎng)景也很好融合在一起。一個(gè)好的設(shè)計(jì)一定是通過(guò)視覺(jué)手段讓用戶理解信息更加準(zhǔn)確，在看完頁(yè)面文字和圖片后，很自然的引導(dǎo)到底部的按鈕，這才能算是一個(gè)很引人注目的設(shè)計(jì)。
運(yùn)用色彩建立層次
▲顏色在視覺(jué)層次中扮演著非常重要的角色， 設(shè)計(jì)師可以通過(guò)顏色來(lái)傳遞信息內(nèi)容，同時(shí)也可以引導(dǎo)頁(yè)面內(nèi)容，色彩在心理學(xué)中有著很重要的作用，比如黑金給人尊貴感VIP感，糖果色給人小清新，甜蜜的感覺(jué)；紅色能吸引人注意等等。用戶在視覺(jué)情感上和顏色很容易聯(lián)系在一起， 作為設(shè)計(jì)師我們需要對(duì)不同的色調(diào)，不同色彩進(jìn)行細(xì)致的組合搭配，以掌握對(duì)色彩的了解。
▲Zenly：國(guó)外知名產(chǎn)品，在引導(dǎo)頁(yè)面設(shè)計(jì)時(shí)候運(yùn)用紅色按鈕吸引用戶注意，在App主頁(yè)面里面，通過(guò)深藍(lán)色強(qiáng)調(diào)選中效果以及Tab.
▲Netfix：知名的電影軟件Netfix在設(shè)計(jì)中，充分運(yùn)用色彩去增強(qiáng)層次，無(wú)論是在引導(dǎo)頁(yè)按鈕設(shè)計(jì)，還是在頁(yè)面核心行動(dòng)點(diǎn)，以及Tab切換等地方，都通過(guò)顯眼的主色來(lái)引導(dǎo)用戶操作，讓頁(yè)面的行為路徑更加順暢。
▲Tiktok：抖音海外版本設(shè)計(jì)，整體UI部分非常簡(jiǎn)單，頁(yè)面還是一如既往突出內(nèi)容為主，所以在整個(gè)設(shè)計(jì)上就通過(guò)色彩來(lái)強(qiáng)調(diào)頁(yè)面優(yōu)先級(jí)，比如拍攝，分享，選擇這些核心操作都通過(guò)色彩來(lái)引導(dǎo)完成任務(wù)。
更多設(shè)計(jì)文章，設(shè)計(jì)交流，歡迎添加 | 微信ddm7212
關(guān)注#公眾號(hào)：SKY蓋哥 ，第一時(shí)間獲得設(shè)計(jì)干貨和分享內(nèi)容。
運(yùn)用文字大小字重建立層次
▲絲芙蘭App的設(shè)計(jì)，在引導(dǎo)頁(yè)采用一個(gè)襯線體非常有品位，通過(guò)字體大小，和字重對(duì)比，再配合美妝護(hù)膚的行業(yè)屬性，頁(yè)面非常的簡(jiǎn)潔大氣，有對(duì)比有細(xì)節(jié)。
▲無(wú)論是產(chǎn)品介紹，還是詳情頁(yè)，絲芙蘭設(shè)計(jì)都是采用字重和字體大小對(duì)比，來(lái)打造層次，字重和大小，也是設(shè)計(jì)師常用建立層級(jí)的方式。
▲除了字重以外，還可以字體透明度來(lái)增加層級(jí)，一般是黑色搭配灰色使用，再加上字體大小和字重整個(gè)頁(yè)面層次會(huì)更加清晰。如上圖韓國(guó)APP頁(yè)面，標(biāo)題是黑色，輔助說(shuō)明文字字號(hào)小4號(hào)，同時(shí)顏色改為淺灰色，這樣設(shè)計(jì)頁(yè)面層次增強(qiáng)了很多。
▲很多設(shè)計(jì)師在做界面時(shí)候，喜歡字體就一個(gè)顏色用到底，這樣會(huì)顯得界面粗糙，也沒(méi)有層次感。但是運(yùn)用好我上面說(shuō)的字體大小，顏色、字重等對(duì)比其實(shí)節(jié)奏很容易就能做出來(lái)。
運(yùn)用視覺(jué)重量建立層次
▲比如aaptiv這個(gè)產(chǎn)品的功能頁(yè)面設(shè)計(jì)，就是運(yùn)用了視覺(jué)重量的對(duì)比，線框按鈕最弱，其次是黑色選中效果，最重的功能引導(dǎo)按鈕， 視覺(jué) 重量的對(duì)比能很好讓用戶關(guān)注到功能內(nèi)容。
▲如上圖，選中的黑色視覺(jué)重量最重，其次是藍(lán)色選中效果，最后是未選中的黑色，視覺(jué)重量幾乎我們每一個(gè)頁(yè)面中都會(huì)使用到。
▲headspace這款產(chǎn)品我非常喜歡，將情感化用到了極致，在頁(yè)面很多細(xì)節(jié)地方運(yùn)用了不同的小橙人在背景上，視覺(jué)重量有輕有重，通過(guò)不同視覺(jué)重量來(lái)表達(dá)頁(yè)面內(nèi)容，非常巧妙。
▲在列表的表達(dá)上，不同視覺(jué)重量感受是不一樣的，比如左邊的視覺(jué)重量更輕一點(diǎn)，用戶關(guān)注圖形同時(shí)也去關(guān)注文字內(nèi)容，右邊這個(gè)視覺(jué)更重，更加引導(dǎo)用戶去點(diǎn)擊功能模塊內(nèi)容。
▲設(shè)計(jì)師熟悉的medium官方App設(shè)計(jì)，在正文閱讀時(shí)，同樣采用不同的視覺(jué)重點(diǎn)來(lái)突出重要信息，比如左邊通過(guò)字重以及文字背景綠色底色和正文對(duì)比，非常醒目。右側(cè)通過(guò)淺綠色作為背景強(qiáng)調(diào)突出。
▲同樣在一些重要位置，Medium也是運(yùn)用視覺(jué)重量處理，如左圖通過(guò)頂部提示條提示可以通過(guò)語(yǔ)音播放，在右側(cè)付費(fèi)文章通過(guò)行動(dòng)按鈕引導(dǎo)用戶升級(jí)付費(fèi)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
文章來(lái)源：站酷 作者：我們的設(shè)計(jì)日記
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
