2021-5-18 seo達人
這篇文章是一篇很實用的文章，與 格式塔心理學有異曲同工之處，而這篇文章是基于當前流行的手機UI體驗去寫的，對于移動互聯網這個時代來說更接地氣，更實用，希望對您有用，enjoy！
隨著技術和用戶界面的變化，對視覺設計設計技能的需求不斷增長。通過每年出現的典型用戶界面的新例子，我們對視覺層次，感知和構圖的基本理解有所改變嗎？
視覺感知的現代概念不僅植根于科學，也植根于心理學。因此，無論用戶界面如何不斷變化，我們看到和感知視覺信息的方式都將保持不變。考慮到這一點，當代交互設計是否有可能改進圖形組合和視覺層次結構的基礎？
視覺感知的基本規則對于任何視覺設計都是至關重要的，因為它們指示如何盡可能快地傳達具有嵌入意義的信息。然而，由于視覺設計是圖形設計的近親，因此這些標準是針對印刷媒體而建立的，并且尚未被重新定義為數字化。
像“數字包豪斯學校”這樣可能建立新設計原則的東西尚未形成。當人們以與印刷完全不同的方式體驗 UI 時，視覺層次和組合的規則不僅僅是過時的，而且會在用戶界面中崩潰。
在大多數情況下，設計師仍然傾向于將屏幕視為靜態的二維對象，而交互設計師面臨的挑戰是創新，而不僅僅是將打印格式應用于他們的數字媒體項目。但在新設計發展之前，需要重新審視對視覺層次，感知和構圖的基本理解。
什么是視覺層次結構，為什么它很重要？視覺層次結構是在組合中布置內容，以便有效地傳達信息和傳達意義。可視層次結構首先將查看者引導至最重要的信息，然后引導至次要內容。
通過適當使用大小，顏色，形狀，距離，比例和方向來建立，通過創造性地使用決定視覺層次的圖形元素來傳達構圖的含義，概念和情緒。
設計師如何使用尺寸，顏色，形狀和方向來傳達設計中的意義和情緒？
視覺層次結構對于每種類型的視覺設計都至關重要，無論是需要引導訪問者眼睛的登陸頁面還是移動UI的導航。用戶對每個元素的理解基于組合中的其他元素及其上下文。相應地處理組成元素以形成視覺關系，從而在整個設計中建立視覺層次。
視覺層次結構的許多規則可能看起來非常簡單甚至是平庸的，但它們是良好視覺設計的重要基礎。例如，顏色是視覺設計中最具影響力的創意元素。
考慮紅十字與單色交叉的直接含義。幾乎普遍，紅十字標志著中立和保護。這樣就可以與顏色的使用立即進行溝通。顏色也常用于識別群體，因為當三個單色群體中的一個紅色交叉以某種方式突出顯示為更重要時。
明亮，豐富的色彩比柔和的色彩更突出，因此具有更大的視覺沖擊力。在界面中，顏色可用于呈現結構感并指向可用的交互。單色界面中的單色可以區分選擇，甚至可以建議用戶懸停在按鈕之外的內容。
單色設計元素中的顏色或缺乏顏色可用于概述UI元素并在潛意識層面吸引用戶。
顏色也被賦予了意義和情感，可以將明確的信息傳遞給觀眾的潛意識。在品牌推廣方面，對色彩進行了大量的心理學研究，因為它在消費者與品牌進行任何有意義的互動之前就會產生內心的反應。例如，藍色通常被認為是可靠的，安全的和平靜的，而紅色是刺激性的，并且已知會增加人們的心率。然而，取決于培養，顏色可能具有不同的重要性。
在網頁設計中有意義的，The Names for Change 網站是結構化的顏色，運用的一個很好的案例。該網站通過使用顏色立即傳達其結構; 組織默認是分散的，但可以按主題和/或顏色重新排列。
然而，所選擇的音調有助于克服該站點意義的潛在困難之一。為襪子或衛生棉條等日常用品籌款并不足以讓自己出售，因此該網站的激進圖形基調提高了日常用品的感知價值，同時建立了必要的基礎組織結構。
讓我們想象一下坐在三個小鳥旁邊的一只大鳥的插圖。沒有任何進一步的信息，這個簡單的圖形立即傳達其元素之間的關系：父母和孩子，它們共同傳達一個家庭。
在傳統的圖形設計中，典型的策略是使最重要的元素成為最大的元素，然后逐步縮小元素的尺寸。大小建立視覺層次結構，因為最大的元素首先引起注意，因此看起來是最重要的。
在文本主體中也經常使用不同的字體大小來指示顯著的差異，例如標題，部分和引號。次要內容（例如圖像標題）通常較小，以便不與文本主體競爭。
考慮一些最廣泛使用的可視界面，例如Instagram。屏幕上沒有任何內容與圖像和視頻競爭 – 它們占據了大多數屏幕的60％以上。 UI的目的是明確的。
在網頁設計中顛覆視覺層次結構的典型結構的一個例子是藝術/設計工作室Ro / Lu的投資組合網站。他們個性的網站可能不是最直觀的，但它挑戰了典型的在線創意組合的視覺安排。由于各種項目的有意隨機化，每次訪問者訪問該網站時，會有不同的項目在視覺中心展示，這使得每次訪問都會有驚喜。
在大多數創意設計工作室的作品集中，作品沒有按層次組織，因為每個項目都是獨特的，并且被認為同樣重要Ro / Lu網站的設計創造了一個動態的構圖，每次訪問都有不同程度的驚喜，并鼓勵觀眾調查工作室的廣泛組合。因此，設計工作室的折衷，跨學科性質由內容的隨機顯示。
視覺層次中的對齊通過在空間上連接元素來傳達秩序感。與非線性小說中的章節一樣，想象一個在圖形構圖中脫穎而出的正方形。當單個元素破壞已建立的結構時，它從組合物中脫穎而出，從而獲得相對于其余元素的含義。
除非元件從視覺網格突出，即從有序感中突出，否則剛性構圖可能看起來是停滯的并且在視覺上不感興趣。不對齊或“打破網格”是一種給予圖形元素更多視覺權重的機會。這個概念是設計中視覺層次結構的基礎。
根據傳統視覺設計中的原理，放置在框架中心的元件看起來更重要。例如，主要內容或界面元素可以放在中心，而導航，菜單和其他次要內容通常保持在側面。
但開創性的設計師喜歡挑戰現狀。當交互式設計應用基本的視覺層次原則，然后將界限推向創新的視覺組合時，就會產生有趣的新體驗。通過使用不同的對齊，在元素之間建立新的關聯和含義。
例如，DNA項目是一個使用一系列脫節層次結構來傳達音樂家專輯創意結構的網站。該網站的結構很復雜，專輯的結構也是如此。
談到形狀時，讓我們考慮一下簡單的心形如何在大多數社交網絡UI中傳達其對“喜歡”的潛在用途。要確定重要性或群體，請考慮四個圈子中的一個心臟。幾何形狀就像顏色一樣，形狀帶有某些內涵，賦予元素個性或意義。
在交互式設計中，幾何形狀對于有效溝通至關重要，因為它們比文本更快速，更普遍地傳達意義。代替文本，圖標（符號）（通常是簡單的幾何形狀）已成為大多數導航系統和UI的模擬。
“喜歡”圖像，下載文件，撥打電話或查看消息背后的目標簡單直接地用圖標（幾何形狀）傳達。在全球市場中，這種有效的視覺通信形式變得越來越重要，其中數字產品通常為具有多種語言的廣大國際受眾提供服務
報紙必須迅速調整他們的設計以適應新技術。其他內容產業也紛紛效仿。
要突出傳統印刷和數字媒體之間不同的互動模式，請考慮在藝術部分搜索實際報紙和在大多數應用中使用搜索圖標之間的區別。直到最近，大多數報紙網站都將它們的頁面布局與打印時相同，并且篩選內容的體驗是笨拙和迷失方向。
Signes du Quotidien網站打破傳統的網頁布局，以微妙的方式使用基本的方形和圓形，呈現獨特的視覺層次結構，引導訪問者瀏覽內容。菜單位于頁面的中心，當訪問者點擊它時，會出現代表網站四個部分的四個彩色圓點。訪客然后將其中一個點拖入正方形以轉到該部分。
移動元素將在一組停滯元素中承載更大的視覺重量，并且視覺層次中的運動是不可能在打印中使用的原則，但是肯定可以包括在視覺設計器的工具箱中。
除了自身的字面翻譯之外，運動能夠進行什么交流？通常在UI中使用Motion作為元素可以與之交互的線索。是否可以進一步推動運動的使用，并將其作為一種獨特的交流方式？如果視覺層次不僅僅是關于溝通的效率，還關乎嵌入的意義，那么運動如何被用作必要的視覺交流工具？
對于I Remember網站，主界面（動畫）立即引人注目，因為它邀請互動。雖然動作和界面是功能性導航工具，但視覺設計師利用這些元素的潛在損失作為傳達網站潛在使命的方式：阿爾茨海默病。就像組織為其籌集資金的患者的褪色記憶一樣，如果沒有積極的互動，網站就會慢慢消失。
聲音是另一種不可能在印刷媒體中使用的工具，但尚未在等級原則中發展。由于聲音完全是非視覺的，因此沒有規則可供參考。但聲音也可以是一種有效傳達內容，情感或意義的設計工具。攜帶某些聲音的設計元素可以相對于彼此進行分組，而最大膽的那些可能看起來是最重要的或者可能表示與該組的分離。
附加到元素的聲音質量應該能夠快速識別，表征或幫助構建內容。與其相關視覺元素形成對比的聲音如何傳達新的含義？
聲音本身可能非常復雜，以至于在感知到任何視覺之前，它們會建立整個情緒或設計信息。就像彩色背景建立一種情緒一樣，聲音可以放在背景中，或者在UI中提供反饋，例如響應移動設備上的按鈕。該技術的原理是基本的，但它可以采用的創造力是魔法可以發生的地方。
由于其在集體的創造性工作中的重要性，為古根海姆德國藝術家組織ZERO展覽創建的網站使用聲音作為大氣背景，并且作為導航網站時的反饋形式。大膽的鈴聲建立代表主題開頭的部分，而第三級項目則在后臺點擊。
視覺層次結構是一個簡單的概念，理解理論實際上比設計者執行結構良好的組合的實際能力更容易。然而，在保持良好設計的同時在新介質中具有創造性是具有挑戰性的。
新媒體一直出現，挑戰性的情況不會減弱 – 恰恰相反。如今，有超過200種不同的屏幕尺寸在使用中。那只是二維的。首先，它是互聯網，桌面瀏覽器，然后是移動設備和平板電腦，現在我們正在通過互動電視，物聯網，可穿戴設備，虛擬和增強現實等技術進入新的領域。
真正推動數字媒體界限的設計仍處于起步階段。希望視覺層次和良好設計的原則能夠跟上技術的快速發展，使我們的數字媒體體驗仍然充滿意義和樂趣。
原文：Toplal
翻譯：云端設計
文章來源：云端網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
