編者按:設(shè)計(jì)行業(yè)是一個(gè)變化大、變化快的行業(yè)。因此，設(shè)計(jì)師一直面臨著新的挑戰(zhàn)。設(shè)計(jì)師需要緊跟設(shè)計(jì)潮流，及時(shí)強(qiáng)化能力，學(xué)習(xí)新知識(shí)。那么，為了做好設(shè)計(jì)，最重要的能力是什么？

設(shè)計(jì)行業(yè)每天都在發(fā)生翻天覆地的變化。隨著專業(yè)的發(fā)展，我們?cè)诓粩鄬W(xué)習(xí)新的技能和潮流，但同時(shí)也要明白，設(shè)計(jì)中基本的UI標(biāo)準(zhǔn)是建立良好潮流和風(fēng)格的基礎(chǔ)。

今天我們來(lái)談?wù)勛龊迷O(shè)計(jì)最重要的一個(gè)能力:區(qū)分視覺(jué)層次。

一、視覺(jué)層次是什么

視覺(jué)層面可以理解為，通過(guò)區(qū)分設(shè)計(jì)中的界面元素，引導(dǎo)用戶的注意力，使用戶的注意力始終集中在頁(yè)面的關(guān)鍵位置。

但是一直沒(méi)有辦法控制用戶的注意力。就像我們今天做設(shè)計(jì)一樣，不同的產(chǎn)品要用不同的設(shè)計(jì)方法來(lái)設(shè)計(jì)，這樣才能幫助用戶分清主次。

視覺(jué)層面不僅包括文字，還包括我們的圖片、視頻按鈕、文字以外的視覺(jué)元素。

所以你在設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，除了網(wǎng)站的整體色彩、布局、圖片之外，還能影響視覺(jué)層次。那么如何讓設(shè)計(jì)層次更清晰，常用的方法有哪些？今天我們一起談?wù)勗O(shè)計(jì)水平，希望對(duì)你有幫助。

第二，利用大小來(lái)建立層次

尺寸是建立視覺(jué)層次的一個(gè)非常重要的途徑，這里的尺寸不僅僅是文字，還有圖形、插圖、圖片等等。作為設(shè)計(jì)師，我們必須知道屏幕上每個(gè)元素的優(yōu)先級(jí)，并根據(jù)優(yōu)先級(jí)判斷其使用大小。

說(shuō)到尺寸，相信很多設(shè)計(jì)師都被要求放大各種元素。確實(shí)大元素更能吸引用戶。但元素越大，設(shè)計(jì)的復(fù)雜程度越高，要多注意整體節(jié)奏和把握度。

如上圖，插圖占比很大。設(shè)計(jì)這么大的元素，每個(gè)元素的比例和細(xì)節(jié)都是同時(shí)放大的。我們可以看到，這個(gè)插圖周圍使用了很多元素來(lái)平衡頁(yè)面，同時(shí)，這個(gè)圖片與旁邊的文本場(chǎng)景很好地結(jié)合在一起。

一個(gè)好的設(shè)計(jì)必須讓用戶通過(guò)視覺(jué)手段更準(zhǔn)確地理解信息?？赐觏?yè)面上的文字和圖片，自然會(huì)引出底部的按鈕，可以算是非常醒目的設(shè)計(jì)了。

第三，利用色彩建立層次

顏色在視覺(jué)層面上起著非常重要的作用。設(shè)計(jì)師可以通過(guò)顏色傳達(dá)信息內(nèi)容，同時(shí)引導(dǎo)頁(yè)面內(nèi)容。色彩在心理學(xué)中起著重要的作用。比如黑金給人榮譽(yù)感和VIP，糖果色給人小清新甜甜的感覺(jué)；紅色吸引人的注意力等等。

在視覺(jué)情感中，用戶很容易與顏色聯(lián)系在一起。作為設(shè)計(jì)師，我們需要仔細(xì)結(jié)合不同的顏色來(lái)掌握對(duì)顏色的理解。

Zenly:國(guó)外知名產(chǎn)品，指導(dǎo)頁(yè)面設(shè)計(jì)時(shí)使用紅色按鈕吸引用戶注意力。在App的主頁(yè)中，選擇效果和Tab通過(guò)深藍(lán)色來(lái)強(qiáng)調(diào)。

Netfix:知名電影軟件Netfix在其設(shè)計(jì)中充分利用色彩提升水平。無(wú)論是在引導(dǎo)頁(yè)面按鈕的設(shè)計(jì)中，還是在頁(yè)面的核心動(dòng)作點(diǎn)中，還是在Tab切換中，都是通過(guò)顯眼的主色引導(dǎo)用戶進(jìn)行操作，使得頁(yè)面的行為路徑更加流暢。

