<bdo id="vljxk"><rt id="vljxk"><noframes id="vljxk"><noframes id="vljxk"><noframes id="vljxk"><rt id="vljxk"></rt><rt id="vljxk"></rt><noframes id="vljxk"><rt id="vljxk"><delect id="vljxk"></delect></rt><noframes id="vljxk"><rt id="vljxk"></rt><noframes id="vljxk"><noframes id="vljxk"><rt id="vljxk"></rt>

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

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

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

  阿里云優惠券 先領券再下單

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

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

理論的創始人與解決的問題:

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?

為什么我們能區分形狀?

Max Wertheimer:

What’s a good shape?

什么形狀是好的?

All:

How do we see consistency of things?

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

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

格式塔理論的五法則

1. 接近(Proximity)

2. 相似(Similarity)

3. 封閉(Closure)

4. 連續(Continuity)

5. 簡單(Simplicity)

1. 接近法則(Proximity)

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

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

4列3行結構

2. 相似法則(Similarity)

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

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

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

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

3. 封閉法則(Closure)

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

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

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

4. 連續法則(Continuity)

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

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

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

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

5. 簡單(Simplicity)

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

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

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

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

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

Demo 3: 網頁菜單簡化:隱藏。

申請創業報道,分享創業好點子。點擊此處,共同探討創業新機遇!

相關文章

  • 如何基于用戶體驗來設計人機交互效果

    網站想要提升用戶體驗有很多方法,人機交互內容就是其中之一。在前些年,由于一些技術的限制,導致這一內容的添加具有很大的困難,但現在隨著各項技術的興起,人機交互的設計已經不存在很大的障礙,很多網站的人機交互方面做的非常完善且的題,這可以為網站的營銷帶來極大的幫助。但值得注意的是,人機交互并不是一個只有正

  • 巧用5個心理學現象優化用戶體驗設計,提高網站轉化率

    心理學是人類科學重要的分支之一,它在網站建設中也發揮著不可或缺的作用。作為站長,我們都希望能夠給用戶提供優質的用戶體驗,有效促進用戶轉化率的提高,提升網站銷量,得以成長和壯大。但做好用戶體驗可并不簡單,不少站長在做網站時僅依靠自身的經驗,積累的經驗確實很有幫助,但我們還應該重點研究用戶行為背后的心理

  • 網站建設過程中的交互設計原則

    那么在保證交互效果新穎性、創新性的同時,應該遵循哪些基本原則呢?

  • 在網站設計中巧用色彩心理學 提升流量和點擊率

    生活中,我們中的一些人甚至不能很好的搭配上衣和褲子的顏色,那么面對打造一個成功專業網站時,如何選擇完美的色彩組合就成為一個難題了。這時,我們就要請色彩理論"出山"了。色彩理論是藝術設計中一個很重要的概念,在光學中為人們所廣泛熟知。一般而言,色彩理論給圖像處理員提供了創造完美色彩組

  • 智能卡片短信:如何把交互設計做成一門生意?

    最近使用安卓手機走查,發現安卓的短信大變樣,變成了智能化的卡片式短信,經過深入了解發現,卡片式短信的背后是“信析寶”——智能短信提供商。我們一起來看看他們是如何通過交互設計解決用戶痛點,成功把設計商業化的。1、用戶痛點分析隨著智能手機、4G網絡的普及,移動上網已經成為標配,加上微信的火熱,普通用戶早

    標簽:
    交互界面設計

熱門排行

信息推薦