作为一个不靠谱儿的前端，嗯，尤其是美感经常被朋友挑衅的那种，真的有点痛… 在公司可以和设计师们一起实现出各种天马行空的效果，而一到自己的 side project，一通前后端撸下来，看着用各种UI库堆砌出来的界面真的是对不起自己码代码的激情… 恰好最近读了一本《The Non-Designer’s Design Book》，觉得作为直男的美感居然好像的有了一丢丢提升（也有可能是幻觉…），尤其是英文网站有很多基本的设计常识，算是一门对新手比较友好的设计入门书，所以总结一些要点记录下来。

# 四大设计原则

# 亲密性 (Proximity)

相关的项可以有意识的组织在一起，从而变成有凝聚的一个个组，而不是杂乱无章的片段。

# 对齐 (Alignment)

页面应该统一而有条理，任何元素都不能随意安放，应该于页面上的某个内容存在某种视觉联系。

• 为了对齐，需要在设计中养成为元素画线的习惯
• 居中是最保险的对齐方式，也是最没有新意的，许多精巧之作都没有采用居中
• 摒弃居中很难，但是请勇敢一些，放弃保守，不要畏缩
• 尽量只使用一种对齐方式，或者让不同的对齐方式互相有某种联系

# 重复 (Repetition)

设计的某些方面需要在整个作品中重复，如一条粗线，一种细字体，某个符号、颜色或者空白等等。重复的目的是为了保证一致性，同时凸显某些想要表达的主题。

• 重复的项并不一定完全相同，只是突出存在明确关联的类似对象
• 有些重复与主题无关，如一些大字体，无关的图案等，只要确保看起来是有意为之，不是乱七八糟就好

# 对比 (Contrast)

在页面上增强对比可以快速吸引眼球，形成对比的时候需要大胆，不要犹豫

• 类似的元素不需要强烈的对比，不同的元素需要截然不同
• 字体、大小、粗细、颜色等等都是增强对比的手段

总结一下，设计的指导原则是，在符合上述条件的情况下，不要畏畏缩缩。大胆使用空包、非对称、特大字号等等在合理原因的支撑下都是美观的

# 色彩运用

# 色轮

三原色：红、黄、蓝

第二色： 红 + 黄 => 橙 红 + 蓝 => 紫 黄 + 蓝 => 绿

第三色：………………

# 互补

色轮上完全对立的颜色为互补色，因为他们最为对立，所以一种是主色，另一种是对比色

例如上图中的黄色和紫色、红色和绿色等等

这些颜色组合可能很怪异，但是只要遵循色轮的组合一定会很好的搭配，自信一些！

# 三色组

彼此等距的三种颜色通常会形成一个让人愉悦的三色组，他们相互配合起来非常的自然

# 分裂互补三色组

从色轮的一边选择颜色，再在它的对面找到互补色，从而选出互补色两侧的颜色，会有更为细致的颜色边界

# 类似色

选择色轮上彼此相邻的颜色，可以有两种或者三种都可以，他们有相同的基础色，