9個方法幫你成為更高視覺層次的UI設(shè)計師

雖然大家對于視覺層次都有基本的認知，但是在設(shè)計的過程中，要怎么做才能確保構(gòu)建出合理的視覺層次呢？首先，不同的產(chǎn)品構(gòu)建放方法肯定是不一樣的，不過有一些相對通用的方法，適用于多數(shù)的情況。今天的文章就為你提供一些通用的視覺層次構(gòu)建的技巧。

 

1、基于你的業(yè)務(wù)目標(biāo)來構(gòu)建

每個數(shù)字產(chǎn)品背后通常都有著明確的商業(yè)目標(biāo)。為了實現(xiàn)這些目標(biāo)，創(chuàng)意團隊可以基于目標(biāo)來確定不同元素的重要性和優(yōu)先級。電商網(wǎng)站是就是最典型的案例，不同的元素占據(jù)不同的層次，共同達成目標(biāo)。這當(dāng)中，圖片是最重要的視覺元素之一，它是用來吸引用戶的注意力，從視覺上鼓勵用戶考慮它。標(biāo)題在圖片之后，對產(chǎn)品在文字上予以描述。在此之后，借助CTA按鈕為用戶提供醒目的購買入口。明確的商業(yè)目標(biāo)和清晰的營銷方向?qū)樵O(shè)計團隊提供視覺設(shè)計的依據(jù)。

2、結(jié)合用戶瀏覽模式來構(gòu)建層次

在以前的文章當(dāng)中沒少提到用戶的瀏覽模式，其中最常見的兩種瀏覽模式就是F型瀏覽模式和Z型瀏覽模式。

用戶在瀏覽新聞和博客等內(nèi)容量較大的網(wǎng)站頁面的時候，會采用F型模式來快速掃視，定位自己感興趣的內(nèi)容。用戶會先橫向掃視，然后視線向下移動，再橫向瀏覽。整個視線的軌跡類似于字母F，而用戶會在掃視過程中不斷找到自己感興趣的關(guān)鍵詞或者內(nèi)容。

Z型瀏覽模式則主要發(fā)生在不那么復(fù)雜的頁面當(dāng)中，甚至于其中都不會包含太多的文本內(nèi)容，用戶會快速地從左到右從上到下瀏覽，整個視覺軌跡類似字母Z。

了解這些用戶瀏覽模式，你就可以根據(jù)實際狀況，有意識地將關(guān)鍵的元素放置在用戶掃視最多的節(jié)點上，引起用戶的注意。

3、功能優(yōu)先

層次感這東西看起來是更偏向與美學(xué)設(shè)計，但是實際上它的功能性會顯得更強一些。設(shè)計師需要確保產(chǎn)品用戶能夠清晰地使用，并且導(dǎo)航足以引導(dǎo)用戶。而功能性的層次比起視覺層次要更加重要，單純擁有了視覺層次，不足以構(gòu)建高效可用的產(chǎn)品體驗。而結(jié)構(gòu)化不夠明晰的界面，自然也就無法帶來足夠好的用戶體驗了。所以，在進行UI設(shè)計的時候，視覺層次的構(gòu)建應(yīng)該依托于功能，只有確保了功能的可用，比如導(dǎo)航的可用性，視覺層次才會發(fā)揮它的作用。

 

4、留白同樣是需要掌控的視覺元素

首先留白不單純只是元素和元素之間的空域。它同樣是用來構(gòu)建布局的視覺元素。留白的重要性在于，它可以使得被留白包圍的元素被用戶注意到，尤其是關(guān)鍵性的交互控件。通過控制留白的疏密，設(shè)計師能夠讓不同的元素之間的親疏關(guān)系體現(xiàn)出來，而大量的留白還能讓關(guān)鍵性的、需要強調(diào)的特定元素，醒目地呈現(xiàn)在用戶面前。換句話來說，用好了留白，自然也就能自如地控制UI的層次感。

5、利用黃金比例

前幾天，我們撰寫了一篇文章專門探討了在UI當(dāng)中使用黃金比例的方法。黃金比例是1:1.618，被認為是最具美感的視覺比例，在自然界當(dāng)中幾乎無處不在，而許多美麗的自然景觀和生物奇觀，大多都和黃金比例有著或深或淺的關(guān)聯(lián)。

許多設(shè)計師喜歡在布局框架中使用黃金比例，它能使得布局有輕重，又顯得足夠協(xié)調(diào)。

6、使用柵格

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

 

7、增加色彩

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

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

8、注意字體的使用

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

 

9、桌面端3層級，移動端2層級

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

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