UI 设计中的构图与排版

2025-7-4    涛涛 设计管理与成长

UI 设计中的构图与排版需将文字、图片及色彩等要素有组织组合，构图通过黑林错觉等心理学原理和居中、九宫格等九大技巧构建和谐布局，排版依据格式塔原理的接近性、连续性等法则及亲密性、对齐等原则，合理运用对比、重复等手法，同时结合界面投影等设计形式，以提升页面用户体验及相关性。

image.png

 

image.png

一、构图

  1. 定义：指作品中艺术形象的结构配置方法，是造型艺术表达思想内容并获得艺术感染力的重要手段，在 UI 设计中主要作用是构建和谐稳定的页面布局。
  2. 心理学原理
    | 错觉类型 | 特点 |
    |------|------|
    | 黑林错觉 | 中间两条线平行但看起来弯 |

    image.png


    | 冯特错觉 | 中间两条线平行但看起来弯 |
    | 庞佐错觉 | 中间四边形是矩形而非顶边比底边宽的四角形 |

    image.png


    | 厄任斯坦错觉 | 中间矩形四条边看起来弯曲 |
    | 波根多夫错觉 | 自动补齐断的线条 |

    image.png


    | 菲克错觉 | 垂直线段与水平线段等长但看起来垂直线段长 |
    | 缪勒莱尔错觉 | 末端加向外斜线的线段比加向内斜线的看起来长 |

    image.png


    | 艾宾浩斯错觉 | 左边空隙看起来窄实则与右边同宽 |
    | 卡尼莎错觉 | 大脑脑补出实际不存在的三角形轮廓线 |
    | 垂直水平错觉 | 1:1 图形正放时视觉上纵向更长 |

    image.png


    | 马赫带效应 | 同色渐变毗邻放置的扁平化设计手法 |
    | 同时对比错觉 | 同色物体放不同对比度背景呈现不同颜色 |

    image.png


    | 芒克白错觉 | 两条线颜色相同但看起来不同 |
  3. 技巧
    • 稳定性：对称平衡形态具自然、安定等朴素美感，符合视觉习惯。
    • 强点优先：画面中人脸、明暗交界处等是天生强点，常见法线是黄金分割线。

      image.png

    • 均势：通过物理力学规律支撑画面，调整积极与消极元素关系，确保区域无偏差，元素无缝衔接。
  4. 常见类型
    • 居中构图：主题放画面中心，主体突出、易平衡，适合严谨、庄严作品。

      image.png

    • 水平线构图：以水平线条为主，表现宽阔、稳定、和谐，用于湖面等场景。
    • 垂直构图：以垂直线条为主，展示景物高大和深度，适用于树木等。

      image.png

    • 九宫格构图：重点放 4 个交叉点，突出主视觉中心。
    • 对称构图：按对称轴或中心使景物轴对称或中心对称。

      image.png

    • 对角线构图：主题沿对角线排列，表现动感等，画面更舒展。
    • 引导线构图：利用线条引导目光汇聚焦点，引导线可以是有方向的任何东西。
    • 构架法构图：用框架框起重点，产生进入画面的感受。

      image.png

    • 重复法构图：平铺一群主题，突出主题。

二、排版

  1. 格式塔原理
    • 接近性：物体相对距离影响感知是否成整体，相近则视为整体。
    • 连续性：视觉偏向感知连续形式，元素共享明确界限区域则分一组，设计中常用卡片式组合相关元素。
    • 相似性：眼睛易关注外表相似物体，不管位置是否相邻都联系起来。

      image.png

    • 闭合性：视觉自动闭合或脑补空出 / 残缺图形，感知为完整物体。

      image.png

    • 简单法则：看到复杂物体愿转换为单一统一形状，移除无关细节简化。
    • 主体背景：设计中区分主体与背景，突出主要模块或层级。
  2. 原则
    • 亲密性：相关项靠近归组，成为视觉单位，减少混乱，提供清晰结构。

      image.png

    • 对齐：元素不能随便安放，与另一元素有视觉联系，常见排版方式使界面有序。

      image.png

    • 重复：视觉要素在画面重复出现，如字体、颜色等，增加条理性和统一性。
    • 对比：避免元素太过相似，不同则差异明显，是页面引人注目的重要因素。

      image.png

  3. 设计形式
    • 图标：设计中运用的图标形式。
    • 字体：不同字大小的字体形式。
    • 内容层级：通过卡片等形式体现的内容层级。
    • 卡片样式：设计中的卡片样式。
    • 停顿：在列表页等节奏中断制造停顿，抓住注意力。
    • 界面投影：界面设计中投影的运用。

关键问题

  1. UI 设计中常见的构图类型有哪些？
    • 答案：常见的构图类型有居中构图、水平线构图、垂直构图、九宫格构图、对称构图、对角线构图、引导线构图、构架法构图、重复法构图。
  2. 格式塔原理在排版中有哪些具体应用？
    • 答案：格式塔原理在排版中的应用包括接近性（物体相对距离影响感知是否成整体）、连续性（视觉偏向感知连续形式，用卡片组合元素）、相似性（关注外表相似物体并联系）、闭合性（视觉自动闭合或脑补残缺图形）、简单法则（将复杂物体转换为单一形状）、主体背景（区分主体与背景突出主要模块）。
  3. 排版中的对比原则如何体现？
    • 答案：对比原则的基本思路是避免页面元素太过相似，若不同则差异明显，可通过字体、颜色、大小、线宽、形状、空间等方面体现，是页面引人注目的重要因素。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

 

« UI 设计师如何让前端实现设计稿的像素级还原 UI 设计中的情感化设计 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档