如何利用互動設計的接近法則與格式塔理論

2020-12-15 雷鋒網

【編者按】本文來源中國雅虎UED   早在20世紀早期,一個由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象並編訂了目錄。格式塔理論明確地提出:眼腦作用是一個不斷組織、簡化、統一的過程,正是通過這一過程,才產生出易於理解、協調的整體。

我們的視覺系統自動對視覺輸入構建結構,並且在神經系統層面上感知形狀,圖形和物體,而不是只看到互不相連的邊,線和區域。「形狀」和「圖形」在德語是「Gestalt」,因此這些理論也被稱為視覺感知的格式塔(Gestalt)原理。

接近法則是格式塔理論中最為我們所熟知的,也是我們最常用到的一項法則。說的是物體之間的相對距離會影響我們感知它們是否以及如何在一起。相對於其它物體來說,彼此之間靠近的物體看起來屬於一組。越接近,組合在一起的可能性就越大,強調的是位置。如下圖,我們在意識中會將其分為兩組。

 

接近原則被廣泛應用於頁面內容的組織,以及分組設計中。對於引導用戶的視覺流及方便用戶對界面的解讀起到非常重要的作用,通過接近原則對同類內容進行分組,同時留下間距,會給用戶的視覺以秩序和合理的休憩。 設計者們經常使用分組框或分割線將屏幕上的控制項和數據顯示分隔開,如下圖。

除了接近法則之外,還有很多重要的原則你知道嗎?接下來我將逐一向大家介紹。

相似原則:

相似,聽起來跟接近非常類似,但是他們確實是不同的兩個概念。接近強調位置,而相似則強調內容。人們通常把那些明顯具有共同特性(如形狀、大小、顏色等)的事物組合在一起,即相似的部分在知覺中會形成若干組。在下圖中,我們會將黑帽子蛋和紅帽子蛋自然的分成兩組。

在頁面設計中分類使用文本、顏色、圖像等,可以更好的區分各個模塊和內容。如下圖中雅虎讀書導航,通過相似原則我們很容易的將一級導航和二級導航區分開來。

換一個角度來思考,顏色的變化很清楚的區分了不同的內容,相似中的逆向思維是獲取焦點的好方法。這種方法在導航強調部分信息的設計上有著廣泛地應用,如下圖。

封閉原則:

當元素不完整或者不存在的時候,依然可以被人們所識別。根據過去以往的經驗和視知覺的整體意願驅使,我們習慣性的將圖形作為一個整體去觀看,於是我們在腦袋裡將缺少的形狀補充進去之後,便形成最終我們識別出來的圖形效果。如下圖,沒有三角形和圓,但是在我們心理模型中填充缺失的信息,創建我們熟知的形狀和圖形。

封閉原則常被應用於圖形界面和頁面設計中,例如:在頁面中經常會用堆疊的形式表示對象的集合,只要顯示一個完整的對象和其「背後」對象的一角就足以讓用戶感知到這是由一疊對象構成的整體,如下圖所示。

連續原則:

與封閉性相關的是連續原則,連續原則說的是我們的視覺傾向於感知連續的形式而不是零散的碎片。在圖形設計中,使用了連續原則的一個最廣為人知的例子就是IBM的標誌。它由非連續性的藍色塊組成,但一點也不含糊,我們很容易就能識別出三個粗體字母,就像透過百葉窗看到的效果一樣,見圖9。

關于格式塔的原則還有很多,而且可以複合使用。在我們設計了一個東西之後,可以試著使用格式塔原理來考量一下自己各個設計元素之間的關係是否複合設計的初衷。希望通過對格式塔原始理論的介紹可以給大家帶來一些啟發

雷鋒網原創文章,未經授權禁止轉載。詳情見轉載須知。

