这里整理重新整理归纳这些我个人认为很重要的UI设计原则。作为前端开发应该有意识的关注美学，不断提高自己的审美能力。
如何快速建立一个简单的主题体系
确定主色，根据主色生成单色调的渐变色；
确定不同级别元素的大小粗细；
确定你的Space间距尺寸；
确定你不同尺寸的阴影；
确定不同尺寸的圆角尺寸；
主题色定义
字体大小定义
阴影大小定义
暗黑模式下，如何确定你的主题色调
根据主色，确定出五个等级的渐变色；
在卡片组件中测试你的颜色是否安全；
如果你的主色是暗色调，链接和按钮需要做调整；
暗黑色卡
测试暗黑
测试暗黑
确保相似的外观，功能一致
如果元素看起来长得一样，大脑会解释它们有一样的功能。
确保相似的外观，功能一致
如何突出设计层次
深色的灰色用来区分左边栏；
浅色大背景用做主要内容区；
当前播放用浅灰色突出；
线条是分割不同区块的，但是相似的元素放一起本身与其他行程区别，加线条没有必要；
如何突出设计层次
如何突出设计层次
如何突出设计层次
如何设计用户及访问性友好的按钮
应该有清晰的视觉层次；
对比度至少4.5:1；
如果按钮样式相同，两个之间的对比度要在3:1，确保视障人士能够区分；
确保有效点击范围至少在48px；
按钮之间要有足够的间距，保证不会误点，比如16px；
如何设计用户及访问性友好的按钮
如何设计用户及访问性友好的按钮
如何设计用户及访问性友好的按钮
关于UI的对齐 | 避免多种对齐方式
左对齐可以提成可读性；
文字较少时，可以居中对齐，按钮可以设置占满100%宽度；
不对齐
左对齐
居中对齐
UI操作路径尽量缩短
减少操作路径，避免相关联的操作移动距离过大；
有效点击至少48pt；
UI操作路径尽量缩短
UI操作路径尽量缩短
路径尽量缩短
关于前端字体排版
多种字体应用在UI上，将会变得难以理解和杂乱；
仅使用常规体和粗体两种粗细；
确定你的body字体大小，逐级*1.250的系数确定下一个级别的字体大小；
减少字体种类
仅用两种字体粗细
注意对比度
字体的变化比例
关于UI中的文本段落
单行不要过长，对应中文字符可以在20~40个字之间，太长用户难以回到开头和结尾；
文本也不必占满宽度，按合理的推荐字数限制，左对齐或者整体居中；
文字合理的长度尺寸
文字过长
文字长度合理
可居中对齐
如何确保浮于图片上的文字易读
添加90%到0%的黑色渐变；
添加50%的黑色蒙版覆盖图片之上；
虚化图片，增加图片和文字的对比度；
添加渐变
添加蒙版
模糊背景图
关于文案
把重要的信息放在开头；
避免使用全大写，实在要用可以把字体改下；
文字过多可以总结出每项的标题，结合图标进行分解；
避免标题过于简写，会导致有障碍人士使用屏幕阅读器无法理解；
重要信息放开头
全大小可减小大小，加大字间距
可对文字重新梳理归纳组织
标题不要过于简单，导致阅读器等无法理解
前端为什么需要了解这些UI设计原则指南
尽管UI设计是设计师美工负责的事情，掌握和了解这些设计原则，提现了一个前端是否主动学习的意愿。公司是没有多付给你UI的工资，但是，你为什么又觉得工资不到位？都是相辅相成：
了解UI设计原则规范可以提升自己的审美能力，不合理的设计应该提出来，体现自己和公司的专业，给客户带来附加的价值；
提高自己的软实力，审美能力也是竞争力；
前端开发岗如果转型产品经理、项目经理或者独立创业，优秀的审美更加能够体现产品的价值；
自己做的开源项目或者自己接的项目，没有UI的情况下可以很好的应对；