前端只是切图仔？来学学给开发人看的UI设计

给开发人看的UI设计

• ???序言
• ?? 一、背景
• • 1. 想做一个好的作品
  • 2. 没有专业UI
• ??二、功能导向
• • 1. 设计中最重要的事
  • 2. 例子阐述
  • 2. 简约设计
  • 3. 设计简单的、完整的功能
• ??三、设计原则
• • 1. 层级
  • • （1）层级是什么
    • （2）举例阐述
  • 2. 一致性
  • • （1）定义
    • （2）举例阐述
    • （3）总结
  • 3. 番外 - 《写给大家看的设计书》
• ??四、设计体系
• • 1. 布局
  • • （1）居中放
    • （2）多列布局
  • 2. 间距
  • • （1）间距的定义
    • （2）间距的一些规范
    • • 1）间距——选项
      • 2）间距——多留白些
      • 3）间距——表达关联关系
  • 3. 文字
  • • （1）文字的定义
    • （2）文字的一些规范
    • • 1）文字——选项设计
      • 2）文字——对齐
      • 3）文字——行高
  • 4. 色彩
  • • （1）颜色选项——灰色
    • （2）颜色选项——主题色
    • （3）颜色选项——功能色
    • （4）使用色盘
    • （5）使用颜色的注意事项
  • 5. 深度
  • • （1）例子阐述
    • （2）阴影选项
• ??五、实用技巧
• • 1. 图片上的层级
  • • （1）增加蒙层
    • （2）给文字加阴影
  • 2. 用户头像
  • 3. 强调线
• ???六、资源
• • 1. 译作推荐
  • 2. 书籍推荐
  • 3. tailwindcss
• ??七、结束语
• 彩蛋 One More Thing
• • （：往期推荐
  • （：番外篇

??序言

对于开发人来说，不单单要会写代码，有良好的用户体验思想也是非常重要的。毕竟，开发完的内容是要给用户来使用的，而不是自己随心所欲觉得哪里想添加个内容就哪里添加。

因此呢，在下面的这篇文章中，将学习给开发人看的 UI 设计。一起来了解吧~

?? 一、背景

在讲解本文之前，先给大家抛个问题：前端为何要学习基本的 UI 设计原则和实践套路呢？

1. 想做一个好的作品

• 入行前端的同学，有不少小伙伴是被其「所见即所得」的开发体验所吸引；此外，就是能够开发一款自己有用、爱用的应用出来，并分享给其他人使用。
• 而现在市面上，已经有足够多的课程，能够让前端以「全栈」的姿态独立开发一款能用的产品出来。但当页面模块变得复杂起来时，仅仅依赖一些 UI 组件库，已经不能让产品维持在「好用」的状态。
• 追求极致的「全栈」定义，或许应当包含「设计」的角色。

2. 没有专业UI

• 你的团队里可能会有 UI 角色，但不一定专业；
• UI 给出的设计稿，许多时候只是静态的、仅体现某一交互切面的；
• 很多交互体验细节，只有在前端摆弄一个 Button