完形心理學（Gestalt Psychology） 如何增加設計的好感度

完形心理學（Gestalt Psychology） 在 UI/UX 設計中有重要應用，它研究人類如何將視覺元素組織成完整的圖形或模式，強調我們的感知過程是基於整體，而非僅僅關注於個別的元素。

以下是完形心理學的主要原則及其與界面設計的關係和應用：

1. 接近性（Proximity）

原則：物理距離較近的元素會被用戶視為一組。

• 在界面中的應用：
  • 分組：將相關的內容或元件靠近排列，幫助用戶快速理解它們的關聯性。
    • 例如：表單設計中，將「標籤（Label）」和「輸入框」放在一起。
  • 減少認知負擔：用距離明確區分不相關的元素，避免混淆。
• 案例：
  • 在電商網站中，將產品圖片、名稱和價格靠近排列，便於用戶快速關聯這些信息。
    

2. 相似性（Similarity）

原則：視覺特徵相似（如顏色、形狀、大小）的元素會被認為具有相同的功能或屬性。

• 在界面中的應用：
  • 一致性設計：使用相似的按鈕樣式或顏色來表示相同類型的操作（如所有的「提交」按鈕都是綠色）。
  • 強化分層：區分主要與次要信息（例如，主要按鈕用實色背景，次要按鈕用線框樣式）。
• 案例：
  • Google 的 Material Design 使用相似顏色和樣式來表達同一層級的操作或內容。
    

3. 封閉性（Closure）

原則：即使某些圖形或圖案不完整，人類也會自動將它們「補全」成完整的形狀。

• 在界面中的應用：
  • 簡化設計：使用不完整的輪廓或形狀來吸引注意力，讓用戶自然補全圖案。
  • 設計微互動：使用未完成的進度條或循環動畫，讓用戶感知「進度」。
• 案例：
  • 載入動畫中使用圓形未閉合的動畫來表示進行中操作。
    

許多輪播設計在僅顯示輪播中項目的一部分時利用了封閉原理。儘管用戶可能無法猜測部分顯示的項目的確切細節，
但不完整的項目向他們發出訊息，表明垂直折疊之外還有更多項目，他們應該滑動才能到達它們。

4. 連續性（Continuation）

原則：視覺上排列連續的元素會被感知為一條線或路徑，用戶的視線會自然沿著連續的方向移動。

• 在界面中的應用：
  • 視覺引導：設計連續的布局，幫助用戶從一部分界面流暢地過渡到另一部分。
    • 例如：導航條中的箭頭或進度指標引導用戶到下一步。
  • 提升可讀性：使用對齊和行距讓文本段落更易於掃描和閱讀。
• 案例：
  • 滑動式圖片展示中，圖片按順序排列，用戶會自然地滑動查看下一張。

5. 圖形與背景（Figure/Ground）

原則：視覺上會區分出「前景」（圖形）和「背景」（地面），並將注意力集中在圖形部分。

• 在界面中的應用：
  • 強調焦點：通過背景模糊、色彩對比，將主要操作元素（如按鈕）從背景中凸顯。
  • 層次設計：利用深淺對比設計出清晰的層級（如卡片背景與內容區分）。
• 案例：
  • 模態窗口彈出時，背景變暗，將用戶的注意力集中到窗口上。
    

6. 共通命運（Common Fate）

原則：同時移動或改變的元素會被認為是相關的。

• 在界面中的應用：
  • 分組行為：當多個圖標一起移動（例如拖動工具欄時），用戶會認為它們是屬於同一功能組。
  • 互動反饋：滑動切換頁面時，所有相關元件同步更新狀態。
• 案例：
  • 圖片輪播中，圖片與標籤指示器（Dots）同時變化，強化它們的聯繫。