視覺層次結構在UX設計中的重要性

Sponsor

前言：UX是User Experience的縮寫，UX設計就是我們常說的交互設計。其核心在于用戶體驗，即用戶在使用產品以及與產品發生交互時出現的主觀感受和需求滿足。在產品設計的整體過程，用戶體驗應該應該是融入其中的，而其中最直觀的就是視覺感受，那么今天的文章將著重對于視覺感受來談談UX設計的中的視覺層次結構。

什么是視覺層次？

視覺層次結構用于按您希望用戶查看它們的順序對設計元素和影響進行排序。通過使用對比度，比例，平衡等原則，您可以幫助在正確的位置建立每個元素，并幫助最重要的元素脫穎而出。

為什么視覺層次結構在UX設計中很重要？

視覺層次結構可以在信息體系結構的規劃中發揮關鍵作用，以幫助您的用戶更輕松地瀏覽產品。這樣可以大大減少與您的產品互動所需的精力。UX設計的全部目的是消除摩擦并增強產品的可用性，而關注視覺層次結構是實現此目的的關鍵方法。

視覺層次結構設計原則

使用大小和比例吸引焦點

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

下圖所示的Simply Chocolate是一個很好的示例，說明了如何使用大小和比例來強調視覺層次。在設計中首先吸引您的是巨大的文字，它解釋了產品的全部含義。

使用顏色和對比度

顏色地差別性使用，可以區別設計中元素的重要性。通常，較明亮的顏色比無色，不飽和的顏色更能吸引觀眾的注意力。

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

無論將元素按設計順序放置在哪里，使用一種明亮的顏色作為焦點都可以幫助吸引注意力。

在下面的示例中，以及大多數網站導航中，您會注意到按鈕上的主要高對比色是最關鍵的號召性用語。通過幫助用戶了解您希望他們去哪里，您可以為他們提供更愉快的體驗并增加所需流量的轉化。

發揮視角的作用

大多數界面（例如網站和應用程序）都被設計為二維的，并且通?？雌饋砗芷教?。通過透視，您可以在元素中創建距離和分隔的錯覺，以幫助將焦點集中在設計中很重要的區域。

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

如下面左側的示例：所有元素看起來都是平坦的，沒有深度。由于對比度太弱，文字部分會與底圖產生競爭效果，因此難以閱讀文本。

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

查看模式的重要性

每個人的觀看模式可能略有不同，具體取決于他們正在觀看的內容類型，但是可以說，人們使用的兩種最受歡迎的觀看模式是Z模式和F模式。

兩種查看模式均根據您要設計的內容類型而具有獨特的用途。將您的內容設計為以這些模式流動將幫助觀看者獲得更好的體驗。

Z模式

Z模式遵循從左上到右上，然后向下到左下，再到右下的路徑。此模式最適合于文本或內容不繁復的情況，通過這種模式設計內容流，將有助于讀者快速瀏覽每個元素，并了解每個元素的重要性。

在Apple網站上，正如您將在Mac頁面下方看到的那樣，該頁面旨在在頂部顯示多個Mac型號選項，然后沿對角線方向放置標語，以產品的號召性用語結束。所有信息的布局都非常清晰，其方式已經讓大多數人下意識地吸引他們使用。

F模式

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

對于博客和文本內容繁重的內容（例如Verge（如下圖所示）），簡單的F模式布局可幫助讀者快速掃描圖像和標題。

使用正確的字體

正確的字體配對可以使您的網站擁有自己的個性，并引起人們對某些領域的關注。具有不同大小和權重的字體也可以用于增加層次結構，并使更重要的文本元素脫穎而出。

大多數網站旨在利用不同大小的標題來強調或標出與它們相關的內容。最好將標題1（H1）用作頁面的最大標題，然后使用標題2（H2），3（H3）等來標注不太重要的區域。這也有助于讀者瀏覽文本頁面，以準確定位在他們感興趣的區域。

Slack的網站就是一個很好的例子，該網站使用標題為內容賦予重要性順序。在標題部分，它們具有最大的標題，其中包含其他信息以及一些使該區域感到最重要的號召性用語。橫幅下方有許多帶有較小標題的部分，以介紹更多功能。

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

下面的示例展示了三種不同的字體大??；我們發現：即使頂部字體最大，底部字體也會更加吸引您的注意力。這是因為下面的字體看起來更重，對比度更高。

使用留白引導用戶

