5000字干货！快速掌握 9 个设计背后的底层理论

写在前面

随着时代的发展，设计趋势也在不停的发展和改变，但不论趋势如何发展和改变，都离不开底层的设计理论。如果说把一件作品比喻成一座高楼，那么底层设计理论，就是支撑这座高楼的基石。

要成为一名出色的设计师，我们需要掌握一些底层设计理论中关键的要素。本文将分享 9 个设计背后的底层理论要素，这些要素将在底层设计过程中指引我们的创作，帮助我们提高设计的深度和创造力。

更多设计理论：

一、接近性原则

接近性原则（Proximity Principle）是设计中的一个重要原理，指的是将相关元素或组件放置在彼此接近的位置，以便于用户在理解和使用时建立关联。接近性原则在界面设计、排版布局和信息组织等方面都有应用。

接近性原则的核心思想是通过空间的相对距离来传达元素之间的逻辑关系和视觉关联。当相关的元素靠近彼此时，用户更容易将它们视为一个整体，从而更好地理解它们之间的关系。这可以帮助用户快速扫描和定位信息，提高交互效率和用户体验。

以下图为例，当元素之间的间距保持一致时，视觉上会显得比较均衡，不会让人产生将元素联系起来的错觉。但当元素的横向和纵向距离发生变化时，我们的大脑会倾向于将距离较近的元素看成一个组，这就是接近性法则最直观的体现。

1. 排版和文本

在我们设计文字排版中也必须遵循接近性法则，页面中的元素如果距离都一致，我们的视觉会默认为它们都是相互独立的，只要调整一下间距眼睛就会对它们进行分组，使得版面结构更加清晰，阅读起来就会更顺畅。

以下图为例，画面中的英文字母，当它们分开时是单独的字母，当我们在阅读的时候，第一时间无法将他们联系在一起，但是通过调整间距将他们分组，那么我们的视觉就会第一时间得到它们传达给我们的 “ I LOVE YOU ”。

我们也可以用接近性原则来保持组件密度布局之间的平衡。如果在组件密集的情况下，想要用户能够快速浏览内容组，就需要增加边距和间距宽度，使内容的分组更明显，以便用户更加清晰地浏览信息。另外我们需要将相关的按钮和功能组件进行分组，放置在相近的位置，使用户能够快速分辨哪些元素是相互关联的。

2. 表单列表

将相关的表单字段和标签放置在紧凑的布局中，以便用户一目了然地理解每个输入字段的用途。例如下图设置页面：如果只用线条进行分割，会使页面信息承载过多，割裂感过强。我们利用接近性原则把相似属性的功能分成一组，清晰有条理会更容易操作。

二、对比原则

对比原则是指在设计中运用对比来创造视觉吸引力、视觉层次和视觉效果的一种设计准则。通过对比不同的元素的特征、属性或质感，可以使设计更加有趣、清晰和有效。设计对比原则可以应用于颜色、大小、形状、质地等方面。

通过对比。可以形成强有力的反差效果，能第一时间让观众捕捉到主题和重点。强力的对比可以形成视觉落差，建立有序的信息层级，增强版面的节奏和冲击力。

1. 颜色对比

在设计中，颜色对比可以用于很多方面，包括文本和背景、按钮和背景、图标和背景等。选择适当的颜色对比可以提高用户体验，并确保设计中的信息易于阅读和理解。我们可以借助工具和资源，如颜色对比检测器和无障碍性指南，来评估和优化颜色对比度。

2. 大小对比

通过将重要元素设置为较大的尺寸，可以吸引用户的注意力并突出显示关键信息或功能。较小的元素则可用于次要信息或次要操作。对比不同大小的元素可以创建层次结构和视觉秩序。通过适当的分配大小，可以建立元素之间的关系和组织，使设计更易于理解和浏览。

3. 形状对比

通过使用与周围元素不同形状的设计元素，可以突出并强调特定元素的重要性。当运用形状对比可以引导用户的视线和注意力，帮助他们在设计中找到重要的信息或功能，独特的形状通常会吸引更多的注意力和焦点。

通过巧妙地运用形状对比，设计师可以创造出视觉上有吸引力、易于区分和易于理解的设计。然而，设计师需要根据具体需求和目标受众进行权衡和调整，以确保形状对比的使用在整体设计中是有效和合适的。

4. 静动对比

静动对比是指在设计中使用静态（静止）和动态（运动）元素之间的相对对比。通过巧妙地运用静动对比，可以为设计增添动态感、引起用户的兴趣，同时提供视觉上的变化和活力。

在页面设计中常常把有扩散感或者具有流动性的图形或文字称为“动”，把水平或者垂直性强、具有稳定性的图形或文字的编排称为“静”。“动”会使整个页面充满活力，获得较高的关注度，而“静”具有稳定的视觉效果，静动结合可以产生一定的空间感和视觉冲击力。

