??
視覺層次是塑造優(yōu)秀數(shù)字產(chǎn)品的基礎(chǔ)，它能讓內(nèi)容以更加有效的方式被組織到一起愿吹，使其更容易被理解不从。視覺層次對于用戶體驗(yàn)的影響很大，信息的組織架構(gòu)是否清晰直觀犁跪，將直接影響到整體的導(dǎo)航和瀏覽交互椿息。
雖然大家對于視覺層次都有基本的認(rèn)知，但是在設(shè)計(jì)的過程中坷衍，要怎么做才能確保構(gòu)建出合理的視覺層次呢寝优？首先，不同的產(chǎn)品構(gòu)建放方法肯定是不一樣的枫耳，不過有一些相對通用的方法乏矾，適用于多數(shù)的情況。
今天的文章就為你提供一些通用的視覺層次構(gòu)建的技巧迁杨。
1钻心、基于你的業(yè)務(wù)目標(biāo)來構(gòu)建
每個(gè)數(shù)字產(chǎn)品背后通常都有著明確的商業(yè)目標(biāo)。為了實(shí)現(xiàn)這些目標(biāo)铅协，創(chuàng)意團(tuán)隊(duì)可以基于目標(biāo)來確定不同元素的重要性和優(yōu)先級捷沸。
電商網(wǎng)站是就是最典型的案例，不同的元素占據(jù)不同的層次狐史，共同達(dá)成目標(biāo)痒给。這當(dāng)中，圖片是最重要的視覺元素之一骏全，它是用來吸引用戶的注意力苍柏，從視覺上鼓勵(lì)用戶考慮它。
標(biāo)題在圖片之后姜贡，對產(chǎn)品在文字上予以描述试吁。在此之后，借助CTA按鈕為用戶提供醒目的購買入口楼咳。明確的商業(yè)目標(biāo)和清晰的營銷方向?qū)?huì)為設(shè)計(jì)團(tuán)隊(duì)提供視覺設(shè)計(jì)的依據(jù)潘悼。
2、結(jié)合用戶瀏覽模式來構(gòu)建層次
在以前的文章當(dāng)中沒少提到用戶的瀏覽模式爬橡，其中最常見的兩種瀏覽模式就是F型瀏覽模式和Z型瀏覽模式治唤。
用戶在瀏覽新聞和博客等內(nèi)容量較大的網(wǎng)站頁面的時(shí)候，會(huì)采用F型模式來快速掃視糙申，定位自己感興趣的內(nèi)容宾添。用戶會(huì)先橫向掃視，然后視線向下移動(dòng)，再橫向?yàn)g覽缕陕。整個(gè)視線的軌跡類似于字母F粱锐，而用戶會(huì)在掃視過程中不斷找到自己感興趣的關(guān)鍵詞或者內(nèi)容。
Z型瀏覽模式則主要發(fā)生在不那么復(fù)雜的頁面當(dāng)中扛邑，甚至于其中都不會(huì)包含太多的文本內(nèi)容怜浅，用戶會(huì)快速地從左到右從上到下瀏覽，整個(gè)視覺軌跡類似字母Z蔬崩。
了解這些用戶瀏覽模式恶座，你就可以根據(jù)實(shí)際狀況，有意識地將關(guān)鍵的元素放置在用戶掃視最多的節(jié)點(diǎn)上沥阳，引起用戶的注意跨琳。
3、功能優(yōu)先
層次感這東西看起來是更偏向與美學(xué)設(shè)計(jì)桐罕，但是實(shí)際上它的功能性會(huì)顯得更強(qiáng)一些脉让。設(shè)計(jì)師需要確保產(chǎn)品用戶能夠清晰地使用，并且導(dǎo)航足以引導(dǎo)用戶功炮。而功能性的層次比起視覺層次要更加重要溅潜，單純擁有了視覺層次，不足以構(gòu)建效可用的產(chǎn)品體驗(yàn)薪伏。而結(jié)構(gòu)化不夠明晰的界面肉津，自然也就無法帶來足夠好的用戶體驗(yàn)了儒溉。
所以送浊，在進(jìn)行UI設(shè)計(jì)的時(shí)候边灭，視覺層次的構(gòu)建應(yīng)該依托于功能潦牛，只有確保了功能的可用眶掌，比如導(dǎo)航的可用性，視覺層次才會(huì)發(fā)揮它的作用巴碗。
4朴爬、留白同樣是需要掌控的視覺元素
首先留白不單純只是元素和元素之間的空域。它同樣是用來構(gòu)建布局的視覺元素橡淆。
留白的重要性在于召噩，它可以使得被留白包圍的元素被用戶注意到，尤其是關(guān)鍵性的交互控件逸爵。通過控制留白的疏密具滴，設(shè)計(jì)師能夠讓不同的元素之間的親疏關(guān)系體現(xiàn)出來，而大量的留白還能讓關(guān)鍵性的师倔、需要強(qiáng)調(diào)的特定元素构韵，醒目地呈現(xiàn)在用戶面前。換句話來說，用好了留白疲恢，自然也就能自如地控制UI的層次感凶朗。
5、利用黃金比例
前幾天显拳，我們撰寫了一篇文章專門探討了在UI當(dāng)中使用黃金比例的方法棚愤。黃金比例是1:1.618，被認(rèn)為是最具美感的視覺比例杂数，在自然界當(dāng)中幾乎無處不在宛畦，而許多美麗的自然景觀和生物奇觀，大多都和黃金比例有著或深或淺的關(guān)聯(lián)耍休。
許多設(shè)計(jì)師喜歡在布局框架中使用黃金比例刃永，它能使得布局有輕重，又顯得足夠協(xié)調(diào)羊精。
6斯够、使用柵格
柵格是設(shè)計(jì)師控制布局的關(guān)鍵性工具之一，布局在不同的環(huán)節(jié)發(fā)揮著不同的作用喧锦，而控制視覺層次读规，同樣有用。柵格有助于將不同的元素控制在不同的比例大小之下燃少，保持合理的距離束亏，控制留白≌缶撸總體上碍遍，柵格對于層次的控制是非常有效的。
7阳液、增加色彩
在控制視覺層次的時(shí)候怕敬，色彩所起到的作用也是不可替代的。在很多時(shí)候帘皿，色彩能夠幫助用明白哪些元素是核心东跪。在整個(gè)配色當(dāng)中，色彩通常有著強(qiáng)弱之分鹰溜。大膽的色彩諸如紅色和橙色虽填，就比相對弱一些的白色和淺灰要來的顯眼，設(shè)計(jì)師常常使用醒目的顏色來高亮顯示關(guān)鍵性的內(nèi)容曹动。
在使用色彩構(gòu)建層次的時(shí)候斋日，關(guān)鍵在于層級的控制，有對比才有層次墓陈。
8桑驱、注意字體的使用
視覺層次結(jié)構(gòu)的控制還涉及到一個(gè)關(guān)鍵的部分竭恬，就是字體和排版。不同的字體組合熬的，不同大小的字體搭配痊硕，同樣直接影響著視覺層次的構(gòu)建。
標(biāo)題和展示性的文本所使用的字體和正文部分的字體應(yīng)該著明顯的對比押框，這樣的對比一般是通過字體家族岔绸、色彩和大小來進(jìn)行區(qū)分，Banner 中的展示性文案橡伞、正文標(biāo)題盒揉、副標(biāo)題、正文內(nèi)容這些內(nèi)容所處層次不同兑徘，重要性不同刚盈，功能也不盡相同，自然也就處于不同的層次挂脑。
不過藕漱，通常而言，設(shè)計(jì)師需要將字體數(shù)量控制在3種以內(nèi)崭闲，太多的字體會(huì)讓整個(gè)設(shè)計(jì)顯得凌亂不堪肋联。
9、桌面端3層級刁俭，移動(dòng)端2層級
在具體的內(nèi)容層級控制上橄仍，桌面端和移動(dòng)端有著不一樣的要求。
在相對較大的桌面端屏幕上瀏覽網(wǎng)頁的時(shí)候牍戚，3個(gè)層級的信息能夠讓頁面看起來豐富侮繁，但是信息的呈現(xiàn)又足夠清晰有條理，主要和核心的信息最容易吸引用戶的注意力如孝，這是第一個(gè)層級宪哩；易于掃視的文本內(nèi)容以標(biāo)題和副標(biāo)題的形式呈現(xiàn)，幫助用戶對于內(nèi)容有基本的了解暑竟，而正文和說明則將內(nèi)容更為具體地展現(xiàn)出來，供用戶仔細(xì)閱讀育勺。
但是移動(dòng)端的情況則截然不同但荤，小屏幕上并不足以承載3個(gè)層級的信息展現(xiàn)，通常設(shè)計(jì)師會(huì)將內(nèi)容劃分為兩個(gè)層級涧至，這樣用戶便于吸收腹躁，UI看起來足夠清爽直觀，用戶也不會(huì)因?yàn)閷蛹夁^多而感到混亂南蓬。
結(jié)語：
高效的層級構(gòu)建不僅僅是美學(xué)層面上的事情纺非，它同樣是功能性的哑了。有效的層級結(jié)構(gòu)搭建幫助用戶更輕松獲取信息，更能幫助產(chǎn)品更容易達(dá)到商業(yè)目標(biāo)烧颖，這不是皆大歡喜么弱左？
