header_logo

UI 設計心法 - 格式塔原則(下)

Blockstudio

2023.06.08

0/18
上集為大家介紹四種常見應用在 UI 設計上的格式塔原則,本篇將繼續介紹更多原則的應用!
如果你忘記內容或還沒看過上集,可由此回顧 ☞ UI 設計心法 – 格式塔原則(上)
​-
➎ 封閉性 Closure
|在畫面中,「不完全呈現的元素」會因感知和記憶而腦補成完整的形體。
▸ 應用方式
  • 以實際的邊界線或視覺上的連續性,將相關的元素視覺上群組在一起或成為一個形體。
  • 減化元素的量,就算沒有完整呈現,人腦也會使用記憶將復雜的物體轉換或填補成更簡單的形狀。
▸ 使用注意
  • 適當的留白在封閉區周圍,可幫助強調封閉區域的完整性。
  • 留意元素之間的封閉性和開放性比例,避免過於鬆散導致無法辨識整體。
➏ 連續性 Continuation
|在畫面中,「連續的元素」可用來引導視覺動線和流程操作。
▸ 應用方式
  • 運用相似性、接近性等原則,將不同元素或區塊連結起來,形成視覺的連貫性,引導瀏覽動線。
  • 在畫面中保持一致的主要視覺方向,使用者在操作時較不會感到困惑或迷失。
  • 將重要的元素放置在視覺動線的終點或延伸處,可指引使用者更聚焦整個流程的重點。
▸ 使用注意
  • 盡量避免視覺動線突然的斷裂或跳躍,除非是為了造成特殊效果等情況。
  • 考慮目標用戶的閱讀習慣和語言方向,選擇適合的視覺動向。
➐ 共同區域 Common Region
|在畫面中,「位於相同區域的元素」會被視為相關的群體。
▸ 應用方式
  • 使用底色、邊框或簡單的底圖創建一個區域,將相關的內容放置其中,以便組織架構和分類元素。
  • 將每個區域加上標題,讓使用者更輕易快速的找到所需的資訊。
▸ 使用注意
  • 共同區域內的元素設計保有一致性、清晰分隔且有關聯性,較容易被理解內容資訊。
  • 共同區域原則的視覺層級比相似性和接近性更重要,因此,將相似和接近的元素置入相同區域,會優先看到共同區域內的群組。
➑ 共同命運 Common Fate
|在畫面中,「相同動畫或運動方向的元素」會被視為相關的群體。
▸ 應用方式
  • 以相同的速度和方向移動,將相關功能或內容的元素形成群組,同時能吸引使用者注意。
  • 將相關的元素套用相同的變化方式或動畫效果。
▸ 使用注意
  • 考量使用目的加入適量的動態,避免動態之間互相影響,造成操作上的混亂。
  • 共同命運原則的視覺層級比相似性和接近性還重要,會優先看到共同命運的群組。
➒ 連通性 Connectedness (New!)
|在畫面中,「相互連接的元素」會被視為同一群體或有相似的功能。
▸ 應用方式
  • 使用線條串連、箭頭指引或共享邊界,將相關功能或內容的元素形成群組。
  • 在資料圖表中,不同連續性的線條能明顯區分不同的數據。
▸ 使用注意
  • 確保元素之間的連結關係,盡可能使用相似的外觀和風格。
這兩篇為大家介紹了九種常見的格式塔原則,有些原理看似相似,卻各自都有獨特的應用意義。因此在設計畫面時,常常會根據不同的需求和目標,同時運用多種原則來組織架構。這樣的設計方法不僅能為介面設計賦予層次感和邏輯結構,還能協助使用者輕鬆理解資訊內容,享受流暢的操作體驗。
延伸閱讀
回到列表

隨時掌握設計趨勢

訂閱即表示您同意我們的隱私政策,並同意接收我們公司的更新。

Copyright © WebCRACK. All rights reserved.

版塊創意有限公司

| hello@webcrack.tw

| 統編:83197129