前言
前端为何要学习基本的UI设计原则和实践套路?
1、没有专业UI
你的团队里可能会有UI角色，但不一定专业，UI给出的设计稿，许多时候只是静态的、仅见某一交互切面的;
很多交互体验细节，只有在前端摆弄一个Button的位置和多场景状态时，才能被捕捉到。
在大厂里，许多B端产品时没有专职UI的角色的；前端可能要对产品最终呈现出的形态负责。
2、做好作品
入行前端的同学，有不少是被其【所见即所得】的开发体验所吸引此外，就是能够开发一款自己有用、爱用的反方出来，并分享给其他人使用。
现在市面上，已经足够多的课程，能够让前端以「全栈」的姿态独立开发一款能用的产品出来。但当页面模块变得复杂起来时，仅仅依赖一些UI组件库，已经不能让产品维持在「好用」的状态。追求极致的「全栈」定义，或许应当包含「设计」的角色。
基于以上的几点原因，现在就开始吧！
功能导向
功能导向，设计中最重要的事情。
简约设计
先不介绍什么设计原则。又或许这才是最重要的「设计原则」，那就是
- 把功能做好。
示例
如以下谷歌登录页，它最主要的功能就是搜索，所以页面主要呈现的就是搜索框，让用户可以快速的直达功能。
有了功能基础，就可以画原型了。在我们开始介绍设计原则之前，有几个简单的技巧可以帮助你快速开始。
用简单的创作工具像纸、笔，或者excalidraw.com/ 这样可以立刻上手的工具最好。
糙一点设计笔触可以让你不会过于追求完美，或者说是过于「追求设计」迅速把框架搭好了，设计细节可以后面再补充。说白了，功能优先 始终贯穿在设计&开发流程中。
你可以使用如figma之类的更专业的原型设计工具。但作为开发，建议先使用最基本的笔触和组件，克制使用颜色
设计简单的、完整的功能 说白了，就是先以MVP版本功能，来作为设计目标。
- MVP: Minimum Viable Product，最简化可实行产品
如
- 一个联系人列表，是否要考虑超过2000人的展示情况?如何优化交互?数据不存在时，根据不同的错误情况，应该如何准备错误信息展示，和用户引导?
- 一个图片上传模块，其复制粘贴、拖拽、点击选择文件上传，这些路径是否MVP版本都要做，是否都要先做好布局和引，导设计?
在开局期间，时刻提醒自己，优先把用户关键路径上的主流场景设计完成，迅速迭代能力。先让游戏开始。
设计步骤
- 第一步：交付功能
设计原则
层级
层级可能是你唯一需要关心的原则，层级区分，就是你最需要掌握的原则和技巧。
- 一个产品要好用，就要让用户很容易地，抓产品重点。
- 在重点里，用户能自在地进入沉浸式阅读、和使用的状态;
- 当用户想探索其他内容时，ta能轻松地识别网站的次要板块还有哪些，焦点能迅速转移，并迅速沉浸;
- 辅助提示信息，精确而又不会打扰各主要模块的呈现。
一致性
一致性指的是:用户在站点的各个角落，观察到颜色、间距、阴影、位置、字体和字重的运用，都在一套有限的框架里，一套能迅速建立亲切感的框架内。
能否克制，且重复、精确地运用着拟定好的设计体系，会在方方面面上影响着一个站点的质感，也是体现专业性的考量。
资料推荐
推荐书籍《写给大家看的设计书》
这里简单介绍下《写给大家看的设计书》四原则:
- 对比：如果两个元素内涵不同，请让它们截然不同
- 重复：设计的视觉要素应当在整个作品中重复出现
- 亲密性：彼此关联的元素应当靠近放置在一起
- 对齐：任何元素都不能随意安放，应当总与至少一个元素有视觉上的关联
层级，就是亲密性+对比的目标。让用户抓重点、切视线，又快又稳。
一致性，就是对齐+重复，克制用户视线所感受的尺度，迅速与网站设计语言建立熟悉感。
设计体系
布局
居中放
先介绍一个最基本的布局技巧，那就是:内容居中放。
-
如果你是遵循「功能导向」，边开发基础能力边设计迭代的开发过程，那么前期你的功能应当是比较简单的。单列式的居中布局，应该能满足你的需求。
-
很多场景下，居中放也是很有意义的。除非大屏浏览是你的核心场景，不然一般来说，你的内容宽度应该在600 ~ 800px之间，类似一-本书的宽度。
多列布局
- 多列布局的核心也是保持内容的一个合适宽度，维持可读性。
- 一般规则是:主要内容列弹性收缩(可以有最小宽度) ;次要列固定宽度
间距
保证元素间有基本的间距，是最基本的设计技巧。
选项
我们基于4px的倍数，设计了十数种间距选项
关于设计选项的说明
- 设计体系，除了满足「一致性」原则，另外也是帮设计者提前设计好选项。
- 有了这些选项，我们在具体场景中可以逐个尝试，来试出最优解。
- 比起每次都拍脑门决策，在选项里调优能大大加快设计的步伐。
观察这十数种间距选项，我们可以发现这是一个类似指数增长的图表。这是因为两个相邻间距，在大尺度上，要比小尺度里拉的更开，才能在视线里体现出间距差距。
小尺度里，4px 的差距就是20%的增幅;右图500px的尺度中，20px 的增长只有提升4%的
多些留白
这是一个间距设计技巧
- 安排元素时建议先大大的留空，也就是「从松到紧」来调试间距。
由紧到松
这图是由紧到松，你的思维是「尝试把无关的元素拉开」，而且是「从整体到局部」的方向，不好操作
举个例子
你想先拉开每个段落间距10px，再调段落内标题与内容的间距4px，但发现拉的不够开，这时要回过头将段落间间距拉到20px，这样段落内才好安排10px的间距；
由松到紧
这就简单一些:关注的是「哪些元素相关」，把它们拉在一起，然后是「从局部到整体」调优。
一般来说，偏松也比偏紧好。从一开始就留些空间吧。
表达关联关系
除了方便阅读，间距也是最合适表达关联关系的工具。 图中的间距差异设计，表明了每个章节的起点，以及标题与段落的关联性。
暧昧的行高和列表项间距，会让用户难以判断阅读时的停顿点在哪，当前列表项是否已结束。
间距是远比色块、边框、分界线之类的更适合用来表达关联关系的工具。值得多加练习运用。
文字
文本是站点的主要内容载体;字体设计自然也是重中之重。
既然我们在讲设计体系，以一致性为目标。同样地，我们要把站点所使用的字号、字重等范围框定在十数个选项中。
十数个是个magic number,大部分情况下应该都能满足。只要场景够特殊，特殊字体完全可以再加。
选项设计
相比于间距设计，字号大小我们有一个明显的适合阅读的字号范围，如12 ~ 20px。那么我们会更多在这个范围内设置字体选项。
仅通过字号来设置层级，很快就会捉襟见肘。结合字重&颜色(灰度)，你会更游刃有余。
字重（字体加粗）是css自带的，用好常用的3、4个尺度就好
对齐
不同字号大小的字体间如何对齐呢?基于baseline 对齐，就是文本的下边缘。
baseline是一个字符的重心；重心对齐了，用户在移动视线时就能有平稳的阅读体验。
行高
基本所有的文本设计意图都是为了保持良好的阅读体验，行高也不例外。
具体到设计哲学，就是:
- 行高和字号大小大致成反比，目标是用户在视线换行时有稳定的下移体验。
色彩
颜色选项
- 灰色
- 主题色（大部分站点都少不了一两个贯穿全局的主题色;它出现在按钮、logo、 背景、各种修饰元素之上，是品牌的记忆元素。）
- 功能色（有一些常见的颜色，被广泛地用来表达某些固定的语义信息。）
- 红色，传达错误信息，或提示危险操作。
- 黄色，表示警告。
- 绿色，表示一些积极的变化，以示成功或增长的信息。
使用色盘 准备好颜色这么多由深到浅的变种，如何使用呢? 刚刚提过的一种，是作为前景和背景色。
- 主要标题可以用最亮的白色;
- 次要标题挑一个背景颜色的浅色版本。
浅色背景深色前景的用法。
浅色色块相较于白色背景对比度不大，适合不用过于抢夺眼球的场景。
使用颜色的注意事项
- 颜色虽好，使用不当容易打破页面层级平衡。
下图，虽然每个按钮都是按功能填色，但是会让人找不到功能重点
以下，直接把最主要的按钮，用主题色体现，删除功能最次要的，则不加颜色
色盲的用户消费不了颜色;颜色在不同的文化中可能表示不同的含义。（最好是没有颜色的情况下就能很好的表达功能意图，在适当的去加颜色）
深度
制造深度的技巧，八成与阴影设计有关。
深度补充了间距，从另一个维度上体现了层级。
这是为什么?
这种深度的感官来自日常生活。
平时我们是怎么感受平面上的深度的?
答案是:自上而下的光照打在平面上所造成的阴影。模拟这个现象，我们便可以实现网页元素的「深度」体验
阴影选项
-
小的阴影可以使元素略微突出，但不至于抢夺眼球。
-
中等阴影适用于小型弹出的模块，如下拉框。
-
最深的阴影则用于彻底地将模块与页面区分开来的场景。
实用技巧
图片上的层级
图片上的色块斑驳不一，难以找到合适的前景色。怎么办?
- 增加蒙层。对比度就上来了
- 还可以给文字加上阴影。css可以让你轻松做到，只增加文字部分的对比度，而不影响整张图片。
用户头像
这里也包含任何由用户上传图片的场景。如何在任何情况下都能清晰地展示内容会是个问题。
加个border呢，差强人意，不一定能搭配好。
有个好方法是，加点内阴影。相当于圈用户头像的外层做边框。非常精巧了。
干掉分界线
如果每个地方都用分界线分割，会显得很不美观
阴影可以替代边框;不同的背景色块也可以。
间距清晰的话，也就不需要分界线了。
资源
想深入了解可以看
书籍推荐
写给大家看的设计书(第4版) (豆瓣)
其他
- tailwind 的 utility class设计深度实践了本文所讲的设计体系。
- taildinwcss 设计框架，官网里面还有很多设计资源。
- Refactoring UI，来自tailwind作者的著作，本文的基础。
结语
讲师：沈扬东
如以上有错误的地方，请在评论区中指出！
小可爱看完点个赞再走吧！😗