當您第一次開始以空白畫布進行設計時，您可能會想到利用空間來適應盡可能多的元素的所有方式。但是請記住，留白與您使用的空間同樣重要。

留白（spacing）是用于描述設計中元素之間的負間距的術語。它可用于將元素分組在一起或將它們分開以賦予它們更大的重要性。

在下面quip的網站上，您會注意到左側文本周圍的間距以及周圍所有其他元素?？崭竦氖褂脤⑽谋竞吞栒傩杂谜Z組合在一起，同時仍為整個設計提供了很好的空間平衡。

材質（texture）和色調（Tone）的差異

即使某些元素可能小于或低于屏幕上的其他元素，您也可以使用紋理和色調來引導觀看者的注意力。

在下面的第一個示例中，您將首先注意到標題文本；但是在示例2中，當更改了下面的文本的色調時，兩行文本顯得更加平衡。在最后一個示例中，背景中的涂鴉與標題沖突，難以閱讀或識別。這使得下面的文字更加突出。

平衡和對稱

在頁面上對稱出現的元素可以幫助平衡設計，使事情保持簡單，有條理并且易于遵循。

如下圖所示，Avioc利用其主頁上的對稱性將重點放在其主要優勢上，同時在圖像的每一側提供了更廣泛的摘要。焦點位于中心，但仍然可以輕松瀏覽頁面以查找更多信息。

您還可以在設計中使用不對稱來傳達某些元素的重要性。在下面的示例中，即使在元素上隨機放置且沒有對稱性的情況下，產品還是在頁面上隨機設計的，從而仍然在空間上保持平衡。引起您注意的第一件事是分散產品的排列。

屏幕對齊

當沿同一路徑對齊元素時，可以幫助它們感覺彼此關聯，從而使眼光掃描周圍其他相似內容更加容易。想一想您在許多應用程序和網站中看到的表格。當您對齊每列中的內容時，實際上沒有必要使用列邊框，因為您的眼睛通過數據對齊來關聯此列。

這在許多帶有導航欄的網站上也可以看到。由于徽標和所有頁面鏈接是水平對齊的，因此您可以立即將其與導航欄相關聯，并熟悉每個頁面鏈接和號召性用語之間的關系。

元素之間的距離與排布

將元素放在一起可以使讀者感覺到它們是相關的，這將激勵他們繼續閱讀或參與其中。

在下面的示例中，在元素彼此靠近之前，您的眼睛很難輕松地掃描內容。閱讀標題時，由于摘要文本不在緊下方，因此您可能不太愿意跟進。當我們重新排列這些元素時，掃描內容要容易得多，增加了觀看者參與度更高的機會。

布局規則（layout）

通過使用參考線和網格來布局設計，可以使所有元素保持整潔和對齊，從而幫助觀看者遵循不會破壞體驗的簡單模式。他們的眼睛知道要跟蹤的位置，并且由于沿這些指南的對齊和分組，每組元素都可以緊密關聯。

諸如黃金分割率之類的公式試圖做到這一點；但是您也可以將重要元素從這些既定規則中分離出來，以增加其視覺層次。這也可以幫助您的設計更具動感和樂趣。

在下面的示例中，網站概念使用網格布置元素以保持外觀整潔，但是為了更加關注Mercedez，圖像忽略了此網格布局，從而創建了一種彈出效果。

運用動態效果（motion）

還記得互聯網還很新的時代，每個彈出窗口或標注都必須眨眨眼才能引起您的注意？這種做法確實引起了我們的注意，但是在此過程中，它犧牲了令人愉悅的體驗，并給觀眾帶來了煩惱，這對參與度沒有幫助。

如今，我們可以更細微的方式使用這些相同的運動原理來引起注意或重視某些領域。同樣，我們可以簡單地以巧克力為例，說明它們如何結合微妙的動作來吸引您的注意力并提供提示，促使您參與設計。

如上圖所示，當您在口味選擇中滾動時，顏色會更改以匹配產品。當您將鼠標懸停在包裝紙上時，它會一條一條地打開，露出內部的巧克力，直接傳達出您可以將其打開以了解更多信息的印象。

視覺層次結構可以突出重點設計元素，但是重點元素越多，設計的難度越大。想要在視覺層次上做到更好的體現，可以從簡單的開始，專注于最重要的一個。

作者 | 交互設計小助手
來源 | 美國交互設計資訊(ID：gh_deb1a91db646)

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。