header_logo

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

Blockstudio

2023.06.01

0/15
「格式塔原則」是從格式塔心理學(又稱完形心理學)所延伸出來的一些原則,而這些原則可根據特定的項目需求和目標,應用在介面設計上,輔助我們將零散的視覺元素組合成有意義的整體形象,讓使用者能夠輕鬆理解資訊架構,降低認知負擔,並且輕易的操作使用。
本篇將為大家介紹幾種常見的格式塔原則,並分享如何應用在 UI 設計上!
❶ 相似性 Similarity
|在畫面中,「相似的元素」會被視為同一群體或有相似的功能。
▸ 應用方式
  • 使用相似的顏色、形狀、大小、材質、動態等方式,將相關功能或內容的元素形成群組。
  • 在相似元素中添加一個稍微不同的樣式,可凸顯其中的重要元素。
▸ 使用注意
  • 過多的相似元素可能會造成混淆,而缺乏相似性導致介面缺乏統一性。
  • 考慮文化和語境差異,不同的使用對象對於相似性的感知可能有所不同。
➋ 接近性 Proximity
|在畫面中,「靠近的元素」會被視為相關的群體,有效整理與組織結構。
▸ 應用方式
  • 縮小彼此間距、共享邊框或背景,將相關功能或內容的元素形成群組。
  • 相反的,將不相關的元素拉開間距、加上分隔線等排版方式,以區隔不同群組。
▸ 使用注意
  • 留意相關與不相關的元素相對的距離比例,避免界線不清,混淆資訊。
  • 元素過度接近可能導致內容過於擁擠,影響使用者的閱讀和操作體驗。
➌ 圖與地 Figure-Ground
|在畫面中,主要內容和周圍環境可拆分為「主體」和「背景」。
▸ 應用方式
  • 透過顏色、大小、形狀等對比,強化主體的視覺權重,使重要的元素從背景中突顯出來。
  • 利用頁面佈局區分主體和背景,通常會將主體置於畫面中心或關鍵位置,背景則填滿周圍區域。
▸ 使用注意
  • 使用清晰的對比和適度的複雜性,以確保介面的可讀性和易用性。
➍ 對稱性 Symmetry
|在畫面中,「對稱的元素」具有結構性及平衡畫面的協調性。​
▸ 應用方式
  • 使用水平、垂直、中心軸對稱來排列元素,讓介面看起來平衡統一,並能快速找到資訊的位置。
  • 非對稱設計可以呈現出創新、動態和現代的感覺,適用於較時尚、前衛或趣味的風格。
▸ 使用注意
  • 適度使用非對稱設計,能讓介面看起來不單調或缺乏變化。
以上介紹了四種格式塔原則的應用,大家可以回顧一下自己在做網頁設計時,有沒有用到這次介紹的哪個原則呢?
歡迎和我們分享你的使用經驗或以上沒提及到的推薦應用方式!
下集將為大家繼續介紹更多格式塔原則,請持續關注『網站趨勢 WebCRACK』
延伸閱讀
回到列表

隨時掌握設計趨勢

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

Copyright © WebCRACK. All rights reserved.

版塊創意有限公司

| hello@webcrack.tw

| 統編:83197129