背景
前端为何要学习基本的UI设计原则和实践套路？
做好作品：想要追求极致的全栈定义，或许应该包含设计的元素
没有专业UI来帮你：团队中可能没有专业UI来做设计
功能导向
做UI设计需要依据功能作为向导，或者说设计的第一步就是完成功能。
谷歌20年的首页都是一如既往的一个搜索框
简约设计
在开始设计的时候，我们利用纸笔可以做一些简单功能原型
或者Excalidraw需要翻墙
迅速把框架搭好，设计细节以后再说，说白了，还是功能优先
设计简单的、完整的功能
就是先以MVP版本功能，来作为设计目标
MVP:minimum Visble Product，最简化可实行产品
设计原则
层级
这个可能是唯一的需要关心的原则
- 一个产品要好用，就要让用户很容易的抓住产品的重点。
- 在重点里，用户能自在地进行沉浸式阅读、和使用的状态
- 当用户想探索其他内容时，ta能轻松地识别网站的次要板块含有哪些？焦点迅速转移，并迅速沉浸
- 辅助提示信息，精准而又不会打扰各主要模块的呈现
一致性
用户在站点的各个角落，观察到颜色、间距、阴影、位置、字体、字重的运用，都在一套有限的框架里，一套能迅速建立亲切感的框架内。
《写给大家看的设计书》
《写给大家看的设计书》是很多人的设计启蒙书。
这里面提到了四原则
- 对比：如果两个元素的内涵不同，请让他们截然不同
- 重复：设计的视觉要素应当在整个作品中重复出现
- 亲密性：彼此关联的元素应当靠近放置在一起
- 对齐：任何元素都不能随意安放，应当总与另外至少一个元素有视觉上的关联
设计体系
布局
居中放
先介绍一个最基本的布局技巧，那就是内容居中放
如果遵循 功能导向 ，边开发基础能力，边设计迭代的开发过程，那么前期你的功能应当是比较简单的。单列式的居中布局应该能够满足需求
很多场景下，居中放也很有意义。除非大屏浏览是你的核心场景，不然一般来说，你的内容宽度应该在600-800px之间，类似一本书的宽度
多列布局
多列布局的核心也是保持内容的一个合适宽度，维持可读性。
一般规则是：主要内容弹性收缩（可以有最小的宽度）；次要列固定宽度
间距
保持元素之间的间距是最基本的设计技巧
我们基于4px的倍数，设计了十数种间距选项
这样可以帮助设计者快速做很多设计的决策
留白
这是一个间距的设计技巧：安排元素是建议先大大滴留空，也就是 从松到紧 来调试间距。
由紧到松，思维是 尝试把无关的元素拉开 ，而且是 **从整体到局部 **的方向 不好操作。
举个例子：
你想先拉开每个段落间距 10px，再调整段落内标题与内容的间距4px，但发现拉的不够开；
这时要回头将段落间距拉到20px，这样堕落内才好安排10px的间距
从松到紧：关注的是 哪些元素 相关，把他们拉在一起，然后是从 局部到整体 调优
一般来说，偏松也比偏紧好。从一开始就留些空间更好。
表达关联关系
暧昧的行高和列表项间距，会让用户难以判断阅读时的停顿点再哪，当前列表项是否已结束
间距是远比色块，边框，分界线之类的更适合用用来表达关联关系的工具。
文字
文字是站点的主要内容载体；字体设计自然也是重中之重。
既然我们在讲设计体系，以一致性为目标。同样的，我们要把站点所使用的字号、字重等范围框定在数十个选项中。
选项设计
相比与间距设计，字号大小我们有一个明显合适阅读的字号范围，如12-20px。那么我们会更多的在这个范围内设计字体选择。
仅通过字号来设置层级，很快就会捉襟见肘。结合字重 & 颜色（灰度），你会更加游刃有余。
字重是CSS自带的。用好常用的3，4个尺度就好。
对齐
不同字号大小的字体间如何对齐呢?基于baseline对齐，就是文本的下边缘
baseline是一个字符的重心；重心对齐了，用户在移动视线时就能有平稳的阅读体验
行高
基本所有的文本设计意图都是为了保持良好的阅读体验，行高也不例外。
具体到设计哲学，就是：行高和字号大小大致成反比，目标时用户在视线换行时有稳定的下移体验。
色彩
颜色选项--灰色
你选择的色彩库应该有10种左右的灰色供你选择。从文字到背景都用的着。
颜色选项--主题色
大部分站点都少不了一两个贯穿全局的主题色；它出现在按钮、logo、背景、各种修饰元素之上，是品牌的记忆元素。
颜色选项--功能色
有一些常见的颜色，被广泛的用来表达某些固定的语义信息。
红色，传达错误信息，或表示危险操作
黄色，代表警告信息
绿色，表示一些积极变化，以示成功或者增长的信息
使用色盘
深色背景情况
深色背景，浅色前景
挑选色彩：主要标题使用最亮的白色，次要标题使用背景色的浅色版本。
浅色背景
浅色背景，深色前景
浅色色块相较于白色背景对比度不大，适合不用过于抢躲眼球的场景。
注意事项
颜色虽好，使用不当容易打破页面层级平衡。
有些情况不能强行进行色彩的使用，按照功能的主要次要可以给定不同的灰度颜色是不错的选择
色盲用户消费不了颜色；
颜色在不同文化种可能表示不同的含义。
深度
制造深度的技巧，八成与阴影设计有关。深度补充了间距，从另一个维度上体现了层级。
这种深度来自我们的日常感官，自上而下的光照打在平面上所造成的阴影。
模拟这个现象，我们便可以实现网页元素的深度体验。
阴影选项
小的阴影可以使元素更加突出，但不至于抢夺眼球。
中等阴影适用于小型弹出的模块，如下拉框。
最深的阴影则用于彻底的将模块与页面区分开来的场景。
实用技巧
图片上体现层级
图片上的色块斑驳不一，难以找到合适的前景色。怎么办？
1.增加蒙层
2.给文字加阴影
可以只给文字加阴影，这样就不会影响整个图片，还能把文字突出出来
用户上传头像
用户上传头像时的色彩不一，如何在任何情况下都能清晰的展示内容会是一个问题。
1.内阴影
加个border有点差强人意，显得有些刻意
更好的可以加一个内阴影
干掉分界线
用什么都使用边框的化，看起来设计什么都像一个table，有点土
1.加阴影
阴影可以代替边框
