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

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

探討UX設(shè)計中視覺層次結(jié)構(gòu)的重要性

發(fā)布時間：2024-07-31 19:28:44 瀏覽量：231次

自設(shè)計之初就已經(jīng)存在。從過去到今天我們使用的電子設(shè)備，我們已經(jīng)使用并繼續(xù)使用設(shè)計來傳達我們的重要信息。我們設(shè)計中的每個元素都應(yīng)有助于改善用戶體驗，并更清楚地傳達該信息。在本文中，我們將學(xué)習(xí) UX Design 中的 Visual Hierarchy，以及如何使用它來改進產(chǎn)品并優(yōu)化用戶體驗。

什么是視覺層次？

視覺層次結(jié)構(gòu)用于按您希望用戶查看它們的順序?qū)υO(shè)計元素和影響進行排序。通過使用對比，比例，平衡等原則，您可以幫助在正確的位置建立每個元素，并幫助最重要的元素脫穎而出。

為什么視覺層次結(jié)構(gòu)在UX設(shè)計中很重要？

視覺層次結(jié)構(gòu)可以在您的信息體系結(jié)構(gòu)規(guī)劃中發(fā)揮關(guān)鍵作用，以幫助您的用戶更輕松地瀏覽產(chǎn)品。這可以大大減少與您的產(chǎn)品互動所需的工作量。UX設(shè)計的全部目的在于消除摩擦并增強產(chǎn)品的可用性，而關(guān)注視覺層次結(jié)構(gòu)是實現(xiàn)這一目標的關(guān)鍵方法。

使用大小和比例吸引焦點

尺寸調(diào)整是一項非?；镜陵P(guān)重要的原則，可以使元素比其他元素更重要，并有助于將觀眾的視線吸引到特定區(qū)域。通過增加元素的比例，您可以立即吸引觀看者的注意力。但是，您要小心一點，不要放大太多元素或增加大小，而這可能會降低屏幕上其他元素的重要性。

大小和比例吸引焦點

請注意，在上面的示例圖中，您的眼睛已被繪制，并且隨著對象調(diào)整大小，透視圖如何變化。

如下圖所示，Simply Chocolate是一個很好的示例，說明了如何使用大小和比例來強調(diào)視覺層次。設(shè)計中首先要吸引您的是吸引人的文字，它解釋了產(chǎn)品的全部含義。這樣做的方式不會影響屏幕上的其他元素。

Simply Chocolate示例

使用顏色和對比度使對象脫穎而出

顏色可以與大小和重量類似地使用，以提高設(shè)計中元素的重要性。通常，較暗的，不飽和的顏色更鮮艷的顏色將吸引觀眾的注意力。

顏色和對比度示例

同樣，具有較高對比度的顏色將顯得更重，更接近觀看者，從而賦予它們更多的重要性。在下面的示例中，您可以看到，較亮的顏色在較暗的背景下看起來更近，而在較亮的背景上則較遠。

顏色對比度示例

無論將元素按設(shè)計的順序放置在哪里，使用一種明亮的顏色作為焦點都可以幫助吸引人們的注意。在下面的示例中，以及大多數(shù)網(wǎng)站導(dǎo)航中，您會注意到按鈕上的主要高對比色是最關(guān)鍵的號召性用語。通過幫助用戶了解您希望他們?nèi)ツ睦?，您可以為他們提供更愉快的體驗，并增加所需流量的轉(zhuǎn)化次數(shù)。

顏色對比度示例

發(fā)揮視角

大多數(shù)界面（例如網(wǎng)站和應(yīng)用程序）都設(shè)計為二維的，并且通常看起來很平坦。通過透視，您可以在元素中創(chuàng)建距離和分隔的錯覺，以幫助將焦點集中在設(shè)計中很重要的區(qū)域。

