前言

在学习之前，我们得先思考学习的目的。不妨设想一下，有这么一张海报，它未经任何设计，内容和元素被随意堆砌在画面上，显得杂乱无章，这样的海报，能让用户心动买单吗？显然不能。在信息传播时，这种海报会使用户找不到重点，缺乏视觉美感，对品牌传播也毫无益处。

不管是从事UI设计、品牌设计，还是电商、包装设计等领域的设计师，在设计过程中都要以用户需求为导向。毕竟，所有设计最终都要投放于商业市场。正因为如此，设计的四大基本原则应运而生。通过学习这四大原则，我们能够科学、迅速地进行排版布局，提升视觉效果，丰富画面内容，从而避免出现前面所说的那些糟糕情况。

设计的四大基本原则，想必设计师们都耳熟能详，而且在自己的设计作品中或多或少都有运用。其中的亲密性、对齐、重复、对比这四大原则，在日常设计中的应用极为广泛。不管是交互岗位、UI岗位，还是产品经理岗位，这四大原则都非常实用，能让设计稿看起来更加专业，视觉效果更加美观。

那么，到底什么是设计的四大基本原则呢？我们为什么要学习它呢？学习这四大基本原则又能给我们带来哪些帮助呢？接下来，笔者将为大家详细讲解。

分享目录

一、什么是四大基本原则

二、亲密性原则

三、对齐原则

四、重复原则

五、对比原则

六、结语

一、什么是四大基本原则

我们先来了解一下设计中的四大基本原则。这四大原则分别是亲密性原则、对齐原则、重复原则、对比原则。每一位优秀的设计师都需要知晓这些原则，并运用到实际案例当中。在设计时，这四大原则并非独立存在，而是相互嵌套、彼此交融的。

● 亲密性：当项目彼此关联时，应把它们归为一组，以此构建更紧密的亲密性。这样做有助于梳理信息，减轻混乱感，为读者呈现清晰的内容架构。

● 对齐：要求页面上的元素不能随意放置，每个元素都要与页面上的其他元素建立视觉联系。如此便能够塑造出清晰、精致且清爽的视觉外观。

● 重复：让设计中的视觉元素在整个作品里不断重现，例如颜色、形状、材质、空间关系、线宽、字体、大小、图片等都可以重复。这既能增添条理性，又可强化统一性。

● 对比：需避免页面元素过于相似，若元素不同，就应让它们有显著的差异。对比能让页面吸引眼球，同时也使页面内容结构清晰，易于阅读。

二、亲密性原则

信息关联性高时，距离应接近，像一个视觉单元；关联性低则距离远，像多个视觉单元。亲密性原则就是把有联系的独立元素组合成视觉单位。

亲密性原则是UI设计的基础且必须掌握的设计原则，在排版中常用。它能让元素更有条理、具组织性和统一性，处理好界面信息层级关系，使信息错落有序。这有利于用户阅读，提升视觉层次，让用户清晰区分信息，避免信息干扰。

1.用间距区分层级

1）横向间距

在组件内部，元素的横向间距不应千篇一律。如今，许多应用为适应不同屏幕尺寸，在横向布局时采用栅格布局来排列组件，这一做法极大地保障了布局的灵活性。

2）纵向间距

在纵向间距中，信息层次可通过小间距、中间距、大间距三种规格来划分。像单个元素间距设为24px（小间距），组件间距为40px（中间距），模块间距达80px（大间距），这些间距的设置都是有规律可循的。

2.用分割线/色块/留白区分层级

留白与分割色块是界面设计里常见的信息区分手段。留白能赋予界面呼吸感，降低割裂感。分割线多用于内容中的信息区分，当前市场主流app大多以留白为主进行区分，分割线与色块作为辅助。

3.用卡片区分层级

卡片的运用日益广泛，在当下设计中卡片式样式占据主导地位。卡片能使不同信息版块的区分更为显著。

三、对齐原则

对齐原则在界面设计里是非常关键的基础准则，也是大家耳熟能详的设计原则。它要求界面中的元素不可随意放置，每个元素都要与页面上的某个内容存在视觉关联。就好像有一条“无形的线”把这些元素串联起来，成为一种视觉纽带。

