視覺層次是塑造優(yōu)秀數(shù)字產(chǎn)品的基礎(chǔ)，它能讓內(nèi)容以更加有效的方式被組織到一起，使其更容易被理解。視覺層次對(duì)于用戶體驗(yàn)的影響很大，信息的組織架構(gòu)是否清晰直觀，將直接影響到整體的導(dǎo)航和瀏覽交互。

雖然大家對(duì)于視覺層次都有基本的認(rèn)知，但是在設(shè)計(jì)的過程中，要怎么做才能確保構(gòu)建出合理的視覺層次呢？首先，不同的產(chǎn)品構(gòu)建放方法肯定是不一樣的，不過有一些相對(duì)通用的方法，適用于多數(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)先級(jí)。電商網(wǎng)站是就是最典型的案例，不同的元素占據(jù)不同的層次，共同達(dá)成目標(biāo)。這當(dāng)中，圖片是最重要的視覺元素之一，它是用來吸引用戶的注意力，從視覺上鼓勵(lì)用戶考慮它。標(biāo)題在圖片之后，對(duì)產(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í)際狀況，有意識(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)。當(dāng)然，更具體的使用，可以參考這篇文章：《用好黃金比例，用協(xié)調(diào)自然的配比照亮你設(shè)計(jì)的UI》

6、使用柵格

柵格是設(shè)計(jì)師控制布局的關(guān)鍵性工具之一，布局在不同的環(huán)節(jié)發(fā)揮著不同的作用，而控制視覺層次，同樣有用。柵格有助于將不同的元素控制在不同的比例大小之下，保持合理的距離，控制留白。總體上，柵格對(duì)于層次的控制是非常有效的。

7、增加色彩

在控制視覺層次的時(shí)候，色彩所起到的作用也是不可替代的。在很多時(shí)候，色彩能夠幫助用明白哪些元素是核心。在整個(gè)配色當(dāng)中，色彩通常有著強(qiáng)弱之分。大膽的色彩諸如紅色和橙色，就比相對(duì)弱一些的白色和淺灰要來的顯眼，設(shè)計(jì)師常常使用醒目的顏色來高亮顯示關(guān)鍵性的內(nèi)容。

在使用色彩構(gòu)建層次的時(shí)候，關(guān)鍵在于層級(jí)的控制，有對(duì)比才有層次。

8、注意字體的使用

視覺層次結(jié)構(gòu)的控制還涉及到一個(gè)關(guān)鍵的部分，就是字體和排版。不同的字體組合，不同大小的字體搭配，同樣直接影響著視覺層次的構(gòu)建。標(biāo)題和展示性的文本所使用的字體和正文部分的字體應(yīng)該著明顯的對(duì)比，這樣的對(duì)比一般是通過字體家族、色彩和大小來進(jìn)行區(qū)分，Banner 中的展示性文案、正文標(biāo)題、副標(biāo)題、正文內(nèi)容這些內(nèi)容所處層次不同，重要性不同，功能也不盡相同，自然也就處于不同的層次。不過，通常而言，設(shè)計(jì)師需要將字體數(shù)量控制在3種以內(nèi)，太多的字體會(huì)讓整個(gè)設(shè)計(jì)顯得凌亂不堪。

9、桌面端3層級(jí)，移動(dòng)端2層級(jí)

在具體的內(nèi)容層級(jí)控制上，桌面端和移動(dòng)端有著不一樣的要求。在相對(duì)較大的桌面端屏幕上瀏覽網(wǎng)頁的時(shí)候，3個(gè)層級(jí)的信息能夠讓頁面看起來豐富，但是信息的呈現(xiàn)又足夠清晰有條理，主要和核心的信息最容易吸引用戶的注意力，這是第一個(gè)層級(jí)；易于掃視的文本內(nèi)容以標(biāo)題和副標(biāo)題的形式呈現(xiàn)，幫助用戶對(duì)于內(nèi)容有基本的了解，而正文和說明則將內(nèi)容更為具體地展現(xiàn)出來，供用戶仔細(xì)閱讀。

但是移動(dòng)端的情況則截然不同，小屏幕上并不足以承載3個(gè)層級(jí)的信息展現(xiàn)，通常設(shè)計(jì)師會(huì)將內(nèi)容劃分為兩個(gè)層級(jí)，這樣用戶便于吸收，UI看起來足夠清爽直觀，用戶也不會(huì)因?yàn)閷蛹?jí)過多而感到混亂。

結(jié)語

高效的層級(jí)構(gòu)建不僅僅是美學(xué)層面上的事情，它同樣是功能性的。有效的層級(jí)結(jié)構(gòu)搭建幫助用戶更輕松獲取信息，更能幫助產(chǎn)品更容易達(dá)到商業(yè)目標(biāo)，這不是皆大歡喜么？

【2018年設(shè)計(jì)趨勢(shì)，一個(gè)都不要錯(cuò)過】

1. 《2018年，這10個(gè)LOGO設(shè)計(jì)趨勢(shì)值得你關(guān)注》
2. 《超全面總結(jié)！2017年UI設(shè)計(jì)領(lǐng)域流行過這21個(gè)設(shè)計(jì)趨勢(shì)》
3. 《掌握這12個(gè)移動(dòng)端UX設(shè)計(jì)趨勢(shì)，你就掌控了2018年》
4. 《這款獨(dú)特的紫色，是為你指引2018年設(shè)計(jì)方向的年度潘通色》

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com