當前位置:首頁 >  站長 >  建站經(jīng)驗 >  正文

在WEB/UI的交互設(shè)計中運用格式塔心理學理論

 2017-09-05 15:06  來源: 設(shè)計達人   我來投稿 撤稿糾錯

  域名預訂/競價,好“米”不錯過

UI或UX分析需求主要是以人機交互界面為主,而這個需求不僅僅是一些設(shè)計、視覺使用體驗,在這里體驗當中,我們可適當運用一些心理學,比如格式塔理論就是一個很好的分析法。

格式塔學派是心理學重要流派之一,興起于20世紀初的德國,又稱為完形心理學。由馬科斯·韋特墨(1880-1943)、沃爾夫?qū)?middot;苛勒(1887-1967)和科特·考夫卡(1886-1941)三位德國心理學家在研究似動現(xiàn)象的基礎(chǔ)上創(chuàng)立。格式塔是德文Gestalt的譯音,意即“模式、形狀、形式”等,意思是指“動態(tài)的整體(dynamic wholes)”。(摘自*)

理論的創(chuàng)始人與解決的問題:

Wolgang Köhler:

Why do we see some things as foreground and others as background?

為什么我們在觀看事物的時候會把一部分當做前景,其余部分當做背景?

Kurt Koffka:

How is it possible that we can distinguish shapes?

為什么我們能區(qū)分形狀?

Max Wertheimer:

What’s a good shape?

什么形狀是好的?

All:

How do we see consistency of things?

我們怎樣看待事物的一致性?

格式塔心理學派斷言:人們在觀看時,眼腦并不是在一開始就區(qū)分一個形象的各個單一的組成部分,而是將各個部分組合起來,使之成為一個更易于理解的統(tǒng)一體。此外,他們堅持認為,在一個格式塔(即一個單一視場,或單一的參照系)內(nèi),眼睛的能力只能接受少數(shù)幾個不相關(guān)聯(lián)的整體單位。這種能力的強弱取決于這些整體單位的不同與相似,以及它們之間的相關(guān)位置。如果一個格式塔中包含了太多的互不相關(guān)的單位,眼腦就會試圖將其簡化,把各個單位加以組合,使之成為一個知覺上易于處理的整體。如果辦不到這一點,整體形象將繼續(xù)呈現(xiàn)為無序狀態(tài)或混亂,從而無法被正確認知,簡單地說,就是看不懂或無法接受。格式塔理論明確地提出:眼腦作用是一個不斷組織、簡化、統(tǒng)一的過程,正是通過這一過程,才產(chǎn)生出易于理解、協(xié)調(diào)的整體。那我們?nèi)绾谓M合處理事物,以服從格式塔的結(jié)論呢?創(chuàng)始人們提出了五項法則:

格式塔理論的五法則

1. 接近(Proximity)

2. 相似(Similarity)

3. 封閉(Closure)

4. 連續(xù)(Continuity)

5. 簡單(Simplicity)

1. 接近法則(Proximity)

「接近法則」距離相近的各部分趨于組成整體,強調(diào)位置。如下圖右邊,由于內(nèi)容太過接近,所以在視覺上會被用戶誤判為一個整體,但如果像下圖左邊合理安排結(jié)構(gòu)層次的展現(xiàn),內(nèi)容就會清晰很多。

如下圖左邊,會有10條豎線,但你是不是看成只有5組線條?所以,如果你想實現(xiàn)整體,最簡單的方式就是使用「接近法則」。

4列3行結(jié)構(gòu)

2. 相似法則(Similarity)

相似是不是覺得和「接近法則」一樣?但他們確實是不同的兩個概念?!赶嗨品▌t」在某一方面相似的各部分趨于組成整體,強調(diào)內(nèi)容。而接近強調(diào)位置。

人們通常把那些明顯具有共同特性(如形狀、運動、方向、顏色等)的事物組合在一起。請看下圖,你會怎樣判斷下面豎線之間的關(guān)系呢?他們好像是塞進去的一樣,為什么我們會有這樣的感覺呢?因為從顏色上我們已經(jīng)把他們作為單獨的整體,跟白色線條區(qū)分開來。我們換一個角度來思考,黃色線條與白色線條位置上是接近的,也是相似的,但是通過顏色變化很清楚的區(qū)分了不同的內(nèi)容,而且我們很容易關(guān)注黃色線條。因此,相似中的逆向思維是獲取焦點的好方法。這種方法在導航和強調(diào)信息部分屬性的設(shè)計上有著廣泛地應用。

因為有了黃色線區(qū)分開來,所以我們會判斷有2組線

如下圖右邊,地球圖標和橫線改了顏色和大小,它變得更加突出,但卻和旁邊2個不相似,造成是2種元素。這種情況下,應該像左邊一樣,保證元素的統(tǒng)一性。

3. 封閉法則(Closure)

「封閉法則」彼此相屬、構(gòu)成封閉實體的各部分趨于組成整體。

但是有一個非常有趣的現(xiàn)象值得我們?nèi)ビ^察和思考,就是不閉合時候也會實現(xiàn)統(tǒng)一的整體,更確切的說,這種現(xiàn)象是一種不完全的關(guān)閉。這些圖形與設(shè)計給人以簡單,輕松、自由的感覺。所以,完全的閉合是沒有必要的。

閉合法則的另一個意義,如下圖左邊,當遇到一個元素缺少或斷開時,會尋找一個持續(xù)、平滑的樣式,換句話說,我們會試圖、有意識的去填補空白。

4. 連續(xù)法則(Continuity)

「連續(xù)法則」凡具有連續(xù)性或共同運動方向的部分容易被看成一個整體。

連續(xù)理解起來是很簡單的,但連續(xù)卻解決了非常復雜的問題。通過找到非常微小的共性將兩個不同的環(huán)連接成一個整體。如下圖中的字母H和葉子,這完全是兩個不同的圖形。但即使這樣還是可以通過橫線和葉脈這個非常微小的共性連接成一個整體。

如下圖,我們會看到是兩個重疊圓,這兩個圓是由連續(xù)的小圓組成,從視覺上我們不會判斷為三種不同的圓,就像1和2之間的交集3,視覺上它是不存在的,除非你去突出它。

如下圖,下面灰色小點是連續(xù)的,從視覺上,我們會認為是一個整體,通過綠色點動態(tài)自動切換,可以提示訪客這個畫面是可以切換的。

5. 簡單(Simplicity)

「簡單法則」具有對稱、規(guī)則、平滑的簡單圖形特征的各部分趨于組成整體。

我們一直追求簡單的設(shè)計,可這個簡單并不容易實現(xiàn),很多人都在簡單問題上做了大量的研究與實踐?!逗唵畏▌t The laws of simplicity》是豆瓣里推薦人氣很高的一本書,推薦給大家看。

簡化的做法一般是:刪除、重組、放棄、隱藏。一些簡化設(shè)計的例子:

Demo 1: 表格簡化:去掉、隱藏

Demo 2: LOGO簡化:去掉、重組。

Demo 3: 網(wǎng)頁菜單簡化:隱藏。

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!

相關(guān)文章

熱門排行

信息推薦