55. 组件库开发：设计规范

[ly525]

1. 首先要明确设计规范是什么？

   • 是一种在长期设计、交互、开发、过程中总结的符合审美、能够提升用户体验、减少设计师与前端、移动端工程师沟通成本的一系列最佳实践

2. 新人阅读可以避免大量的糟糕做法，提升符合用户体验的开发、设计素养

   • 比如progressbar消失，应该提供占位符，防止页面抖动，等等一系列实践，是需要总结与积累的！
   • 由此扩展，需要思考，在数据由加载中到显示，或者由显示到隐藏是否有其它一系列注意事项，避免糟糕的用户体验

这些好的做法都可以在设计规范（加上用户体验规范）中得到体现

Driving Adoption of a Design System

设计原则

易用

1. 用户可以查看被裁剪的完整内容，可以进行 copy

明确

1. 输入框需要 required
2. 按钮 disabled 需要给出 disabled 的原因

反馈

1. 反馈明显，当出现错误或更新页面状态时候，需要让用户清晰地感知到状态的变化
2. 按钮 hover、click、 disabled 点击的状态
3. 删除成功需要给出提示

落地探索

尝试自己制定一套试试

1. 落地实践参考有哪些方面呢？
   1. 在整理设计规范中变强
   2. 如何制作Sketch组件库-Web基础组件篇
2. 从哪里先开始呢？
3. 为什么要有设计规范呢？
4. 这个规范的目的是什么，是为了解决什么问题诞生的呢？
5. 它的周边生态如何呢？
   • material design
   • ant design
6. 如何与现有设计平台较好融合？
7. 有现有产品在践行这套规范吗？
8. 发现无从下手，开始读吧
   • 语雀招聘的交互设计师是P7起步，要求其对 Material Design 等设计规范有一定的了解+研究

业务实践

[B端管理系统] 上线前-Checklist #343

交互细节枚举：

1. 登录，注册最后一个输入框加上 keyup.enter

设计细节枚举（目前未分类）

1. 输入框的高度是多少合适?是否有依据？
2. 两个输入框上下间距是多少
3. 登录按钮是否要使用圆角
4. 日期选择器, 时区支持
5. 是否有统一的margin、padding（比如8X）

自己的相关总结

206. 工作总结：编辑成本 206. 工作总结：编辑成本 #206
207. 前端方法论 181. 前端方法论 #181

他山之石

352. 第三届蚂蚁金服体验科技大会 观后感 352. 第三届蚂蚁金服体验科技大会 观后感 #352