Tiktok:對(duì)于顫音的海外版設(shè)計(jì)，整體UI部分很簡(jiǎn)單，頁(yè)面還是一如既往的專注于內(nèi)容。所以頁(yè)面的優(yōu)先級(jí)在整個(gè)設(shè)計(jì)中是通過(guò)顏色來(lái)強(qiáng)調(diào)的，比如拍攝，分享，選擇這些核心操作都是通過(guò)顏色來(lái)引導(dǎo)完成任務(wù)的。

第四，用詞的大小來(lái)重新建立層次

絲芙蘭App設(shè)計(jì)在導(dǎo)讀頁(yè)面上有襯線體，很有品味。通過(guò)字體大小和字重的對(duì)比，結(jié)合美容護(hù)膚的行業(yè)屬性，頁(yè)面非常簡(jiǎn)潔大氣，有對(duì)比，有細(xì)節(jié)。

無(wú)論是產(chǎn)品介紹還是詳情頁(yè)，絲芙蘭設(shè)計(jì)都是利用字重和字號(hào)的對(duì)比來(lái)創(chuàng)建層次，這也是設(shè)計(jì)師建立層次的常用方式。

除了單詞權(quán)重，級(jí)別還可以通過(guò)字體的透明度來(lái)增加。一般黑色和灰色搭配使用，隨著字體大小和字重，整個(gè)頁(yè)面層次會(huì)更清晰。如上圖，韓文APP頁(yè)面標(biāo)題為黑色，輔助描述文字字體大小小了4，顏色改為淺灰色，設(shè)計(jì)頁(yè)面層次提升了不少。

很多設(shè)計(jì)師在做界面的時(shí)候，喜歡字體，到最后只用一種顏色，會(huì)讓界面粗糙，沒(méi)有層次感。不過(guò)上面提到的字體大小、顏色、字重的比較，還是很容易做到的。

第五，用視覺(jué)權(quán)重建立層次

比如aaptiv的功能頁(yè)面設(shè)計(jì)使用了視覺(jué)權(quán)重對(duì)比，最弱的線框按鈕，其次是黑色選擇效果，最重的功能引導(dǎo)按鈕。視覺(jué)權(quán)重對(duì)比可以讓用戶關(guān)注功能內(nèi)容。

如上圖，選中的黑色視覺(jué)權(quán)重最大，其次是藍(lán)色選中效果，最后是未選中的黑色。幾乎每一頁(yè)都會(huì)用到視覺(jué)權(quán)重。

我很喜歡這個(gè)產(chǎn)品頂空，把情緒化用到了極致。在頁(yè)面的很多細(xì)節(jié)中，背景使用了不同的小橘人，視覺(jué)權(quán)重有輕有重。通過(guò)不同的視覺(jué)權(quán)重來(lái)表達(dá)頁(yè)面的內(nèi)容是非常聰明的。

在列表的表達(dá)中，不同的視覺(jué)權(quán)重有不同的感受。比如左邊視覺(jué)權(quán)重較輕，用戶同時(shí)關(guān)注圖形和文字內(nèi)容，右邊視覺(jué)權(quán)重較重，導(dǎo)致用戶點(diǎn)擊功能模塊內(nèi)容。

媒體的官方App設(shè)計(jì)，是設(shè)計(jì)師比較熟悉的，也是在閱讀文字的時(shí)候用不同的視覺(jué)重點(diǎn)突出重要信息。比如左側(cè)通過(guò)單詞權(quán)重和文本背景與文本進(jìn)行對(duì)比，非常醒目，右側(cè)以淡綠色為背景突出顯示。

同樣在一些重要的位置，Medium也使用了視覺(jué)權(quán)重處理。比如左邊圖片可以通過(guò)頂部的提示欄語(yǔ)音播放，右邊付費(fèi)文章通過(guò)動(dòng)作按鈕引導(dǎo)用戶升級(jí)付費(fèi)。

不及物動(dòng)詞最后

視覺(jué)層面的表達(dá)方式有很多，比如重復(fù)、否定空、質(zhì)感效果、間距、隱喻等。在接下來(lái)的文章中，我將分享視覺(jué)層面的后半部分，希望大家每天都能有所收獲！

#專欄作家#

Sky，微信微信官方賬號(hào):我們的設(shè)計(jì)日記，大家都是產(chǎn)品經(jīng)理專欄作家。原創(chuàng)支付寶體驗(yàn)設(shè)計(jì)專家，阿里巴巴天貓?jiān)O(shè)計(jì)專家；10年知名互聯(lián)網(wǎng)公司設(shè)計(jì)經(jīng)驗(yàn)，在產(chǎn)品0到1、品牌定位、金融產(chǎn)品、設(shè)計(jì)規(guī)范、運(yùn)營(yíng)規(guī)范、推廣等方面有豐富的實(shí)踐經(jīng)驗(yàn)。

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