設計原則——視覺層次介紹

隨著技術和用戶界面的變化，視覺設計中對設計技能的需求不斷增長。 隨著每年都有新的典型用戶界面示例出現，我們對視覺層次、感知和構圖的基本理解是否發生了變化？

現代視覺感知概念不僅植根於科學，也植根於心理學。 因此，無論用戶界面如何不斷變化，我們看到和感知視覺信息的方式都將保持不變。 考慮到這一點，當代交互設計是否有可能在圖形合成和視覺層次的基礎上進行改進？

視覺感知的基本規則對於任何視覺設計都至關重要，因為它們指導如何盡快傳達具有嵌入含義的信息。 然而，由於視覺設計是平面設計的近親，這些標準是為印刷媒體建立的，尚未為數字媒體重新定義。

可能建立新設計原則的“數字包豪斯學校”之類的東西尚未形成。 由於人們以與印刷版完全不同的方式體驗 UI，因此視覺層次和構圖的規則不僅過時，而且只是在用戶界面中崩潰。

在大多數情況下，設計師仍然傾向於將屏幕視為靜態的二維對象，交互設計師面臨的挑戰是創新，而不僅僅是將打印格式應用於他們的數字媒體項目。 但在新設計得以推進之前，需要重新審視對視覺層次、感知和構圖的基本理解。

視覺層次：交互界面視覺組合的新理解

什麼是視覺層次，為什麼它很重要？ 視覺層次是為了有效地傳達信息和傳達意義而對構圖中的內容進行佈局。 視覺層次結構將觀眾首先引導至最重要的信息，然後引導至次要內容。

通過適當使用尺寸、顏色、形狀、距離、比例和方向，構圖的意義、概念和情緒通過創造性地使用決定視覺層次的圖形元素來傳達。

視覺層次結構對於每種類型的視覺設計都至關重要，無論是需要引導訪問者視線的登錄頁面還是移動 UI 的導航。 用戶對每個元素的理解取決於構圖中的其他元素及其上下文。 相應地處理組合元素以形成視覺關係，從而在設計中建立視覺層次結構。

視覺層次中的顏色

視覺層次結構的許多規則可能看起來很簡單甚至平庸，但它們是良好視覺設計的關鍵基礎。 例如，顏色是視覺設計中最具影響力的創意元素。

考慮一下紅十字與單色十字的直接含義。 幾乎普遍地，紅十字象徵著中立和保護。 這就是使用顏色進行即時交流的潛力。 顏色也經常用於識別群體，例如當三個單色十字中的一個紅色十字以某種方式突出時更為重要。

明亮、豐富的色彩比柔和的色彩更突出，因此具有更大的視覺衝擊力。 在界面中，顏色可用於呈現結構感並指向可用的交互。 單色界面中的單一顏色可以區分選擇，甚至可以提示用戶懸停在按鈕之外的內容。

顏色還帶有意義和情感，可以將明確的信息傳遞給觀眾的潛意識。 在品牌推廣中，已經對顏色進行了大量的心理學研究，因為它會在消費者與品牌進行任何有意義的互動之前產生本能反應。 例如，藍色通常被認為是可靠、安全和平靜的，而紅色則具有刺激性，並且已知會增加人們的心率。 但是，顏色可能具有不同的意義，具體取決於文化。

The Names for Change 網站是網頁設計中有意義的、結構化地使用顏色的一個很好的例子。 該網站通過使用顏色立即傳達其結構； 默認情況下，組織是分散的，但可以按主題和/或顏色重新排列。

然而，選擇的色調有助於克服網站意義的潛在困難之一。 為襪子或衛生棉條等日常用品籌款不足以推銷自己，因此該網站激進的圖形基調提高了日常用品的感知價值，同時建立了必要的底層組織結構。

視覺層次結構中的大小

讓我們想像一下，一隻大鳥坐在三隻小鳥旁邊。 沒有任何進一步的信息，這個簡單的圖形立即傳達了其元素之間的關係：父母和孩子，它們共同傳達了一個家庭。

