中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在本文中，我們將全面解析UX中視覺層級(jí)的關(guān)鍵原則，探討如何使用視覺層級(jí)來改進(jìn)產(chǎn)品并優(yōu)化用戶體驗(yàn)。

自設(shè)計(jì)之初，我們已經(jīng)使用它來傳達(dá)重要的信息。設(shè)計(jì)中的每個(gè)元素都應(yīng)有助于改善用戶體驗(yàn)，并更清楚地傳達(dá)該信息。

01 視覺層級(jí)的重要性

視覺層級(jí)也是傳達(dá)信息。如何組織、排序內(nèi)容，讓接受者能夠盡可能輕易地理解信息。設(shè)計(jì)師可以利用視覺元素去區(qū)別信息的重要性，引導(dǎo)觀看者閱讀的順序或焦點(diǎn)。

視覺層級(jí)結(jié)構(gòu)用于按設(shè)計(jì)者希望用戶查看它們的順序?qū)υO(shè)計(jì)元素進(jìn)行排序。通過使用對(duì)比，比例，平衡等原則，幫助在正確的位置排布每個(gè)設(shè)計(jì)元素，并讓最重要的元素脫穎而出。

為什么視覺層級(jí)結(jié)構(gòu)在UX設(shè)計(jì)中如此重要？

視覺層級(jí)結(jié)構(gòu)可以在信息架構(gòu)中發(fā)揮關(guān)鍵作用，可以幫助用戶更輕松地瀏覽產(chǎn)品，大大減少與產(chǎn)品互動(dòng)所需的時(shí)間和精力。UX設(shè)計(jì)的目的是消除使用時(shí)的摩擦并提高產(chǎn)品的易用性，而關(guān)注視覺層級(jí)結(jié)構(gòu)是實(shí)現(xiàn)這一目標(biāo)的關(guān)鍵方法。

讓我們來分析其中的一些原則，看看它們?nèi)绾斡绊憙?nèi)容的排布。

02 視覺層級(jí)的類別

1. 透視原則

大多數(shù)界面（例如網(wǎng)站和應(yīng)用程序）的設(shè)計(jì)都是二維平面的。通過運(yùn)用透視，我們可以在元素中產(chǎn)生距離和分隔的錯(cuò)覺，以幫助將焦點(diǎn)集中到設(shè)計(jì)中重要的區(qū)域。

可以通過幾種方法增加透視的錯(cuò)覺，即增加與周圍物體有關(guān)的元素的大小。這會(huì)使這些元素看起來更接近用戶。向元素添加視差運(yùn)動(dòng)效果，使其移動(dòng)速度比周圍的元素慢或快，添加陰影或在背景或前景層上添加模糊效果也可以產(chǎn)生戲劇性的效果。

可以通過幾種方法讓用戶產(chǎn)生透視的錯(cuò)覺，首先可以增加元素相對(duì)于周圍元素的大?。贿@將使這些元素看起來更接近用戶。將視差運(yùn)動(dòng)效果添加到元素中使它比周圍元素移動(dòng)得快或慢，或在背景層或前景層上添加模糊也可以產(chǎn)生顯著的效果。

從上面左側(cè)的圖中，能看出來所有元素看起來都是平坦的，沒有深度。由于文字和背景粘連在一起，造成文字的可讀性變差。

而在右面的圖中，將模糊添加到背景圖像中，并為文字添加適當(dāng)?shù)年幱?。這有助于為設(shè)計(jì)元素間增加一些距離，使信息更容易可視可讀。

在看火人的游戲首頁中，多個(gè)圖像層被設(shè)置成以不同的速度滾動(dòng)，來提供視差效果，從而使觀看者更好地理解游戲的深度內(nèi)容。

2. 恰當(dāng)?shù)臑g覽模式

其實(shí)每個(gè)人在觀看內(nèi)容的時(shí)候，都會(huì)有一個(gè)潛意識(shí)的觀看模式。這種模式可能會(huì)因?yàn)橛脩粽诓榭吹膬?nèi)容類型的不同而有所差異，但是可以說最受用戶歡迎的兩種瀏覽模式是Z型模式和F型模式。

