本文共享九種方法來幫助您構(gòu)建更高效的可視化層次結(jié)構(gòu)。享受?

視覺層次結(jié)構(gòu)是塑造優(yōu)秀數(shù)字產(chǎn)品的基礎(chǔ)，這些產(chǎn)品允許以更有效的方式組織內(nèi)容，使其更容易理解。視覺水平對用戶體驗(yàn)有很大影響。信息的組織清晰直觀，直接影響整體導(dǎo)航和瀏覽互動(dòng)。

雖然每個(gè)人都對視覺水平有基本的了解，但在設(shè)計(jì)過程中，可以采取哪些措施來確保合理的視覺水平？首先，不同的產(chǎn)品構(gòu)造方法肯定是不同的，但有一些相對的一般方法適用于大多數(shù)情況。今天的文章為您提供了一些視覺水平構(gòu)建的一般技巧。

1.根據(jù)您的業(yè)務(wù)目標(biāo)構(gòu)建

每個(gè)數(shù)字產(chǎn)品背后都有明確的業(yè)務(wù)目標(biāo)。為了實(shí)現(xiàn)這些目標(biāo)，創(chuàng)意團(tuán)隊(duì)可以根據(jù)目標(biāo)確定不同元素的重要性和優(yōu)先級。電子商務(wù)網(wǎng)站是最典型的案例。不同的元素占據(jù)不同的層次，共同努力實(shí)現(xiàn)目標(biāo)。其中，圖片是最重要的視覺元素之一，它用于吸引用戶的注意力，并在視覺上鼓勵(lì)用戶考慮它。標(biāo)題位于圖片后面，產(chǎn)品以文字描述。之后，通過CTA按鈕向用戶提供醒目的購買條目。明確的業(yè)務(wù)目標(biāo)和明確的營銷方向?qū)樵O(shè)計(jì)團(tuán)隊(duì)提供視覺設(shè)計(jì)的基礎(chǔ)。

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

在之前的文章中，沒有提到用戶的瀏覽模式。兩種最常見的瀏覽模式是F型瀏覽模式和Z型瀏覽模式。

當(dāng)用戶瀏覽具有大量內(nèi)容（如新聞和博客）的網(wǎng)站時(shí)，他們將使用F模式快速掃描并找到他們感興趣的內(nèi)容。用戶將首先平移景觀，然后向下移動(dòng)視線，然后水平瀏覽。整個(gè)視線的軌跡類似于字母F，并且用戶將一目了然地繼續(xù)找到他或她感興趣的關(guān)鍵字或內(nèi)容。

Z型瀏覽模式主要發(fā)生在不太復(fù)雜的頁面中，即使不包含太多文本內(nèi)容，用戶也會從上到下快速從左到右瀏覽，整個(gè)視覺軌跡類似于字母Z. 。

通過了解這些用戶瀏覽模式，您可以有意識地將關(guān)鍵元素放置在用戶掃描最多的節(jié)點(diǎn)上，具體取決于實(shí)際情況，引起用戶的注意。

3，功能優(yōu)先

分層感似乎更具偏見和美學(xué)設(shè)計(jì)，但實(shí)際上它的功能性更強(qiáng)。設(shè)計(jì)人員需要確保產(chǎn)品用戶能夠清楚地使用它們，并且導(dǎo)航足以引導(dǎo)用戶。功能級別比視覺級別更重要，并且它具有不足以構(gòu)建有效且可用的產(chǎn)品體驗(yàn)的視覺級別。沒有良好結(jié)構(gòu)的界面自然不會提供足夠好的用戶體驗(yàn)。因此，在設(shè)計(jì)UI時(shí)，應(yīng)該在功能上構(gòu)建視覺級別。只有確保功能的可用性，例如導(dǎo)航的可用性，視覺水平才會發(fā)揮作用。

空白也是一個(gè)需要控制的視覺元素

要離開的第一件事不僅僅是元素和元素之間的空域。它也是用于構(gòu)建布局的可視元素。白色空間的重要性在于它允許用戶注意到由白色空間包圍的元素，尤其是關(guān)鍵交互控件。通過控制白色空間的密度，設(shè)計(jì)者可以使不同元素之間的關(guān)系顯現(xiàn)出來，并且大量的空白也可以使需要強(qiáng)調(diào)的關(guān)鍵元素突出地呈現(xiàn)給用戶。換句話說，如果使用空格，則可以自然地控制UI的分層。

