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