一、UI 設計中的構圖：構建和諧穩定的視覺骨架

（一）構圖心理學：讀懂用戶的視覺感知規律

1. 幾何感知錯覺：黑林錯覺、馮特錯覺中平行線條看似彎曲，龐佐錯覺中矩形看似頂寬底窄，厄任斯坦錯覺中矩形邊框看似彎曲，這些錯覺提醒我們，在設計直線型界面元素（如邊框、分割線、按鈕）時，需通過適度的視覺調整抵消錯覺影響，保證界面規整性；菲克錯覺、垂直水平錯覺中，等長的垂直線段比水平線段視覺上更長，繆勒萊爾錯覺中末端斜線朝向影響線段長度感知，這一規律常被用于按鈕、輸入框的尺寸設計，讓界面元素在視覺上達到平衡。
2. 空間與色彩錯覺：艾賓浩斯錯覺中相同寬度的空隙因周邊元素產生寬窄差異，卡尼莎錯覺中大腦會自動腦補出不存在的圖形輪廓，這讓我們在設計界面留白與圖形組合時，更注重周邊元素的搭配，利用留白的視覺引導強化信息層級；馬赫帶效應下同色漸變的毗鄰放置能打造自然的扁平化視覺效果，同時對比錯覺中同一顏色在不同對比度背景下呈現不同視覺效果，這兩大規律是蘭亭妙微在界面色彩搭配與漸變設計中的核心依據，讓色彩既符合品牌調性，又能適配界面的視覺感知需求。

（二）蘭亭妙微核心構圖技巧：讓界面兼具美感與實用性

1. 穩定性：對稱平衡的形態符合人類天生的視覺習慣，能帶來自然、安定、協調的視覺感受。在金融后臺系統、醫療管理平臺等對專業性和嚴謹性要求較高的產品設計中，我們常采用對稱平衡的構圖方式，讓界面呈現出典雅、莊重的視覺特質，匹配產品的行業屬性。
2. 強點優先：畫面中的人臉、明暗交界處是天生的視覺強點，而黃金分割線則是最經典的視覺強點布局依據。蘭亭妙微在設計中始終堅持 “強點聚焦核心信息”，將產品的核心功能、關鍵操作按鈕、重要提示信息放置在視覺強點位置，比如在數據可視化大屏中，將核心數據指標放置在黃金分割交叉點，讓用戶第一眼捕捉到關鍵信息。
3. 均勢：借鑒物理力學的支撐規律，調整設計中積極元素（如按鈕、圖標、文字塊）與消極元素（如留白、空白區域）的關系，讓視覺中心保持平衡，確保界面無明顯視覺偏差。在蘭亭妙微的設計準則中，所有界面元素都需彼此關聯、無縫銜接，形成一個完整的視覺整體，避免出現局部元素過于擁擠或過于空曠的問題。

（三）九種經典構圖法：蘭亭妙微的場景化應用策略

1. 居中構圖：將核心主題放置在畫面中心，視覺焦點突出、左右平衡，適用于品牌登錄頁、功能單頁、重要提示彈窗等設計，蘭亭妙微在新東方文旅小程序的核心功能頁設計中，多次采用此構圖法，讓用戶快速聚焦核心操作。
2. 水平線構圖：以水平線條為主，傳遞寬闊、穩定、和諧的視覺感受，常用于數據報表、列表頁、底部導航欄等設計，適配金融、企業管理系統等需要呈現大量規整信息的產品。
3. 垂直構圖：以垂直線條為核心，能充分展示界面的高大與深度，傳遞專業、嚴謹的特質，常用于側邊導航欄、豎向數據展示模塊、層級化信息欄等設計，在施耐德后臺系統的側邊功能導航設計中，垂直構圖的運用讓功能層級更清晰。
4. 九宮格構圖：將畫面重點放置在九宮格的四個交叉點，讓主視覺中心突出，構圖更具美感與合理性，適用于首頁輪播、功能圖標矩陣、內容推薦模塊等設計，是移動端 UI 設計中最常用的構圖法之一。
5. 對稱構圖：按對稱軸或對稱中心讓元素形成軸對稱或中心對稱，視覺規整、嚴謹，適用于后臺管理系統、醫療檢測報告界面等對信息規整性要求較高的場景。
6. 對角線構圖：主題沿畫面對角線排列，傳遞動感、生命力的視覺感受，打破橫平豎直的刻板感，適用于運動、文旅、創意類產品的界面設計，在新東方文旅小程序的景點展示頁中，對角線構圖讓畫面更舒展飽滿。
7. 引導線構圖：利用線條（含具象線條與抽象的方向型元素）引導用戶目光匯聚到視覺焦點，適用于流程引導頁、信息詳情頁、產品介紹頁等設計，蘭亭妙微在設計產品操作流程頁時，常通過引導線讓用戶的操作路徑更清晰。
8. 構架法構圖：用框架將核心畫面框定，引導用戶關注框內景象，產生沉浸式的視覺感受，適用于卡片式信息、彈窗內容、重點模塊展示等設計，讓信息模塊邊界清晰，層級分明。
9. 重復法構圖：將同一類主題元素平鋪放置，無明顯雜亂元素干擾，通過重復突出主題，適用于商品列表、圖標矩陣、數據卡片等需要批量展示同類信息的場景，讓界面規整且具有節奏感。

