充足的視覺(jué)層次是成功數(shù)字產(chǎn)品的基礎(chǔ)。它有助于以有效的方式組織UI元素，以便內(nèi)容易于理解和令人愉快。視覺(jué)元素的呈現(xiàn)對(duì)用戶體驗(yàn)有很大影響。長(zhǎng)沙網(wǎng)站建設(shè)如果組件明智地組織，用戶可以毫不費(fèi)力地瀏覽產(chǎn)品并與產(chǎn)品交互并享受該過(guò)程。

那么，是什么構(gòu)成了強(qiáng)大的視覺(jué)層次結(jié)構(gòu) 當(dāng)然，不同類型的產(chǎn)品需要不同的構(gòu)建方法仍然存在一些有助于UI內(nèi)容組織的常見(jiàn)解決方案。今天的文章提供了有關(guān)為Web和移動(dòng)產(chǎn)品創(chuàng)建引人注目的可視化層次結(jié)構(gòu)的有用提示。

牢記業(yè)務(wù)目標(biāo)

數(shù)字產(chǎn)品背后通常有商業(yè)目標(biāo)。為了實(shí)現(xiàn)這些目標(biāo)，創(chuàng)意團(tuán)隊(duì)需要確定哪些UI元素更重要，并根據(jù)其角色確定優(yōu)先級(jí)。例如，電子商務(wù)網(wǎng)站上的所有元素都執(zhí)行各種級(jí)別的任務(wù)。項(xiàng)目圖像通常是主要的吸引眼球，因?yàn)樗麄儽仨毠膭?lì)客戶考慮它。標(biāo)題在圖像之后解釋它是什么，下一個(gè)重要的階段是  CTA按鈕，  呼叫人們購(gòu)買物品。通過(guò)考慮為網(wǎng)站或應(yīng)用設(shè)定的業(yè)務(wù)和營(yíng)銷目標(biāo)，創(chuàng)意團(tuán)隊(duì)可以有效地優(yōu)先考慮視覺(jué)內(nèi)容，并使產(chǎn)品脫穎而出。

考慮掃描模式

在我們  之前的文章中，我們提到在閱讀網(wǎng)頁(yè)之前，  人們會(huì)對(duì)其  進(jìn)行掃描，以了解他們是否感興趣。不同的研究，包括  尼爾森諾曼集團(tuán)的研究  ，已經(jīng)揭示了幾種流行的掃描模式，其中“F”和“Z”形。

F模式主要出現(xiàn)在具有大量?jī)?nèi)容的數(shù)字頁(yè)面或屏幕上，例如博客，新聞平臺(tái)等。用戶的眼睛以F形移動(dòng)：首先，他們掃描屏幕頂部的水平線，然后移動(dòng)稍微向下翻頁(yè)并在較短的水平線上閱讀，在副本左側(cè)的垂直線處完成，人們?cè)诙温涞某跏季渥又胁檎谊P(guān)鍵字。

Z形圖案發(fā)生在不那么集中在復(fù)印件上的頁(yè)面上或者不需要向下滾動(dòng)的頁(yè)面上。模式如下：人們首先從左上角開(kāi)始掃描頁(yè)面的頭部，搜索核心信息，然后沿對(duì)角線向下到達(dá)對(duì)角，在頁(yè)面底部以水平線結(jié)束從左到右。

了解這些模式后，設(shè)計(jì)人員會(huì)組織內(nèi)容，將所有核心UI元素放在最多掃描點(diǎn)上，以吸引用戶的注意力。

功能第一

視覺(jué)層次可能看起來(lái)只是面向美學(xué)方面，但它不是那樣的。首先，通過(guò)構(gòu)建和組織視覺(jué)元素，設(shè)計(jì)師需要確保產(chǎn)品清晰易用，導(dǎo)航工作正常。在美學(xué)上異常建立的視覺(jué)層次結(jié)構(gòu)不能有效地發(fā)揮作用。具有錯(cuò)誤結(jié)構(gòu)化內(nèi)容的用戶界面導(dǎo)致不良用戶體驗(yàn)。因此，在構(gòu)建可視化層次結(jié)構(gòu)時(shí)，設(shè)計(jì)人員需要考慮UI元素的功能以及它們?cè)趯?dǎo)航過(guò)程中扮演的角色。

電子商務(wù)應(yīng)用程序設(shè)計(jì)

動(dòng)作人物電子商務(wù)應(yīng)用程序

請(qǐng)記住，空白是一個(gè)視覺(jué)元素

白色空間或  負(fù)空間不僅僅是設(shè)計(jì)元素之間的區(qū)域，它實(shí)際上是每個(gè)視覺(jué)構(gòu)圖的核心組成部分。它是一種能夠使用戶眼睛注意到所有用戶界面元素的工具。設(shè)計(jì)人員可以對(duì)UI組件進(jìn)行分組或分離，以便他們可以創(chuàng)建有效的布局。此外，負(fù)空間有助于強(qiáng)調(diào)需要用戶深度關(guān)注的特定元素。空白空間是創(chuàng)建視覺(jué)層次結(jié)構(gòu)的有效工具，因此設(shè)計(jì)人員需要努力實(shí)現(xiàn)其均衡使用。

應(yīng)用黃金比例

我們將最新的一篇文章 用于設(shè)計(jì)中應(yīng)用的  黃金比例。它是不同尺寸元素的數(shù)學(xué)比例，被認(rèn)為是人眼最美觀的元素。比例等于1：1.618，并且通常用貝殼形螺旋來(lái)說(shuō)明，你們?cè)S多人可能已經(jīng)看過(guò)它們。

設(shè)計(jì)師經(jīng)常在線框圖階段應(yīng)用黃金比例。它有助于規(guī)劃布局的結(jié)構(gòu)，并以適當(dāng)?shù)谋壤{(diào)整用戶界面元素的大小，這對(duì)用戶來(lái)說(shuō)是愉快的。

使用網(wǎng)格

網(wǎng)格是在創(chuàng)作過(guò)程的不同階段應(yīng)用的關(guān)鍵工具之一，視覺(jué)層次結(jié)構(gòu)也不例外。網(wǎng)格有助于構(gòu)建所有組件并將它們放入適當(dāng)?shù)拇笮『捅壤８匾氖牵O(shè)計(jì)師可以有效地處理負(fù)空間，因?yàn)榫W(wǎng)格顯示元素是按比例放置還是均勻放置。

添加一些顏色

顏色選擇和組合對(duì)于視覺(jué)層次結(jié)構(gòu)至關(guān)重要，因?yàn)樗鼈兛梢詭椭脩魠^(qū)分核心元素。問(wèn)題在于顏色有自己的層次結(jié)構(gòu)，這是由對(duì)用戶心靈的影響力所決定的。有大膽的顏色，如紅色和橙色，以及弱白色和奶油色。大膽的顏色很容易被注意到，因此設(shè)計(jì)師經(jīng)常將它們用作突出顯示或設(shè)置對(duì)比度的手段。

此外，將一種顏色應(yīng)用于多個(gè)元素，您可以顯示它們以某種方式連接。例如，您可以為購(gòu)買按鈕或添加內(nèi)容的按鈕選擇特定顏色，以便人們可以在需要時(shí)直觀地找到它們。