天津ui設計培訓,視覺層次篇(新手必看)

現在視覺層次對于用戶體驗的影響很大，信息的組織架構是否清晰直觀，將直接影響到整體的導航和瀏覽交互。

雖然大家對于視覺層次都有基本的認知，但是在整個設計的過程中，怎么樣做才能確保構建出合理的視覺層次呢？(誠筑說)

一．基于你的業務目標來建構

圖片是最重要的視覺元素之一，它是用來吸引用戶的注意力，從視覺上鼓勵用戶考慮它。

二．結合用戶瀏覽模式

最常見的兩種瀏覽模式，Z型和F型。

F型用戶會選擇自己喜歡的內容橫著瀏覽，然后向下瀏覽，再橫瀏覽。而且用戶會在掃視的過程中，會不斷的掃視自己感興趣的內容和關鍵詞。整個視覺軌跡類似字母F。

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

三．功能優先

層次感這種東西感覺很偏向與美學有關的東西，但其實功能性更強一些。必須保證導航可以清楚的指引用戶，功能性的層次要高于視覺層次，這樣產品體驗更高。

界面一定要結構化，可以增加用戶體驗。

所以，視覺層次的構建應該依托于功能，比如導航的可用性，視覺層次才會發揮它的作用。

四．留白也很重要

留白的重要性在于，它可以使得被留白包圍的元素被用戶注意到，尤其是關鍵性的交互控件。讓不同的元素之間的親疏關系體現出來，而大量的留白還能讓關鍵性的、需要強調的特定元素，醒目地呈現在用戶面前

五．使用柵格

柵格有助于將不同的元素控制在不同的比例大小之下，保持合理的距離，控制留白。

六．增加色彩

色彩搭配可以幫助明白哪些主要的，形成主次之分，哪些是核心。設計師常常使用醒目的顏色來高亮顯示關鍵性的內容。

七．注意字體使用

字體和排版，直接影響視覺層次的建構。標題和展示型文本使用的字體和正文部分字體應該形成明顯的對比。重要性不同，功能不同，自然就是不同的層次。

八．桌面端3層，移動端2層

桌面端和移動端有著不同的要求。

3個層級的信息能夠讓頁面看起來豐富，但是信息的呈現又足夠清晰有條理，主要和核心的信息最容易吸引用戶的注意力，這是*個層級；

易于掃視的文本內容以標題和副標題的形式呈現，幫助用戶對于內容有基本的了解，而正文和說明則將內容更為具體地展現出來，供用戶仔細閱讀。

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