构图在 UI 设计中的应用

2026-3-19 涛涛设计管理与成长

兰亭妙微设计

UI 设计中心

构图是 UI 设计的核心骨架，在有限的界面画面中，将视觉元素、功能模块、文字信息进行科学布局与有序安排，让每一个设计元素都处于最佳视觉位置，既能精准传递产品主题与信息层级，又能营造舒适的视觉体验，最终实现设计美感与用户体验的双重统一。兰亭妙微设计深耕 UI 设计领域多年，服务过多个行业头部产品，在千万级、亿量级产品界面设计中积累了丰富的构图实战经验，本次将从底层设计逻辑与认知心理学角度，拆解构图在 UI 设计中的实际应用方法，与行业同仁共同探讨学习。

黄金分割构图：藏在美学背后的科学比例

黄金分割比是 UI 设计中最经典的构图法则，其核心原理与认知心理学高度契合，也是兰亭妙微在视觉设计中最常运用的基础比例之一。

黄金分割比原理

黄金分割比指将一条线段分割为两部分，较长部分与整体部分的比值等于较短部分与较长部分的比值，其数值约为 0.618，分割线即为黄金分割线。这一比例的数学根源来自斐波那契数列：1、1、2、3、5、8、13、21、34、55…… 该数列从第 3 项开始，每一项都等于前两项之和，相邻两项相除的结果会无限趋近于 0.618。在 UI 设计中，我们将接近这一数值的比例称为近似黄金分割比，是实际设计中更具操作性的应用形式。

德国哲学家、美学家费希纳曾通过大量实验美学研究证实，人们天生对符合黄金分割比或相似比例的矩形具有视觉偏好，这也是该比例能成为设计通用法则的心理学基础。兰亭妙微在设计中总结了最常用的近似黄金分割比，适配各类界面尺寸与功能场景：1:1、1:2、2:3、5:8、9:16、13:23。

黄金分割构图的优点与实战技巧

符合黄金分割比的界面构图，自带天然的美学价值，能让用户产生舒适的视觉感受，同时固定的比例体系能有效提升设计师的工作效率，减少无意义的比例试错。

在实战应用中，兰亭妙微的设计技巧主要有两点：一是按业务维度适配比例，一屏页面中可根据不同业务线的信息属性，搭配多种近似黄金分割比，比如短视频类信息用 1:1、文章类信息用 2:3、广告类信息用 5:8，用差异化比例区分信息层级，让构图和谐且有层次；二是相似比例统一排版，同一业务模块内采用相似的比例结构，通过不同排版方式丰富视觉，避免页面杂乱；三是灵活适配设备尺寸，根据手机、平板、电脑等不同设备的屏幕比例，对黄金分割比进行微调，保证各终端的视觉一致性。

此外，单一比例的重复使用需注意留白与平衡，若整页统一采用 2:3 比例，需通过留白大小、元素间距调整画面呼吸感，避免出现图片展示不均衡、视觉重心偏移的问题。

三分法构图：黄金分割的实用化延伸

三分法构图是黄金分割比在 UI 设计中的简化与实用化演变，因 2/3≈0.667，与黄金分割比 0.618 高度接近，既保留了黄金分割的美学特质，又更符合设计师的实际操作习惯，是兰亭妙微在功能型界面设计中最常用的构图方法之一。

三分法原理

三分法构图指将界面的长与宽各横向、纵向三等分，形成九宫格式的分割线，分割线的交点或每一分的中心位置，都是视觉焦点区域，适合放置界面的核心主体元素。几乎所有 APP 的功能主体设计，都能找到三分法构图的影子，其核心是利用视觉偏好，让用户快速捕捉核心信息。

三分法构图的优点与实战技巧

三分法构图的核心优势是突出重点、优化节奏，兰亭妙微将其主要应用于两类场景：一是以功能分类为主的 APP 一级页面，将核心功能放置在三分线交点，快速引导用户操作；二是图片类 APP（如电商、社交、图文平台），通过三分法分割图片与文字区域，让视觉层次更清晰。

从九宫格延伸，三分法还能演化出更多组合形式，比如将相邻格子合并，形成 1:2、1:3、1:4 的比例搭配，这种延伸形式尤其适合照片类、电商类 APP，能有效调整页面节奏，增强画面呼吸感。

