一、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. 对比原则：如果界面元素（字体、颜色、大小、线宽、形状、空间等）存在差异，就让这种差异足够明显，避免元素过于相似导致的视觉模糊。对比是打造信息层级、突出核心内容的关键，我们常通过字体大小对比区分标题与正文，通过颜色深浅对比区分核心按钮与次要按钮，通过空间大小对比区分核心模块与次要模块，让用户一眼识别界面的信息重点与操作优先级。

（三）排版的节奏营造：让界面更具呼吸感

三、构图与排版的融合：兰亭妙微的设计闭环