契机与开端
顿悟
自从和UED同学合作，基本每见一面都要diss我一回。说我的页面丑的触目惊心无法忍受。其实我自己来说是丝毫不以为意的，虚心接受并不为所动，反正中后台产品也不见客户，自用的页面能用就行呗。但其实被她改下来，页面的易用性和外观是有明显提升的。
前一段时间以推进前端页面风格统一为考核指标，找设计同学对了一下鲁班平台上积累的项目页面，半个月之后也就是昨天，设计同学找我说了一下几个类型页面设计时处理的tip，心里还是有些触动的：很多设计其实都是这么多年来软件和页面UI培养出来的用户习惯，只要顺着已有的套路来就行了。这一点之前听过的deepin的设计小姐姐分享过，当时不是很能切身感受到，现在真的有了些体悟，比如：分页器都是放在下面的，为啥我要放在上边。。
道理真的是很简单，可能我的顿悟就像别人翻了翻书一样稀松平常，同样的事情可能真得经历一下才能彻底明白。
契机
在我深刻的反思了一下自己对页面设计的歪曲理解之后，在知道烦人的设计同学马上就要调到别的团队之后，我有那么一点慌。。
果然凡事都要靠自己，我还是得自己学习一下设计。
关于怎么学的问题，我也去请教了一下她，得到的答案是你就看别人怎么办的就行了。我觉得很有道理。但是觉得这个答案还可以升级，之前我看设计书的时候，懵懵懂懂，好像书里说的有道理，看完又不知道该把那些设计原则用在哪里。所以这次我打算边看书边去找，哪些地方用到了这些原则，我以前写的页面里哪些没有遵循这些原则，应该能获得更多体悟。
过程
旁边的同事买了一本《写给大家看的设计书》，一直在吃灰，我觉得是时候让它实现一下书生价值了。
参照阿里云控制台的页面，看看用了哪些设计原则和方法
反思自己的页面，low的原因在哪
亲密性
原则
将相关的项组织在一起。空间位置的接近就意味着存在关联。
如果多个项相互之间存在很强的关联，他们将成为一个视觉单元，而不是孤立的元素。彼此相关的元素应该归为一组。
tips：注意阅读时视线是如何移动的，从哪开始，沿什么路径移动，在哪结束。
目的
- 实现页面的组织性
- 使空白更有条理
技巧
眯起眼睛，统计眼睛在页面上停顿的次数，如果超过3-5个， 应该考虑将有关联的项归并为一个视觉单元。
避免
- 页面上存在太多孤立的元素
- 在所有元素之间留下同样大小的空白
- 如果元素彼此无关，不要强行建立关系
- 不要因为有空白而干预元素的位置
对齐
原则
任何元素都不能在页面上随意安放，每一项都应当与页面上的某个内容存在某种视觉联系
如果页面上某些项是对齐的，那么会得到一个更加内聚的单元，即使它们彼此分离，视觉上会告诉读者他们是一个整体。
tips：为每个元素寻找对齐线，理清元素间的对齐关系。
目的
- 增强页面元素间的联系
- 使页面统一而富有条理
技巧
- 尽量，尽量，尽量不要使用居中
- 尽量只使用一种对齐方式
- 组织页面中的空白，使空白不要显得凌乱无序
- 找到一条明确的对齐线，坚持以它为标准
- 如果有一个照片图片图表有一条明确的边，就让文字靠着这个边对齐
避免
- 页面上出现好多种对齐
- 避免使用居中对齐
重复
原则
设计的某些方面需要在整个作品中重复。
有重复的项不一定完全相同，是存在明确关联的紧密相关的对象。确保重复看起来像是有意为之而不是瞎搞出来的。
目的
视觉单元的重复会将页面中的各个部分连在一起，保证页面一致性。在彼此相关或从属某一类别的元素样式上使用重复，避免他们成为页面上孤立的单元。
技巧
使重复变得更明显（显眼的样式）
增加一部分单纯为了增加重复性而增加的元素或样式
避免
太多而没有重点的重复
对比
拿着我设计（实际上已经写出了demo）的发布系统，欠欠的跑去问设计小姐姐感觉怎么样，嗯，被批了一顿。并说我的页面看起来怪怪的，具体哪里怪，我也不知道。
原则
不同的元素之间有对比效果，达到吸引读者的作用。
如果两个项不完全相同，那就让他们截然不同。
目的
- 吸引眼球
- 组织信息
- 清晰层级
- 指引读者
- 制造焦点
技巧
- 字体对比
- 线宽
- 颜色
- 形状
- 大小
- 空间
- 对比一定要强烈！important。
避免
避免类似的项，要不同就完全不同，对比要极端，做事要头铁。
复习
亲密，对齐，重复，对比。挨个运用这四个原则考量页面设计。
亲密性原则： 我这个元素放的地方能不能体现他们之间的关联。。
对齐： 页面对齐的基线在哪里，哪些元素对齐了哪些没对齐，为啥没对齐。
重复： 哪些元素是归为一类的，可不可以运用重复的原则突出他们。
对比： 哪些元素不一样但是样式又太过接近，是不是可以增加对比度。
思路
锻炼视觉敏感性，识别出别人的设计中的思路和原则的运用
多做尝试，多挨批
颜色
色轮
首先我们有三原色。红黄蓝。
他们两两结合。
相邻的颜色再两两结合。
so，we get a 色轮。它的指导意义在于：
补色
180°相对的颜色互为补色，比如红色和绿色，蓝紫色和橙黄色。补色啥意思呢，就是他俩加一起是黑的。咋用呢，就是互补的俩颜色一种作为主色，一种用来强调（造成对比效果。）
三色组
相隔120°的颜色，组合在一起就是一个三色组，比如，红黄蓝，紫红蓝绿橙黄。三色组的搭配令人感觉舒适。
类似色
相邻的两三个颜色，基色是一样的，因此是协调的，搭配明暗色调食用更佳。
饱和度
对上边的色轮增加一个饱和度维度。so we get a super 色轮。
越往中心颜色越浅，深浅得当的颜色好像有个名字叫高级灰。不刺眼，柔和，庄重，缓和，无冲突，优点多多，居家设计必备。
