序

作为一个前端开发人员，虽然平时工作中的页面都是由 UI 人员先画好的，但是感觉自己有必要学习一下界面设计的知识。所以看了一下《写给大家看的设计书》，对页面设计做了一些简单的学习。

四大基本设计原则

在《写给大家看的设计书》中，最重要的部分应当就是四大基本原则了

分别是：

• 对比

• 重复

• 对齐

• 亲密性

下面来简述一下这四大基本原则（这些原则从字面上基本也能看出来内容）

对比

在页面中，如果想要视觉效果进行增强，往往可以增加不同元素之间的对比性，也是在不同元素之间建立以中有组织的层次结构最有效的方法。

重复

重复原则不是说元素都单一不变，而是一些方面在整体作品中必要的重复，比如说文字的字体，线条的粗细，项目的符号等，这些基本都是会有重复出现的元素。

比如网站的标签基本都是保持相同

对齐

一个好看的页面，往往结构非常整齐，各个元素的排布通常遵循某种对齐的规律。

任何元素都不能在页面上随意安放，每一项都应当与页面上某个内容存在某种视觉联系。 对齐原则不能页面上刚好有空间就把元素随意扔在那里。

居中对齐

居中对齐是初学者最常用的对齐方式，这种对齐看起来很安全，感觉上也很舒适。居中对齐会创建一种更正式稳重的外观，这种外观显得中规中矩。 但是通常居中对齐也很乏味。

两端对齐

两端对齐的方式需要尽力避免，除非行足够的长，不然在单词之间会出现难看的空隙

一般而言页面设计基本遵循的是左对齐和居中对齐

下面的图片中第三行文字就是两端对齐，但是一点都不好看，在写 css 样式时可以使用 text-align 进行设置

对齐原则

亲密性

在界面设计中，有些元素是具有相关性的，可以互相关联，这时往往会让这些元素的物理位置相互靠近，让它们组成一个模块，相关的项成为一体的组。

具有很好亲密性的界面往往也是有条理的和有组织的。亲密性能够让用户一眼看到界面所要表达的分类，而不是去一个一个寻找半天。

例子 1：母子亲密性

例子 2：种类亲密性

亲密性原则

在平时代码开发中，也会发现这些原则同样的适用