今天為大家分享的是來自UI中國會員-Kane_D的如何在UI設(shè)計中使用格式塔原則?
你是否抬頭看天的時候，經(jīng)常會看到如下圖所示的這種形狀奇特的云，你是否都會覺得像熟悉的動物或事物？那么你是否曾想過，為什么僅僅通過一團(tuán)毛絨絨的氣體你就能在腦中建立起這種特殊聯(lián)系呢？?
因為你的大腦總是試圖通過對比以前的經(jīng)驗或者視覺模型和以及其關(guān)聯(lián)的點(diǎn)來了解世界。它用“特殊”方式來感知形狀和形式、分組信息、填補(bǔ)空白等從而在你的腦中形成大概畫面。
了解大腦如何運(yùn)作將有助于你成為一個更聰明的設(shè)計師?，成為視覺傳達(dá)的主導(dǎo)者。它可以幫助你確定在特定情況下哪些視覺元素最有效，因此你可以通過使用它們來影響感知，直接或間接的影響行為，當(dāng)涉及到目標(biāo)導(dǎo)向、解決問題、直觀設(shè)計以及UI設(shè)計時非常有用。
“偉大的設(shè)計師明白心理學(xué)在視覺感知中的重要作用。當(dāng)某人看到你的設(shè)計創(chuàng)意時會發(fā)生什么？他們對你的文章所傳達(dá)的信息有什么反應(yīng)？“? ? ? ? ——Autodesk品牌內(nèi)容策略師Laura Busche
現(xiàn)在我們清楚的知道視覺設(shè)計和心理學(xué)是相互聯(lián)系且可以相互影響的，格式塔原則可以幫助我們理解和把控這種聯(lián)系。
什么是格式塔？
格式塔是20世紀(jì)20年代由德國心理學(xué)家提出的一組視覺感知原理。它建立在“一個有組織的整體，被認(rèn)為大于其各部分的總和”的理論基礎(chǔ)之上。
“整體不是各部分的總和”?。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?———— Kurt Koffka
格式塔試圖解釋人們在合適的情況下如何看待視覺元素。這些建立在四個關(guān)鍵想法上：
出現(xiàn)：
人們傾向于從基本概述中識別元素，我們的大腦識別一個簡單、相對清晰的事物要比識別一個完全精確的事物要快很多。
物化：
即使有部分物體丟失，人們依然可以識別，因為我們的大腦與記憶中存儲的熟悉模式相匹配，填補(bǔ)物體缺失的空白。
多穩(wěn)定性：
人們常常用多種方式來表達(dá)模糊不清的對象，我們的大腦會在尋求確定性的方案之間來回地跳動。最后結(jié)果就是一種觀點(diǎn)會變成主導(dǎo)觀點(diǎn)，而另一種觀點(diǎn)則會慢慢消失。
不變性：
人們可以通過對物體旋轉(zhuǎn)、比例和平移來識別簡單對象，即使他們不同，我們的大腦依然可以從不同的角度觀察物體。
下面是格式塔原則，對UI設(shè)計有很大影響：
貼近原則
當(dāng)各個視覺單元一個挨著一個，彼此靠得很近的時候，可以用“貼近”這個術(shù)語來描繪這種狀態(tài)，通常也把這種狀態(tài)看作歸類。以貼近而進(jìn)行視覺歸類的各種方法都是直截了當(dāng)?shù)模⑶乙子谑┬小ＴO(shè)計師可以根據(jù)需要使用貼近手法創(chuàng)造出完美的格式塔。這是因為由貼近而產(chǎn)生近緣關(guān)系，運(yùn)用近緣關(guān)系無論對少量的相同視覺單元還是大量不同的視覺單元進(jìn)行歸類都同樣容易。
貼近原則如何應(yīng)用于UI設(shè)計？
我們可以在UI設(shè)計中使用貼近原則來組合類似的信息、組織內(nèi)容、調(diào)整布局。正確使用將對視覺傳達(dá)和用戶體驗產(chǎn)生積極影響。
正如貼近原則所述，關(guān)聯(lián)元素應(yīng)該保持親密，非關(guān)聯(lián)元素應(yīng)該分開。留白在這里發(fā)揮著至關(guān)重要的作用，因為留白引導(dǎo)了用戶視覺朝預(yù)期方向發(fā)展。留白可以增強(qiáng)視覺層次和信息流引導(dǎo)，有助于信息閱讀和掃描布局，它可以幫助用戶更快地實(shí)現(xiàn)目標(biāo)并深入到內(nèi)容本身。
我們幾乎可以在任何地方應(yīng)用貼近原則，從導(dǎo)航、卡片、正文和分頁等等。
?共同區(qū)域原則
與貼近原則類似，放置在同一區(qū)域內(nèi)的元素被視為一個分組。
?共同區(qū)域原則如何應(yīng)用于UI設(shè)計？
共同區(qū)域原則非常有用，它可以幫助我們進(jìn)行信息分組和組織內(nèi)容，同時它也可以實(shí)現(xiàn)內(nèi)容分離或做為一個焦點(diǎn)。這個原則增強(qiáng)了層次結(jié)構(gòu)，可閱讀性，并有助于信息傳達(dá)。
共同區(qū)域原則可以把許多不同的因素結(jié)合在一起，使它們在更大的組內(nèi)保持統(tǒng)一。我們可以通過使用線條、顏色、形狀和陰影來達(dá)到這個目的，它經(jīng)常被用于元素前置，表示某個元素的重要性。
上圖是共同區(qū)域原則的一個示例：一個布局合理的網(wǎng)頁，其中不同的信息位表示一個模塊，banner和表格是很好的示例。
相似原則
具有相似視覺特征的元素比那些不具有相似特征的元素更像一個整體。
相似原則如何應(yīng)用于UI設(shè)計？
我們傾向于將相似的元素視為一個分組，相似原則可以幫助我們組織和分類組中的對象，并將它們與特定的含義或功能相關(guān)聯(lián)。
有很多方法使的元素被認(rèn)為是相似的，例如顏色、大小、形狀、質(zhì)地、尺寸和方向等等。其中一些比其他的具有更強(qiáng)的相似性(如：顏色>大小>形狀)。當(dāng)相似發(fā)生時，對象可以通過與其他物體不同而得到強(qiáng)調(diào)，這稱為“異常”，可用于創(chuàng)建對比或視覺權(quán)重。它可以提醒用戶注意特定的內(nèi)容，同時對可掃描性、發(fā)現(xiàn)性和總體流程都有很大的幫助。
我們可以在導(dǎo)航、鏈接、按鈕、標(biāo)題、號召性用語等方面運(yùn)用相似原則。
閉合原則
有一種常見的視覺歸類方法基于人類的一種完型心理：把局部形象當(dāng)作一個整體的形象來感知。這種知覺上的特殊現(xiàn)象，稱之為閉合。
閉合原則如何應(yīng)用于UI設(shè)計？
正如閉合原則所述，當(dāng)提供適量的信息時，我們的大腦將通過填補(bǔ)空白并創(chuàng)建一個統(tǒng)一的整體來得出結(jié)論。通過這種方式，我們可以減少傳遞信息所需的元素數(shù)量，降低復(fù)雜性并使設(shè)計更具吸引力。閉合可以幫助我們最小化視覺噪音并傳達(dá)信息，在相當(dāng)小的空間內(nèi)強(qiáng)化概念。
我們可以在圖標(biāo)以及圖形設(shè)計中使用閉合原則，可以簡單快速且清晰的傳達(dá)想表達(dá)的意義。
對稱原則
無論距離遠(yuǎn)近，對稱元素都會被認(rèn)為屬于一體，給我們一種堅固和有序的感覺。?
對稱原則如何應(yīng)用于UI設(shè)計？
對稱元素簡單，和諧，視覺上令人愉悅。我們的眼睛尋求這些屬性以及秩序和穩(wěn)定，以了解世界。因此對稱對快速有效地傳遞信息非常有用。對稱感覺很舒服，幫助我們專注于重要的事情。
對稱的成分令人滿意，但它們也會變得有點(diǎn)沉悶和靜止。視覺對稱往往更有活力，更有趣。在對稱設(shè)計中添加不對稱元素有助于在留下印象時引起注意。在任何設(shè)計中，對稱以及合理的不對稱都很重要。
最好將對稱原則用于產(chǎn)品展示，列表，導(dǎo)航，banner和任何內(nèi)容豐富的頁面。
連續(xù)性原則
排列成直線或柔和曲線的元素被認(rèn)為與隨機(jī)排列或粗糙線排列的元素相關(guān)。
連續(xù)性原則如何應(yīng)用于UI設(shè)計？
連續(xù)線后面的元素被視為分組。線段越平滑，我們就越看到它們的統(tǒng)一形狀，我們的思想更喜歡阻力最小的道路。
連續(xù)性幫助我們通過構(gòu)圖來解釋方向和運(yùn)動。它在對齊元素時發(fā)生，它可以幫助我們的眼睛順利地穿過頁面，有助于提高易讀性。連續(xù)性原則加強(qiáng)了對分組信息的感知，創(chuàng)建了秩序并引導(dǎo)用戶通過不同的內(nèi)容細(xì)分。連續(xù)性的中斷可以表示一個部分的結(jié)尾，引起人們對新內(nèi)容的關(guān)注。
行和列的線性排列是連續(xù)性的良好示例。我們可以在菜單和子菜單，列表，輪播，服務(wù)或流程/進(jìn)度顯示中使用它們。
共同命運(yùn)原則
向同一方向運(yùn)動的元素被認(rèn)為比向不同方向運(yùn)動的元素更相關(guān)。
共同命運(yùn)原則如何應(yīng)用于UI設(shè)計？
不管這些元素相距多遠(yuǎn)，或者它們看起來有多么不同，如果它們一起移動或變化，它們就被認(rèn)為是相關(guān)的。這種效果可以發(fā)生，即使運(yùn)動是隱含的。
當(dāng)元素在同一方向、同一時間和同一速度同步移動時，共同命運(yùn)原則更為有效。它可以幫助對相關(guān)信息進(jìn)行分組，并將行動與結(jié)果聯(lián)系起來。同步運(yùn)動的中斷可以吸引用戶的注意力，并將其引導(dǎo)到特定的元素或特性。它還可以建立不同群體或國家之間的關(guān)系。
我們可以在可擴(kuò)展菜單，產(chǎn)品滑塊，視差滾動和滑動指示器中使用共同命運(yùn)原則。
結(jié)論
用戶界面設(shè)計并不都是關(guān)于漂亮的像素和生動的圖形。它主要是關(guān)于溝通，性能和易用。格式塔原則一直在幫助我們實(shí)現(xiàn)這些目標(biāo)，為用戶創(chuàng)造愉快的體驗，為企業(yè)帶來巨大的成功。
如果你喜歡這篇文章或者覺得它有用，請分享出去讓更多的人受益。
原文轉(zhuǎn)載自：UI中國
作者：Kane_D
推薦閱讀（設(shè)計篇）：