兩種瀏覽模式都可以根據(jù)要設(shè)計(jì)的內(nèi)容類型來達(dá)到獨(dú)特的目的。這些瀏覽模式將頁面的信息流動(dòng)起來，幫助觀者獲得更好的體驗(yàn)。讓我們更詳細(xì)地看一下這兩種模式。

Z型視覺動(dòng)線

Z型視覺動(dòng)線的設(shè)計(jì)最適合于文字信息不繁重的頁面中。將內(nèi)容設(shè)計(jì)成以這種模式的排布將幫助讀者快速瀏覽每個(gè)元素，并清晰地知道每個(gè)元素的重要性。

在Apple的網(wǎng)站中，頁面頂部有多個(gè)Mac的選項(xiàng)，所以我們首先會(huì)進(jìn)行水平瀏覽，然后沿對(duì)角線方向看到標(biāo)語，最后以目標(biāo)產(chǎn)品的詳細(xì)介紹作為結(jié)束。所有信息的布局都非常清晰明了，同時(shí)大多數(shù)人已經(jīng)下意識(shí)地被這種瀏覽模式吸引了。

F型視覺動(dòng)線

F型視覺動(dòng)線更多地使用在諸如文章和博客之類的文字比較密集的頁面上。

對(duì)于文章和資訊內(nèi)容繁雜的網(wǎng)站，簡(jiǎn)單的F型布局可以有效地幫助讀者掃描圖像和標(biāo)題。

以這種瀏覽模式進(jìn)行設(shè)計(jì)布局時(shí)，盡管讀者可能會(huì)掃描前幾行的信息，但隨著他們快速向下移動(dòng)視線時(shí)，他們通常只會(huì)瀏覽最吸引其注意力的地方。

3. 布局規(guī)則

通過使用參考線和網(wǎng)格來布局設(shè)計(jì)，可以使所有元素保持整潔和對(duì)齊，從而不會(huì)破壞觀者的瀏覽體驗(yàn)。他們的注意力知道要跟蹤的位置，并且這些信息都是整齊的對(duì)齊和分組，所以每組元素都可以緊密關(guān)聯(lián)。

諸如黃金分割率之類的公式試圖做到這一點(diǎn)；但是可以將重要元素從這些既定規(guī)則中分離出來，以增加其視覺層次。這也可以幫讓設(shè)計(jì)更具動(dòng)感和樂趣。

在這個(gè)的示例中，網(wǎng)站為了保持整體界面的工整，使用網(wǎng)格的方式來排布信息，但是為了更加關(guān)注Mercedez的形象，圖片忽略了網(wǎng)格布局，從而創(chuàng)建了一種彈出效果。

4. 合理使用字體

正確的字體可以讓網(wǎng)站擁有自己的個(gè)性，并引起用戶對(duì)某些領(lǐng)域的關(guān)注。具有不同大小和粗細(xì)的字體也可以用于增加層級(jí)結(jié)構(gòu)，并使更重要的文本信息脫穎而出。

大多數(shù)網(wǎng)站旨在利用不同大小的標(biāo)題來強(qiáng)調(diào)與它們相關(guān)的內(nèi)容。優(yōu)良作法是將主標(biāo)題用作頁面的最大和最重要的標(biāo)題，并使用副標(biāo)題、小標(biāo)題等來標(biāo)注不太重要的內(nèi)容。這也有助于讀者瀏覽文本頁面，以準(zhǔn)確定位在他們感興趣的區(qū)域。

Slack的網(wǎng)站就是一個(gè)很好的例子，該網(wǎng)站使用恰當(dāng)?shù)臉?biāo)題為內(nèi)容賦予重要性。在標(biāo)題部分，它們具有最大的主標(biāo)題，其中包含介紹信息和號(hào)召性用語。橫幅下方有許多帶有較小標(biāo)題的版塊，以介紹更多功能。

5. 平衡與對(duì)稱

在頁面上對(duì)稱出現(xiàn)的元素可以幫助平衡設(shè)計(jì)，使信息保持簡(jiǎn)單，有條理并且易于遵循。

如下圖所示，Avioc利用其主頁上的對(duì)稱性將重點(diǎn)放在其主要優(yōu)勢(shì)上，同時(shí)在圖像的兩邊提供更豐富的文字摘要。焦點(diǎn)直接位于中心，可以輕松瀏覽頁面以查找更多信息，而不會(huì)感到迷茫。

