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

2020-12-03 雷鋒網

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

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

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

 

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

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

相似原則:

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

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

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

封閉原則:

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

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

連續原則:

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

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

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

相關焦點

  • 格式塔理論
    文/楊潔 格式塔理論的完形傾向原則和五個視知覺原則,能非常有效地指導APP界面布局設計中的信息視覺層級設計,幫助設計師有的放矢地對界面信息視覺結構進行組織、簡化和協調統一,設計出易學易操作的用戶界面。格式塔理論通過對人們的心理模型提出了基於視知覺判斷層面的五個基本原則:①接近性原則,是指人們通常會認為彼此接近或距離較短的視覺形式更容易被看成一個整體。②相似性原則,是指人們容易將具有相似形狀、大小、顏色、材質等的視覺形式看成一個整體或組合。
  • 格式塔心理學5項法則的學習與思考
    格式塔理論自1912年由韋特海墨(M,Wetheimer)提出後,在德國得到迅速發展。由於苛勒(K,Kohler)和考夫卡(K,Koffka)的訪美以及他們的著作被翻譯成英文,這種新的理論引起了美國心理學家的注意。格式塔理論是心理學中為數不多的理性主義理論之一。
  • 七大交互心理學(下)
    互動設計七大定律:費茨定律(Fitts』 Law)、希克定律(Hick’s Law )、神奇數字7±2 法則、接近法則(The Law Of Proximity)、新鄉重夫:防錯原則、複雜性守恆定律/泰思勒定律(Tesler’s Law )、簡單有效原理/奧卡姆剃刀原理(Occam’s Razor )。
  • 設計原則總結:最全的互動設計原則和理論匯總
    設計是有原則和方法論的,鑑於網上各種文章和原則比較零碎,這次統一將互動設計的方法和理論匯總,不足之處也希望各位能夠提出,一起補全。文章包括:格式塔心理學原則、尼爾森可用性原則、尼爾森F視覺模型、Heuristic Evaluation十原則、費茨定律、席克定律、7+2法則、2秒原理、2/8法則、3次點擊法則、界面黃金8法則、jakob nielson原則、KANO模型、0123簡單法則、MVP法則、嬰兒鴨綜合症、包浩斯理念、泰思勒定律、防錯原則、奧卡姆剃刀原理、maya法則、信噪比法則、序列效應、功能可見性原則、
  • 世界哲學史丨施杜裡希 :活力論——格式塔理論
    由此出發,德裡石的思想傾向倒是更接近那個時代的形上學,即客觀存在哲學,我們將在這一章的另一節裡討論其代表人物。在觀察生命的過程中,機械論和活力論之間的對立鬥爭在希臘人那裡就已經發生了。在德國,漢斯·德裡石是以活力論的代表而聞名的,他的主要著作有《有機哲學》、《秩序學》、《現實理論》、《形上學》和《心理玄學》。
  • 那些很熟悉但又叫不出名字的設計法則(4):倒金字塔法則
    倒金字塔法則(Inverted Pyramid),一種以重要性遞減的順序呈現資料的方式。什麼是倒金字塔法則?倒金字塔法則是由 Edwin Stanton 開始的。他是亞伯拉罕·林肯的作戰部長。通用設計法則:倒金字塔法則指的是一種呈現資料的方式,先呈現最重要的資料,然後呈現附加的詳細信息,重要性依先後順序遞減。
  • 格式塔法則做出的設計,真的能抓住人心?
    今天主要講一講在視覺層面上格式塔原理對設計的影響,以及「設計師如何通過這些原理做出酷酷的東西」~在視覺設計上,格式塔原理也叫作「完形原理」,沒錯!!就是那個曾經讓我們深惡痛絕的完形填空的那個完形!:1、封閉原則(Closure)2、接近原則(Proximity)3、相似原則(Similarity)4、共同區域原則(Common Region)5、主體-背景原則(Figure-Ground)6、焦點原則(Focal Point)7、連續性原則(Focal Point)
  • 在設計過程中,有哪些不容忽視的互動設計要點?
    本文總結了一些在互動設計中重要的理論要點,並針對各理論要點展開描述相應的設計策略。如何通過界面元素間的位置關係引起用戶注意,從而快速有效地感知並獲取目標信息是界面設計的重要方面。從設計角度來說,應當使設計內容容易被發現、容易被識別。
  • 從理論到實踐,我是如何完成這份互動設計的?
    拿一款閱讀與發布文章的產品來說,關於網站與app的同步問題,當我們從需求出發開始規劃設計時,我們談的是如何與網站打通進行無縫的閱讀與發布文章功能的對接。而當我們進入具體功能設計時,討論的更多的是鍵盤的自定義功能是哪些,上傳圖片數量限制,圖片文字編輯如何操作,產生什麼問題,怎麼解決。
  • 互動設計法則——為顯性信息設計響應
    最近在討論其他童鞋的設計方案時,發現兩個共性問題——操作結果有一定的界面暗示,但不太符合用戶的直覺預期。因此,我歸納總結了這條設計法則:為顯性信息設計響應,進行設計優化。
  • 解讀交互稿模板:如何讓設計稿更規範化?
    交互稿應該包含哪些內容?如何搭建一個合理的交互稿結構?PS:本文適用於移動端,Axure軟體製作的文檔型交互稿。交互稿應該包含哪些內容?如何搭建一個合理的交互稿結構?各個界面應該如何擺放?清晰易讀的設計說明應該是怎樣的?想必作為一個新人,很難完全弄清上面的問題。
  • 乾貨|如何利用Python處理JSON格式的數據,建議收藏!
    本文轉載自【微信公眾號:數據分析與籃球,ID:dylanxia2019】經微信公眾號授權轉載,如需轉載與原文作者聯繫JSON數據格式在我們的日常工作中經常會接觸到,無論是做爬蟲開發還是一般的數據分析處理,本文小編就來分享一下當數據接口是JSON格式時,如何進行數據處理進行詳細的介紹
  • 格式塔設計原理,你知道多少?
    格式塔理論和研究述及了這樣一個觀念,即人們的審美觀對整體與和諧具有一種基本的要求。接近:  「單個視覺元素之間無限接近,視覺上會形成一個較大的整體。距離近的單個視覺元素會溶為一個整體,  而單個視覺元素的個性會減弱;」
  • 利用FLUENT軟體對脫硫塔內流場和溫度場模擬分析
    北極星大氣網訊:摘要:本文以一種典型的石灰石-石青溼法煙氣脫硫噴淋塔為研究對象,根據塔內工況,以紊流k-e模型及顆粒軌道模型為理論基礎,採用有限體積法,運用交錯網格,以速度和壓力為原始變量,用Gambit軟體構造網格節點,再運用Fluent軟體計算了脫硫噴淋塔內三維流場和溫度場;討論了煙氣入射角度以及噴淋層布置對脫硫的影響。
  • 信息維度與互動設計原理
    在第九維空間裡,不同宇宙間除了有不同的起源,還有不同的物理法則,而且得以比較不同宇宙間的歷史。在互動設計的表徵層面,九維信息表現為萬物互聯中,由信任而關聯的交互界面的形式,主要依賴人類情感中產生關聯的信任基礎,因信任而產生吸引力與鬼魅的遠距作用,萬事萬物由此而產生聚合。九維空間的互動設計注重情感化誘因與信任力的能量基礎,在交互關聯中有更加寬廣的全息維度映射關係。
  • 關於交互Demo設計的一些建議
    為方便產品經理、設計師、開發及項目相關人員能夠看到直觀的效果,進行更有效的溝通;提供直觀的產品設想,說明用戶將如何與產品進行交互,在互動設計的過程中一定會產出各種各樣的產出物,如流程圖、思維圖、紙上的草稿、甚至高保真演示稿。這裡簡單分享下自己在項目過程中的交互Demo設計的一些心得。
  • 如何用Sketch製作精緻的交互原型?
    雖然Sketch更適合設計師使用,但是在最近幾年,越來越多的產品經理使用Sketch代替Axure設計原型。出圖快、易操作、易上手是Axure的巨大優勢,但是交互一直是Sketch的硬傷。在這篇文章,一起來看看作者如何解決。
  • 奧卡姆剃刀法則
    和許多14世紀的宗教團體一樣,方濟各會的總部設在牛津,它為牛津大學的在校生提供了住所。威廉是一名主修神學的牛津學生,儘管沒有畢業,他後來還是成了中世紀最主要的思想家之一,對物理學、神學、邏輯學和哲學都作出了巨大貢獻。他最著名的思想是奧卡姆剃刀法則,即主張最簡單的解釋通常是最好的解釋。「剃刀」一詞比喻我們可以把一個理論中糾纏複雜的部分像鬍子一樣「剃除」,只留下最簡單的解釋。