成功的產(chǎn)品設(shè)計(jì)都有清晰的視覺(jué)層級(jí)肌似。清晰的層級(jí)設(shè)計(jì)使每一個(gè)UI元素清晰的呈現(xiàn)出來(lái)讯赏，讓用戶易于理解垮兑。視覺(jué)元素的呈現(xiàn)效果對(duì)于用戶體驗(yàn)非常重要。設(shè)計(jì)合理的UI組件漱挎，可以讓用戶輕松的使用這個(gè)產(chǎn)品系枪，與產(chǎn)品進(jìn)行良好的互動(dòng)，并感到愉悅磕谅。
因此私爷，什么是視覺(jué)層級(jí)？雖然不同類型的產(chǎn)品有不同的構(gòu)建方法膊夹，但是仍然有一些通用的解決方案衬浑。今天這篇文章為設(shè)計(jì)師創(chuàng)建清晰的視覺(jué)層級(jí)提供了幾點(diǎn)有用的設(shè)計(jì)技巧。
1.牢記業(yè)務(wù)目標(biāo)
每一個(gè)產(chǎn)品都有商業(yè)目標(biāo)放刨。要實(shí)現(xiàn)這些目標(biāo)工秩，創(chuàng)意團(tuán)隊(duì)需要確定哪些UI元素更重要，并根據(jù)角色優(yōu)先考慮进统。比如助币，電子商務(wù)網(wǎng)站上的所有元素都執(zhí)行各種不同的任務(wù)。項(xiàng)目圖片是第一層級(jí)麻昼，因?yàn)樗仨氉尶蛻羧フJ(rèn)知它。標(biāo)題是解釋產(chǎn)品是什么馋辈，其次是按鈕鼓勵(lì)人們?nèi)ベ?gòu)買抚芦。根據(jù)產(chǎn)品的業(yè)務(wù)目標(biāo)和營(yíng)銷目標(biāo)，設(shè)計(jì)團(tuán)隊(duì)可以有效的優(yōu)化視覺(jué)元素突出產(chǎn)品，讓人印象深刻叉抡。
2.考慮瀏覽模式
人們會(huì)大致的瀏覽頁(yè)面以確定是否對(duì)產(chǎn)品感興趣尔崔。許多研究都表明，流行的瀏覽模式有“F”和“Z”形褥民。
F形瀏覽主要是用戶瀏覽大量的內(nèi)容的時(shí)候季春，例如博客、新聞平臺(tái)等消返。用戶的眼睛以F形移動(dòng)：人們首先掃描屏幕頂部的水平線载弄，然后向下移動(dòng)頁(yè)面閱讀一遍水平線，人們會(huì)在段落的開(kāi)始階段查找關(guān)鍵字撵颊，然后在副本左側(cè)的垂直線向下結(jié)束宇攻。
Z形圖案出現(xiàn)在不太復(fù)雜的頁(yè)面上，或者不需要向下滾動(dòng)的頁(yè)面上倡勇。人們首先從左上角開(kāi)始掃描頁(yè)面頭部逞刷，搜索核心內(nèi)容，然后沿著對(duì)角線向下到對(duì)角妻熊，在最底部從左到右結(jié)束夸浅。
了解這些模式的設(shè)計(jì)師會(huì)有效的組織內(nèi)容，將所有核心的界面元素放在最多的掃描點(diǎn)上扔役，引起用戶注意帆喇。
3.功能第一
視覺(jué)層級(jí)似乎和審美有關(guān)，但不僅于此厅目。首先番枚，通過(guò)構(gòu)建和組織視覺(jué)元素，設(shè)計(jì)師需要確保產(chǎn)品使用清晰损敷，導(dǎo)航正確葫笼。在美學(xué)上，異常的視覺(jué)元素的視覺(jué)層次不能有效的發(fā)揮作用拗馒。嚴(yán)重結(jié)構(gòu)化的用戶界面會(huì)導(dǎo)致糟糕的用戶體驗(yàn)路星。因此，在構(gòu)建視覺(jué)層次時(shí)诱桂，設(shè)計(jì)師考慮UI元素的功能以及他們?cè)趯?dǎo)航中的角色洋丐。
4.留白也是視覺(jué)元素
留白或負(fù)空間不僅僅是設(shè)計(jì)元素之間的區(qū)域，實(shí)際上是每個(gè)視覺(jué)構(gòu)圖的核心部分挥等。是一種能讓所有界面元素都能讓用戶引起注意友绝。設(shè)計(jì)師可以對(duì)UI組件進(jìn)行分組或分離，以便創(chuàng)建有效的布局肝劲。此外迁客，負(fù)空間有助于強(qiáng)調(diào)需要用戶高度關(guān)注的特定元素郭宝。留白是創(chuàng)建視覺(jué)層次結(jié)構(gòu)的有效工具，因此設(shè)計(jì)師需要平衡使用留白掷漱。
5.應(yīng)用黃金比例
黃金比例是被認(rèn)為人眼最美觀的元素粘室。是不同尺寸元素的數(shù)學(xué)比例。這個(gè)比例等于1:1.618卜范，可以用許多人看過(guò)的貝殼形螺旋來(lái)說(shuō)明衔统。
設(shè)計(jì)師通常在線框圖階段應(yīng)用黃金比例。它有助于規(guī)劃布局和調(diào)整用戶界面元素大小海雪，這對(duì)于用戶來(lái)說(shuō)是合適的比例锦爵。
6.使用網(wǎng)格
網(wǎng)格是創(chuàng)作過(guò)程中的不同階段的關(guān)鍵工具之一，視覺(jué)層次結(jié)構(gòu)也不例外喳魏。網(wǎng)格有助于構(gòu)建所有組件棉浸，并將它們放到合適的大小和比例中。更重要的是刺彩，設(shè)計(jì)師可以有效的利用負(fù)空間迷郑，因?yàn)榫W(wǎng)格顯示的元素是否按比例均勻放置。
7.添加一些顏色
顏色選擇和組合對(duì)視覺(jué)層次至關(guān)重要创倔，它們可以幫助用戶區(qū)分核心元素嗡害。顏色有自己的層次結(jié)構(gòu)，這是由影響用戶心智的模型來(lái)決定的畦攘。大膽的顏色霸妹，如紅色和橙色，很容易被注意到知押，所以設(shè)計(jì)師經(jīng)常使用它們作為突出顯示或設(shè)置對(duì)比度的手段叹螟。
此外，將一種顏色應(yīng)用與多種元素台盯。來(lái)顯示某種關(guān)聯(lián)罢绽。例如，您可以為購(gòu)買按鈕選擇紅色静盅，以便用戶在需要時(shí)可以直觀的找到它良价。
8.關(guān)注字體
視覺(jué)層次結(jié)構(gòu)包括一個(gè)稱為印刷層次結(jié)構(gòu)的核心部分。它的主旨是通過(guò)修改和組合字體蒿叠，將需要突出的部分建立對(duì)比明垢，這些元素應(yīng)該最先被注意到，并與普通文字形成對(duì)比市咽。字體可以通過(guò)調(diào)整大小痊银、顏色和對(duì)齊的方式。不同的字體可以將內(nèi)容分成不同的級(jí)別施绎，以便用戶可以感知信息溯革。但是泌射，建議設(shè)計(jì)師將字體保持在三種以內(nèi)，因?yàn)樘嗟淖煮w看起來(lái)很亂鬓照，并且使設(shè)計(jì)不一致。
9.網(wǎng)頁(yè)三種信息層級(jí)孤紧，移動(dòng)端兩種信息層級(jí)
如上所述豺裆，不同字體形成不同的級(jí)別，包括標(biāo)題号显、副標(biāo)題臭猜、正文副本，號(hào)召性用語(yǔ)元素和標(biāo)題等押蚤。有三種級(jí)別蔑歌，第一個(gè)是最高層級(jí)，旨在吸引用戶關(guān)注屏幕上的核心信息揽碘。第二級(jí)提供副元素次屠，可以讓用戶輕松的了解所瀏覽的內(nèi)容雳刺。第三級(jí)通常應(yīng)用正文和一些嬌小的類型的元素呈現(xiàn)數(shù)據(jù)劫灶。
許多情況下，數(shù)字產(chǎn)品都包含三個(gè)級(jí)別掖桦，因?yàn)樗鼈兡芴峁┐罅績(jī)?nèi)容本昏。另一方面，建議設(shè)計(jì)師為移動(dòng)設(shè)備設(shè)計(jì)時(shí)將層級(jí)保持在兩個(gè)以內(nèi)枪汪。小屏幕不能提供足夠的空間用于三個(gè)級(jí)別涌穆，因此輔助元素（如子標(biāo)題）必須放在一邊，使UI看起來(lái)干凈整潔雀久。
有效的視覺(jué)層級(jí)不僅關(guān)乎美學(xué)宿稀。它旨在提供解決問(wèn)題的導(dǎo)航和交互系統(tǒng)以及友好的用戶體驗(yàn)。為了創(chuàng)建足夠的視覺(jué)層級(jí)岸啡，設(shè)計(jì)師需要考慮功能和業(yè)務(wù)的目標(biāo)來(lái)組織所有UI元素原叮。
總結(jié)
本文針對(duì)如何加強(qiáng)視覺(jué)層級(jí)的設(shè)計(jì)介紹了九個(gè)設(shè)計(jì)要點(diǎn)，我們可以應(yīng)用以上原則進(jìn)行UI設(shè)計(jì)巡蘸，希望可以通過(guò)閱讀本文對(duì)你的設(shè)計(jì)有所幫助奋隶。
原文鏈接：https://uxplanet.org/9-effective-tips-on-visual-hierarchy-c3b30a7fd0ef
原文作者：Tubik Studio
