我们日常浏览网页，有的页面排版看起来很舒服清爽，能够一眼找到重点，而有的页面塞满了内容，杂乱无章，很难找到重点。
哪些因素会影响我们的感官？
最近在知乎上面看了一本小书《写给大家看的设计书》里面提到了四个原则，很基础的四个原则，但是用好了页面排版看上去立马上了一个台阶。
哪四个原则呢？（下面的图片大部分是书中的截图）
亲密性
亲密性是指：将相关的项组织在一起，在物理位置上面互相靠近。
书中用上面两张图做了例子，第一张名片将信息散落在各处，第二张名片将地址电话信息归集到一起，虽然略微夸张，我们一般不会这样制造大范围的空白来分隔相关信息，但是也间接说明了将相关信息放到一起的重要性。
除了将相关的信息放到一起之外，还需要将无关的信息给予一定的间隔分开来。
上面第一张图，列表中的每个元素和其他元素都是一样的间隔距离，这样即使标题标粗也不能一眼直观的知道这些信息如何分组组织的。
第二张图将不同的分组之间的间距相较于同一分组之间的间距调大了一些，分组信息就能很容易观察出来。
这篇文章中，我将不同的原则之间用分割线做了分割。
对齐
对其的含义是：元素不能在页面随意放置，需要和页面上面其他的元素在位置上面有一定的视觉联系。
上面一张名片对信息进行了分组，并且将不同组的信息分割开来，但是依然比较乱，为什么？
因为对齐的原因。
页面上元素对齐方式有左对齐，右对齐，居中对齐。一张小明信片上面三种对齐方式让页面看起来比较杂乱。
下面一张图采用了一致的对齐方式，让页面更整洁，同时将狗狗的图片放大，突出主题。
重复
将页面的某些元素重复，使页面元素视觉上成为一体。重复的元素可以是字体，线条，符号等任何元素。
重复是让页面保持一致性，想象一个页面用n多种字体，看起来是多么花里胡哨的。
对比
想要突出页面的某些元素，对比是最好的方式。对比也可以组织信息，清晰层级，指引读者。
对比方式有多种，比如说字体大小，颜色信息等。
上面第二章图， 将标题改为粗体字，并给大标题背景色。标题的出题和正文强烈的对比很容易让人找到关键点。
当你想让页面的某个部分更加突出的时候，请跟其他的内容给予对比。
上述四个原则，每个原则都有自己的效果，我们要根据页面的内容来合理的运用这些原则，让页面层次分明，而又整齐规划。
关于颜色
除了上面几个页面布局的规则，书中还对颜色的运用做了一些简单的介绍，这一部分不仅仅在页面排版的时候会用到，在日常的穿衣搭配中也可以使用这些颜色的搭配原则。为什么有的人穿衣服颜色搭配看起来特别协调，而你穿衣搭配颜色看起来特别突兀。
色轮
三原色：红、黄、蓝。通过三原色我们可以组成任意其他的颜色。
将这三种颜色标记在一个环状图形上面。形成下面的图案。
黄色+蓝色=绿色
黄色+红色=橙色
蓝色+红色=紫色
这三种颜色称之为三间色，将两个颜色混合得到的颜色置于两种颜色之间，得到下列图形。
继续重复上面的操作，将两两相临近的颜色进行混合得到第三色。
上面就是12种基本颜色组成的色轮，如何来从色轮上面选取不同的颜色，使其搭配看起来协调呢？我们根据几种关系对这些颜色进行一个分组。
互补
色轮上面相互面对的颜色称之为互补色，在使用的时候我们可以选一种作为主色，另外一种用于强调突出，也就是上面提出的对比效果。
三色组
色轮上面等距的三种颜色形成三色组，这三种颜色搭配起来协调让人愉悦。
分裂互补三色组
选一种颜色，以及该颜色队里颜色的两侧的颜色。
类似色
用相同基础色构成的相邻的颜色，当用不同的亮色和暗色组合成一组的时候，效果醒目且协调。
暗色和亮色
上面介绍了颜色的色调，通过调整颜色的明暗，会形成更加丰富的颜色。
我们来看window的颜色面板，选中一个颜色之后，会有一个滑块用来调整颜色的明暗，同一个色调可以调出不同明暗的很多颜色。
在颜色的组合中，我们可以使用同一个色调的不同明暗的颜色，称之为单色组合。
在使用颜色的过程中，我们注意搭配颜色的色质。色质是某种颜色的特定明暗，深浅或色调。色质相近颜色放在一起，对比度会很弱，造成模糊不清，看不清楚文本。
总结
这本书的标题是写给大家看的设计书，面对的读者是非专业的设计人员，内容很符合定位，都是一些很基本的设计原则。根据80/20法则，虽然基本，但是可能极大提升页面的效果。
网友评论