间距网页设计 第1篇
效率化分三个层面体现：
4. 栅格的类别
我们从 Figma 的 Layout Grid 可以看出，栅格的分类大致有四种：
间距网页设计 第2篇
页边距分两种，固定边距和非固定边距，值得注意的是，非固定边距的情况下，Margin还可以定义为相对值，比如 Margin = 10% screen width，也就是页边距等于10%的屏幕宽度。
在一个app界面设计中，可以有1-3种固定页面边距，这是根据页面呈现内容和你想呈现的视觉效果决定的。一般来说，页边距越大，相应定义的水槽也可以越大或者维持不变，这是为了让页面更清爽，留白更多，有时也是为了突出高级感，反之，如果页面内容过多，可以用小边距。需要注意的是，同一个页面只能使用一种边距。
在响应式布局时，也可以根据 Break Point 去设置页边距的值。
比如，在 Material Design 中，在页面宽度在小于等于600px的情况下，margin = 16px在页面宽度大于600px的情况下，marigin = 32px
四、Part 4: 断点 Breakpoint
断点是自定义屏幕的宽度范围，在不同范围下确定不同的布局规则，这是为了适应不同的设备和屏幕尺寸。
我们先来看一下如下几个 Design System 的断点规则：
我们先从 Break Point 个数来看，Sales Force 的断点个数最少，个人认为的原因是 Sales Force 的用户群体多用PC端，因为大多为后台操作，需要保证用户在单屏能尽量方便完成所有操作，所以 Break Point 较少。而其他三家都有自己的硬件设备，为了设计能更好的服务于全端的设备，所以断点个数较多。
我们再从 Break Point 的值来看，各个 Design System 的值都大相径庭，这是因为要适配独特的产品尺寸。下面，我们来看一下主流设计软件的默认设备画板尺寸：
我们可以得出下面结论：
（ps: 这是我个人常用的 Break Point 参数）
所以我们在定义 Break Point 前，需要看产品功能复杂度及该产品的用户常用设备。如果用户什么设备都用且所有功能都需要，那么恭喜你，全端适配响应，Break Point 规则会很多，人生很难。反之，我们用户常用设备少，我们可以减少断点。
在定义 Break Point 的大小和具体值后，我们还需要定义在该 Break Point 范围内的规则，常见的包括: Column number, Gutter, Margin，Column size 等，甚至在有些时候，为了更好的呈现效果，我们更改某些 Font Size, Padding 等。比如，我们在 PC 端使用了64号字作为 Huge-title，但是在移动端64号字可能会效果很差，我们就需要在移动端的断点范围缩小字号，也许它可以是28号字。
间距网页设计 第3篇
在网页设计中，间距是非常重要的一部分，可以对页面的美观度和可读性产生很大的影响。常见的间距有以下几种：
1. 外边距（margin）：指元素与相邻元素间的距离，常用于控制元素与页面边缘的距离。
2. 内边距（padding）：指元素内部内容与元素边界之间的距离，常用于控制元素内部布局和样式。
3. 行间距（line-height）：指行间的垂直距离，常用于控制文本的行高和垂直对齐。
4. 字间距（letter-spacing）：指字母与字母之间的距离，常用于控制文本的紧凑度和美观度。
不同的间距应用场景不同，具体应根据设计需求和风格来选择合适的间距。