一、邻近性
邻近性是指页面中有关联的元素比其他元素的距离更近。页面中的内容或元素按照邻近性分组，比按照形状或者颜色分组更直观。

二、相似性
同一页面中表达相同功能的元素，通过相同的形状表示。相似性是视觉上相似元素的组合，通常通过大小、形状和颜色来区分。
相似的元素会表现出相似的行为，比如下图右边的选项中，都使用了一致的单选框，更利于用户做出选择。

如果像左图一样，单选框的样式不统一，那么用户在选择的时候可能就会产生疑问，是不是点击不同样式的单选框会有不同的意思，造成不必要的困扰。

三、连续性
现在很多移动端产品都采用 feed 流的形式，可以无限加载内容，用户怎么滑都滑不到底。这样的场景下就要考虑 feed 流内容的连续性，通过将内容进行合理地对齐，保证阅读上的连续性。
对齐的作用除了可以让页面的内容看起来更整齐，还能够下意识地影响用户的浏览视线和阅读顺序。比如 F 型和 Z 型视觉动线，通过不同的对齐排版方式来引导用户的视线。

四、闭合性
闭合性是通过排版布局元素自身的边距以及元素间的间距，来减少用户的认知负荷。现在流行的卡片式布局就用到了这个原则，通过将元素整合到一个卡片中，合理安排元素的间距来达到整齐的效果。
比如在“左图右文”的卡片布局中，要考虑图片与标题的间距、标题是否需要和图片顶部对齐、在规定空间内标题如果字数过多怎么折行和省略处理、标题和注释之间的距离和对齐方式等等一系列问题。

看到这里会发现，想要把一个简单的卡片式布局排版好，并不简单，需要考虑到很多的细节。
另外，卡片式的排版不一定必须带有外边框，如果每个卡片中内容排版很整齐，就算不用额外边框，用户也可以清晰地阅读。

五、共同行为
具有相同概念的元素需要设计为具有相同的行为。当元素沿同一方向移动时，它们被识别为同一级别的元素。比如在手机中有时候会看到横向排版的内容，这些内容处于用一个层级，用户左右滑动来观看。

六、前景和背景
设计使前景和背景清晰区分。当我们的视线感知到元素重叠时，会根据焦点分别识别前景和背景。
为了减少混乱，可以使用深色蒙版或者弹窗阴影来分离前景和背景。当页面中有弹窗跳出，通常背景会有一层深色的遮罩，以此来突出弹窗中的内容。

昨天发的现在才看到