理解UI設計准則——格式塔原理


目錄

  • 格式塔原理:接近性
  • 格式塔原理:相似性
  • 格式塔原理:連續性
  • 格式塔原理:封閉性
  • 格式塔原理:對稱性
  • 格式塔原理:主體 / 背景
  • 格式塔原理:共同命運
  • 將格式塔原理綜合起來

 


 

格式塔原理:接近性

    接近性是指,物體之間的相對距離會影響我們感知它們是否以及如何組織在一起。互相靠近的(相對於其他的物體)物體看起來屬於一組,

  而那些距離較遠的就不是。下圖(A)中的星星看起來是成行的,而(B)看起來就是成列的

    

    接近性原理與軟件、網站和電器設備中的控制面板和數據表單的布局明顯相關。設計者們經常使用分組框和分割線將屏幕上的空間和數據

  顯示分隔開。另一方面,根據接近性原理可以通過拉進某些對象之間的距離,拉開與其他對象之間的距離是它們在視覺上成為一組,這樣的話

  就可以不需要那些用來划分區域的邊界線條。許多的設計專家推薦使用這一方式來減少用戶界面上的視覺凌亂感和代碼數量。

  

    相反的,如果同一組的控件的擺放距離相隔太遠或者橫縱接近的方式不對或者沒有使用任何的區域分割線的話,人們就很難感知到它們是

  你預期的那樣的相關性。軟件就會變得難以學習和使用

                                

格式塔原理:相似性

    格式塔原理相似性原理指出了影響我們感知分組的另一個因素:如果其他的因素相同,那么相似的物體看起來歸屬於同一組。下圖中,

  空心的星星看起來更像是一組,同時受它們的影響,使我們將星星的排列感知為橫向排列

                                                         

    類似的,向下面的表單,給人的感覺就像是有分組一樣,相同形式的輸入框並排的放置在一起,同時選擇器又做了適當分隔作用;

  右圖PhotoShop中的工具選區也是利用了相似性原理。

                                      

 

格式塔原理:連續性

    上述的兩個格式塔原理都與我們試圖給對象分組的傾向有關,另外幾個格式塔原理則與我們的視覺系統視圖解析模糊或者填補遺漏

  來感知整個物體的傾向有關。

    連續性原理,即是說我們的視覺傾向於感知連續的形式而不是離散的碎片。如下圖,我們看到的是一個潛伏在海中的海怪,雖然它

  的身體的一部分被遮住了而並不是三段毫不相干的東西;同樣對於右圖,我們也能夠感知到是一個圓圈將兩條線遮住了,而不是四條線

  和圓圈

                               

    滑動條就是使用了連續性感知的一個用戶界面實例。雖然滑動條的中間被一個滑塊截斷,但是仍然不影響我們將它感知為一個連

  續的整體

                            

 

格式塔原理:封閉性

    與連續性原理相關的是格式塔封閉性原理:我們的視覺系統自動的嘗試將敞開的圖形封閉起來,從而將其感知為完整的物體而不是分

  散的碎片。

                           

格式塔原理:對稱性原理

    格式塔對稱性原理則抓住了我們觀察事物的第三種傾向:我們傾向於將復雜的視覺信息降低為更為簡單的,更有對稱性,更容易理解

  ,更有意義的東西。對於同一種信息,我們的大腦視覺區域會對它有很多種可能的解析,但是我們的視覺和感知會選擇更加簡單和更對稱

  的視覺景象。

    當你看到下圖的時候,你並不會將它看做一些明暗不同的線條和平面組成的沒有任何意義和對稱性的平面圖形,相反你會解析為一個

  更加具有對稱性的,更加簡單的,更加易於理解的三維建築物圖形

                      

    同樣的,對於下面的圖形,你更傾向於感知為兩個菱形,而不是右邊的其他的幾種形式

       

 

格式塔原理:主體 / 背景

    這個原理指出,我們在感知事物的時候,總是自動的將視覺區域分為主體和背景。一旦圖像中的某個部分符合作為背景的特征的話,

  我們的視覺感知就不會把它們作為主體焦點。根據這樣的原理在用戶界面設計當中,我們就可以通過一些處理將圖像中的某些部分變成

  背景,這樣可以顯示更多的信息或者將用戶的焦點轉移

    比如,在網站中常常在主題內容和純色背景的中間層中放置印象誘導圖形(當然,實際上這個誘導圖形和純色背景實際上往往是一

  張圖,只是看起來像夾了一層),這樣可以傳遞更多的主題信息,因為用戶能夠區分什么是主體,什么是背景,而不會將它們搞混。

    

    又比如,手機應用中常常使用的燈箱,通過將當前的內容變暗,將之轉換成為背景,之后彈出燈箱,使用戶的視覺焦點轉移

        

格式塔原理:共同命運

     前面的幾個格式塔與那里都是針對靜態的圖形圖像,最后一個格式塔原理共同命運針對的是運動的物體。共同命運和前面的

  相似性原理和接近性原理相關,都影響着我們感知的物體是否成組。共同命運指出具有共同運動形式的物體被感知為彼此相關的一

  組。比如,下面的數十個五邊形中,如果其中的7個同步的前后擺動,那么雖然它們的距離較遠,還是會被感知為一組

                              

    又比如,當我們同時選中多個文件夾,之后拖動的時候,它們會一起移動,這就是共同命運原理的利用

                  

格式塔原理的綜合利用

    當然,界面設計場景中,各種格式塔原理不是孤立的,而是相互影響,共同起作用。比如,Photoshop中的一個界面就可以

  涉及到6個原理:接近性、相似性、連續性、封閉性、對稱性、主體/背景

                                  

    這是因為格式塔原理之間的相互作用,但我們同時使用某幾個格式塔原理進行設計的時候,常常導致無意的副作用,產生

  違反預期的副作用。為了消除這種影響,一個方法是,當設計好之后,逐一的用各個原理來考量各個設計元素之間的關系是否

  符合當初設計的初衷。

 

   本文摘自ISBN 978-7-115-36410-4,其中做了一些變動,如需轉載請著名這個書號,謝謝!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM