这是我参与「第五届青训营」伴学笔记创作活动的第 17 天
注意点
- 明确需求，有哪些点是需要定制化设计的，是样式还是性能(是否需要节流)
- 确认主题也就是type，颜色，disabled，loading，size这些，要提取一个常量出来同一设置，可能有样式优先级，以及hover、focus样式。通过定义prop从父组件传值过来
- 可能适配什么设备，做响应式。
- 处理一些边界条件，比如文本超长了
- 给点击事件绑定回调函数，可能做防抖节流优化
- 可能设置icon就再加一个组件引入
提出问题比解决问题更难。 设计难于实现，你应当花70%的时间来设计而不是用来实现。有的设计者甚至不参与实现，设计者与实现者的身份也是随时在转换的，善于思考的实现者本身就是设计者。
四要素
- 属性
- 方法
- 事件
- 子视图（插槽） 除了基本的四要素外，我们还需要注意这些也是组件api的一部分：
- 属性的类型、是否必填、默认值（属性类型确定后不再变化）
- 方法的参数、返回值（需要考虑变化的情况）
- 事件回调函数的参数
- 插槽可获取到的局部参数
在设计时，应当小心谨慎面对每一个api的要素，哪一个环节出现了设计缺陷，对于调用者都是如鲠在喉。
要求
作为前端UI组件库，从样式角度去看，应当满足两方面要求：一致性和可定制。
那和组件库密切相关的设计规范体现在哪些方面呢？前几天饿了么前端架构师 林溪 在《Vue组件库建设实践》分享里提到有以下内容：
-
统一视觉样式
- 色彩
- 布局
- 字体
- 图标
-
统一交互动效
- 时长、缓动
- 移动路径
- 形变、编排
设计规范如何落地？
其实上面有一个关键词： 统一 。 我们如何保证样式统一？没错，就是刚才提到的通用变量（但我仍然不会认同“设计规范 = 通用变量”，很难表达出这种感觉），以 antd-mobile 为例，具体包含以下内容[2]：
- 颜色（字体、填充、全局、边框、透明度）
- 字体尺寸
- 字体族
- 圆角
- 边框尺寸
- 间距（水平、垂直）
- 高度
- 图标尺寸
- 部分组件样式
其实理解了设计规范，我们再来反过来理解组件库里面的通用变量就会感觉其实变量之间其实也是存在某种内在体系的，在写具体组件的样式时就更会或者更能遵守这套规范，而不是胡乱定义了。
