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