5. 空间对比

板式设计并不局限于一个平面上的层次，也可以让元素有一些前后关系。通过合理利用空间和间距，有意识地创造元素之间的对比和平衡感，使设计更加有层次感。

三、重复原则

重复原则是指在设计中有意识地重复使用相同的元素、样式、图形、颜色或其他设计要素，以增强视觉效果、一致性和连贯性。通过在设计中应用重复元素，可以帮助用户建立视觉上的关联、提供一致的用户体验，并增加设计的可读性和易用性。

设计重复原则的核心是在设计中保持一致性，使同类的设计元素在不同的场景中都有相似的外观和感觉。这有助于用户更容易理解和导航设计，减少认知负荷，提高用户的效率和满意度。

我们的生活中处处都充满了重复

1. 重复排版

通过在设计中重复使用相同的字体、字号、行距和对齐方式，可以创建视觉统一性，使设计看起来更加整体和协调。

通过在设计中重复使用相同的样式，例如按钮样式、边框样式等，可以帮助建立一致的界面规范，提供一致的用户界面和交互模式。

2. 重复颜色

当一个版面中出现太多颜色，控制不好版面便会出现杂乱花哨等问题。通过在设计中重复使用相同的颜色，可以建立一种视觉连贯性、增强品牌形象，并传达特定情感或意义。

3. 重复图形或图标

在设计中重复使用相同的图形或图标可以构建视觉层次、提供一致性，以及帮助用户快速识别和理解信息。

4. 注意事项

如果页面完全按照某一种特定的形式，那么这就属于重复的过度，带给用户的也并非是更强的整体性，而是视觉上的疲劳，这时我们就要在重复中去寻找变化

四、对齐原则

对齐原则指的是在设计中，将元素、文本或图像等放置在视觉上对其或与其他元素对齐的方式。它的目的是为了创造视觉上的一致性、整齐性和秩序感。

通过应用对齐原则，提供视觉上的一致性和整齐性，使设计更容易阅读和理解。建立明确的层次结构和组织，使用户更轻松地导航和浏览设计。创造出视觉平衡和美感，使设计看起来更专业和吸引人。

以下两幅图，一幅是办公室整齐的桌椅，而另一幅则是超市整齐的货品，从视觉效果上来看，整齐有规律的图给人的感觉条例性更强、更具有整体性、更严谨，而且更加赏心悦目、易于接受。延伸到设计排版中也是如此。

以左下图为例，每个元素都参差不齐，各元素间没有联系，凌乱而没有秩序感。而右下图运用了对齐原则之后，带来了秩序感，更利于阅读。

1. 左对齐

左对齐是我们设计中最常用的对齐方式，因为视觉大多数都是从做到右，所以做对齐会提高我们的浏览效率。将设计中的元素或文本的左侧与其他元素的相应部分对齐，使它们在这一维度上保持对齐。

2. 右对齐

右对齐在我们设计中使用频率不是很高，阅读效率会相对慢一点，大多适用于少量或次级的文字，或者因为需要排版上保持平衡。

3. 居中对齐

居中对齐可以为设计提供视觉上的一致性和平衡感，使设计看起来更整齐、和谐。将重要的元素居中对齐可以突出其重要性和吸引用户的注意力。居中对齐可以创造一个视觉焦点，将用户的注意力引导到设计的中心。

4. 两端对齐

两端对齐可以使多行文本或段落的左右边缘对齐，创造出统一和整洁的外观。两端对齐的文本外观更加规范和专业，使整体设计更加精细和吸引人。也可以创造一种视觉上的对齐关系，使设计看起来平衡、稳定。

5. 顶对齐

顶对齐可以在垂直方向上保持文本或元素的一致性和整齐性，使设计看起来更加整洁和专业。通过将文本的顶部对齐，可以使多行文本的基线对齐，减少眼跳和阅读困难，从而提高阅读的舒适性和速度。顶对齐突出了文本或元素之间的水平关系，使它们看起来紧密相关，形成一种视觉连贯性。顶对齐有助于确保文本或元素在设计中的规范性，使设计师和读者能够更容易感知并理解排版的结构和逻辑。

6. 底对齐

底对齐一般用于少量文字或者装饰性元素，底对齐的方式可能会导致文本或元素的顶部出现不对齐的情况，这时可以通过调整行高、垂直间距或添加空白行等方式来解决。在使用底对齐时，设计师还需要考虑整体设计的需要、内容的要求和排版的美感，以达到最佳的视觉效果和用户体验。

五、奇数原则