有時(shí)候除了標(biāo)準(zhǔn)的平衡，我們還可以在設(shè)計(jì)中打破乏平衡和對(duì)稱性來傳達(dá)某些信息的重要性，讓我們的設(shè)計(jì)布局顯得更加流暢和活潑。

6. 使用大小和比例吸引焦點(diǎn)

調(diào)整大小是一項(xiàng)非?；镜陵P(guān)重要的原則，這樣可以使重點(diǎn)元素比其他元素更突出，有助于將觀眾的視線吸引到特定區(qū)域。

通過增達(dá)重點(diǎn)元素的比例，可以立即吸引觀看者的注意力。但是在設(shè)計(jì)過程中，需要注意的是不要放大太多的元素，以免降低屏幕上其他元素的重要性。

Simply Chocolate就是一個(gè)很好的示例，用來說明如何使用比例的變化來強(qiáng)調(diào)視覺層級(jí)。在這個(gè)頁面中，最先吸引我們視線的是放大的標(biāo)題文字而不是底部的圖片，這些文字解釋了產(chǎn)品的全部含義。同時(shí)這樣的方式不會(huì)影響屏幕上其他的元素。

7. 使用顏色和對(duì)比使對(duì)象脫穎而出

顏色可以與元素大小的調(diào)整一起使用，以提高設(shè)計(jì)中關(guān)鍵信息的重要性。通常，明亮的顏色比無色的或者不飽和的顏色更能吸引觀眾的注意力。

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

無論信息在界面中怎樣排布，使用一種明亮的顏色作為焦點(diǎn)都可以幫助吸引注意力。

在上面的網(wǎng)頁以及大多數(shù)網(wǎng)站的導(dǎo)航中，我們都會(huì)注意到按鈕上高對(duì)比度的顏色，這是最關(guān)鍵的操作暗示。通過為用戶帶來良好的操作導(dǎo)航提示，為他們提供更愉快的體驗(yàn)并增加所需流量的轉(zhuǎn)化。

8. 運(yùn)用動(dòng)效

還記得互聯(lián)網(wǎng)還很新的時(shí)代，每個(gè)彈出窗口或標(biāo)注都必須眨眨眼才能引起用戶的注意？這種做法確實(shí)引起了我們的注意，但是在此過程中，它犧牲了令人愉悅的體驗(yàn)，并給觀者帶來了煩躁的感覺，這對(duì)參與度沒有幫助。

如今，我們可以更細(xì)微的方式使用這些相同的動(dòng)效原理來引起注意或重視某些領(lǐng)域。同樣頁可以簡(jiǎn)單地以巧克力為例，說明它們?nèi)绾谓Y(jié)合微妙的動(dòng)作來吸引注意力并提供提示，促使用戶參與設(shè)計(jì)。

在滾動(dòng)口味選擇中時(shí)，顏色會(huì)更改以匹配產(chǎn)品。當(dāng)把鼠標(biāo)懸停在包裝紙上時(shí)，它會(huì)打開一條條條，露出內(nèi)部的巧克力，給用戶的印象是可以將其打開以了解更多信息。

總結(jié)

這里我們討論了許多不同的UX設(shè)計(jì)原則和視覺層級(jí)結(jié)構(gòu)的示例。它們現(xiàn)在可能都有意義，但是當(dāng)需要將它們付諸實(shí)踐并找出一種在所有設(shè)計(jì)中平衡所有這些原理的方法時(shí)，有時(shí)候頁會(huì)更加令人困惑。

視覺層級(jí)結(jié)構(gòu)用于幫助將重點(diǎn)放在設(shè)計(jì)的某些元素上，但是認(rèn)為“最重要”的元素越多，完善設(shè)計(jì)的難度就越大。從簡(jiǎn)單開始，專注于最重要的一件事，它可以幫助設(shè)計(jì)走向成功。

原文：https://xd.adobe.com/ideas/process/information-architecture/visual-hierarchy-principles-examples/

作者：Caleb Kingston編譯作者：Clippp；微信公眾號(hào)：clip設(shè)計(jì)夾

本文由 @Clippp 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議