更新时间：2026年10月08日

UI 排版先回答“用户要完成什么”，再安排主标题、关键操作和辅助信息；颜色、大小、留白和视觉方向都服务于这个顺序。要把同一套层级放进桌面与移动画板，可以用界面设计软件并排检查页面状态。

先从视觉比重看起，再检查方向、焦点和层次结构。

下面通过颜色、对齐、形状和留白的页面案例，分别观察信息是怎样被强调、分组和串联起来的。

颜色可以突出当前最重要的信息，明暗与留白则帮助区分辅助内容。先确定页面的主要任务，再给最需要注意的元素更高视觉比重；如果每个区块都用鲜艳颜色，用户反而难以找到重点。

UI排版讲究视觉方向

视觉比重让人先注意到重点，视觉方向则引导后续的阅读与操作，设计师要做的就是通过视觉引导让用户能快速完成任务和达到预期目标。

在上面的移动界面案例中，对齐的按钮和形状相近的元素形成了隐含的视觉轴线，引导视线移动。这样的方向感不一定依赖画出来的线条，也可以通过对齐、间距和重复形状建立。

UI排版要保持一个视觉焦点

视觉焦点，简单来说就是让我们的视线多停留几秒的视觉元素。它可以是一个点，一条线，一个面，也可以简单到一块颜色等。在设计中我们不可能强调所有设计元素，所以需要确保用户的操作目标是清晰的，可以立马抓住关键元素操作。

一个好的UI设计，它应该能够让用户快速做出反馈，明确关键要点和页面元素之间的关系，并且顺利、清楚地理清产品的功能脉络。可以通过大小、对比、颜色、肌理、留白和空间等视觉元素建立层次结构。

在 Pixso 分享的案例中，从上到下的层次结构明确了阅读顺序，也帮助用户找到视觉焦点。这种UI排版可以直接运用颜色明暗对比、板块大小、文字关系等直接触达用户。

视觉比重决定哪些内容先被注意，焦点突出当前任务，层级解释信息关系，方向引导阅读与操作。它们需要一起检查：主按钮再醒目，也不能补救标题含糊或内容顺序混乱。

练习时可以在 Pixso 中复制一份页面，分别调整对齐、文字层级和区块留白，每次只改一个主要变量。将修改前后放在相邻画板中，邀请同事说明他们先看到什么、接着会点哪里，再决定哪些调整值得保留。

用预约详情页练习时，先把时间与地点放在标题后，把“修改预约”设为主要动作。桌面可让说明与预约信息并列，手机先呈现到场需要的信息，再放补充规则。若活动名称变成长标题，先让它正常换行，不能挤掉时间或主按钮。

先在页面上标出一个主任务和一个主要操作，再确定标题、说明、按钮和次要信息的层级。桌面端有足够宽度时可以并列信息，移动端则优先保留任务标题、关键内容和主按钮，将次要内容折叠或后置；不要仅缩小字号来适配窄屏。

在 Pixso 中复制桌面画板做移动端版本，使用同一组组件调整排列，再通过评论记录被隐藏、折叠或改为纵向的信息，交付时研发能按规则还原。