起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識視覺層次構建的9個技巧
本文分享了9個方法，幫你搭建更加高效的視覺層次。enjoy~
視覺層次是塑造優秀數字產品的基礎，它能讓內容以更加有效的方式被組織到一起，使其更容易被理解。視覺層次對于用戶體驗的影響很大，信息的組織架構是否清晰直觀，將直接影響到整體的導航和瀏覽交互。
雖然大家對于視覺層次都有基本的認知，但是在設計的過程中，要怎么做才能確保構建出合理的視覺層次呢？首先，不同的產品構建放方法肯定是不一樣的，不過有一些相對通用的方法，適用于多數的情況。今天的文章就為你提供一些通用的視覺層次構建的技巧。
1、基于你的業務目標來構建
每個數字產品背后通常都有著明確的商業目標。為了實現這些目標，創意團隊可以基于目標來確定不同元素的重要性和優先級。電商網站是就是最典型的案例，不同的元素占據不同的層次，共同達成目標。這當中，圖片是最重要的視覺元素之一，它是用來吸引用戶的注意力，從視覺上鼓勵用戶考慮它。標題在圖片之后，對產品在文字上予以描述。在此之后，借助CTA按鈕為用戶提供醒目的購買入口。明確的商業目標和清晰的營銷方向將會為設計團隊提供視覺設計的依據。
2、結合用戶瀏覽模式來構建層次
在以前的文章當中沒少提到用戶的瀏覽模式，其中最常見的兩種瀏覽模式就是F型瀏覽模式和Z型瀏覽模式。
用戶在瀏覽新聞和博客等內容量較大的網站頁面的時候，會采用F型模式來快速掃視，定位自己感興趣的內容。用戶會先橫向掃視，然后視線向下移動，再橫向瀏覽。整個視線的軌跡類似于字母F，而用戶會在掃視過程中不斷找到自己感興趣的關鍵詞或者內容。
Z型瀏覽模式則主要發生在不那么復雜的頁面當中，甚至于其中都不會包含太多的文本內容，用戶會快速地從左到右從上到下瀏覽，整個視覺軌跡類似字母Z。
了解這些用戶瀏覽模式，你就可以根據實際狀況，有意識地將關鍵的元素放置在用戶掃視最多的節點上，引起用戶的注意。
3、功能優先
層次感這東西看起來是更偏向與美學設計，但是實際上它的功能性會顯得更強一些。設計師需要確保產品用戶能夠清晰地使用，并且導航足以引導用戶。而功能性的層次比起視覺層次要更加重要，單純擁有了視覺層次，不足以構建高效可用的產品體驗。而結構化不夠明晰的界面，自然也就無法帶來足夠好的用戶體驗了。所以，在進行UI設計的時候，視覺層次的構建應該依托于功能，只有確保了功能的可用，比如導航的可用性，視覺層次才會發揮它的作用。
4、留白同樣是需要掌控的視覺元素
首先留白不單純只是元素和元素之間的空域。它同樣是用來構建布局的視覺元素。留白的重要性在于，它可以使得被留白包圍的元素被用戶注意到，尤其是關鍵性的交互控件。通過控制留白的疏密，設計師能夠讓不同的元素之間的親疏關系體現出來，而大量的留白還能讓關鍵性的、需要強調的特定元素，醒目地呈現在用戶面前。換句話來說，用好了留白，自然也就能自如地控制UI的層次感。
5、利用黃金比例
前幾天，我們撰寫了一篇文章專門探討了在UI當中使用黃金比例的方法。黃金比例是1:1.618，被認為是最具美感的視覺比例，在自然界當中幾乎無處不在，而許多美麗的自然景觀和生物奇觀，大多都和黃金比例有著或深或淺的關聯。
許多設計師喜歡在布局框架中使用黃金比例，它能使得布局有輕重，又顯得足夠協調。
6、使用柵格
柵格是設計師控制布局的關鍵性工具之一，布局在不同的環節發揮著不同的作用，而控制視覺層次，同樣有用。柵格有助于將不同的元素控制在不同的比例大小之下，保持合理的距離，控制留白。總體上，柵格對于層次的控制是非常有效的。
7、增加色彩
在控制視覺層次的時候，色彩所起到的作用也是不可替代的。在很多時候，色彩能夠幫助用明白哪些元素是核心。在整個配色當中，色彩通常有著強弱之分。大膽的色彩諸如紅色和橙色，就比相對弱一些的白色和淺灰要來的顯眼，設計師常常使用醒目的顏色來高亮顯示關鍵性的內容。
在使用色彩構建層次的時候，關鍵在于層級的控制，有對比才有層次。
8、注意字體的使用
視覺層次結構的控制還涉及到一個關鍵的部分，就是字體和排版。不同的字體組合，不同大小的字體搭配，同樣直接影響著視覺層次的構建。標題和展示性的文本所使用的字體和正文部分的字體應該著明顯的對比，這樣的對比一般是通過字體家族、色彩和大小來進行區分，Banner 中的展示性文案、正文標題、副標題、正文內容這些內容所處層次不同，重要性不同，功能也不盡相同，自然也就處于不同的層次。不過，通常而言，設計師需要將字體數量控制在3種以內，太多的字體會讓整個設計顯得凌亂不堪。
9、桌面端3層級，移動端2層級
在具體的內容層級控制上，桌面端和移動端有著不一樣的要求。在相對較大的桌面端屏幕上瀏覽網頁的時候，3個層級的信息能夠讓頁面看起來豐富，但是信息的呈現又足夠清晰有條理，主要和核心的信息最容易吸引用戶的注意力，這是第一個層級；易于掃視的文本內容以標題和副標題的形式呈現，幫助用戶對于內容有基本的了解，而正文和說明則將內容更為具體地展現出來，供用戶仔細閱讀。
但是移動端的情況則截然不同，小屏幕上并不足以承載3個層級的信息展現，通常設計師會將內容劃分為兩個層級，這樣用戶便于吸收，UI看起來足夠清爽直觀，用戶也不會因為層級過多而感到混亂。
結語
高效的層級構建不僅僅是美學層面上的事情，它同樣是功能性的。有效的層級結構搭建幫助用戶更輕松獲取信息，更能幫助產品更容易達到商業目標，這不是皆大歡喜么？
原文作者 :?Tubik Studio
譯者：?陳子木
譯文地址：http://www.uisdc.com/9-effective-tips-visual-hierarchy
本文由 @陳子木 授權發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自 Pixabay，基于 CC0 協議
666