在傳統的平面設計中，一個典型的策略是使最重要的元素最大，然後逐步縮小元素的層次。 尺寸建立視覺層次，因為最大的元素首先吸引註意力，因此看起來是最重要的。

不同的字體大小也經常用於正文中以表示顯著差異，例如標題、部分和引號。 次要內容，例如圖片說明，通常較小，以免與正文競爭。

考慮一些使用最廣泛的可視化界面，例如 Instagram。 屏幕上沒有任何東西可以與圖像和視頻競爭——它們佔據了大多數屏幕的 60% 以上。 UI 的目的是直接的。

一個顛覆網頁設計中視覺層次結構的典型結構的例子是藝術/設計工作室 Ro/Lu 的作品集網站。 他們不尋常的網站可能不是最直觀的，但它挑戰了典型在線創意組合的視覺安排。 由於他們不同項目的有意隨機化，每次訪問者訪問該站點時，不同的項目似乎占主導地位，這使得每次訪問都獨一無二且有趣。

大多數創意設計工作室的作品集並沒有按等級組織工作，因為每個項目都是獨一無二的，並且被認為同樣重要。 Ro/Lu 網站的設計創造了一個動態的組合，在每次訪問時都有不同程度的興趣，並鼓勵觀眾調查工作室的廣泛投資組合。 因此，設計工作室的不拘一格、跨學科性質通過內容的隨機顯示來體現。

視覺層次結構中的對齊

視覺層次中的對齊通過在空間上連接元素來傳達一種秩序感。 與非線性小說中的章節一樣，想像一個正方形在圖形構圖中突出。 當單個元素打破既定結構時，它就會從組合中脫穎而出，從而獲得相對於其他元素的意義。

除非一個元素從視覺網格中脫穎而出，即從秩序感中脫穎而出，否則僵硬的構圖可能會顯得停滯不前並且在視覺上無趣。 錯位或“打破網格”是賦予圖形元素更多視覺重量的機會。 這個概念是設計中視覺層次的基礎。

根據傳統視覺設計中的一個原則，放置在框架中心的元素似乎更重要。 例如，主要內容或界面元素可能被放在中心，而導航、菜單和其他次要內容通常被放在兩側。

但先鋒設計師喜歡挑戰現狀。 當交互式設計應用基本的視覺層次原則，然後將邊界推入創新的視覺組合中時，就會創造出有趣的新體驗。 通過使用不同的對齊方式，可以在元素之間建立新的關聯和含義。

例如，DNA 項目是一個網站，它使用一系列不連貫的層次結構來傳達音樂家專輯的創意結構。 該網站的結構很複雜，專輯的結構也很複雜。

首先，邀請訪問者通過單擊專輯曲目來聆聽音樂，這些曲目傳統上以專輯格式排列。 然而，通過允許訪問者重新排列網站的 DNA 元素，專輯的概念被傳達出來，不僅僅是一系列曲目，而是隨著時間的推移碎片元素的非線性構造。

視覺層次結構中的形狀

當談到形狀時，讓我們考慮一下簡單的心形如何立即傳達其在大多數社交網絡 UI 中“喜歡”的潛在用途。 要確定重要性或組，請考慮四個圓圈中的一顆心。 幾何形式就像顏色一樣，形狀帶有某些賦予元素個性或意義的內涵。

在交互設計中，幾何形狀對於有效溝通至關重要，因為它們比文本更快速、更普遍地傳達意義。 圖標（符號）通常是簡單的幾何形狀，而不是文本，已成為大多數導航系統和 UI 的類比。

“喜歡”圖像、下載文件、撥打電話或查看消息背後的目標是通過圖標（幾何形狀）簡單直接地傳達的。 在數字產品經常以多種語言為廣大國際觀眾服務的全球市場中，這種高效的視覺交流形式變得越來越重要。

