空间

空间是你的设计中物体之间的距离。它应该用来补充页面的目的，通过创建层次结构和帮助内容变得更有用和更容易理解。

---

---

间距必须…

1.创建可视分组

相关的项目越多，它们之间的距离就应该越近。

2.补充功能

对于大量的信息，使用较短的间距，对于重点内容，使用较宽的间距。

3.是和谐的

使用北极星空间令牌的方式与其余的体验是一致的。

---

间距的工具

北极星空间单位

在整个体验中使用的所有测量(空间，宽度，高度等)必须参考北极星空间单位，以保证视觉一致性和平衡。

空间尺度

北极星单位在小尺度上密度更高，而随着维度的增加密度会降低。这是为了提供一个良好的工作范围，但你必须慎重考虑你决定配对的单位。我们鼓励设计有节奏和对比，以达到清晰的视觉层次。这通常意味着当你配对不同的空间时，跳过至少一个单元。

重复相同的间距(左)和使用更多的变化(右)。

列网格

列网格旨在为团队提供页面布局的代理，同时仍然提供低级约束，以确保整个体验中的页面一致。这意味着只要使用列网格作为基础元素，团队就应该感到有能力试验布局。

断点

网格适应视口宽度。列的数量将根据空间的大小而变化。这是关于横向显示多少内容的建议。列越少，内容就越少。

网格旨在作为页面级设计和对齐的参考点，但这并不需要应用于组件级布局。

---

空间设计要点

完形原则

对任何给定页面的感知都超越了所呈现的单个元素以及它们之间的空间。人们的看法在很大程度上受到他们自己的期望和动机的影响。在设计时，关键是要考虑到人们会寻找模式，并且总是以最简单的形式感知事物。例如，一堆相似的项目堆叠在一起可能会读成一个列表。

人们本能地寻找模式，他们倾向于视觉线索，比如:

相似

根据物理外观(形状、颜色、大小、方向)对事物进行分组。

接近

根据物体之间的距离进行分组。

连续性

根据事物的排列方式进行分组。

弹窗内的阴影作为滚动时显示额外内容的视觉线索(左)。在媒体传送带中水平放置的卡片传达相关主题(右)。

关闭

对大对象隐式包围的对象进行分组。

共同的命运

根据物体的移动方式进行分组。

常见的地区

对大对象显式包围的对象进行分组。

因为人们本能地感知这些，我们可以把它们作为工具来创建层次、视觉节奏，并引导用户的眼睛看到重要的东西。

---

节奏

物体和空间之间的交替创造了一种模式。重复的图案创造了视觉节奏，可以用来有效地引导观众的注意力。任何东西都可以建立节奏:空间、排版、图标、颜色、形状和大小。

就像在音乐中，不同类型的节奏具有不同的目的，在设计中有三个值得强调:

常规的节奏是可预测的，这使得它成为组织具有相同重要性的大型对象集的有用方法。

流动的旋律是有机的，它可以为原本是随机对象集合的东西带来高水平的可扫描性。

进步的节奏是一个循序渐进的过程，它非常有效地为眼睛提供了一个前进的方向。这有助于建立层次结构，帮助用户完成一系列步骤。

节奏在设计中扮演着另一个角色，它是一种规范，能够引入变化和注意点，或者称为对比。

---

密度

人们从信息之间的空间得到的整体感知是密度。它的范围可以从紧到松，每一端都有非常不同的目的。

更紧凑的间距(左)使扫描和理解大型数据集(如列表和表)更容易。它还自然地使人们能够在给定的页面中容纳更多的元素。宽松的空间(右)可以帮助吸引用户的注意力，使布局感觉更友好。

---

对比

对比的目的是创造症结点，帮助内容更容易浏览，突出重要信息，或者只是给观众喘息的时间。

亮点(左):宣传卡用于鼓励商家采取与新功能或机会相关的行动。

喘息时刻(右):空状态提供解释或指导，帮助商家进步。

对比可以在非常不同的层面上发挥作用，但必须谨慎使用，否则其效果会被稀释。

主页提要概述(左)和位置概要分析(右)。

---

光学调整

有时软件会说两个对象是对齐的，或者它们有相同的大小，但在视觉上感觉不是这样的。这是因为计算机不擅长感知视觉重量或同时的颜色对比，所以我们不能完全依赖它们来创建平衡的构图。

这意味着设计师必须进行光学校正，使用北极星单元，直到空间感觉平衡。要注意以下几点:

视觉重量≠尺寸

两件东西可以有相同的大小，但感觉不平衡。

如果没有光学调节，显示图标离按钮右侧边缘太远。经过光学校正后，所感知的间距更加平衡。

方形图标看起来比圆形图标大，但实际上它们的大小和直径是一样的。在减小正方形的大小后，形状看起来彼此更接近。

颜色相互影响

两件东西可以有相同的颜色，但感觉不平衡。