欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

UI 設計中的構圖與排版

2025-7-4 濤濤設計管理與成長

UI 設計中的構圖與排版需將文字、圖片及色彩等要素有組織組合，構圖通過黑林錯覺等心理學原理和居中、九宮格等九大技巧構建和諧布局，排版依據格式塔原理的接近性、連續性等法則及親密性、對齊等原則，合理運用對比、重復等手法，同時結合界面投影等設計形式，以提升頁面用戶體驗及相關性。

一、構圖

定義：指作品中藝術形象的結構配置方法，是造型藝術表達思想內容并獲得藝術感染力的重要手段，在 UI 設計中主要作用是構建和諧穩定的頁面布局。
心理學原理
| 錯覺類型 | 特點 |
|------|------|
| 黑林錯覺 | 中間兩條線平行但看起來彎 |

| 馮特錯覺 | 中間兩條線平行但看起來彎 |
| 龐佐錯覺 | 中間四邊形是矩形而非頂邊比底邊寬的四角形 |

| 厄任斯坦錯覺 | 中間矩形四條邊看起來彎曲 |
| 波根多夫錯覺 | 自動補齊斷的線條 |

| 菲克錯覺 | 垂直線段與水平線段等長但看起來垂直線段長 |
| 繆勒萊爾錯覺 | 末端加向外斜線的線段比加向內斜線的看起來長 |

| 艾賓浩斯錯覺 | 左邊空隙看起來窄實則與右邊同寬 |
| 卡尼莎錯覺 | 大腦腦補出實際不存在的三角形輪廓線 |
| 垂直水平錯覺 | 1:1 圖形正放時視覺上縱向更長 |

| 馬赫帶效應 | 同色漸變毗鄰放置的扁平化設計手法 |
| 同時對比錯覺 | 同色物體放不同對比度背景呈現不同顏色 |

| 芒克白錯覺 | 兩條線顏色相同但看起來不同 |
技巧
- 穩定性：對稱平衡形態具自然、安定等樸素美感，符合視覺習慣。
- 強點優先：畫面中人臉、明暗交界處等是天生強點，常見法線是黃金分割線。
- 均勢：通過物理力學規律支撐畫面，調整積極與消極元素關系，確保區域無偏差，元素無縫銜接。
常見類型
- 居中構圖：主題放畫面中心，主體突出、易平衡，適合嚴謹、莊嚴作品。
- 水平線構圖：以水平線條為主，表現寬闊、穩定、和諧，用于湖面等場景。
- 垂直構圖：以垂直線條為主，展示景物高大和深度，適用于樹木等。
- 九宮格構圖：重點放 4 個交叉點，突出主視覺中心。
- 對稱構圖：按對稱軸或中心使景物軸對稱或中心對稱。
- 對角線構圖：主題沿對角線排列，表現動感等，畫面更舒展。
- 引導線構圖：利用線條引導目光匯聚焦點，引導線可以是有方向的任何東西。
- 構架法構圖：用框架框起重點，產生進入畫面的感受。
- 重復法構圖：平鋪一群主題，突出主題。

二、排版

格式塔原理
- 接近性：物體相對距離影響感知是否成整體，相近則視為整體。
- 連續性：視覺偏向感知連續形式，元素共享明確界限區域則分一組，設計中常用卡片式組合相關元素。
- 相似性：眼睛易關注外表相似物體，不管位置是否相鄰都聯系起來。
- 閉合性：視覺自動閉合或腦補空出 / 殘缺圖形，感知為完整物體。
- 簡單法則：看到復雜物體愿轉換為單一統一形狀，移除無關細節簡化。
- 主體背景：設計中區分主體與背景，突出主要模塊或層級。
原則
- 親密性：相關項靠近歸組，成為視覺單位，減少混亂，提供清晰結構。
- 對齊：元素不能隨便安放，與另一元素有視覺聯系，常見排版方式使界面有序。
- 重復：視覺要素在畫面重復出現，如字體、顏色等，增加條理性和統一性。
- 對比：避免元素太過相似，不同則差異明顯，是頁面引人注目的重要因素。
設計形式
- 圖標：設計中運用的圖標形式。
- 字體：不同字大小的字體形式。
- 內容層級：通過卡片等形式體現的內容層級。
- 卡片樣式：設計中的卡片樣式。
- 停頓：在列表頁等節奏中斷制造停頓，抓住注意力。
- 界面投影：界面設計中投影的運用。

關鍵問題

UI 設計中常見的構圖類型有哪些？
- 答案：常見的構圖類型有居中構圖、水平線構圖、垂直構圖、九宮格構圖、對稱構圖、對角線構圖、引導線構圖、構架法構圖、重復法構圖。
格式塔原理在排版中有哪些具體應用？
- 答案：格式塔原理在排版中的應用包括接近性（物體相對距離影響感知是否成整體）、連續性（視覺偏向感知連續形式，用卡片組合元素）、相似性（關注外表相似物體并聯系）、閉合性（視覺自動閉合或腦補殘缺圖形）、簡單法則（將復雜物體轉換為單一形狀）、主體背景（區分主體與背景突出主要模塊）。
排版中的對比原則如何體現？
- 答案：對比原則的基本思路是避免頁面元素太過相似，若不同則差異明顯，可通過字體、顏色、大小、線寬、形狀、空間等方面體現，是頁面引人注目的重要因素。