UI 設(shè)計(jì)中的構(gòu)圖與排版
2025-7-4 濤濤 設(shè)計(jì)管理與成長
UI 設(shè)計(jì)中的構(gòu)圖與排版需將文字、圖片及色彩等要素有組織組合，構(gòu)圖通過黑林錯(cuò)覺等心理學(xué)原理和居中、九宮格等九大技巧構(gòu)建和諧布局，排版依據(jù)格式塔原理的接近性、連續(xù)性等法則及親密性、對(duì)齊等原則，合理運(yùn)用對(duì)比、重復(fù)等手法，同時(shí)結(jié)合界面投影等設(shè)計(jì)形式，以提升頁面用戶體驗(yàn)及相關(guān)性。
- 定義：指作品中藝術(shù)形象的結(jié)構(gòu)配置方法，是造型藝術(shù)表達(dá)思想內(nèi)容并獲得藝術(shù)感染力的重要手段，在 UI 設(shè)計(jì)中主要作用是構(gòu)建和諧穩(wěn)定的頁面布局。
- 心理學(xué)原理
| 錯(cuò)覺類型 | 特點(diǎn) |
|------|------|
| 黑林錯(cuò)覺 | 中間兩條線平行但看起來彎 |
| 馮特錯(cuò)覺 | 中間兩條線平行但看起來彎 |
| 龐佐錯(cuò)覺 | 中間四邊形是矩形而非頂邊比底邊寬的四角形 |
| 厄任斯坦錯(cuò)覺 | 中間矩形四條邊看起來彎曲 |
| 波根多夫錯(cuò)覺 | 自動(dòng)補(bǔ)齊斷的線條 |
| 菲克錯(cuò)覺 | 垂直線段與水平線段等長但看起來垂直線段長 |
| 繆勒萊爾錯(cuò)覺 | 末端加向外斜線的線段比加向內(nèi)斜線的看起來長 |
| 艾賓浩斯錯(cuò)覺 | 左邊空隙看起來窄實(shí)則與右邊同寬 |
| 卡尼莎錯(cuò)覺 | 大腦腦補(bǔ)出實(shí)際不存在的三角形輪廓線 |
| 垂直水平錯(cuò)覺 | 1:1 圖形正放時(shí)視覺上縱向更長 |
| 馬赫帶效應(yīng) | 同色漸變毗鄰放置的扁平化設(shè)計(jì)手法 |
| 同時(shí)對(duì)比錯(cuò)覺 | 同色物體放不同對(duì)比度背景呈現(xiàn)不同顏色 |
| 芒克白錯(cuò)覺 | 兩條線顏色相同但看起來不同 |
- 技巧
- 穩(wěn)定性：對(duì)稱平衡形態(tài)具自然、安定等樸素美感，符合視覺習(xí)慣。
- 強(qiáng)點(diǎn)優(yōu)先：畫面中人臉、明暗交界處等是天生強(qiáng)點(diǎn)，常見法線是黃金分割線。
- 均勢：通過物理力學(xué)規(guī)律支撐畫面，調(diào)整積極與消極元素關(guān)系，確保區(qū)域無偏差，元素?zé)o縫銜接。
- 常見類型
- 居中構(gòu)圖：主題放畫面中心，主體突出、易平衡，適合嚴(yán)謹(jǐn)、莊嚴(yán)作品。
- 水平線構(gòu)圖：以水平線條為主，表現(xiàn)寬闊、穩(wěn)定、和諧，用于湖面等場景。
- 垂直構(gòu)圖：以垂直線條為主，展示景物高大和深度，適用于樹木等。
- 九宮格構(gòu)圖：重點(diǎn)放 4 個(gè)交叉點(diǎn)，突出主視覺中心。
- 對(duì)稱構(gòu)圖：按對(duì)稱軸或中心使景物軸對(duì)稱或中心對(duì)稱。
- 對(duì)角線構(gòu)圖：主題沿對(duì)角線排列，表現(xiàn)動(dòng)感等，畫面更舒展。
- 引導(dǎo)線構(gòu)圖：利用線條引導(dǎo)目光匯聚焦點(diǎn)，引導(dǎo)線可以是有方向的任何東西。
- 構(gòu)架法構(gòu)圖：用框架框起重點(diǎn)，產(chǎn)生進(jìn)入畫面的感受。
- 重復(fù)法構(gòu)圖：平鋪一群主題，突出主題。
- 格式塔原理
- 接近性：物體相對(duì)距離影響感知是否成整體，相近則視為整體。
- 連續(xù)性：視覺偏向感知連續(xù)形式，元素共享明確界限區(qū)域則分一組，設(shè)計(jì)中常用卡片式組合相關(guān)元素。
- 相似性：眼睛易關(guān)注外表相似物體，不管位置是否相鄰都聯(lián)系起來。
- 閉合性：視覺自動(dòng)閉合或腦補(bǔ)空出 / 殘缺圖形，感知為完整物體。
- 簡單法則：看到復(fù)雜物體愿轉(zhuǎn)換為單一統(tǒng)一形狀，移除無關(guān)細(xì)節(jié)簡化。
- 主體背景：設(shè)計(jì)中區(qū)分主體與背景，突出主要模塊或?qū)蛹?jí)。
- 原則
- 親密性：相關(guān)項(xiàng)靠近歸組，成為視覺單位，減少混亂，提供清晰結(jié)構(gòu)。
- 對(duì)齊：元素不能隨便安放，與另一元素有視覺聯(lián)系，常見排版方式使界面有序。
- 重復(fù)：視覺要素在畫面重復(fù)出現(xiàn)，如字體、顏色等，增加條理性和統(tǒng)一性。
- 對(duì)比：避免元素太過相似，不同則差異明顯，是頁面引人注目的重要因素。
- 設(shè)計(jì)形式
- 圖標(biāo)：設(shè)計(jì)中運(yùn)用的圖標(biāo)形式。
- 字體：不同字大小的字體形式。
- 內(nèi)容層級(jí)：通過卡片等形式體現(xiàn)的內(nèi)容層級(jí)。
- 卡片樣式：設(shè)計(jì)中的卡片樣式。
- 停頓：在列表頁等節(jié)奏中斷制造停頓，抓住注意力。
- 界面投影：界面設(shè)計(jì)中投影的運(yùn)用。
- UI 設(shè)計(jì)中常見的構(gòu)圖類型有哪些？
- 答案：常見的構(gòu)圖類型有居中構(gòu)圖、水平線構(gòu)圖、垂直構(gòu)圖、九宮格構(gòu)圖、對(duì)稱構(gòu)圖、對(duì)角線構(gòu)圖、引導(dǎo)線構(gòu)圖、構(gòu)架法構(gòu)圖、重復(fù)法構(gòu)圖。
- 格式塔原理在排版中有哪些具體應(yīng)用？
- 答案：格式塔原理在排版中的應(yīng)用包括接近性（物體相對(duì)距離影響感知是否成整體）、連續(xù)性（視覺偏向感知連續(xù)形式，用卡片組合元素）、相似性（關(guān)注外表相似物體并聯(lián)系）、閉合性（視覺自動(dòng)閉合或腦補(bǔ)殘缺圖形）、簡單法則（將復(fù)雜物體轉(zhuǎn)換為單一形狀）、主體背景（區(qū)分主體與背景突出主要模塊）。
- 排版中的對(duì)比原則如何體現(xiàn)？
- 答案：對(duì)比原則的基本思路是避免頁面元素太過相似，若不同則差異明顯，可通過字體、顏色、大小、線寬、形狀、空間等方面體現(xiàn)，是頁面引人注目的重要因素。
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.shtzxx.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
