这一期的互动设计KASH系列共有四个布局设计原则。

古人云:“人皆有爱美之心。”更有甚者，在如今“绝代佳人”的互联网环境下，产品的“面值”显然已经成为产品建设过程中的一个关键因素。

对于交互设计师或产品经理来说，虽然我们并不直接对产品的价值负责，但我们工作的可交付成果——交互文档/原型图，很大程度上需要一定的价值和良好的布局设计能力，才能保证产品目标和交互方案上下游高效准确的传递。

所以，我从“版面设计”的角度，分享一下版面设计的四大原则和视觉动态线，帮助你构建视觉设计的基础知识框架。

布局设计的黄金法则

版面设计的目的是为了更好地向用户表达信息，以更好的视觉效果呈现信息。版面设计原理书中有一本经典的书——《为大家设计的书》。

书中介绍的四大布局设计原则(对齐、重复、对比、亲昵)服务于上述目的，好的设计往往是因为满足了这四大黄金原则。

排列

页面上不能随意放置任何元素。每一项都应该与页面上的内容有一些视觉上的联系。不同的元素之间的距离可能不同，因此可以通过对不同的元素进行某种对齐来对它们进行排序。

虽然这些独立的元素在页面上的物理位置可能彼此不靠近，但通过适当的放置，它们可以看起来是相关的、相关的，并与其他信息相统一。一个漂亮的设计，无论一开始看起来多么杂乱无章，总能找出其中的契合点。

左边名片上的元素似乎是随意抛出的，导致任何一个元素都显得与名片上的其他元素无关。

当我们将所有元素向右移动并以相同的方式对齐时，信息会立即更有组织性。

虽然在包含很多信息元素的信息列表页面中，我们可以找到很多对齐方法，而这些对齐方法的结合可以使页面元素更加有序高效地传递给用户。比如上图的知乎APP首页。

重复

设计元素的表达需要在整个页面中重复。重复元素可以是粗字体、粗线、某个项目符号、颜色、设计元素、某个格式、空之间的关系等。

重复有助于组织信息，可以帮助读者浏览各种页面。它有助于统一设计的各个部分。即使在只有一页的文档中，重复的元素也可以创建连续性并“有序地将页面组织在一起”。

在天猫APP >中:我的页面、我的双11、我的订单属于当前页面信息架构的第一层，所以逻辑上并置，导致UI层面的表达极其相似和“重复”；同时，我的双11中包含的信息元素和我的顺序在逻辑上是并列的，所以UI表达也遵循了重复的原则。

对比

页面上的不同元素之间应该有对比，以帮助读者快速捕捉不同重要性的信息。对比对于信息的组织是非常重要的，读者一看到文件的内容就能立刻理解。要增加有趣的对比，最简单的方法就是实现字体对比，也可以使用线条、颜色、元素之间的间隔、材质等。

只是一个页面案例。在双11的产品目标下，本页需要突出双11的主题。所以我的双11下的功能图标和我的订单的UI风格都有所区分，双11下的功能图标比我的订单更有特色，更好的传达了功能按钮入口和优惠活动信息背后的信息。

关闭

亲密原则:把相关的物品组织在一起，移动这些物品使它们的物理位置相互靠近，这样相关的物品就会被视为一个凝聚成一个的群体，而不是一堆不相关的碎片。

我们来看看上面的名片盒。当你看左边的名片时，你有没有停下来五次？

这张名片上有五个独立的项目。从哪里开始的？可能是从中间，因为中间短句字体最厚。接下来看什么？

当我们将同类信息紧密地组织在一起时，阅读和理解信息就会更容易、更有效。

亲密的想法并不是说一切都要更亲密，它的真正含义是，如果某些要素在认识上是相关的，或者彼此之间有一定的关系，那么这些要素在视觉上也应该是相关的。

在微信阅读APP的发现页面上，在“好友正在阅读”卡的UI表现形式中，书籍的信息被紧密地组织在最上面，好友/社交群的信息被紧密地组织在最下面。

写在最后

版式设计原理源于平面设计，但仍然适用于互联网产品的UI设计，因为二者设计的目的都是将信息有效、有序、快速地传递给读者和用户。本文分析的版式设计原理的四大原则（对齐、重复、对比、亲密），在实际运用中并不是独立的，而是需要互相配合，方可设计出不错的页面。所以，如果我们多去观察身边的版式设计（杂志、网页、APP…），你会发现这四大原则无处不在。