Date 2026-05-11 11:02:38
无论是平面设计还是 UI设计和其他工作，在预设的有限布局中，使用建模元素和形式原则，根据特定主题和内容的需要，文本、图片和颜色等视觉传达信息元素，有组织、有目的的组合排列设计，将直接影响页面的用户体验和相关性。
这就是我们学习布局设计的目的。
往期回顾：
关于排版，给你几个甲方不讨厌你的理由！(一)首先，让我们了解两个概念。
除去页面上天地左右周围的余白外，布局所占面积的比例称为「版面率」。
△ by サンチー
扩大页面周围的空白，降低页面率，减少页面中包含的信息；
布局率降低，容易给人优雅或高级的感觉，适合需要创造安静稳定的页面设计。
△ by サンチー
缩小页面周围的余白，提高布局率，增加包含的信息；
布局率的提高会给人一种充满活力和活力的印象。适用于需要向观众传达大量信息并留下深刻印象的设计。
「图版率」和「版面率」意思相近，「图版率」表示图片在页面中的比例。
△ by hideto yagi
图版率高的页面会给人一种活泼的印象；相反，图版率低的页面会产生非常平静的效果。我们经常通过调整页面的图版率来表达设计意图。
通过图片的数量和大小来控制图片版本率；在只有一张图片的情况下，扩大图片版本率会提高；在使用许多图片的页面中，减少每张图片的大小，降低图片版本率。
△ by pinterest
页面的背景颜色也会改变对页面图版率的印象；即使设计中有大量的文本，我们也可以通过调整页面背景颜色来改变页面呈现的视觉感受。
在排版设计之前，通过设置辅助线作为排版的导向，使排版工作进展顺利。
在建立辅助线之前，首先要考虑将页面分成几个部分；最基本的分页方法是水平分或垂直分。
当然，对角线等斜线也可以增加。
△ by pinterest
多个方框可以连接起来作为内容的安排空间，也可以作为页面上的空白。
△ by pinterest
严格按照框架安排内容可能有点单调。也有必要考虑故意将某些部分冲出框架的范围，并允许在一定程度上进行不规则的排版。
对称构图是一种具有代表性的布局设计方法；上、下、左、右对称、重复交替构图可灵活应用于某些局部构图。
△ by pinterest
左右对称：页面左右完美重叠，给人留下稳定的印象。
△ by pinterest
重复构图：让人感受到一种秩序，适用于需要表达统一感的画面。
△ by pinterest
不规则对称构图:打破刻意处理原对称的感觉，也是一种流行的手法。
以下是几个实例应用：
△ by Filip Justić
△ by Filip Justić
当我们希望观众注意到页面内容的顺序时，我们必须通过设计清楚地提示顺序。这就是我们经常提到的「优先率」，「优先率」更高的页面内容充满变化，产生动态和节奏效果。
△ by Forbidden
通过图片大小来区分内容的顺序，我们将扩展主图片或缩小其他图片来改进「优先率」，实现区分内容顺序的目的。
通过文本的大小来区分内容的顺序，增加、粗化或减少其他字体大小，以达到目的。需要注意的是，过度缩小的文本会导致阅读障碍。
△ by piecojp
内容的顺序通过颜色和形状来区分，不同的颜色和形状被添加到相似的颜色或形状中，从而产生。「差别化」强调这个内容的概念。
以下是几个实例应用：
△ by mshults
△ by Kavita Khati
除了文字和图片，空白也是页面排版的基本要素之一；灵活使用页面空白，呈现出非常美丽的效果。
△ by pinterest
通过留白来减少页面的压迫感，当页面内容较多时，很容易给人一种狭窄的压迫感。通过适当减少内容或改善图片的颜色，观众可以感受到一种轻松的氛围。
△ by pinterest
通过留白改变形式。辅助线框形式下的排版除了规则外，还会带来单调的感觉。排版的形式可以通过随处可见的留白来改变。
△ by pinterest
通过空白扩展页面空间，页面周围没有足够的空白空间会产生一种封闭的感觉，在天地周围安排空白，会让观众感到一种向外扩展的感觉，页面会产生一种松散的感觉。
以下是几个实例应用：
△ by SELECTO
△ by Kavita Khati
布局设计没有固定的方式，也没有说「这绝对不好」等等。每个设计师风格的形成都受到他读过的书或作品的影响，从模仿到尝试不同的实验，逐渐形成自己的设计风格。
欢迎关注作者微信微信官方账号:「设计师的私人日记」
「平面设计课」
“平面基础课堂！谈论布局中的布局率和空白率”、“专家平面课堂！布局中多张图片的布局方法”和“专家平面课堂！谈谈图形叠加的四种常用技巧”和“豪斯先生平面课堂！谈谈平面设计的空白技巧”