5.使用黃金比例

幾天前，我們寫了一篇專門討論在UI中使用黃金比率的文章。黃金比例是1: 1.618，這被認(rèn)為是最美麗的視覺比例。它幾乎無處不在，許多美麗的自然景觀和生物奇觀大多與黃金比例有關(guān)。

許多設(shè)計(jì)師喜歡在布局框架中使用黃金比例，這使得布局輕巧，重量足以協(xié)調(diào)。

6，使用網(wǎng)格

網(wǎng)格是設(shè)計(jì)人員控制布局的關(guān)鍵工具之一。布局在不同的鏈接中扮演不同的角色，控制視覺水平同樣有用。網(wǎng)格有助于將不同的元素保持在不同的比例下，保持合理的距離，并控制空白區(qū)域。通常，網(wǎng)格對于水平控制非常有效。

7，增加顏色

在控制視覺水平時(shí)，顏色所起的作用也是不可替代的。在許多情況下，顏色可以幫助理解哪些元素是核心。在整個(gè)配色方案中，顏色通常有優(yōu)點(diǎn)和缺點(diǎn)。紅色和橙色等大膽的顏色比相對較弱的白色和淺灰色更顯眼，設(shè)計(jì)師經(jīng)常使用引人注目的顏色來突出關(guān)鍵內(nèi)容。

當(dāng)使用色彩構(gòu)造水平時(shí)，關(guān)鍵在于控制水平，有一定程度的對比度。

8，注意字體的使用

視覺層次結(jié)構(gòu)的控制還涉及字體和排版的關(guān)鍵部分。不同的字體組合和不同大小的字體也直接影響視覺水平的構(gòu)建。標(biāo)題和顯示文本中使用的字體應(yīng)與正文部分的字體清楚地對比。這種對比度通常通過字體系列，顏色和大小以及橫幅中的顯示副本，正文標(biāo)題，副標(biāo)題和正文來區(qū)分。內(nèi)容這些內(nèi)容處于不同的層次，重要性不同，功能不同，并且自然地處于不同的層次。但是，一般來說，設(shè)計(jì)師需要控制三個(gè)類別中的字體數(shù)量，太多字體會使整個(gè)設(shè)計(jì)看起來凌亂。

9，桌面級別3，移動(dòng)級別2級

在特定的內(nèi)容級別控制上，桌面和移動(dòng)設(shè)備有不同的要求。在相對較大的桌面屏幕上瀏覽網(wǎng)頁時(shí)，三個(gè)級別的信息可以使頁面看起來豐富，但信息的呈現(xiàn)足夠清晰和有條理，主要和核心信息最有可能引起注意。用戶。這是第一級;易于掃描的文本內(nèi)容以標(biāo)題和副標(biāo)題的形式呈現(xiàn)，這有助于用戶對內(nèi)容有基本的了解，而文本和描述則更具體地顯示內(nèi)容供用戶仔細(xì)閱讀。

但是，移動(dòng)端的情況卻截然不同。小屏幕不足以攜帶三級信息顯示。通常，設(shè)計(jì)師將內(nèi)容分為兩個(gè)級別，以便用戶可以輕松地吸收它。用戶界面看起來清新直觀，用戶則不然。我很困惑，因?yàn)橛刑嗟乃健?

結(jié)論

高效的分層結(jié)構(gòu)不僅僅是一個(gè)美學(xué)方面，它還具有功能性。擁有一個(gè)有效的層次結(jié)構(gòu)來幫助用戶獲得更多信息并幫助他們更輕松地實(shí)現(xiàn)業(yè)務(wù)目標(biāo)，這并不是一件令人高興的事。

原作者: Tubik Studio

譯者：陳子木

翻譯地址：http://www.uisdc.com/9-effective-tips-visual-hierarchy

本文由@陳子木授權(quán)，未經(jīng)作者許可，禁止轉(zhuǎn)載。

標(biāo)題圖來自英國，基于CC0協(xié)議

« 三面無框全屏！小米雙十一新款65英寸一體機(jī)上市！ | 阿里1元訴訟獲勝：繼續(xù)打擊刷牙行為 »