这一原则与“格式塔学派”中的连续性原则相契合。它强调，人们会通过感知事物的形状和运动方向将分散的元素连接在一起，使直线继续成为直线、曲线继续成为曲线。在界面设计里对元素进行对齐，这既贴合用户的认知习惯，又能引导视觉的流向，从而让用户更顺畅地接收信息。

对齐原则蕴含着秩序美，是维持界面整洁、有序的利器。它能让界面保持统一、有条理，有效组织页面信息，使页面看起来干净整齐，进而减轻用户的阅读负担并减少焦虑感。左对齐、居中对齐、右对齐、两端对齐等都是常用的对齐方式。

1.左/右对齐

界面中的文字对齐方式，左对齐较为常用。我们阅读习惯是从左至右、从上至下，常见的F布局模式和Z布局模式便遵循此习惯，这两种布局模式下视线会自然移动，且它们都采用左对齐形式。左对齐对用户很友好，能让用户迅速找到阅读起点。

在处理大段文字时，有个容易被设计师忽略的要点：应保持文案左右两端对齐，标点符号避头尾，最后一行文案左对齐，以此减少边缘起伏。这里的边缘起伏指的是一段文字的边缘形态。当视线从行尾移到下一行首时，若间距一致，大脑就能快速判断下一次跳跃的角度和距离，从而使用户快速定位阅读起点，提升阅读速度。

2.居中对齐

在UI界面设计里，居中对齐方式使用相对较少，大多使用在图文组合类型的组件中。另外在运营设计或者专题卡片样式中也会用到，例如弹窗常常采用居中对齐形式。

3.两端对齐

两端对齐，也被称为方形左右对齐或者块对齐，其特点是文本两端均对齐，这种方式常见于信息列表中的文本内容。

4.其他对齐方式

1）文本-首行缩进

当存在大量文本内容时，基本上会采用左对齐方式，并且为了方便用户区分不同段落的起始点，通常会设定两个字符的首行缩进。

2）表单-输入框居中对齐

输入框的居中对齐方式大多出现在网页界面中，以输入框为中心，左侧文字右对齐、右侧文字左对齐，这有助于用户操作时在同一纵向位置落点，进而提高填写效率。

四、重复原则

重复原则，简单来说，就是让设计中的视觉要素在整个作品里反复出现。这些要素涵盖颜色、形状、材质、空间关系、线宽、字体、大小以及图片等。当相同元素在整个界面不断重现时，画面会更具条理性，统一感和秩序感也得以增强。这不仅能大大降低用户的学习成本，还能助力用户识别元素间的关联。

然而，重复并非对某个元素或样式进行机械的重现。我们要有目的地去运用重复原则，要结合界面元素和页面效果来操作。通过重复来沉淀和规范设计组件，从而提高设计效率。这样的设计方式，能够让我们在遵循一定规则的基础上，打造出更加优质的用户体验。

1.颜色重复

在同一个应用里，往往会固定使用几种颜色。其中，品牌色会在界面设计的诸多元素上重复使用，像图标、按钮、卡片、头图、banner等地方。

除此之外，常用的无彩色文字，例如＃333、＃666、＃999、＃CCC，也会依据不同文字的视觉权重被反复运用。颜色的这种重复使用方式有着重要意义，它不仅能助力用户迅速定位重要信息，而且有助于加深用户对品牌的印象。

2.圆角样式重复

界面中的卡片（不管是大圆角还是小圆角）、图标、按钮等元素，也会固定采用几个数值，这在很大程度上能够确保设计风格样式的统一。不过，像健身、运动类的应用，为了塑造力量感和硬朗感而不设置圆角，这属于特殊情况。

3.渐变方向重复

渐变这种设计手法在很多地方都可能被用到，像图标、按钮、卡片等。为了维持统一的视觉调性，渐变方向最好保持一致，常见的方向有从上到下、从左到右、从左上到右下等，选定一种渐变方向后，后续重复使用就行。

4.间距重复

