Date 2025-11-04 11:46:07
布局设计，又称布局设计，是平面设计的组成部分，是视觉传达设计的重要组成部分。布局设计通过调动各种视觉元素来突出新颖的创意和个性化的布局表现，加强形式和内容之间的互动关系，从而产生新的视觉效果。
简而言之，它是指设计师根据特定主题和内容的需要，根据设计主题和视觉需要，在预设的有限布局中使用建模元素和形式原则， 将文字、图片(图形)、色彩等视觉传达信息元素进行有组织、有目的的组合排列。
干货的布局设计更多：
当我们接触到各种设计时，我们总是会遇到各种各样的问题。
阅读文章 >布局所需的设计元素进行必要的安排和组合，使其成为直观、易读、主次清晰、概念清晰的美的组成部分，同时传达设计师的艺术追求和文化理念，为读者提供美丽的阅读“空间”。
布局设计可以通过合理的空间视觉元素来最大限度地发挥表达，从而增强布局主题的表达，以布局独特的艺术吸引力吸引读者的注意。
1. 基本原则是什么？
版式设计的 4 大原则是对比、对齐、分组和重复的实际应用。布局设计遵循 4 大原则的目的是使界面看起来更整洁、更美观，改善用户体验，遵循这四个原则可以帮助用户理解和接受信息。
由美国设计师组成 Robin Wulliams(罗宾·威廉姆斯)在《给大家看的设计书》中首次提出，准确地说 4 条 原则更注重排版设计。可以说，这一原则几乎应用于所有的排版中。它不仅是排版的“心法”，也是需要遵循的基本标准 4 条原则不是孤立存在的，通常是结合使用的，很少有作品只使用一个原则。
2. 对比原则
比较的基本思想是避免布局页面上的应用元素过于相似。如果元素（颜色、字体、形状、大小、空间、线宽等）不同，那么它们就会完全不同。
为了吸引页面的注意力，比较原则通常是一种重要的表达方式，比较原则最能吸引读者的注意力。在海报中，通常通过方向、颜色、大小、位置等比较方式，突出内容重点，有效传递关键信息，也使布局更加变化，不乏味。
钱包会员页
vivo 在钱包会员中，头部会员权益介绍卡通过对比拉开“vip 会员与“超级会员”的等级差异。vivo 在权益页面中，通过色彩对比，区分显示了同一页面中不同平台的权益券，提高了清晰度和识别度。
3. 对齐原则
页面上没有任何页面设计内容。每个页面上的元素都应该与布局上的某个元素相对应，并具有一定的视觉联系。这可以显示出一个清晰的视觉和严格的逻辑外观。无论什么样的环境，只要有各种各样的东西，它都需要一个秩序，人类的环境，设计元素的环境。左下图设计元素不均匀，图片混乱，没有美感，影响阅读；右下图使用合理的对齐可以带来秩序感，看起来更严谨、更专业，信息传输效果更好。
①对齐方式
文本安排中常用的对齐方法有：左对齐、左对齐、右对齐、中对齐、两端对齐、顶对齐、底对齐等。在设计中，应根据构图形式选择合理的对齐方法，每种对齐形式传达不同的视觉感受。
在钱包页面设计过程中，严格遵循对齐原则，通过左对齐、中对齐、两端对齐等对齐，使页面整体统一、简单、易于阅读。
钱包借款页面、主页、卡包页面、账户页面
②像素对齐和视觉对齐
在 UI 在设计中，当谈到对齐时，你不能谈论“像素对齐和视觉对齐”。在实际工作中，我们经常遇到明显的颜色遵守规范，页面的相关元素对齐，但看起来很不舒服。让我们用下面的例子来解释“像素对齐和视觉对齐”的区别？
有时，由于形状因素，一些元素会导致我们的视觉重心偏移，所以我们需要照顾视觉对齐。这是对的，但我们需要找到一个合理的解释。
人们的眼睛很神奇，喜欢找到平衡。例如，看到黑色或白色的屏幕比看到灰色的屏幕更有压力。灰色是黑色和白色的结合，不耀眼。
那么..平衡是什么？在这里，我们需要引入一个概念“体量级”，我们需要体量级平衡。那么如何理解体量级呢？我们用不同的思维去理解，这叫做“面积”。再举一个例子，观察一下:
这两对图形中哪一对看起来有点平衡？显然是左边的，不是吗？这是因为当两个图形的面积看起来相等时，我们称之为视觉平衡，因为体积级（面积）平衡。
有时我们不能简单地使用像素对齐来处理设计中的对齐问题。我们应该根据实际情况相信自己的视觉感受，实现标准化与视觉感知的平衡，为用户呈现最佳的设计效果。
钱包 app 在中间，也有类似的图标。简单的像素对齐会使视觉上没有真正的中间位置，或者需要视觉对齐才能使图标看起来整体中间位置。
4. 分组原则(接近效果)
要做出向人们明确传达信息的设计，就要在整理信息的基础上，将同一组的信息排版得更近。
要素之间的距离-格式塔原理
在不知不觉中，人类会把相同形状的物品或相似形状的物品作为“整体”来理解，这种现象被称为“格式塔”（Gestalt）原则。这是对大多数人有效且非常基本的原则之一。在设计和生产中掌握这一原则，可以快速准确地向第三方传达信息。
具体方法是，只要放置一个元素和类似元素，分别放置相关性低的元素，就能达到这种效果。
另外， 如果你需要从整体上突出一个元素，你可以把它放在远离整体的地方，效果会更明显。根据不同信息的内容，可以分组（接近）或独立（分离）。
设计中明确的分组会产生整体感，让人更直观地理解内容。另一方面，如果没有分组，就很难准确传达信息。
“格式塔”原则的主要规则包括：接近法则、连续法则、类似法则、封闭法则、主体-背景法则、熟悉法则、知觉恒常法则 (包括恒定的亮度/颜色/大小/形状)、共同命运法则。
在布局设计中，如果元素分组，主要可以使用接近、相似和封闭的规则。
①接近性法则
物体之间的相对距离会影响我们对它们是否以及如何组织在一起的感知。相互靠近的物体似乎属于一组，而那些距离较远的物体则不是。
利用这一原则，调整距离或使用分割线来分离不同设计模式的构建。使设计界面有序，视觉清晰，降低视觉噪音。
相关控制器和内容之间的距离越近，用户就越能感知到它们的相关性。相反，如果距离太远，用户很难感知到它们是相关的，而且产品在体验中更难使用。
游戏中心页面的钱包
属性相同、场景相似的信息应放在一起，降低阅读成本，提高用户感知效率；尽量区分不相关信息，不要模糊，造成不必要的误解。
②相似法则
具有共同视觉元素的物体看起来更相关。我们倾向于将看似相似的对象视为一组或一种模式，并将其与特定的含义或功能联系起来。
相似性表达了元素形式和内容的接近，包括形状、颜色、大小、运动状态等。如果一堆元素有一些相同的特征，那么这些元素在我们的认知中就有更强的相关性。在 UI 在设计中，我们经常使用这一原则，主要包括： 3 个方面：
界面中具有相同功能的组件保持风格统一，具有相同功能、含义和层次结构的组件保持风格统一，使用户能够快速理解组件的操作模式，降低学习成本。APP 内部风格保持统一；统一的风格可以让用户清楚地感觉到自己在同一个地方 app/在网站上，这不仅是用户体验的要求，也是视觉的要求。特异性更容易获得视觉焦点；另一方面，当一个完全不同的东西突然从相似的元素中跳出来时，你会立即被它吸引，这实际上是一种逆向应用相似原理的方法。许多 app 的 tab 选择状态会更加突出。
它看起来与接近性非常相似，但它们是两个不同的概念。接近性强调金额位置，相似性强调内容。通常将具有明显特征的东西（形状、颜色、大小）结合在一起。主要用于表格和导航。
③闭合性法则
当人们观察熟悉的视觉图像时，他们会把不完整的局部图像作为一个整体图像来感知，这种感知的结束被称为闭合。如果局部图像过于陌生或简单，则不会产生整体闭合联想。
闭合是一种完成某种图形（完形）的行动。即使没有外观的限制，我们也会自动完成图形的大脑。例如，我们不认为半形或有间隙的形状是一条线或各种零碎的图形，而是一个完整的形状。闭合是指完形的认知规律。
这一原则也非常适用于界面设计。使用省略或减法处理图形不仅可以节省空间，还可以让用户产生联想和兴趣。例如 UI 界面中的导航栏、卡模式等。
淘票票，网易云音乐截图
5. 重复原则
重复原则是指布局中的视觉元素可以重复颜色、字体、图形、形状、材料、空间关系等。重复原则的使用不仅可以增加图片的组织性，而且可以加强统一性，使布局更具层次感和逻辑性，提高阅读效率和信息传递。定期的重复可以产生节奏感和节奏美。仔细观察，生活中到处都有重复的美。
①重复文字样式
同一级别的文本信息应采用相同的文本风格，即在字体、字体大小、字体重量和特殊效果上保持一致，便于阅读和信息传递。
游戏中心页面的钱包
②文字风格的重复
色彩的重复在布局设计中尤为重要。当布局中颜色过多时，如果布局控制不好，就会出现乱七八糟的问题。因此，使用重复的颜色来控制颜色的类型、纯度和亮度，使布局更加明亮和谐统一是最常用的方法。
钱包页面
③图片使用的重复
同一版面需要出现多张图片，统一图片的大小、色调、比例、切割方法等，使版面美观整洁。
钱包页面
至此布局设计 4 所有的原则（对齐、亲密、对比和重复）都完成了。正是这些原则为我们解决了排版问题，避免了图片中的内容和元素过于混乱。它可以更清晰、更快地展示产品的功能特征，帮助我们设计更好的图片，提高视觉层次感，科学、严谨地表达我们想要呈现的元素。
回顾每个原则中显示的案例，你会发现所有的案例实际上都是几个原则的综合使用，它们不能独立存在，排版应该同时考虑和综合使用。
感谢您的阅读，希望对您的设计工作有所帮助～
欢迎关注作者微信微信官方账号:「VMIC UED」
热评 belief