格式塔理論在UI設(shè)計中的運用

你曾經(jīng)仰望過天空時舍败,有注意過不同形狀的云酷似熟悉的動物或物體么谤祖?有沒有想過闪彼,為什么會把蓬松的一團霧氣與不同形狀聯(lián)想在一起的甜孤?其實這就是大腦的原因。

大腦總是試圖通過與以前的經(jīng)歷或視覺感受進行比較畏腕,然后來理解世界缴川。大腦通過自己“奇怪”的方式來感知形狀和形式,分析信息描馅,填補空白把夸,繪制腦圖。

了解你的大腦的工作方式有助于你成為一名更聰明的設(shè)計師铭污,成為視覺傳達的主導者恋日。大腦可以幫助你確定哪些視覺元素在什么場景下是重要的,所以你可以用大腦來影響感知嘹狞,引導注意力岂膳,并引起行為上的改變。

“偉大的設(shè)計師明白心理學在視覺感知中扮演的重要角色磅网。當別人的眼睛滿意你的設(shè)計創(chuàng)作時會發(fā)生什么谈截?他們的想法又是如何對你作品表達的信息作出反應?“??

?- Autodesk品牌內(nèi)容策劃師Laura Busche

現(xiàn)在應該清楚視覺設(shè)計和心理學是相互聯(lián)系,相互影響的傻盟。而格式塔原則可以幫助我們理解和控制這些聯(lián)系速蕊。

什么是格式塔?

上個世紀初娘赴,奧地利及德國的心理學家創(chuàng)立了格式塔理論(Gestalt)规哲,它強調(diào)經(jīng)驗和行為的整體性,反對當時流行的構(gòu)造主義元素學說和行為主義“刺激-反應”公式诽表,認為整體不等于部分之和唉锌,意識不等于感覺元素的集合,行為不等于反射弧的循環(huán)竿奏。

“整體不等于部分的總和”

格式搭原理試圖描述當某些條件使用時袄简,人們是如何感知視覺元素的。一般建立在四個關(guān)鍵思想上:

浮現(xiàn)

人們首先傾向于在自己概述的形式中識別元素泛啸。我們的大腦識別一個簡單的绿语,定義清晰的物體比一個復雜的物體要快。

物化

即使有部分內(nèi)容缺失了候址,我們也可以識別物體吕粹。大腦會把觀察到的與記憶中熟悉的模型相匹配,將空白內(nèi)容填補岗仑。

多穩(wěn)定性

我們通常會用不止一種的方式來解釋模棱兩可的東西匹耕。大腦尋找確定性的選擇之間來回穿梭。所以荠雕,一種觀點將變的更具主導性稳其,而另一種觀點就會很難看到。

不變性

我們可以識別旋轉(zhuǎn)炸卑、縮放既鞠、變形后的簡單物體。盡管它們的外觀不同矾兜,但大腦可以從不同的角度感知物體损趋。

以下內(nèi)容為格式塔原則在今天設(shè)計中的運用。

接近

排列在一起的元素會被認為排列較遠的元素更相近椅寺。這樣相靠近的不同元素會被視為一個群體浑槽,而不是單獨的元素。

接近原則如何使用到UI設(shè)計中返帕?

在UI設(shè)計中可以使用接近原則來分組類似信息桐玻,組織內(nèi)容和整理布局。合理的使用該原則可以提升視覺效果與用戶體驗荆萤。

在遵循該原則下镊靴,相關(guān)的信息應該相互改近铣卡,而不相關(guān)信息應相距較遠。留白

在空間布局上起到至關(guān)重要的作用偏竟,可以提升視覺層次和信息流煮落,有助于用戶輕松的閱讀和掃描整體布局∮荒保可幫助用戶更快的實現(xiàn)目標并深入研究內(nèi)容蝉仇。

我們可以從導航、卡片殖蚕、運營位轿衔、列表、正文睦疫,都能無處不在的看到接近原則的使用害驹。

共同區(qū)域

與接近原則類似,放置在同一區(qū)域的元素被視為分組蛤育。

共同區(qū)域原則如何應用于UI設(shè)計中宛官?

同區(qū)域原則是特別有用的。它可以進行信息分組與內(nèi)容組織瓦糕,也可以實現(xiàn)內(nèi)容分離或充當焦點摘刑。提升層級結(jié)構(gòu),提高內(nèi)容信息曝光量刻坊。

共同區(qū)域原則可以將不同的元素結(jié)合在一起,使所有內(nèi)容信息在模塊中保持統(tǒng)一党晋。

相似

相似的視覺特征元素被認為比哪些不具有相似特征的元素更相近谭胚。

相似性原則如何適用于UI設(shè)計?

我們傾向于把相似的元素是為一個組或者一個模塊未玻,也會認為這些相似的元素表達的是相同內(nèi)容灾而。相似性幫助我們組織和對組內(nèi)對象進行分類,并將其與特定的含義或功能聯(lián)系起來扳剿。

有很多種不同的方式讓元素被認為是相似的旁趟,相關(guān)聯(lián)的。包括顏色庇绽、大小锡搜、形狀、紋理瞧掺、尺寸耕餐、方向等的相似性。當相似性存在時辟狈,一個對象可以通過與其他對象的不同而被強調(diào)肠缔,這被稱為“異诚孽危”,可用于產(chǎn)生對比或在視覺上進行強調(diào)明未。它可以將用戶的注意力吸引到某種特定的焦點上槽华,同時可幫助其內(nèi)容具有可瀏覽性、易發(fā)現(xiàn)性趟妥。

我們可以在導航猫态,鏈接,按鈕煮纵,標題等元素中使用相似性原則懂鸵。