间距的重复使用在设计中常常被忽视。我们可以借助栅格系统，保持页面间距的规律性，从而让界面有节奏、有秩序地展开。

间距的重复使用数值要结合亲密性原则，在2倍图设计时，通常会以5、6或者8的倍数作为增量，然后设定几个常用的间距数值，比如以8的倍数为例，就有8、16、32、48、64等。

五、对比原则

对比堪称增强画面视觉效果的最有力方法。它的作用可不少，既能吸引眼球，又能对信息进行有效组织，让层级更加清晰，还能在页面上引导读者阅读，并且制造出焦点。

产生对比的方式多种多样，例如，通过字体大小对比，大字与小字的组合能迅速拉开视觉差距；字体粗细对比，粗体与细体的搭配会让元素特征更鲜明；冷暖色对比，冷色与暖色相互映衬可产生强烈的视觉冲击力。

要达成有效的对比效果，关键在于对比必须足够强烈。若是在对比时过于小心翼翼、畏畏缩缩，那么元素之间的差异就难以凸显，对比的诸多作用也就无法实现，画面的视觉效果也就无法得到有效提升。

1.主次对比

在UI设计中，为了让用户能够在操作时迅速作出判断，这就需要突出那些相对更重要或者使用频率更高的操作元素，像按钮、图标之类的。而达成这种突出效果的方法是多样的，既可以强化重点项，也可以通过弱化其他项来实现。

2.状态关系对比

通过改变颜色、增添辅助形状等手段来构建状态关系的对比，有助于用户更好地对信息加以区分。

3.粗细/大小对比

利用大小对比与粗细对比来区分信息层级是两种极为常见的手法。在界面设计里，这两者常常被同时运用，从文字的大小和粗细，到图标的大小、线条的粗细，再到图片大小的对比，都能够用来彰显重要的内容。实际上，几乎在所有的app或者版式设计中，我们都能发现这两种对比手法的身影。特别在文字的大小对比时，对于重要内容不仅要增大字号，还需增加字重，这样才能更有效地突出重点。

4.色彩对比

色彩对比也是一种常用且巧妙的手法。它既能突出重点内容、区分信息层级，又能起到修饰的作用。在界面设计中，除了文字颜色的对比之外，在UI设计中还可以大胆地将其应用于卡片颜色、模块底色等方面，从而突出重要信息，制造视觉焦点。

5.形状对比

元素形状样式的差异同样能够体现优先级的不同。在设计中，有一些常规的形状样式，像头像做成圆形、图片流制成圆角卡片、卡券样式为剪口的拟物卡券等。如果想要让界面设计更具独特性，可以寻找更具个性与亮点的形状。例如在tab栏样式设计中，经常把重要的图标形状进行差异化处理以达到突出的效果。

6.面线对比

线和面之间的对比也不容忽视，这种对比常用于图标、按钮、标签或者模块之间，由于面的比重大于线，所以这一手法在UI设计中被频繁运用。

7.质感肌理对比

质感肌理在UI设计中也有着独特的作用。这里的质感肌理并非仅仅局限于拟物设计，只要是有画面感、色彩重量或者纹路的都可算在内。质感肌理对比能够使设计更加细腻，在视觉上非常出彩。比如在“我的”背景板和一些卡片背景设计中，带有质感肌理的设计往往比扁平设计更具吸引力。

六、结语

学习的方法很简单，在做设计时，想到并运用这些原则即可。熟练之后，凭借条件反射就能轻松地将它们融入设计。四大基本原则有助于我们解决排版难题，防止画面内容与元素杂乱无章。它能更清晰、迅速地展现产品功能特性，助力我们打造出更优质的画面，提升视觉层次感，严谨科学地呈现我们想要的元素。

实际上，亲密性、对比、对齐、重复这四大原则的应用并不复杂，不过是按照特定规则摆放界面中的元素，这些规则相互依存、彼此影响。它们是设计最基本的原则，掌握好对界面设计有着积极的意义。

需要说明的是，本文只是笔者依据自身经验整理总结，其内容还有很多不足之处，如果想要更深入的了解，也可以去看看《写给大家看的设计书》这本书。

Powered by Froala Editor