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

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

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

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

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



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

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

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

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

2、考慮用戶瀏覽模式

用戶在閱讀網(wǎng)頁之前，會對其進(jìn)行掃描，以了解他們是否感興趣。不同的研究，包括 尼爾森諾曼集團(tuán)的研究

，已經(jīng)揭示了幾種流行的掃描模式，其中“F”和“Z”形模式。

F模式主要出現(xiàn)在具有大量內(nèi)容的數(shù)字頁面或屏幕上，例如博客，新聞平臺等。用戶的眼睛以F形移動：首先，他們掃描屏幕頂部的水平線，然后向下移動頁面稍微在較短的水平線上讀取，在副本左側(cè)的垂直線處完成，人們在段落的初始句子中查找關(guān)鍵字。

Z形圖案發(fā)生在不太集中于復(fù)制的頁面上或不需要向下滾動的頁面上。模式如下：人們首先從左上角開始掃描頁面的頭部，搜索核心信息，然后向下到對角線，最后用頁面底部的水平線從左到右。

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

3、功能第一

視覺層次結(jié)構(gòu)不能只考慮美學(xué)方面。首先，通過構(gòu)建和組織視覺元素，設(shè)計師需要確保產(chǎn)品使用清晰，導(dǎo)航正常。在美學(xué)上異常建立的視覺層次結(jié)構(gòu)不僅不能有效地發(fā)揮作用，而且具有錯誤結(jié)構(gòu)化的內(nèi)容的用戶界面導(dǎo)致不良用戶體驗。因此，在構(gòu)建可視化層次結(jié)構(gòu)時，設(shè)計人員需要考慮UI元素的功能以及它們在導(dǎo)航過程中扮演的角色。

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

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

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

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

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

6、使用網(wǎng)格

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

7、注意顏色的使用

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

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

8、注意字體的使用

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

9、字體大小，web三種，移動建議保持在兩種

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

在許多情況下，web設(shè)計包括所有三個級別，因為它們更有可能提供大量內(nèi)容。另一方面，建議設(shè)計師在為移動設(shè)備創(chuàng)建排版時將字體層級數(shù)保持在兩個之內(nèi)。小屏幕不能為三個級別提供足夠的空間，因此輔助級別的元素（例如子標(biāo)題）必須放在一邊以使移動UI看起來干凈整潔。

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

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定