相關焦點

  • 格式塔理論
    文/楊潔 格式塔理論的完形傾向原則和五個視知覺原則,能非常有效地指導APP界面布局設計中的信息視覺層級設計,幫助設計師有的放矢地對界面信息視覺結構進行組織、簡化和協調統一,設計出易學易操作的用戶界面。格式塔理論通過對人們的心理模型提出了基於視知覺判斷層面的五個基本原則:①接近性原則,是指人們通常會認為彼此接近或距離較短的視覺形式更容易被看成一個整體。②相似性原則,是指人們容易將具有相似形狀、大小、顏色、材質等的視覺形式看成一個整體或組合。
  • 交互原則:互動設計七大定律詳解(上)
    席克定律(Hick's Law)4. 接近法則(The Law Of Proximity )5. 泰思勒定律(Tesler's law)6. 奧卡姆剃刀原理(Occam's Razor)7. 新鄉重夫防錯原則(POKA-YOKE)在看文之前,提一個問題,大家可以思考一下:為什麼風靡一時的「漢堡包導航」在APP上不再受歡迎?
  • 如何編輯互動設計說明書
    互動設計說明書的閱讀對象互動設計文檔都是給誰看的?這個文檔會根據閱讀的對象做什麼優化嗎?下面利用場景化模擬解釋互動設計說明文檔的使用場景。互動設計說明書由互動設計師完成編輯、修訂、發布。互動設計師提交互動設計說明書給產品經理。互動設計師提交互動設計說明書給 UI 設計師。
  • 【知識要點】戴爾 「經驗之塔」理論
    美國視聽教育家戴爾1946年寫了一本書《視聽教學法》,其中提出了"經驗之塔"的理論,對經驗是怎樣得來的,認為經驗有的是直接方式、有的是間接方式得來的
  • 設計中的美學法則——比例與尺度
    東方明珠塔,塔高462.85米。設計師將在295米處設計了一個上球體,使平直單調的塔身變得豐富多彩,非常協調、美觀。所得比值與黃金比0.618相差甚微,由此可見,艾菲爾鐵塔第二層平臺的位置,非常接近於全塔高度的黃金分割點,從圖中可以看出,第二層平臺正是艾菲爾鐵塔張開的四條腿開始收攏的轉折點。
  • 在設計過程中,有哪些不容忽視的互動設計要點?
    本文總結了一些在互動設計中重要的理論要點,並針對各理論要點展開描述相應的設計策略。主要涉及視覺感知、認知摩擦、認知負荷和情境認知四個方面。如何通過界面元素間的位置關係引起用戶注意,從而快速有效地感知並獲取目標信息是界面設計的重要方面。從設計角度來說,應當使設計內容容易被發現、容易被識別。
  • 如何利用5W2H法則,詳細拆解語音直播產品中的模塊設計?
    編輯導語:語音直播平臺在幾年前就已經被廣泛使用了,但是音頻直播由於只有聲音沒有畫面,在直播間怎麼留住用戶這個問題很重要;本文作者通過5W2H法則,對語音直播產品中的模塊設計進行拆解,我們一起來看一下吧。
  • 物聯網時代的交互:平靜技術設計法則
    在這個被信息和數據轟炸的時代,如何設計出更友好,花費更少的精力成本,更平靜的去完成目標的產品,是我們需要考慮的。平靜技術就是能讓人們花更少精力去實現目標的一種設計指導原則。在設計時我們需要考慮人們會在什麼地方使用產品和服務,所處的環境對產品使用有什麼影響,環境是安靜的還是喧鬧的,是公共的還是私人環境?然後再去考慮如何傳遞信息。是否可以不打斷用戶的主要工作來傳遞信息?還要考慮主要信息傳遞失效時,會出現什麼情況?這些如果能處理好,就會讓產品消除當前任務對用戶帶來的負擔。
  • 攝影心理學分析,知其然知其所以然,7條心理學法則讓你更懂構圖
    從視覺智能研究而誕生--格式塔格式塔心理學誕生於1912年,是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察到了許多重要的視覺現象並對它們編訂了目錄。「形狀」和「圖形」在德語中是Gestalt,因此這些理論也稱做視覺感知的格式塔原理。由于格式塔理論是研究人類的視覺智能所提出的,因此對於平面設計、繪畫、網頁設計和攝影,都有很強的指導意義。
  • 如何利用多級抽象思維來設計庫?
    該文論述了庫與框架之間的區別,及如何設計組合化的庫。而本文作者在此之前,還發表了一篇《Library patterns: Multiple levels of abstraction》,結合具體實例,向大家非常詳細地介紹了庫設計模式及庫設計中的多級抽象思想。
  • 互動設計職業背景思考
    、「我工作一段時間了,不是設計行業,我能轉行做互動設計麼?」、「我對互動設計很感興趣,如何從零開始自學?」,剛好今天看到一個知乎問題邀請,問的也是類似問題,所以我想寫一些關於互動設計職業背景的粗淺思考,供大家參考。:)大多數問題歸結為兩類。第一類問題:互動設計工作是否需要專門的互動設計專業教育。
  • 用YouTube產品,為你解讀交互7大定律
    本期以YouTube這個產品為例,為你解讀互動設計7大定律在YouTube的應用。四、親密法則(Law of Proximity)親密法則是感知組織格式塔法的一部分,它指出彼此接近或接近的物體往往被組合在一起。
  • 『發個筆記』再看「經驗之塔」理論,戴爾錯在哪?
    在之前的文章中多次提到了這個理論,但只是對理論進行了闡釋。今天我們再來看看這個理論產生的背景,它的優點與不足。「經驗之塔」理論產生的背景「經驗之塔」理論是一種視聽教育的理論,即追求用照片、模型、圖表、實驗、表演等方式實現直觀的教育。從這我們可以看出,「經驗之塔」理論與我們的視聽技術(幻燈、電影、廣播、電視等)發展緊密相關。
  • 互動設計:如何做到善意?
    這一篇,我們來探討下互動設計的善意。善良經常被用來形容人,偶爾被用來形容產品,很少被用來形容互動設計。就像人們會說,iPhone 有人文關懷,而很少會說,iPhone 的互動設計有人文關懷。在筆者看來,原因之一,是互動設計很難將人文關懷囊括完,而產品則基本可以。
  • 職業教育教學設計為什麼要強調「做中學」? ——來自「經驗之塔」理論的啟示
    早在1946年,美國視聽教育家戴爾就出版了《教學中的視聽方法》(Audio Visual Methods in Teaching)一書,在這本書裡,戴爾提出了《經驗之塔》理論,對經驗的由來,即經驗是怎樣得來的這個問題進行了論述。戴爾認為,有些經驗是由直接方式得來的,而有些經驗則是由間接方式得來的。
  • 那些很熟悉但又不知怎麼用的設計法則(1):80/20法則
    80/20法則被廣泛應用於社會學、經濟、用戶體驗設計、企業管理等。通用設計法則的定義:在整個產品中,80%的效果是由20%的關鍵元素決定的。確切的百分比並不是重點,在實際情況中,關鍵變量所佔比例是10%~30%不等。維基百科的定義:大多數情況下,大約80%的影響是產生於20%的原因。
  • 虹口UI互動設計培訓班解讀UI互動設計的學習路線
    非凡教育UI互動設計培訓老師發現很多小白萌新都會有這樣的疑問,交互前景很美好,可是自己該從哪入手?下一步該學些什麼?網際網路公司對設計的要求標準是什麼?同一家公司為什麼設計師收入相差卻很大?這些都是各位小白們會面臨的切實問題。
  • 解讀交互稿模板:如何讓設計稿更規範化?
    交互稿應該包含哪些內容?如何搭建一個合理的交互稿結構?PS:本文適用於移動端,Axure軟體製作的文檔型交互稿。交互稿應該包含哪些內容?如何搭建一個合理的交互稿結構?各個界面應該如何擺放?清晰易讀的設計說明應該是怎樣的?想必作為一個新人,很難完全弄清上面的問題。其實想要畫出一份合乎規範的交互稿並不難,只需找前輩的稿子參考一下就能習得十之六七。
  • VR-AR腳手架: Leap Motion演示堆疊與裝配互動設計
    在最新的交互實驗中,我們(Leap Motion)探索了如何讓搭建、堆疊類交互變得順暢、穩定、有效響應,以及如何在保持完整物理模擬的細微差別和豐富性的同時,快速準確地放置、堆疊和裝配虛擬物體。1. 挑戰使用裸手操作符合物理定律的虛擬對象是一項極其複雜的任務。
  • 漫談互動設計:視覺設計的「CRAP」原則
    ,對UI及互動設計上更加用心。利用這篇文章將以往所掌握的互動設計相關知識重新梳理一下。對齊可以使頁面統一且條理,不論創建精美的、正式的、有趣的還是嚴肅的外觀,通常都可以利用一種明確的對齊來達到目的設計的某些方面需要在整個作品中重複。重複元素可能是一種粗字體、一條粗線、某個項目符號、顏色、設計要素、某種格式、空間關係等。