當前位置:首頁 >  站長 >  建站經驗 >  正文

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

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

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

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

格式塔學派是心理學重要流派之一,興起于20世紀初的德國,又稱為完形心理學。由馬科斯·韋特墨(1880-1943)、沃爾夫岡·苛勒(1887-1967)和科特·考夫卡(1886-1941)三位德國心理學家在研究似動現(xiàn)象的基礎上創(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)一體。此外,他們堅持認為,在一個格式塔(即一個單一視場,或單一的參照系)內,眼睛的能力只能接受少數(shù)幾個不相關聯(lián)的整體單位。這種能力的強弱取決于這些整體單位的不同與相似,以及它們之間的相關位置。如果一個格式塔中包含了太多的互不相關的單位,眼腦就會試圖將其簡化,把各個單位加以組合,使之成為一個知覺上易于處理的整體。如果辦不到這一點,整體形象將繼續(xù)呈現(xiàn)為無序狀態(tài)或混亂,從而無法被正確認知,簡單地說,就是看不懂或無法接受。格式塔理論明確地提出:眼腦作用是一個不斷組織、簡化、統(tǒng)一的過程,正是通過這一過程,才產生出易于理解、協(xié)調的整體。那我們如何組合處理事物,以服從格式塔的結論呢?創(chuàng)始人們提出了五項法則:

格式塔理論的五法則

1. 接近(Proximity)

2. 相似(Similarity)

3. 封閉(Closure)

4. 連續(xù)(Continuity)

5. 簡單(Simplicity)

1. 接近法則(Proximity)

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

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

4列3行結構

2. 相似法則(Similarity)

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

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

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

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

3. 封閉法則(Closure)

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

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

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

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

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

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

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

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

5. 簡單(Simplicity)

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

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

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

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

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

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

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

相關文章

熱門排行

信息推薦