激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

視覺(jué)層次不僅與美學(xué)有關(guān)，還提供交互系統(tǒng)以及友好的用戶體驗(yàn)

發(fā)布時(shí)間：2024-03-14 16:59:37 瀏覽量：107次

視覺(jué)層次對(duì)有效的組織UI設(shè)計(jì)元素是至關(guān)重要。讓我們看一些技巧，幫助設(shè)計(jì)人員在Web和移動(dòng)布局上構(gòu)建和組織UI元素,歡迎加入U(xiǎn)I設(shè)計(jì)群587751709



好的視覺(jué)層次結(jié)構(gòu)是成功數(shù)字產(chǎn)品的基本前提。它可以幫助我們有效的組織UI元素，以便內(nèi)容易于理解和讓用戶在瀏覽時(shí)提高愉悅度。視覺(jué)元素的呈現(xiàn)對(duì)用戶體驗(yàn)有很大影響。如果各元素組件有效的組織排版，用戶可以毫不費(fèi)力地瀏覽頁(yè)面與頁(yè)面交互并享受這中間的交互過(guò)程。

那么，怎么才能夠使視覺(jué)層次結(jié)構(gòu)明晰，內(nèi)容有效組織？當(dāng)然，不同類(lèi)型的產(chǎn)品需要不同的構(gòu)建方法。但是存在一些有助于UI內(nèi)容組織的通用解決方案。今天的這篇文章提供了有關(guān)為Web和移動(dòng)產(chǎn)品創(chuàng)建引人注目的可視化層次結(jié)構(gòu)的設(shè)計(jì)要點(diǎn)。

1、 明確產(chǎn)品商業(yè)業(yè)務(wù)目標(biāo)

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

2、考慮用戶瀏覽模式

用戶在閱讀網(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ì)角線，最后用頁(yè)面底部的水平線從左到右。

設(shè)計(jì)師應(yīng)該了解這些模式然后有效的組織內(nèi)容，將所有核心UI元素放在最掃描的點(diǎn)上，以吸引用戶的注意力。

3、功能第一

視覺(jué)層次結(jié)構(gòu)不能只考慮美學(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ò)程中扮演的角色。

4、留白是設(shè)計(jì)中不可或缺的設(shè)計(jì)元素

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

5、應(yīng)用黃金比例

黃金比例是不同尺寸元素的數(shù)學(xué)比例，被認(rèn)為是人眼能發(fā)現(xiàn)的最美觀的元素之一。比例等于1：1.618，并且通常用鸚鵡螺旋來(lái)說(shuō)明。

設(shè)計(jì)師經(jīng)常在線框圖階段應(yīng)用黃金比例。有助于規(guī)劃布局的結(jié)構(gòu)，并以正確的比例調(diào)整用戶界面元素的大小，這對(duì)用戶來(lái)說(shuō)在閱讀時(shí)是非常愉悅的體驗(yàn)。

6、使用網(wǎng)格

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

7、注意顏色的使用

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

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

8、注意字體的使用

視覺(jué)層次結(jié)構(gòu)包括一個(gè)稱(chēng)為排版層次結(jié)構(gòu)的核心子部分，旨在修改和組合字體，以構(gòu)建應(yīng)注意到的最有意義和最突出的元素與普通文本信息之間的對(duì)比?？梢酝ㄟ^(guò)調(diào)整字體大小，顏色和字體以及它們的對(duì)齊來(lái)轉(zhuǎn)換字體。不同的字體可以將相同的內(nèi)容劃分為不同的級(jí)別，以便用戶可以逐漸感知信息。但是，建議設(shè)計(jì)師將字體類(lèi)型數(shù)量保持在3種字體以內(nèi)，因?yàn)樘嘧煮w看起來(lái)很亂，并使設(shè)計(jì)不一致。

9、字體大小，web三種，移動(dòng)建議保持在兩種

如上所述，web設(shè)計(jì)的字體大小，包括標(biāo)題，子標(biāo)題，正文，號(hào)召性用語(yǔ)元素和字幕等元素。 有三種級(jí)別：初級(jí)， 二級(jí)和三級(jí)。第一個(gè)包括最大類(lèi)型，在吸引人們關(guān)注屏幕上的核心信息。下一級(jí)提供易于瀏覽的元素，并幫助用戶瀏覽內(nèi)容。高等級(jí)通常應(yīng)用正文和一些通過(guò)相對(duì)較小的類(lèi)型呈現(xiàn)的附加數(shù)據(jù)。

在許多情況下，web設(shè)計(jì)包括所有三個(gè)級(jí)別，因?yàn)樗鼈兏锌赡芴峁┐罅績(jī)?nèi)容。另一方面，建議設(shè)計(jì)師在為移動(dòng)設(shè)備創(chuàng)建排版時(shí)將字體層級(jí)數(shù)保持在兩個(gè)之內(nèi)。小屏幕不能為三個(gè)級(jí)別提供足夠的空間，因此輔助級(jí)別的元素（例如子標(biāo)題）必須放在一邊以使移動(dòng)UI看起來(lái)干凈整潔。

有效的視覺(jué)層次不僅僅與美學(xué)有關(guān)。還提供解決問(wèn)題的導(dǎo)航和交互系統(tǒng)以及友好的用戶體驗(yàn)。為了創(chuàng)建足夠的可視化層次結(jié)構(gòu)，設(shè)計(jì)師需要考慮功能和業(yè)務(wù)目標(biāo)來(lái)組織所有UI元素。

熱門(mén)課程推薦

熱門(mén)資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定