奇数原则的基本理念是，奇数的分割方式更加有趣和吸引人，能够吸引观众的注意力并创造一种动态的视觉效果。奇数原则画面通常是一个、三个或五个主体，通常不超过七个，超过七个时观众会将其视为一个整体，当画面中为主体为奇数时，在视觉上会比偶数更和谐、更美观。相比之下，偶数分割方式可能会导致视觉上的静态和平庸感。

1. 缩放和大小

在设计元素的大小上使用奇数比例，如 1:3、1:5、2:3 等，可以创造出更具吸引力的视觉效果。

2. 布局和排列

在设计元素的布局和排列中，使用奇数个元素，如三个图像、五个文本框等，可以使整体构图更加平衡和引人注目。

3. 对比和色彩

使用奇数颜色或对比度触发更强烈的视觉效果，如黑白红的组合、三种互补色等。

4. 空间和间距

在设计元素之间的间距和空白区域上使用奇数数目，可以创建更具张力和动感的布局。

六、三分构图法

三分法构图遵循了黄金分割原则，即将画面或照片水平和垂直方向上分割为三等分，并在分割线的交点或线上放置重要的元素。这种构图方法有助于创建动态和有层次的视觉组合，同时也能帮助观众的眼睛更自然地遍历整个画面。

1. 水平三分法

将画面或照片水平分为上、中、下三个部分，并将重要的元素放置在上下分割线的交点或线上。

2. 垂直三分法

将画面或照片垂直分为左、中、右三个部分，并将重要的元素放置在左右分割线的交点或线上。

3. 九宫格法

将画面或照片分为九个等大小的方格，在重要的元素与线交叉的点上放置主要内容。

七、引导线

引导性构图利用画面中有形或无形的线，将观众的注意力牵引至预期的方向，视觉汇聚在某个点或某条线上。引线不一定是一条线，它是一种具有引导性的东西，光影、道路、河流等都可以做为引导线，引导性构图视觉表现强，引导观众视线突出主体。

八、一致性原则

一致性原则是指在设计和用户体验领域中的一项重要原则，强调在整个设计过程中保持一致的视觉和交互方式。一致性原则的目标是为用户提供一种无缝、连贯和可预测的体验。

对用户来说，同一产品需要统一的设计规范，其视觉样式、交互形式都应该遵循基本的用户习惯，保持功能、操作的一致性为确保用户对界面的学习使用至关重要。

1. 视觉一致性

在设计中保持一致的颜色、字体、图标、布局和样式，以确保不同页面或屏幕之间的外观和感觉的统一。这样的一致性有助于用户轻松地识别和理解界面元素，并构建对品牌的信任和认同。

例如下图斑马 APP，一款针对孩子学习的 APP，在首页、商城、个人中心等页面，风格保持一致，在页面配色以及 icon 的绘制上，都是主打清新可爱的风格。品牌吉祥物小斑马更是贯穿整个 App，也形成了统一的品牌传达。

2. 交互一致性

在设计中保持一致的交互模式、操作方式、导航结构和反馈机制，可以减少用户的认知负荷，意味着用户不再需要重新学习，减少了用户的学习成本，提高操作效率和满意度。

例如下图三款音乐 APP，其主要功能、页面布局、操作方式等都大同小异，这就是体验了交互的一致性，使用户不需过多的思考就可随心所欲使用。

3. 跨平台一致性

在不同的设备和平台上保持一致的设计和用户体验，以确保用户在不同环境下获得相似的体验。这种一致性可以跨移动设备、桌面应用程序和 Web 浏览器等各种平台实现。

例如下图腾讯会议，App 界面与桌面应用基本保持一致。

4. 迭代产品一致性

当产品进行版本迭代的时候，应该保留即有的交互和操作习惯，以免改变用户原有认知变化，造成用户学习成本大大提升，严重甚至造成用户流失。在日常工作中，经常听项目经理说的一句话“永远不要高估用户的理解能力”。

留白，也被称为负空间，是指设计中没有被元素或内容填充的空白区域。留白可以是页面、海报、广告或任何其他设计作品中的空白区域。

留白可以通过创造对比、平衡和重点突出来增强设计的视觉效果。它使设计元素更容易被注意、理解和感知。适当的留白可以提高文本或内容的可读性和可理解性。它可以增加行与行、段落与段落之间的间距，使文字更易于阅读和吸引眼球。留白可以在设计中创造平衡的感觉通过调整元素之间的空间关系来实现和谐的组合。它可以使设计更具吸引力、整洁和有序。

留白的常见误区是认为留白就是留出白色，事实上留白的真正含义是留出空间，它可以是完全空白的空间，也可以是背景颜色、纹理或渐变填充的区域。

学习设计底层理论对于设计师来说至关重要，它可以提高专业素养、培养系统性思维、引领创新趋势、提升设计质量和效率、丰富设计语言和表达能力。这将使设计师在设计实践中更加成功和有影响力。