丰富的线上&线下活动，深入探索云世界
做任务，得社区积分和周边
最真实的开发者用云体验
让每位学生受益于普惠算力
让创作激发创新
资深技术专家手把手带教
遇见技术追梦人
技术交流，直击现场
海量开发者使用工具、手册，免费下载
极速、全面、稳定、安全的开源镜像
开发手册、白皮书、案例集等实战精华
为开发者定制的Chrome浏览器插件
对于开发人来说，不单单要会写代码，有良好的用户体验思想也是非常重要的。毕竟，开发完的内容是要给用户来使用的，而不是自己随心所欲觉得哪里想添加个内容就哪里添加。
在讲解本文之前，先给大家抛个问题：前端为何要学习基本的UI设计原则和实践套路呢？
功能导向可以说是设计中最重要的事了，可以说，把功能做好，或许是最重要的设计原则。
我们来看一个例子：
下面先看Google近20年来首页的变迁，从左到右，分别是1998、2005、2015年，如下图所示：
现在，我们来看2021年的，如下图所示：
大家可以看到，从一开始的内容堆叠，到最后的只显示一个搜索框，把用户最想要的内容显示出来了。或许，这就是功能导向的一个典型例子。
有了功能基础之后，我们就可以来画原型了，那么这里我想要介绍的是一些简单的创作工具。
我们应该要迅速把框架搭好了，设计细节可以后面再补充。说白了，「功能优先」始终贯穿在设计&开发流程中。
我们在进行功能设计时，要先以MVP版本功能来作为设计目标。所谓MVP，即MinimumViableProduct，即最简化可实行产品。
来看一个留言功能，如下图所示：
大家可以看到，短短几句话，简明扼要的概括出来最完整的功能，把MVP的内容给体现出来了。
比如，大家可以来看下面这两个网站。你觉得那张图片展示了更好的阅读体验呢？
相信很多小伙伴内心的答案都是第二张图片。在第一张图片当中，内容没有怎么体现出分层，而是一整张图片黑黑白白的，也不知道哪里是重点。而在第二章图片中，明显上面蓝色方框内的内容第一眼就抓住了用户的眼球，很清晰的让用户了解到这张图的用意在哪。
所以你说，哪一张的阅读体验更好呢？
所谓一致性，指的是用户在站点的各个角落，观察到颜色、间距、阴影、位置、字体和字重的应用，且都在一套有限的框架里，一套能够迅速建立亲切感的框架内。
什么意思呢？
以飞书文档为例，我们来进行一个说明：
当页面中，主要的交互和视觉元素都采用同一主题色（图中为蓝色）来表示时，用户可以迅速知道：
再比如下面这张图：
在这张图中，表单中label和输入框之间、以及输入项之间有序且固定的间距，可以帮助用户迅速识别当前填写的表单项是什么内容、以及稳定地将视线移动到下一个表单项上。
通过上面的例子，相信大家对设计的一致性也有了一定的了解。
所以，能否克制，且重复、精确地运用着拟定好的设计体系，会在方方面面上影响着一个站点的质感，同时这也是体现专业性的考量。
看下面这张图：
这里给大家补充一本书——《写给大家看的设计书》，这本书应该是不少人的设计启蒙书。
在这里，我简单介绍下《写给大家看的设计书》四大原则：
这四大原则，就与前面我们总结的两大原则相呼应上了。来看下具体的关联：
书中还有更多关于四原则的解释和其他排版设计的技巧，这里也推荐给大家延伸阅读。
我们先来介绍一个最基本的布局技巧，内容居中放。
如果你是遵循「功能导向」，边开发基础能力边设计迭代的开发过程，那么前期你的功能应当是比较简单的。单列式的居中布局，应该能满足你的需求。
比如像下面这样：
很多场景下，居中放也是很有意义的。除非大屏浏览是你的核心场景，不然一般来说，你的内容宽度应该在600~800px之间，类似一本书的宽度。
像下面这样：
多列布局的核心也是保持内容的一个合适宽度，维持可读性。
一般规则是：主要内容列弹性收缩（可以有最小宽度），次要列固定宽度。
如下图所示：
保证元素间有基本的间距，是最基本的设计技巧。
现在我们来看一些关于间距的规范。
基于4px的倍数，设计出数十种间距的选项。如下图所示：
现在，我们来说明一下这十种设计选项的一些具体内容：
来看一个button的例子：
大家可以看到，我们把图标以4px的倍数进行增长，慢慢地变得越来越饱和，越来越好看。基于4px的选项，我们是不是就更加加快了我们的设计步伐了呢。
观察这数十种间距的选项，我们可以发现这是一个类似指数增长的图表。这是因为两个相邻间距，在大尺度上，要比小尺度里拉的更开，才能在视线里体现出间距的差距。
我们用一张图来比较一下大小尺度里的区别：
大家先看左边的内容，在小尺度里，4px的差距就是20%的增幅；再看右边的内容，右图500px的尺度中，20px的增长只有提升4%的效果。
这是一个间距设计技巧：安排元素时建议先大大的留空，也就是「从松到紧」来调试间距。如下图所示：
我们来对上面这组图进行一个比较。
由紧到松类型
先来看一张图：
这张图是由紧到松，那么你的思维是「尝试把无关的元素拉开」，而且是「从整体到局部」的方向，这就不太好操作。
举个例子：
你想先拉开每个段落间距10px，再调段落内标题与内容的间距4px，但发现拉的不够开；这时要回过头将段落间间距拉到20px，这样段落内才好安排10px的间距……
由松到紧类型
一般来说，偏松也比偏紧好。从一开始就留些空间吧。
文本是站点的主要内容载体；字体设计自然也是重中之重。
既然我们在讲设计体系，以一致性为目标。那么同样地，我们也要把站点所使用的字号、字重等范围框定在数十个选项中。
数十个是个magicnumber，大部分情况下应该都能满足。只要场景够特殊，特殊字体完全可以再加。
相比于间距设计，字号大小我们有一个明显的适合阅读的字号范围，如12~20px。那么我们会更多在这个范围内设置字体选项。
来看下选项设计的10大范围，如下图所示：
但是呢，仅通过字号来设置层级，很快就会捉襟见肘。因此我们要结合字重&颜色（灰度），你会更加地游刃有余。
字重是css自带的，用好常用的3、4个尺度就好了。
来看一个例子：
大家可以看到，在右边的这张图当中，我们适当的使用了字重和颜色，以使得页面的内容更突出，内容更为饱和。
不同字号大小的字体间如何对齐呢？我们应该要基于baseline对齐，就是文本的下边缘。
baseline是一个字符的重心；重心对齐了，用户在移动视线时就能有平稳的阅读体验。
基本上，对于所有的文本设计来说，其意图都是为了保持良好的阅读体验，那么行高也不例外。
具体到设计哲学，就是：行高和字号大小大致成反比，目标是用户在视线换行时有稳定的下移体验。
现在，到颜色部分了，谁不爱颜色呢？同样地，与上面一样的归纳步骤，我们来对颜色进行一个归纳。
在你的色彩库中，应该要有10种左右的灰色来提供使用，并且这些颜色从文字到背景都用得上。如下图所示：
大部分站点都少不了一两个贯穿全局的主题色；它出现在按钮、logo、背景、各种修饰元素之上，是品牌的记忆元素。如下图所示：
有一些常见的颜色，被广泛地用来表达某些固定的语义信息。
红色，传达错误信息，或提示危险操作。
黄色，表示警告。
绿色，表示一些积极的变化，以示成功或增长的信息。
前面我们准备好了这么多由深入浅的颜色，那该如何使用呢？
我们可以作为前景和背景色来使用。主要标题可以用最亮的白色；次要标题挑一个背景颜色的浅色版本。
再来看另外一种用法，即浅色背景深色前景的用法。浅色色块相较于白色背景对比度不大，适合不用过于抢夺眼球的场景。如下图所示：
颜色虽好，但使用不当会很容易打破页面层级的平衡。来看一个例子：
还有一种情况是，色盲的用户消费不了颜色，颜色在不同的文化中可能表示不同的含义。如下图：
大家可以看到，在上面这张图中，左上角的图是我们普通用户所看到的图，而左下角的图是色盲用户所看到的图。
制造深度的技巧，八成与阴影设计有关。
深度补充了间距，从另一个维度上体现了层级。这是为什么？
这种深度的感官来自日常生活。平时我们是怎么感受平面上的深度的？答案是：自上而下的光照打。
在平面上所造成的阴影。模拟这个现象，我们便可以实现网页元素的「深度」体验。
大家可以看到，在上面的这张图中，它的的光就是自上而下的光照打。
下面我们来看一些常见的阴影选项。如下图所示：
看了上面的一些常见选项后，我们现在来梳理各种大小的阴影所造成的影响。具体如下：
如下所示：
如果我们遇到图片上的色块斑驳不一，难以找到合适的前景色。这个时候我们应该咋办哩？
比如下面这张图：
下面我们来介绍解决这种问题的几种方法。
我们可以通过增加蒙层，来显示图片的层级。如下图所示：
除此之外呢，你可以选择给文字加上阴影。css可以轻松地做到，只增加文字部分的对比度，而不影响整张图片的阅读体验。
不管是在什么样的app，我们基本上都有上传图片的环节。那么，如何使得在任何的情况下，都能够清晰地展示用户头像里面的内容会是一个问题。
我们先来看这张图：
大家可以看到，在上面的这张图中，有一些用户头像出现了空白，这样间接地会使得我们不清楚整个用户头像实际上的尺寸是多少。
由小伙伴可能会首先想到，加个border。但加个border呢，又有点差强人意了，不一定能搭配好。
有个好方法就是，加点内阴影。相当于圈用户头像的外层做边框，这就非常精巧了。
有时候，我们会很喜欢把表格类的设计给加上一些边框和分界线，但是这似乎看起来alittle土。如下左图所示：
大家可以看到，加了边框，就很像传统的table一样，有一点点不美观。
所以呢，如上边右图一样，我们可以用阴影或者不同的背景块来代替边框。这样，间距其实也就清晰了，所以我们也就不需要什么分界线了。
tailwind的utilityclass设计，深度实践了本文所讲的设计体系。
到这里，关于给开发人看的UI设计讲解就结束啦！希望对大家有帮助~