您可以通過幾種方法增加透視的幻覺，即增加與周圍物體相關(guān)的元素的大??；這會使這些元素看起來離您更近。向您的元素添加視差運動效果以使其移動速度比周圍的元素慢或快，添加陰影或在背景或前景層上添加模糊效果也會產(chǎn)生戲劇性的效果。

看一下下面左側(cè)的示例。所有元素看起來都是平坦的，沒有深度。由于對比度會與背景競爭，因此難以閱讀文本，并且沒有陰影效果可幫助文本脫離圖像。

透視示例

另一方面，在上面的右圖中，將模糊添加到背景圖像，并將陰影添加到文本。這有助于給這些元素一定的距離，并使事情更容易可視化。

在下面的下一個示例中，有多個圖像層被設(shè)置為以不同的速度滾動，從而提供視差網(wǎng)站效果，從而使觀看者更好地理解視角和深度。

視差效果示例

查看模式的重要性

您是否知道每個人都有通常用于掃描內(nèi)容的潛意識觀看模式？對于每個人來說，此模式可能有所不同，并且可能會略有不同，具體取決于他們正在查看的內(nèi)容類型，但是可以說，人們使用的兩種最受歡迎的觀看模式是Z模式和F模式。

Z花紋

Z模式遵循從左上到右上，然后向下到左下，再到右下的路徑。此模式最適用于文本或內(nèi)容不繁重的內(nèi)容。將內(nèi)容設(shè)計為以這種模式流動將幫助您的讀者快速瀏覽每個元素，并了解您將每個元素的重要性放在何處。

在Apple網(wǎng)站上，正如您將在Mac頁面下方看到的那樣，該頁面旨在在頂部顯示多個Mac選項，進行水平掃描，然后沿對角線方向放置標語。然后以產(chǎn)品的號召性用語結(jié)束。所有信息的布局都非常清晰，大多數(shù)人已經(jīng)被下意識地吸引使用。

Apple示例

F花紋

用于查看的F模式在諸如文章和博客文章之類的文本密集型頁面上更顯著地使用。在這種模式下，查看者通常從左上角到右上角掃描站點，然后從左到右向下掃描到下一行，依此類推。這與大多數(shù)西方世界的閱讀方向相似。

對于博客和文本密集型內(nèi)容（例如Verge），簡單的F模式布局可幫助讀者掃描圖像和標題。

F模式示例

在設(shè)計內(nèi)容以這種模式進行播放時，請務(wù)必記住，盡管觀眾可能會掃描前幾行的整個寬度，但隨著行進和向下移動，他們通常只會掃描每行的左側(cè)部分當他們快速移動以尋找吸引他們注意力的東西時。

利用字體

正確的字體配對可以使您的網(wǎng)站擁有自己的個性，并引起人們對某些領(lǐng)域的關(guān)注。具有不同大小和權(quán)重的字體也可以用于增加層次結(jié)構(gòu)，并使更重要的文本元素脫穎而出。

大多數(shù)網(wǎng)站旨在利用不同大小的標題來強調(diào)或標出與它們相關(guān)的內(nèi)容。優(yōu)良作法是將標題1（H1）用作頁面的最大和最重要的標題，并使用標題2（H2），3（H3）等來標注不太重要的區(qū)域。這還可以幫助讀者瀏覽文本頁面，以準確定位在他們感興趣的區(qū)域上。

字體示例

除了字體大小之外，您還可以使用不同的字體粗細來使相同大小的字體顯得更重或更輕。您還可以在權(quán)重較小的較大字體與權(quán)重較大的較小字體之間取得平衡，以使它們具有相同的重要性。

字體示例

使用空格引導(dǎo)用戶

當您開始以空白畫布的形式進行設(shè)計時，您可能會想到利用空間來適應(yīng)盡可能多的元素的所有方式。但是請記住，您留出空白的空間與您使用的空間一樣重要?？崭袷怯糜诿枋鲈O(shè)計中元素之間的負間距

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

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