閉合

一組元素通常被認為是同一種可識別的形式或圖形。當一個元素不完整或其中一部分沒有封閉時行疏,閉合性原則就會存在匆光。

閉合性原則如何適用于UI設(shè)計中?

正如閉合性原則所述酿联,當提供一個不完整或一部分沒有封閉的元素時终息,我們的大腦會將其空白區(qū)域填充,創(chuàng)建出一個統(tǒng)一的整體來贞让。通過這種方式周崭,我們可以減少交流時所需的元素數(shù)量,減輕復雜度喳张,使設(shè)計更具吸引力续镇。閉合原則可以幫組我們盡量減少視覺干擾并傳遞信息,可在一個狹小的空間內(nèi)強化一個概念销部。

我們可以在圖形中使用閉合原則摸航,可以簡單、快速舅桩、清晰的表達含義酱虎。

對稱

對稱的元素不論它們的距離如何遠,也會被認為是屬于一個模塊擂涛,給人一種穩(wěn)定和有序的感覺读串。

對稱性原則在UI設(shè)計中應用?

對稱的元素看起來是舒適撒妈、簡單恢暖、和諧的。我們的眼睛會尋找具有秩序與穩(wěn)定屬性的元素狰右,用來理解世界胀茵。因此,對稱是快速有效的傳達信息的實用工具挟阻。對稱可以讓我們專注于重要的事情琼娘。

對稱構(gòu)圖是令人愉悅的峭弟,但同時也會帶給我們沉悶和靜止的感覺。視覺上的對稱往往更具有活力脱拼,更有趣味性瞒瘸。將不對稱的元素添加到對稱中,可以留給人們深刻的影響熄浓,同時更具吸引力情臭。在設(shè)計中,合理的對稱性都是很重要的赌蔑。

連續(xù)

排列成一條線或柔軟曲線的元素會比隨機排列成線元素更相關(guān)俯在。

連續(xù)性原則在UI設(shè)計中如何使用?

連成連續(xù)線的元素會被視為一個組娃惯。線段越順暢跷乐,我們越能將這些元素視為一個整體。

連續(xù)性可以幫我們通過圖形來傳達信息趾浅,并加強我們對相關(guān)信息的感知愕提。連續(xù)性通過不相同的內(nèi)容片段來傳遞內(nèi)容。連續(xù)的元素中斷可能在表明某個信息的結(jié)束皿哨,從而引起我們對新內(nèi)容的注意浅侨。

總結(jié)

格式塔原則會幫助我們實現(xiàn)目標,為用戶創(chuàng)造舒適的體驗证膨,為企業(yè)帶來巨大成功如输。


原文作者:Eleana Gkogka

文章鏈接:https://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市央勒,隨后出現(xiàn)的幾起案子挨决,更是在濱河造成了極大的恐慌,老刑警劉巖订歪,帶你破解...
    沈念sama閱讀 221,430評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異肆捕,居然都是意外死亡刷晋,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,406評論 3 398
  • 文/潘曉璐 我一進店門慎陵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來眼虱,“玉大人,你說我怎么就攤上這事席纽∧笮” “怎么了?”我有些...
    開封第一講書人閱讀 167,834評論 0 360
  • 文/不壞的土叔 我叫張陵润梯,是天一觀的道長过牙。 經(jīng)常有香客問我甥厦,道長,這世上最難降的妖魔是什么寇钉? 我笑而不...
    開封第一講書人閱讀 59,543評論 1 296
  • 正文 為了忘掉前任刀疙,我火速辦了婚禮,結(jié)果婚禮上扫倡,老公的妹妹穿的比我還像新娘谦秧。我一直安慰自己,他們只是感情好撵溃,可當我...
    茶點故事閱讀 68,547評論 6 397
  • 文/花漫 我一把揭開白布疚鲤。 她就那樣靜靜地躺著,像睡著了一般缘挑。 火紅的嫁衣襯著肌膚如雪集歇。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,196評論 1 308
  • 那天卖哎,我揣著相機與錄音鬼悠,去河邊找鬼。 笑死亏娜,一個胖子當著我的面吹牛焕窝,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播维贺,決...
    沈念sama閱讀 40,776評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼它掂,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了溯泣?” 一聲冷哼從身側(cè)響起虐秋,我...
    開封第一講書人閱讀 39,671評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎垃沦,沒想到半個月后客给,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,221評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡肢簿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,303評論 3 340
  • 正文 我和宋清朗相戀三年靶剑,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片池充。...
    茶點故事閱讀 40,444評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡桩引,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出收夸,到底是詐尸還是另有隱情坑匠,我是刑警寧澤,帶...
    沈念sama閱讀 36,134評論 5 350
  • 正文 年R本政府宣布卧惜,位于F島的核電站厘灼,受9級特大地震影響夹纫,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜手幢,卻給世界環(huán)境...
    茶點故事閱讀 41,810評論 3 333
  • 文/蒙蒙 一捷凄、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧围来,春花似錦跺涤、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,285評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至胀蛮,卻和暖如春院刁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背粪狼。 一陣腳步聲響...
    開封第一講書人閱讀 33,399評論 1 272
  • 我被黑心中介騙來泰國打工退腥, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人再榄。 一個月前我還...
    沈念sama閱讀 48,837評論 3 376
  • 正文 我出身青樓狡刘,卻偏偏與公主長得像,于是被迫代替她去往敵國和親困鸥。 傳聞我的和親對象是個殘疾皇子嗅蔬,可洞房花燭夜當晚...
    茶點故事閱讀 45,455評論 2 359

推薦閱讀更多精彩內(nèi)容