為了突出傳統印刷媒體和數字媒體之間的不同交互模式，請考慮通過實際報紙搜索藝術部分與在大多數應用程序中使用搜索圖標之間的區別。 直到最近，大多數報紙網站的頁面佈局都與印刷版一樣，篩選內容的體驗既笨拙又令人迷失方向。

Signes du Quotidien 網站打破了傳統的網頁佈局，以一種微妙的方式使用基本的方形和圓形來呈現獨特的視覺層次結構，引導訪問者瀏覽內容。 菜單位於頁面的中心，當訪問者單擊它時，會出現代表網站四個部分的四個彩色圓點。 遊客然後將其中一個點拖入廣場以前往該部分。

視覺層次結構中的運動

一個移動的元素會在一組停滯的元素中承載更大的視覺重量，視覺層次中的運動是一個不可能在印刷中使用但絕對可以包含在視覺設計師的工具包中的原則。

除了自身的字面翻譯之外，運動還能傳達什麼？ 運動通常在 UI 中用作元素可以交互的線索。 是否可以進一步推動運動的使用並用作傳達獨特事物的一種方式？ 如果視覺層次不僅關乎交流的效率，還關乎嵌入的意義，那麼運動如何作為一種必不可少的視覺交流工具呢？

對於“我記得”網站，主界面（動畫）在邀請互動時立即脫穎而出。 儘管動作和界面是功能性導航工具，但視覺設計師利用這些元素的潛在損失來傳達網站的基本使命：阿爾茨海默病。 就像該組織為其籌集資金的患者逐漸消失的記憶一樣，該網站在沒有積極互動的情況下慢慢消失得無影無踪。

信息層次中的聲音

聲音是另一種無法在印刷媒體中使用的工具，但尚未在等級原則內開發。 由於聲音完全是非視覺的，因此沒有可參考的規則。 但聲音也可以是一種有效傳達內容以及情緒或意義的設計工具。 攜帶某些聲音的設計元素可能會相對於彼此進行分組，而那些最大膽的可能似乎是最重要的，或者可能意味著與該組分離。

附加到元素的聲音質量應該能夠快速識別、表徵或幫助構建內容。 與其相關的視覺元素形成對比的聲音如何傳達新的意義？

聲音本身可能非常複雜，以至於它們在感知到任何視覺效果之前就建立了整個情緒或設計信息。 就像彩色背景營造一種氛圍一樣，聲音可以位於背景中，或者在 UI 中提供反饋，例如響應點擊移動設備上的按鈕。 該技術的原理是基本的，但是可以使用它的創造力是魔術可以發生的地方。

由於其在集體創作工作中的重要性，為古根海姆德國藝術家團體 ZERO 的展覽創建的網站使用聲音作為大氣背景，並在瀏覽網站時作為一種反饋形式。 大膽的鈴聲確立了代表主題開始的片段，而第三項目則在背景中單擊。

視覺層次的概念

視覺層次是一個簡單的概念，理解理論實際上比設計師執行結構良好的組合的實際能力更容易。 然而，在保持良好設計的同時在新媒體中發揮創造力是一項挑戰。

新的媒介一直在出現，具有挑戰性的情況不會減少——恰恰相反。 今天有超過 200 種不同的屏幕尺寸在使用。 這只是二維的。 首先是互聯網、桌面瀏覽器，然後是手機和平板電腦，現在我們正借助交互式電視、物聯網、可穿戴設備、虛擬和增強現實等技術進入新領域。

真正突破數字媒體界限的設計仍處於起步階段。 希望視覺層次和良好設計的原則能夠跟上技術的快速發展，使我們對數字媒體的體驗充滿意義和樂趣。

進一步閱讀 Toptal 設計博客：

• 通過清晰的視覺層次提升您的用戶體驗
• 設計基礎——視覺層次結構指南（附信息圖）
• 設計原則：層次結構介紹
• 提高可掃描性的 UI 設計最佳實踐
• 使用這些成功的交互設計原則提升您的用戶體驗