用戶體驗設計 | 界面設計遵從格式塔原理

故事使人記憶。

在廣州塔旁邊的珠江邊。有一隻貓靠近一對雙胞胎,看到雙胞胎在吃麪條,他們剛剛從監獄出來。吃完麪條了之後,他們就比心,比完心了之後,一起去游泳,游泳的時候,看到一個岸邊的美女在唱歌。

這是胡編亂造的記憶,有點胡亂扯了,但是依然能把格式塔原理裏面的七個原理串聯起來:

1. 貓咪靠近:接近性

2. 雙胞胎:相識性

3. 麪條:連續性

4. 監獄:封閉性

5. 比心:對稱性

6. 一起游泳:共同命運

7. 岸邊美女唱歌:主體/背景

格式塔原理

格式塔的7個原理

1. 接近性

接近性的祕訣就是,越接近的,越像一組。

實際使用:界面上可以通過間距替代分割線,區分不同的模塊,區分不同類的內容。

2. 相似性

相似性的祕訣是:越相似,越像一組。

實際使用:有些表單行距很高,但是用戶依然能知道屬於一個表單的內容,這是因爲,表單元素大多相似,而且左邊文字,右邊表單項,也能很好地體現在空間上的相似性。

3. 連續性

連續性的祕訣是:大腦自動解析非連續性的物品,使之看起來是連續的整體(視覺想象力)

實際使用:滑動條的滑動,就很好地使用了連續性原理

4. 封閉性

封閉性的祕訣是:大腦自動解析空白的區域,形成一個物體(視覺想象力)

實際使用:多文檔選擇時,設計的疊起來的文檔就使用了封閉性原理

5. 對稱性

對稱性的祕訣是:大腦對視覺區域會以簡單化的方式進行解析,同時賦予解析結果對稱性。而且對稱性讓人感受到穩固和有秩序。

實際使用:大部分頁面都會呈現左右懟成習慣呢

6. 共同命運

共同命運的祕訣是:空間和形狀不具接近或相似的物品,當他們都具有同樣的運動屬性的時候,則會讓人感知到彼此相關。

實際使用:一些動態模擬中展示不同的實體關係,如推論具有共同發展歷史的國家的分析。

7. 主體/背景

主體/背景的祕訣是:視覺會區分主體和背景,佔據額我們主要注意力的元素是主體,其餘是背景。

實際使用:彈窗依然通過一定透明度顯示前一個步驟的界面,這種方式能幫助用戶理解他們在交互中所處的環境(我在哪裏)。

書名:《認知與設計》作者:Jeff Johnson

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章