二、UI 設計中的排版：讓信息傳遞更高效

（一）格式塔原理：讀懂人類的視覺組織規律

1. 相似性：用戶的眼睛會自動將外表相似的物體歸為一個整體，無論其位置是否相鄰。在設計中，我們會讓同類功能的圖標、同層級的文字、同類型的按鈕保持視覺相似性，比如將所有操作按鈕設計為統一的圓角矩形樣式，將所有標題文字采用統一的字體與字號，讓用戶快速識別元素類型。
2. 接近性：物體間的相對距離會影響用戶的視覺感知，距離相近的元素會被認為是一個整體。蘭亭妙微在排版中始終遵循 “相關信息就近歸組” 的原則，將同一功能模塊的文字、圖標、按鈕緊密排列，不同模塊之間保留足夠留白，比如將 “登錄” 按鈕與賬號、密碼輸入框就近放置，讓用戶形成 “輸入 - 操作” 的視覺關聯。
3. 連續性：用戶的視覺更傾向于感知連續的形式，而非離散的碎片。在設計中，我們常采用卡片式設計將相關元素組合成連續的視覺區域，同時利用分割線、漸變等元素讓界面的視覺流保持連續，避免用戶的視覺注意力被割裂。
4. 閉合性：人類的視覺會自動將殘缺、空白的圖形閉合腦補，感知為完整的物體。這一規律讓我們在設計圖標、圖形按鈕時，可以采用簡約的線條設計，無需過度填充，既讓界面更簡潔，又能讓用戶快速識別元素含義，同時在信息排版中，可通過局部留白打造 “視覺閉合”，強化信息模塊的邊界感。
5. 簡單法則：面對復雜的視覺元素，用戶會自動將其轉換為單一統一的形狀，移除無關細節進行簡化。蘭亭妙微在設計復雜的后臺系統、數據大屏時，始終堅持 “化繁為簡” 的排版原則，將復雜的信息拆解為簡潔的模塊，將繁瑣的視覺元素簡化為統一的形狀，讓用戶快速理解界面內容。
6. 主體背景：設計中需明確區分主體對象與背景，突出核心模塊與信息層級。我們常通過顏色對比、投影效果、留白差異等方式，讓核心信息（主體）從背景中凸顯出來，比如在數據卡片設計中，通過卡片的淺底色與頁面的深底色形成對比，讓數據信息成為視覺主體。
7. 共同命運：運動或方向相同的元素會被用戶歸為一個整體，這一規律在動態 UI 設計中尤為重要。蘭亭妙微在設計界面動效時，讓同一功能模塊的元素保持相同的動效方向與節奏，比如導航欄的圖標 hover 動效、列表項的展開動效，讓動態元素的視覺表現更統一。

（二）蘭亭妙微排版四大核心原則：實戰落地的設計準則

1. 親密性原則：彼此相關的信息項必須靠近、歸組，形成一個視覺單位，而非孤立的個體。這一原則能有效組織界面信息，減少用戶的視覺混亂，為用戶提供清晰的信息結構。比如在設計產品詳情頁時，將產品名稱、價格、規格歸為 “基礎信息組”，將產品介紹、參數、使用說明歸為 “詳情信息組”，讓用戶按組獲取信息，提升信息獲取效率。
2. 對齊原則：界面中沒有任何元素可以隨意安放，每個元素都應與其他元素形成明確的視覺聯系，通過無形的對齊線讓界面更有序。蘭亭妙微的設計規范中，嚴格規定了界面元素的左對齊、右對齊、居中對齊標準，比如所有文字塊統一左對齊，所有數據數字統一右對齊，讓界面呈現出規整、專業的視覺效果，即使是大量信息的列表頁，也能保持整潔有序。
3. 重復原則：讓設計中的視覺要素在界面中重復出現，包括字體、顏色、形狀、線條、圖標樣式、卡片尺寸等。重復能增強界面的一致性與識別性，讓用戶形成視覺記憶，同時提升品牌的視覺辨識度。在蘭亭妙微為企業打造的品牌化 UI 設計中，會將品牌色、品牌字體、專屬圖標樣式作為重復元素，貫穿于整個產品界面，讓產品視覺與品牌形象高度統一。
4. 對比原則：如果界面元素（字體、顏色、大小、線寬、形狀、空間等）存在差異，就讓這種差異足夠明顯，避免元素過于相似導致的視覺模糊。對比是打造信息層級、突出核心內容的關鍵，我們常通過字體大小對比區分標題與正文，通過顏色深淺對比區分核心按鈕與次要按鈕，通過空間大小對比區分核心模塊與次要模塊，讓用戶一眼識別界面的信息重點與操作優先級。

（三）排版的節奏營造：讓界面更具呼吸感

三、構圖與排版的融合：蘭亭妙微的設計閉環