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