兰亭妙微的实战设计小贴士：

九宫格构图时，根据功能的主次关系确定格子大小配比，核心功能占大格，次要功能占小格；
图片类 APP 无明确主次功能时，可通过格子组合调整页面节奏，按美感需求灵活搭配；
同一功能版块内，构图组合形式不超过 3 种，避免视觉过于杂乱，降低用户识别效率。

视觉流构图：跟着用户习惯设计阅读轨迹

视觉流构图是基于用户阅读习惯与视觉运动规律的构图方法，兰亭妙微将其定义为 “有引导的视觉行为轨迹”—— 按照用户从左到右、从上到下的基本阅读习惯，通过非闭合的视觉线条，引导用户依次浏览界面信息，核心目的是提升用户阅读的舒适度，强化信息传递效率，最终提升产品的用户体验。

视觉流构图的功用与核心类型

视觉流构图的核心价值是突出重点功能、提升长时阅读体验，尤其适合商品展示、信息列表、推荐版块等需要用户长时间浏览的功能区域。结合多年设计实战，兰亭妙微总结了 UI 设计中最常用的 4 种视觉流构图形式，各有适配场景与设计技巧。

Z 字形视觉流

Z 字形视觉流是电商 APP 的经典构图形式，以淘宝、京东等平台的 “猜你喜欢” 版块为代表，通过元素的错落排布，让用户的视觉轨迹形成 Z 字跳跃。这种构图的优势是让画面充满跳跃感，避免用户因平行式阅读产生视觉疲劳，从而实现沉浸式的长时间浏览。

兰亭妙微的设计技巧：Z 字形视觉流适合行数较多的信息列表，视觉跳跃的角度可根据页面信息密度调整 —— 信息少、留白多的页面，采用 30° 左右的小角度跳跃，让视觉轨迹更舒缓；信息多、留白少的页面，采用 60° 左右的大角度跳跃，缓和页面的视觉紧张感，提升阅读舒适度。

水平视觉流

水平视觉流也可称为 “重复构图”，核心是通过横向的平行卡片排布，展示同类信息，给人稳定、和谐的视觉感受，是兰亭妙微在民宿、旅游、本地生活类 APP 设计中常用的构图形式。

该构图的适配场景为行数较少的功能版块（通常 2-3 行），适合展示同等级、同类型的信息，比如民宿列表、城市推荐、商品分类等，若需要展示更多信息，可通过 “查看更多” 按钮引导，避免因行数过多导致用户视觉疲劳。

L 形视觉流

L 形视觉流主要应用于功能信息量大、模块层级多的 APP 个人设置页面，是兰亭妙微设计大体积产品个人中心的核心方法。其视觉轨迹为：先聚焦页面左上角的核心元素（如个人头像、会员级别），再沿左侧纵向向下浏览个人基础功能，最后横向向右浏览次级功能模块，形成 L 形的阅读轨迹。

这种构图的优势是能清晰划分功能层级，让核心功能更突出，次级功能更有序，适合用户高频操作、功能点密集的个人中心界面。若页面信息量较少，可将 L 形视觉流简化为三角形构图，让视觉更聚焦。

三角形构图

三角形构图也叫金字塔构图，其设计原理来自格式塔心理学的简单原则—— 具有对称、规则、平滑特征的图形，更容易被用户感知为一个整体，从而在复杂信息中快速捕捉核心内容。三角形构图分为正三角形与倒三角形，二者在 UI 设计中各有应用场景。

正三角形构图：给人四平八稳的视觉感受，兰亭妙微主要将其应用于 APP 的登录页面、个人设置页面，采用 “图在上、字在下” 的排布方式，比如登录页的 LOGO 在上、登录按钮在下，形成正三角形视觉整体，让用户产生安全感，安心完成信息输入；
倒三角形构图：具有动感与活泼感，更容易突出主题，主要应用于 APP 专题页、活动页、广告页，比如生鲜电商的招聘专题页、节日促销活动页，通过主体物与文字的倒三角形排布，强化画面的视觉冲击力，精准传递专题核心主旨。