下面这两个页面，几乎一样的布局排版，但是完全不同的质感
下面我就来拆解下：怎么避开平庸感UI，打造高级感。
毕竟，有时候就算项目里有UI，在迭代中，有的时候也来不及让设计师去设计了，这个时候前端就得自己小设计一下。
先说结论： 好看的UI是系统化设计的结果， 具体的看拆解吧~
颜色
高饱和+高亮度的纯色更显廉价
平庸的UI一般主色就没选对，比如非设计人员可能选中的高饱和色+高亮度的纯色。
什么是高饱和度颜色呢？
高饱和度的颜色（High Saturation Colors）指的是色彩纯度极高、几乎不含灰度的颜色
这种颜色非常显眼，但是它有2个缺点：
1. 久看容易视觉疲劳，无法大面积应用
2. 它太过鲜亮，难以和其他颜色搭配好
为什么低饱和色比高饱和色更容易显得好看点呢？
因为低饱和度里加入灰色，会显得更加柔和。
有没有觉得左边的高饱和看起来很费眼
所以一般设计师不会选用纯色，而是会调整它的饱和度和明度等。
再来一组对比
左边的几个高饱和度颜色，除了第四个土豪金好看点，其他的都显得有点古早设计风
那么，高饱和度的颜色是不是就一定不好看呢咱们来拆解分析下为什么同样是高饱和度，那为什么它看起来不错呢
当颜色的饱和度很高，那么就调整颜色的其他地方
尽管这个蓝色的饱和度在 HSL 模型中显示为 100%，但实际视觉效果并不刺眼。
原因在于：
色相位置：位于蓝色到青色的过渡区（214°），相比纯蓝（240°）更柔和。 亮度平衡：56% 的亮度中和了高饱和度的冲击感。 RGB 混合：绿色通道（G=128）的加入降低了“纯色”的尖锐感。
舒服的UI是系统配色的结果
我们还是以蓝色来对比
可以发现以下规律：
深色背景用浅色文字 浅色背景用深色文字 同样想要起到强调作用， 同样是蓝色，掘金有一个深蓝色背景和浅蓝色背景，浅蓝色的文字颜色用的深蓝和上面的神色背景同色 浅蓝色和深蓝色都位于蓝色色相区，（Hue值在214°-220°之间），同属于冷色系。他们的色相差异只有6°，视觉上为相近的蓝调
而右侧的随意配色则不同，色相差的挺远， 背景色和文字色的对比度远低于国际标准
平庸的UI缺乏呼吸感
呼吸感是什么意思呢？
适度的留白
Material design建议间距采用8dp基准间距， 这个其实不同的设备下1dp对应的px是不同的。
为了简化效果，可以这样：
间距层级的划分
| 元素级间距 | |||
| 组件级间距 | |||
| 模块级间距 |
这样，执行起来方便点，可以方便的根据不同类型的元素来设置间距。
为什么是8呢？
ios规范和安卓规范都提到过8*8的网格系统
文字
字号
这个字号的对比图截图一直有问题，所以我分成两张图了
中文英文
操作系统本身的中文字体非常少
默认来说， 中文在浏览器里很难有英文那么好看， 操作系统自带的英文字体非常多。
英文不管怎么变，都是26个字母组成的，而中文不同，每个汉字在字体设计里都是单独的，所以导致中文字体包默认会非常大。
以前我刚进一家设计师在局部用过一个黑猫字体，当时
字重
我们设计师设计的图片美观度是不错的，她们用的figma里，字体的粗细感觉可以从200-1500(这个我是大略估计，不一定准）。
而操作系统对英文加粗的支持还不错，但是对中文字体的加粗就...只有bold和bolder。
上对比，让你直观的感受下，不同的字重对视觉的影响
这个问题，中文基本上无解，除非你手动引入字体文件，但是默认引入的文件又会很大
操作系统自带的中文一般是没有带间距的，一些对视觉要求高点页面可以自己设置一个默认的小点的间距
小图标增强精致感
页面上有小图标的话
可以明显增强页面的精致感 图标+文字 提升50%识别速度（数据来自 Nielsen Norman研究数据） 操作识别 速度提升2倍（数据来自 Google Material Design研究）
来看没图标和有图标的对比图
我们使用图标要注意的一点是，图标风格一定要统一，比如：线性，面性，扁平化，或者磨砂感，手绘。
本来这篇文章我想了很多点，但是想将讲的内容太多，一篇文章我不想弄太长，所以准备分成几篇写。
这次主要讲应该避开的坑， 下次就着重讲怎么设计苹果优质风格的精致感吧。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
