天津ui設(shè)計(jì)培訓(xùn),視覺層次篇(新手必看)

現(xiàn)在視覺層次對(duì)于用戶體驗(yàn)的影響很大，信息的組織架構(gòu)是否清晰直觀，將直接影響到整體的導(dǎo)航和瀏覽交互。

雖然大家對(duì)于視覺層次都有基本的認(rèn)知，但是在整個(gè)設(shè)計(jì)的過程中，怎么樣做才能構(gòu)建出合理的視覺層次呢？

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

圖片是較重要的視覺元素，它是用來吸引用戶的注意力，從視覺上鼓勵(lì)用戶考慮它。

二．結(jié)合用戶瀏覽模式

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

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

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

三．功能

層次感這種東西感覺很偏向與美學(xué)有關(guān)的東西，但其實(shí)功能性更強(qiáng)一些。必須導(dǎo)航可以清楚的指引用戶，功能性的層次要高于視覺層次，這樣產(chǎn)品體驗(yàn)更高。

界面一定要結(jié)構(gòu)化，可以增加用戶體驗(yàn)。

所以，視覺層次的構(gòu)建應(yīng)該依托于功能，比如導(dǎo)航的可用性，視覺層次才會(huì)發(fā)揮它的作用。

四．留白也很重要

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

五．使用柵格

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

六．增加色彩

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

七．注意字體使用

字體和排版，直接影響視覺層次的建構(gòu)。標(biāo)題和展示型文本使用的字體和正文部分字體應(yīng)該形成明顯的對(duì)比。重要性不同，功能不同，自然就是不同的層次。

八．桌面端3層，移動(dòng)端2層

桌面端和移動(dòng)端有著不同的要求。

3個(gè)層級(jí)的信息能夠讓頁(yè)面看起來豐富，但是信息的呈現(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í)過多而感到混亂。