前言
前端开发，为何需要学习UI设计和实践套路？
做好作品
而现在市面上，已经有足够多的课程，能够让前端以「全栈」的姿态独立开发一款能用的产品出来。但当页面模块变得复杂起来时，仅仅依赖一些 UI 组件库，已经不能让产品维持在「好用」的状态。追求极致的「全栈」定义，或许应当包含「设计」的角色。
没有专业UI帮你
你的团队里可能会有 UI 角色，但不一定专业。UI 给出的设计稿，许多时候只是静态的、仅体现某一交互切面的。很多交互体验细节，只有在前端摆弄一个 Button 的位置和多场景状态时，才能被捕捉到。无论大厂小厂，许多 B 端产品时没有专职 UI 的角色的，前端可能要对产品最终呈现出的形态交互体验负责。
一、功能导向
功能导向可以说是设计中最重要的事了，可以说，把功能做好，或许是才是最重要的设计原则。
Google 首页变迁案例
Google 近20年来首页的变迁，从左到右，分别是1998、2005、2015年，如下图所示：
2021年的首页相比以往更为简洁极致，突出搜索功能。如图所示：
从上述例子，我们明白了设计的第一步，就是交付功能。
简约设计
有了功能基础之后，我们就可以来画原型了，简单设计就好。
用简单的创作工具
我们可以选择像纸、笔或者excalidraw这样可以立刻上手的工具是比较好的。糙一点的设计笔触可以让你不会过于追求完美，或者说是过于「追求设计」。
我们应该要迅速把框架搭好了，设计细节可以后面再补充。说白了，「功能优先」始终贯穿在设计 & 开发流程中。
当然，你也可以使用如 figma 、 Axure 之类的更专业的原型设计工具。但作为开发，建议先使用最基本的笔触和组件，克制使用颜色设计简单的、完整的功能优先关注功能。
设计简单的、完整的功能
我们在进行功能设计时，要先以 MVP 版本功能来作为设计目标。所谓 MVP ，即 Minimum Viable Product ，即最简化可实行产品。
我们来看一个留言评论的例子：
- 一个联系人列表，是否要考虑超过 2000人的展示情况？如何优化交互？
- 数据不存在时，根据不同的错误情况，应该如何准备错误信息展示，和用户引导？
- 一个图片上传模块，其复制粘贴、拖拽、 点击选择文件上传，这些路径是否
MVP版本都要做，是否都要先做好布局和引导设计？ - 在开局期间，我们要时刻提醒自己，优先把用户关键路径上的主流场景设计完成，迅速迭代其基本具有的能力。
- 这就好比开发一个游戏，我们总想着游戏各种花式的玩法。但我们在开发前应该先考虑的点是，如何先让游戏开始，这就是最简单的功能。让游戏开始了，我们才能给后面的内容迭代和升级。
二、设计原则
1、层次
层级，是你可能唯一需要关心的原则。 如果要从「维二」变为「维一」重点功能，那么层级区分，就是你最需要掌握的原则和技巧。
- 一个产品要好用，就要让用户很容易地，抓到产品重点。
- 在重点里，用户能自在地进入沉浸式阅读、和使用的状态；
- 当用户想探索其他内容时，ta 能轻松地识别网站的次要板块还有哪些，焦点能迅速转移，并迅速沉浸；
- 辅助提示信息，精确而又不会打扰各主要模块的呈现。
上述两种设计，还是有蛮大的差别。第1种，Overview 字体比较突出，知道这个是重点，但是下面文字都是白底黑子，以为都是一个整体，看不出层次。第2种，层级就分明了，上面看板数据加上了背景突出重点，下面表格数据颜色偏灰，属于次要内容。
2、一致性
所谓一致性，指的是用户在站点的各个角落，观察到颜色、间距、阴影、位置、字体和字重的应用，且都在一套有限的框架里，一套能够迅速建立亲切感的框架内。
飞书案例
以飞书文档为例，我们来进行一个说明： 当页面中，主要的交互和视觉元素都采用同一主题色（图中为蓝色）来表示时，用户可以迅速知道：
- 页面中有哪些元素是可交互的
- 我需要的提示信息在哪
表单案例
表单中 label 和输入框之间、以及输入项之间有序且固定的间距，可以帮助用户迅速识别当前填写的表单项是什么内容、以及稳定地将视线移动到下一个表单项上。下图是没有用好间距的反例：
如果减小label和输入框的间距，每个表单项就是一个整体，这样用户在视觉上很快就辨识有多少表单项，效果如下图：
3、番外：《写给大家看的设计书》
这里补充提一本书 ——《写给大家看的设计书》，应该是不少人的设计启蒙书。
在这里，我简单介绍下《写给大家看的设计书》四大原则：
-
对比： 如果两个元素内涵不同，请让它们截然相同；
-
重复： 设计的视觉要素应当在整个作品中重复出现；
-
亲密性： 彼此关联的元素应当靠近和放置在一起；
-
对齐： 任何元素都不能随意安放，应当总是与另外至少一个元素有视觉上的关联
这四大原则，就与前面我们总结的两大原则相呼应上了。来看下具体的关联：
-
层级，就是亲密性+对比的目标。让用户抓重点、切视线，又快又稳。
-
一致性，就是对齐+重复，克制用户视线所感受的尺度，迅速与网站设计语言建立熟悉感。
书中还有更多关于四原则的解释和其他排版设计的技巧，这里也推荐给大家延伸阅读。
三、设计体系
1、布局
居中放
我们先来介绍一个最基本的布局技巧，内容居中放。
如果你是遵循「功能导向」，边开发基础能力边设计迭代的开发过程，那么前期你的功能应当是比较简单的。单列式的居中布局，应该能满足你的需求。
例如上述 Google 的案例，重点搜索功能居中显示：
很多场景下，居中放也是很有意义的。除非大屏浏览是你的核心场景，不然一般来说，你的内容宽度应该在 600 ~ 800px 之间，类似一本书的宽度。
多列布局
多列布局的核心也是保持内容的一个合适宽度，维持可读性。
一般规则是：主要内容列弹性收缩（可以有最小宽度），次要列固定宽度。
2、间距
保证元素间有基本的间距，是最基本的设计技巧。
间距——选项
关于设计选项的说明：
设计体系，除了满足「一致性」原则，另外也是帮设计者提前设计好选项。有了这些选项，我们再具体场景中可以逐个尝试，来试出最优解。比起每次都拍脑门决策，在选项里调优能大大加快设计的步伐。
间距，我们常用基于 4px 的倍数，如下设计了十数种间距选项：
观察这十数种间距选项，我们可以发现这是 一个类似指数增长的图表📈。这是因为两个相邻间距，在大尺度上，要比小尺度里拉的更开，才能在视线里体现出间距差距。
小尺度里，4px 的差距就是 20% 的增幅；500px 的尺度中，20px 的增长只有提升 4% 的效果，如图所示：
间距——多留白些
设计间距有两种方向：从紧到松，或从多到少。
如果选择从紧到松，有时会让人过于聚焦于局部，不清楚它还需要多少间距。
从松到紧，就容易把控多了。
一般来说，松也比过紧好。从一开始就留多些空间吧。
所以间距一大设计技巧:安排元素时建议「从松到紧」来调试间距。
别抬杠，如果是表格和信息清单可能就需要不同的考虑。
间距——表达关联关系
除了方便阅读，间距也是最合适表达关联关系的工具。
下图中的间距差异设计，表明了每个章节的起点，以及标题和段落的关联性。
暧昧的行高和列表项间距，会让用户难以判断阅读时的停顿点在哪，当前列表项是否已结束。看下图感受下模糊行高和间距合适的区别：
间距是远比色块、边框、分界线之类的更适合用来表达关联关系的工具。值得多加练习运用。
3、文字
文本是站点的主要内容载体;字体设计自然也是重中之重。 既然我们在讲设计体系，以一致性为目标。同样地，我们要把站点所使用的字号、字重等范围框定在十数个选项中。
文字——选项设计
相比于间距设计，字号大小我们有一个明显的适 合阅读的字号范围，如 12 ~ 20px。那么我们会更多在这个范围内设置字体选项。
仅通过字号来设置层级，很快就会捉襟见肘。结合字重 & 颜色(灰度)，你会更游刃有余。 字重是 css 自带的，用好常用的 3、4 个尺度就好。
组合大致可以是三种灰度（黑、灰、浅灰）✖️两种字重。应该足够展示所需的层级。
文字——对齐
不同字号大小的字体间如何对齐呢?基于 baseline 对齐，就是文本的下边缘。 baseline 是一个字符的重心;重心对齐了，用户在移动视线时就能有平稳的阅读体验。
文字——行高
基本所有的文本设计意图都是为了保持良好的阅读体验，行高也不例外。
具体到设计哲学，就是:行高和字号大小大致成反比，目标是用户在视线换行时有稳定的下移体验。下面有个反例，没有使用好行高，所有内容都粘到一块，很影响阅读体验，如图所示：
段落越宽，行高需要越高，如图所示：
字体大小与行高成反比，道理如何理解呢？小字体比大字体更依赖行高拉开视线到下一行的距离。
4、色彩
到颜色部分了。我们前端使用css写样式时，常用到 hex & rgb 颜色格式。但是有个痛点：一组颜色接近的 hex 并不能反映出其相关联的性质。
除了 hex & rgb，还可以选择 hsl：色相（hue）、饱和度（saturation）& 亮度（lightness）。色相可以清晰地表现出这组颜色的相关性。
色相是颜色的基本属性：0 对红；120 对绿；240 对蓝。
饱和度表示颜色的绚丽程度。所以黑白灰都是颜色中性的。
亮度则反映了颜色距离黑、白二色的距离。
颜色选项——灰色
你选择的色彩库应该有 10 种左右的灰色供你选择。从文字到背景都用得着。
颜色选项——主题色
大部分站点都少不了一两个贯穿全局的主题 色;它出现在按钮、logo、背景、各种修饰 元素之上，是品牌的记忆元素。
颜色选项——功能色
有一些常见的颜色，被广泛地用来表达某些固定的语义信息。
- 红色，传达错误信息，或提示危险操作。
- 黄色表示警告。
- 绿色表示一些积极的变化，以示成功或增长的信息。
使用色盘
我们在网页使用颜色之前，还是老老实实把调色盘设计完整，这样方便选择主题色和功能色，比如下图色盘：
我们准备好了这么多由深入浅的颜色，那该如何使用呢？
比如，使用浅色背景深色前景。浅色色块相较于白色背景对比度不大，适合不用过于抢夺眼球的场景。如下图所示：
5、深度
制造深度的技巧，八成与阴影设计有关。深度补充了间距，从另一个维度上体现了层级。这是为什么？
这种深度的感官来自日常生活。平时我们是怎么感受平面上的深度的？答案是：自上而下的光照打 。在平面上所造成的阴影。模拟这个现象，我们便可以实现网页元素的「深度」体验。
大家可以看到，在上面的这张图中，它的的光就是自上而下的光照打。
阴影选项
阴影选项常见的有如下几种：
看了上面的阴影选项，我们大致可以将阴影分为如下几类：
- 小的阴影可以使元素略微突出，但不至于抢夺眼球。
- 中等阴影适用于小型弹出的模块，如下拉框。
- 最深的阴影则用于彻底地将模块与页面区分开来的场景。
四、实用技巧
1、图片上的层级
如果我们遇到图片上的色块斑驳不一，难以找到合适的前景色。这个时候我们应该咋办呢？
增加蒙层
我们可以通过增加蒙层，来显示图片的层级。如下图所示：
给文字加阴影
除此之外呢，你可以选择给文字加上阴影。 css 可以轻松地做到，只增加文字部分的对比度，而不影响整张图片的阅读体验。
2、明晰的用户头像
很多网站都会使用用户头像，如何在任何情况下都能清晰地展示内容会是个问题。
上图，有个头像是白色背景，整体看着不协调。那怎么解决这个问题呢？
- 加个
border。但加个border呢，又有点差强人意了，不一定能搭配好。 - 加点内阴影。相当于圈用户头像的外层做边框，这就非常精巧了。
3、干掉分界线
边框、分界线，这些用着有股 table 味儿，有点土，如下图所示：
阴影是个方案。适合在背景色有区分的边界。
连续相间的两种背景色，可以轻松抹去不同功能模块之间的边框。
间距清晰的话，也就不需要分界线了。
五、项目实践应用
学习上述的设计理论知识，我们要真正能运用到项目中才能创造价值。实战项目中，为了统一网站整体风格、设计理念，团队会先去制定公共样式的规范再来进行具体业务编码，比如字体图标、文字大小的选项、按钮大小/颜色的选项、圆角边框等。下图是参加青训营和小伙伴一起做项目时制定的设计规范：
如果是大型复杂的项目，我们会确定一套UI组件库（开源/定制化开发），然后引入到项目中来，团队协作开发时都使用公共UI组件库，这样就能达到统一网站风格的目的啦。
