火星網校
9個方法，幫你搭建更加高效的視覺層次！
發布時間：2018-11-17 19:57:24
視覺層次是塑造優秀數字產品的基礎，它能讓內容以更加有效的方式被組織到一起，使其更容易被理解。視覺層次對於用戶體驗的影響很大，信息的組織架構是否清晰直觀，將直接影響到整體的導航和瀏覽交互。
雖然大家對於視覺層次都有基本的認知，但是在設計的過程中，要怎麼做才能確保構建出合理的視覺層次呢？首先，不同的產品構建放方法肯定是不一樣的，不過有一些相對通用的方法，適用於多數的情況。今天的文章就為你提供一些通用的視覺層次構建的技巧。
1、基於你的業務目標來構建
每個數字產品背後通常都有著明確的商業目標。為了實現這些目標，創意團隊可以基於目標來確定不同元素的重要性和優先級。電商網站是就是最典型的案例，不同的元素占據不同的層次，共同達成目標。這當中，圖片是最重要的視覺元素之一，它是用來吸引用戶的注意力，從視覺上鼓勵用戶考慮它。標題在圖片之後，對產品在文字上予以描述。在此之後，借助CTA按鈕為用戶提供醒目的購買入口。明確的商業目標和清晰的營銷方向將會為設計團隊提供視覺設計的依據。
2、結合用戶瀏覽模式來構建層次
在以前的文章當中沒少提到用戶的瀏覽模式，其中最常見的兩種瀏覽模式就是F型瀏覽模式和Z型瀏覽模式。
用戶在瀏覽新聞和博客等內容量較大的網站頁麵的時候，會采用F型模式來快速掃視，定位自己感興趣的內容。用戶會先橫向掃視，然後視線向下移動，再橫向瀏覽。整個視線的軌跡類似於字母F，而用戶會在掃視過程中不斷找到自己感興趣的關鍵詞或者內容。
Z型瀏覽模式則主要發生在不那麼複雜的頁麵當中，甚至於其中都不會包含太多的文本內容，用戶會快速地從左到右從上到下瀏覽，整個視覺軌跡類似字母Z。
了解這些用戶瀏覽模式，你就可以根據實際狀況，有意識地將關鍵的元素放置在用戶掃視最多的節點上，引起用戶的注意。
3、功能優先
層次感這東西看起來是更偏向與美學設計，但是實際上它的功能性會顯得更強一些。設計師需要確保產品用戶能夠清晰地使用，並且導航足以引導用戶。而功能性的層次比起視覺層次要更加重要，單純擁有了視覺層次，不足以構建高效可用的產品體驗。而結構化不夠明晰的界麵，自然也就無法帶來足夠好的用戶體驗了。所以，在進行UI設計的時候，視覺層次的構建應該依托於功能，隻有確保了功能的可用，比如導航的可用性，視覺層次才會發揮它的作用。
4、留白同樣是需要掌控的視覺元素
首先留白不單純隻是元素和元素之間的空域。它同樣是用來構建布局的視覺元素。留白的重要性在於，它可以使得被留白包圍的元素被用戶注意到，尤其是關鍵性的交互控件。通過控製留白的疏密，設計師能夠讓不同的元素之間的親疏關係體現出來，而大量的留白還能讓關鍵性的、需要強調的特定元素，醒目地呈現在用戶麵前。換句話來說，用好了留白，自然也就能自如地控製UI的層次感。
5、利用黃金比例
前幾天，我們撰寫了一篇文章專門探討了在UI當中使用黃金比例的方法。黃金比例是1:1.618，被認為是最具美感的視覺比例，在自然界當中幾乎無處不在，而許多美麗的自然景觀和生物奇觀，大多都和黃金比例有著或深或淺的關聯。
許多設計師喜歡在布局框架中使用黃金比例，它能使得布局有輕重，又顯得足夠協調。當然，更具體的使用，可以參考這篇文章：《用好黃金比例，用協調自然的配比照亮你設計的UI》。
6、使用柵格
柵格是設計師控製布局的關鍵性工具之一，布局在不同的環節發揮著不同的作用，而控製視覺層次，同樣有用。柵格有助於將不同的元素控製在不同的比例大小之下，保持合理的距離，控製留白。總體上，柵格對於層次的控製是非常有效的。
7、增加色彩
在控製視覺層次的時候，色彩所起到的作用也是不可替代的。在很多時候，色彩能夠幫助用明白哪些元素是核心。在整個配色當中，色彩通常有著強弱之分。大膽的色彩諸如紅色和橙色，就比相對弱一些的白色和淺灰要來的顯眼，設計師常常使用醒目的顏色來高亮顯示關鍵性的內容。
在使用色彩構建層次的時候，關鍵在於層級的控製，有對比才有層次。
8、注意字體的使用
視覺層次結構的控製還涉及到一個關鍵的部分，就是字體和排版。不同的字體組合，不同大小的字體搭配，同樣直接影響著視覺層次的構建。標題和展示性的文本所使用的字體和正文部分的字體應該著明顯的對比，這樣的對比一般是通過字體家族、色彩和大小來進行區分，Banner 中的展示性文案、正文標題、副標題、正文內容這些內容所處層次不同，重要性不同，功能也不盡相同，自然也就處於不同的層次。不過，通常而言，設計師需要將字體數量控製在3種以內，太多的字體會讓整個設計顯得淩亂不堪。
9、桌麵端3層級，移動端2層級
在具體的內容層級控製上，桌麵端和移動端有著不一樣的要求。在相對較大的桌麵端屏幕上瀏覽網頁的時候，3個層級的信息能夠讓頁麵看起來豐富，但是信息的呈現又足夠清晰有條理，主要和核心的信息最容易吸引用戶的注意力，這是第一個層級；易於掃視的文本內容以標題和副標題的形式呈現，幫助用戶對於內容有基本的了解，而正文和說明則將內容更為具體地展現出來，供用戶仔細閱讀。
但是移動端的情況則截然不同，小屏幕上並不足以承載3個層級的信息展現，通常設計師會將內容劃分為兩個層級，這樣用戶便於吸收，UI看起來足夠清爽直觀，用戶也不會因為層級過多而感到混亂。
結語
高效的層級構建不僅僅是美學層麵上的事情，它同樣是功能性的。有效的層級結構搭建幫助用戶更輕鬆獲取信息，更能幫助產品更容易達到商業目標，這不是皆大歡喜麼？
（本文轉載於：優設網，譯者：@陳子木，原作者：Tubik Studio，原文地址：http://www.uisdc.com/9-effective-tips-visual-hierarchy）
分享
华体会hth体育网
賞析
-
2101期學員李思庭作品
-
2104期學員林雪茹作品
-
2107期學員趙淩作品
-
2107期學員趙燃作品
-
2106期學員徐正浩作品
-
2106期學員弓莉作品
-
2105期學員白羽新作品
-
2107期學員王佳蕊作品
熱門課程
專業講師指導 快速擺脫技能困惑
相關文章
多種教程 總有一個適合自己專業問題谘詢
你擔心的問題，火星幫你解答-
本文將為你探索室內設計需要學習的關鍵課程，並引導你如何在火星時代教育獲得專業的室內設計培訓。
-
本文將介紹適合學習Unreal Engine 4設計的人群，以及火星時代教育如何幫助您成為UE4設計領域的專業人士。
-
火星時代教育的商業廣告插畫班詳解插畫在商業廣告中的作用，以及如何提高你的插畫技巧，讓你的廣告項目得到更大的提升。
-
火星時代教育提供全麵的人物角色建模網絡培訓班，教您如何掌握角色建模的技巧，塑造出生動的遊戲角色。
-
平麵設計學習入門：火星時代教育帶你開啟設計之旅 | 引領設計未來
借助火星時代教育的專業教學，掌握平麵設計的基礎知識和技能，快速入門，開始你的設計之旅。
-
探究數字化虛擬人課程的重要性，以及火星時代教育如何幫助學生掌握相關知識和技能。關鍵詞：數字化虛擬人，火星時代教育。
