新手必读！12个实用的排版技巧（附大量教程）

编者按：本文分享了12种实用的排版设计技巧，非常适合新手入门学习。

更多的排版技巧：

大家好，这里是设计夹，今天分享一下「排版技巧」。页面的排版非常灵活，但是在排版的时候，我们不仅要考虑视觉上的美观，还要考虑使用体验。

首要目的是通过合理的方式排版页面中的内容和元素，确保关键内容突出，易于阅读。

本文总结了页面排版和布局中需要注意的一些技巧，掌握这些易于使用的排版技巧可以大大提高设计效率。

一、邻近性

相邻性是指页面中的相关元素比其他元素更接近。页面中的内容或元素按相邻性分组，比形状或颜色分组更直观。

二、相似性

通过相同的形状，在同一页面上表达相同功能的元素。相似性是视觉上相似元素的组合，通常通过大小、形状和颜色来区分。

类似的元素会表现出类似的行为，比如下图右侧的选项，都使用了一致的单选框，更有利于用户做出选择。

如果单选框的样式和左图一样不统一，用户在选择时可能会有疑问。点击不同样式的单选框是否会有不同的含义，造成不必要的麻烦。

三、连续性

如今，许多移动终端产品都被使用 feed 以流的形式，内容可以无限加载，用户无法滑到底。在这种情况下，我们应该考虑 feed 流内容的连续性，通过合理对齐内容，保证阅读的连续性。

对齐不仅能使页面内容看起来更整洁，还能潜意识地影响用户的浏览视线和阅读顺序。例如 F 型和 Z 视觉动线，通过不同的对齐排版来引导用户的视线。

四、闭合性

闭合性是通过排版和布局元素本身的边距和元素之间的间距来减少用户的认知负荷。这一原则用于流行的卡片布局。通过将元素整合到一张卡片中，合理安排元素之间的间距，达到整齐的效果。

例如，在“左图右文本”的卡片布局中，应考虑图片与标题之间的距离，标题是否需要与图片顶部对齐，如何在规定的空间内折叠和省略标题，标题与注释之间的距离和对齐。

看到这里，你会发现排版一个简单的卡片布局并不容易。你需要考虑很多细节。

此外，卡片排版不一定要有外框。如果每张卡片的内容排版整齐，用户可以清楚地阅读，即使他们不需要额外的框架。

五、共同行为

具有相同概念的元素需要设计为具有相同行为的元素。当元素沿同一方向移动时，它们被识别为相同级别的元素。例如，有时在手机中可以看到水平排版的内容。这些内容处于一个级别，用户可以从左到右滑动观看。

六、前景与背景

设计清晰地区分了前景和背景。当我们的视线感知元素重叠时，我们会根据焦点识别前景和背景。

为了减少混乱，可以使用深色蒙版或弹出窗口阴影来分离前景和背景。当弹出窗口跳出页面时，背景通常会有一个深色的屏蔽，以突出弹出窗口的内容。

七、分组

当我们想要分组不同类别的内容时，我们可以添加线条或背景来区分。

聚集在同一区域的元素被视为属于同一板块的元素，因此这些元素需要与其他元素有明显的不同。常用的方法是改变背景的颜色或在背景中插入图片，使该板块的内容与其他内容形成鲜明对比。

八、单位

设置有效设计的最小单位。在多个倍数(如 1.5x 2x)使用设计元素，使用可以去除的偶数。

其中，8 点网格系统被广泛使用，它可以将主显示器的整个像素除以整数。但是 8 点网格不适用于所有设计，例如 iOS 的 375 和 750 屏幕尺寸。

九、网格

网格是通过定义一个大框架来进行元素排版的高效设计工具。网格系统易于构建，可以提供一致的视觉节奏，非常适合日常设计工作。

本文可以看到网格系统的具体用法，帮助您掌握网格系统的布局设计：

十、屏幕尺寸

移动设备的屏幕尺寸应考虑在设计过程中。 iOS 手机型号是固定的，所以主要是基于旗舰型号的尺寸。

由于使用 Android 该系统有太多的手机品牌，因此不可能优化所有屏幕，因此倾向于遵循谷歌提供的规范。

十一、密度

为了在屏幕放大时显示相同的尺寸，需要了解屏幕的密度。PPI 它是一个常用的单位，代表每英寸的像素数，指的是 1 英寸 x1 屏幕区域中物理显示的像素数为英寸。

以 DP 和 PX 为单位设计，以便在任何屏幕尺寸上物理显示相同的尺寸。

十二、响应式

对于同时支持移动端和桌面端的产品，响应式设计可用于提高效率和体验。常用的结构形式分为导航栏、工具栏和内容区。

导航栏：顶级导航菜单区，如分类、菜单等。

工具栏：搜索、书签等工具。

内容区：文本、图像、列表等内容显示区。

最后

以上是排版设计中应注意的细节和技巧。我希望这些内容能帮助你更多地思考排版和布局。

慢慢来比较快，如果觉得有帮助，

欢迎关注作者微信微信官方账号:「Clip设计夹」