蘭亭妙微設計自 2009 年成立以來,深耕 UI/UX 設計領域十余年,為金融、醫(yī)療、智能制造等 7 大行業(yè) 500 + 企業(yè)打造全鏈路數(shù)字化設計解決方案,在中車數(shù)據(jù)可視化大屏、施耐德后臺系統(tǒng)交互設計等經(jīng)典案例中,始終將構圖與排版作為 UI 設計的核心底層邏輯。我們認為,根據(jù)產(chǎn)品主題與業(yè)務內(nèi)容的需求,將文字、圖片、色彩等視覺要素進行有組織、有目的的組合設計,不僅是塑造界面美感的關鍵,更直接決定了用戶的操作體驗與信息獲取效率,是連接產(chǎn)品功能與用戶感知的重要橋梁。

一、UI 設計中的構圖:構建和諧穩(wěn)定的視覺骨架
構圖作為造型藝術的核心術語,是作品中藝術形象的結構配置方法,也是表達設計思想、傳遞產(chǎn)品價值并獲得視覺感染力的重要手段。在繪畫、平面設計等傳統(tǒng)視覺藝術中歷經(jīng)沉淀的構圖技巧,在 UI 設計中被賦予了更具實用性的內(nèi)涵 —— 蘭亭妙微的設計團隊始終認為,UI 設計中的構圖,核心作用是為界面構建和諧穩(wěn)定的視覺骨架,讓用戶在視覺舒適的前提下,高效接收產(chǎn)品信息、完成操作行為。
(一)構圖心理學:讀懂用戶的視覺感知規(guī)律
用戶的視覺判斷并非完全客觀,而是會受到心理認知的影響產(chǎn)生特定視覺錯覺,蘭亭妙微在設計實踐中,始終將這些視覺心理學規(guī)律作為構圖設計的基礎,規(guī)避錯覺帶來的界面認知偏差,同時利用錯覺強化設計效果。
- 幾何感知錯覺:黑林錯覺、馮特錯覺中平行線條看似彎曲,龐佐錯覺中矩形看似頂寬底窄,厄任斯坦錯覺中矩形邊框看似彎曲,這些錯覺提醒我們,在設計直線型界面元素(如邊框、分割線、按鈕)時,需通過適度的視覺調(diào)整抵消錯覺影響,保證界面規(guī)整性;菲克錯覺、垂直水平錯覺中,等長的垂直線段比水平線段視覺上更長,繆勒萊爾錯覺中末端斜線朝向影響線段長度感知,這一規(guī)律常被用于按鈕、輸入框的尺寸設計,讓界面元素在視覺上達到平衡。
- 空間與色彩錯覺:艾賓浩斯錯覺中相同寬度的空隙因周邊元素產(chǎn)生寬窄差異,卡尼莎錯覺中大腦會自動腦補出不存在的圖形輪廓,這讓我們在設計界面留白與圖形組合時,更注重周邊元素的搭配,利用留白的視覺引導強化信息層級;馬赫帶效應下同色漸變的毗鄰放置能打造自然的扁平化視覺效果,同時對比錯覺中同一顏色在不同對比度背景下呈現(xiàn)不同視覺效果,這兩大規(guī)律是蘭亭妙微在界面色彩搭配與漸變設計中的核心依據(jù),讓色彩既符合品牌調(diào)性,又能適配界面的視覺感知需求。
(二)蘭亭妙微核心構圖技巧:讓界面兼具美感與實用性
在十余年的設計實戰(zhàn)中,蘭亭妙微總結出三大核心構圖技巧,貫穿于所有 UI 設計項目的視覺搭建過程,讓構圖不僅服務于視覺美感,更貼合產(chǎn)品的業(yè)務邏輯與用戶操作習慣。
- 穩(wěn)定性:對稱平衡的形態(tài)符合人類天生的視覺習慣,能帶來自然、安定、協(xié)調(diào)的視覺感受。在金融后臺系統(tǒng)、醫(yī)療管理平臺等對專業(yè)性和嚴謹性要求較高的產(chǎn)品設計中,我們常采用對稱平衡的構圖方式,讓界面呈現(xiàn)出典雅、莊重的視覺特質,匹配產(chǎn)品的行業(yè)屬性。
- 強點優(yōu)先:畫面中的人臉、明暗交界處是天生的視覺強點,而黃金分割線則是最經(jīng)典的視覺強點布局依據(jù)。蘭亭妙微在設計中始終堅持 “強點聚焦核心信息”,將產(chǎn)品的核心功能、關鍵操作按鈕、重要提示信息放置在視覺強點位置,比如在數(shù)據(jù)可視化大屏中,將核心數(shù)據(jù)指標放置在黃金分割交叉點,讓用戶第一眼捕捉到關鍵信息。
- 均勢:借鑒物理力學的支撐規(guī)律,調(diào)整設計中積極元素(如按鈕、圖標、文字塊)與消極元素(如留白、空白區(qū)域)的關系,讓視覺中心保持平衡,確保界面無明顯視覺偏差。在蘭亭妙微的設計準則中,所有界面元素都需彼此關聯(lián)、無縫銜接,形成一個完整的視覺整體,避免出現(xiàn)局部元素過于擁擠或過于空曠的問題。
(三)九種經(jīng)典構圖法:蘭亭妙微的場景化應用策略
不同的構圖方式能傳遞不同的視覺感受,適配不同的產(chǎn)品場景與業(yè)務需求。蘭亭妙微將九種經(jīng)典構圖法與產(chǎn)品場景深度結合,讓構圖成為服務于產(chǎn)品功能的工具,而非單純的視覺形式。
- 居中構圖:將核心主題放置在畫面中心,視覺焦點突出、左右平衡,適用于品牌登錄頁、功能單頁、重要提示彈窗等設計,蘭亭妙微在新東方文旅小程序的核心功能頁設計中,多次采用此構圖法,讓用戶快速聚焦核心操作。
- 水平線構圖:以水平線條為主,傳遞寬闊、穩(wěn)定、和諧的視覺感受,常用于數(shù)據(jù)報表、列表頁、底部導航欄等設計,適配金融、企業(yè)管理系統(tǒng)等需要呈現(xiàn)大量規(guī)整信息的產(chǎn)品。
- 垂直構圖:以垂直線條為核心,能充分展示界面的高大與深度,傳遞專業(yè)、嚴謹?shù)奶刭|,常用于側邊導航欄、豎向數(shù)據(jù)展示模塊、層級化信息欄等設計,在施耐德后臺系統(tǒng)的側邊功能導航設計中,垂直構圖的運用讓功能層級更清晰。
- 九宮格構圖:將畫面重點放置在九宮格的四個交叉點,讓主視覺中心突出,構圖更具美感與合理性,適用于首頁輪播、功能圖標矩陣、內(nèi)容推薦模塊等設計,是移動端 UI 設計中最常用的構圖法之一。
- 對稱構圖:按對稱軸或對稱中心讓元素形成軸對稱或中心對稱,視覺規(guī)整、嚴謹,適用于后臺管理系統(tǒng)、醫(yī)療檢測報告界面等對信息規(guī)整性要求較高的場景。
- 對角線構圖:主題沿畫面對角線排列,傳遞動感、生命力的視覺感受,打破橫平豎直的刻板感,適用于運動、文旅、創(chuàng)意類產(chǎn)品的界面設計,在新東方文旅小程序的景點展示頁中,對角線構圖讓畫面更舒展飽滿。
- 引導線構圖:利用線條(含具象線條與抽象的方向型元素)引導用戶目光匯聚到視覺焦點,適用于流程引導頁、信息詳情頁、產(chǎn)品介紹頁等設計,蘭亭妙微在設計產(chǎn)品操作流程頁時,常通過引導線讓用戶的操作路徑更清晰。
- 構架法構圖:用框架將核心畫面框定,引導用戶關注框內(nèi)景象,產(chǎn)生沉浸式的視覺感受,適用于卡片式信息、彈窗內(nèi)容、重點模塊展示等設計,讓信息模塊邊界清晰,層級分明。
- 重復法構圖:將同一類主題元素平鋪放置,無明顯雜亂元素干擾,通過重復突出主題,適用于商品列表、圖標矩陣、數(shù)據(jù)卡片等需要批量展示同類信息的場景,讓界面規(guī)整且具有節(jié)奏感。
二、UI 設計中的排版:讓信息傳遞更高效
如果說構圖是 UI 設計的視覺骨架,那么排版就是填充骨架的血肉,是將文字、圖標、按鈕等元素進行有序排列的過程。蘭亭妙微認為,優(yōu)秀的排版不僅能讓界面整潔美觀,更能降低用戶的信息獲取成本,讓用戶在最短時間內(nèi)找到所需信息、完成操作,而格式塔原理則是所有排版設計的底層邏輯,也是蘭亭妙微排版方法論的核心依據(jù)。
(一)格式塔原理:讀懂人類的視覺組織規(guī)律
格式塔心理學誕生于 1912 年,其核心發(fā)現(xiàn)是:人類的視覺系統(tǒng)會自動對視覺輸入構建結構,在神經(jīng)系統(tǒng)層面感知形狀、圖形和物體,而非孤立的邊、線、區(qū)域。蘭亭妙微的設計團隊將格式塔核心七大法則融入排版設計的每一個環(huán)節(jié),讓界面元素的排列符合用戶的視覺組織習慣。
- 相似性:用戶的眼睛會自動將外表相似的物體歸為一個整體,無論其位置是否相鄰。在設計中,我們會讓同類功能的圖標、同層級的文字、同類型的按鈕保持視覺相似性,比如將所有操作按鈕設計為統(tǒng)一的圓角矩形樣式,將所有標題文字采用統(tǒng)一的字體與字號,讓用戶快速識別元素類型。
- 接近性:物體間的相對距離會影響用戶的視覺感知,距離相近的元素會被認為是一個整體。蘭亭妙微在排版中始終遵循 “相關信息就近歸組” 的原則,將同一功能模塊的文字、圖標、按鈕緊密排列,不同模塊之間保留足夠留白,比如將 “登錄” 按鈕與賬號、密碼輸入框就近放置,讓用戶形成 “輸入 - 操作” 的視覺關聯(lián)。
- 連續(xù)性:用戶的視覺更傾向于感知連續(xù)的形式,而非離散的碎片。在設計中,我們常采用卡片式設計將相關元素組合成連續(xù)的視覺區(qū)域,同時利用分割線、漸變等元素讓界面的視覺流保持連續(xù),避免用戶的視覺注意力被割裂。
- 閉合性:人類的視覺會自動將殘缺、空白的圖形閉合腦補,感知為完整的物體。這一規(guī)律讓我們在設計圖標、圖形按鈕時,可以采用簡約的線條設計,無需過度填充,既讓界面更簡潔,又能讓用戶快速識別元素含義,同時在信息排版中,可通過局部留白打造 “視覺閉合”,強化信息模塊的邊界感。
- 簡單法則:面對復雜的視覺元素,用戶會自動將其轉換為單一統(tǒng)一的形狀,移除無關細節(jié)進行簡化。蘭亭妙微在設計復雜的后臺系統(tǒng)、數(shù)據(jù)大屏時,始終堅持 “化繁為簡” 的排版原則,將復雜的信息拆解為簡潔的模塊,將繁瑣的視覺元素簡化為統(tǒng)一的形狀,讓用戶快速理解界面內(nèi)容。
- 主體背景:設計中需明確區(qū)分主體對象與背景,突出核心模塊與信息層級。我們常通過顏色對比、投影效果、留白差異等方式,讓核心信息(主體)從背景中凸顯出來,比如在數(shù)據(jù)卡片設計中,通過卡片的淺底色與頁面的深底色形成對比,讓數(shù)據(jù)信息成為視覺主體。
- 共同命運:運動或方向相同的元素會被用戶歸為一個整體,這一規(guī)律在動態(tài) UI 設計中尤為重要。蘭亭妙微在設計界面動效時,讓同一功能模塊的元素保持相同的動效方向與節(jié)奏,比如導航欄的圖標 hover 動效、列表項的展開動效,讓動態(tài)元素的視覺表現(xiàn)更統(tǒng)一。
(二)蘭亭妙微排版四大核心原則:實戰(zhàn)落地的設計準則
在格式塔原理的基礎上,蘭亭妙微結合十余年的行業(yè)實戰(zhàn)經(jīng)驗,總結出排版設計的四大核心原則,貫穿于從移動端到 PC 端、從前端界面到后臺系統(tǒng)的所有排版設計項目,讓排版兼具規(guī)范性與實用性。
- 親密性原則:彼此相關的信息項必須靠近、歸組,形成一個視覺單位,而非孤立的個體。這一原則能有效組織界面信息,減少用戶的視覺混亂,為用戶提供清晰的信息結構。比如在設計產(chǎn)品詳情頁時,將產(chǎn)品名稱、價格、規(guī)格歸為 “基礎信息組”,將產(chǎn)品介紹、參數(shù)、使用說明歸為 “詳情信息組”,讓用戶按組獲取信息,提升信息獲取效率。
- 對齊原則:界面中沒有任何元素可以隨意安放,每個元素都應與其他元素形成明確的視覺聯(lián)系,通過無形的對齊線讓界面更有序。蘭亭妙微的設計規(guī)范中,嚴格規(guī)定了界面元素的左對齊、右對齊、居中對齊標準,比如所有文字塊統(tǒng)一左對齊,所有數(shù)據(jù)數(shù)字統(tǒng)一右對齊,讓界面呈現(xiàn)出規(guī)整、專業(yè)的視覺效果,即使是大量信息的列表頁,也能保持整潔有序。
- 重復原則:讓設計中的視覺要素在界面中重復出現(xiàn),包括字體、顏色、形狀、線條、圖標樣式、卡片尺寸等。重復能增強界面的一致性與識別性,讓用戶形成視覺記憶,同時提升品牌的視覺辨識度。在蘭亭妙微為企業(yè)打造的品牌化 UI 設計中,會將品牌色、品牌字體、專屬圖標樣式作為重復元素,貫穿于整個產(chǎn)品界面,讓產(chǎn)品視覺與品牌形象高度統(tǒng)一。
- 對比原則:如果界面元素(字體、顏色、大小、線寬、形狀、空間等)存在差異,就讓這種差異足夠明顯,避免元素過于相似導致的視覺模糊。對比是打造信息層級、突出核心內(nèi)容的關鍵,我們常通過字體大小對比區(qū)分標題與正文,通過顏色深淺對比區(qū)分核心按鈕與次要按鈕,通過空間大小對比區(qū)分核心模塊與次要模塊,讓用戶一眼識別界面的信息重點與操作優(yōu)先級。
(三)排版的節(jié)奏營造:讓界面更具呼吸感
優(yōu)秀的排版不僅是元素的有序排列,更能營造出獨特的視覺節(jié)奏,讓用戶在瀏覽界面時擁有舒適的 “視覺呼吸感”。蘭亭妙微在設計中,常通過 “節(jié)奏停頓” 打造界面的層次感 —— 如同音樂中的停頓能讓旋律更有韻律,在界面的規(guī)整 feed 流、列表頁中,適度插入差異化的視覺元素(如推薦卡片、功能入口、信息提示),打破單調(diào)的視覺節(jié)奏,既能抓住用戶的注意力,又能讓界面更具活力。比如在電商類產(chǎn)品的商品列表頁中,在規(guī)整的商品卡片中插入個性化的推薦卡片,讓用戶的視覺瀏覽過程有張有弛。
三、構圖與排版的融合:蘭亭妙微的設計閉環(huán)
在蘭亭妙微的 UI 設計體系中,構圖與排版并非相互獨立的兩個環(huán)節(jié),而是相互融合、相輔相成的整體:構圖為界面搭建整體的視覺骨架,決定了信息模塊的整體布局與視覺流向;排版則為每個骨架填充細節(jié),決定了模塊內(nèi)元素的排列方式與信息層級。
從前期的產(chǎn)品需求分析,到中期的視覺草圖繪制,再到后期的界面落地與優(yōu)化,蘭亭妙微始終將構圖與排版的融合設計貫穿全程:根據(jù)產(chǎn)品的業(yè)務邏輯與用戶操作路徑設計整體構圖,讓信息模塊的布局符合用戶的操作習慣;再根據(jù)每個模塊的信息屬性設計專屬排版,讓模塊內(nèi)的信息傳遞更高效。同時,結合產(chǎn)品的行業(yè)屬性、品牌調(diào)性與用戶群體特征,調(diào)整構圖的視覺風格與排版的細節(jié)規(guī)范,讓最終的 UI 設計既符合視覺美學規(guī)律,又貼合產(chǎn)品的功能需求與品牌形象,實現(xiàn) “美感與實用并存、視覺與體驗統(tǒng)一” 的設計目標。
十余年來,蘭亭妙微始終堅信,UI 設計的核心是 “以人為本”,而構圖與排版則是實現(xiàn)這一核心的重要工具。未來,我們將繼續(xù)深耕行業(yè),結合前沿的設計趨勢與用戶的感知需求,不斷迭代構圖與排版的實戰(zhàn)方法論,為更多企業(yè)打造兼具視覺美感與用戶體驗的優(yōu)質 UI 設計作品。