另外还有，鼠标经过的时候即可出现而不用点击的弹窗（这个弹窗通常会设计一个浮动带有阴影效果的框，不需要遮罩）。比如提示说明，显示更多信息，鼠标移过后立即消失，它不会影响下一层（当前页面内容）页面的视觉效果和操作。弱弹窗尺寸一般根据文字多少自行适配。

9.2 强反馈

第二种是强弹窗。它是一个需要用户必须对这个对话框进行操作后才可以离开。

例如弹出的列表，详情，表单等的确认信息弹窗、错误提示弹窗。这些强弹窗一般会对下面一层的页面做一些遮罩处理，例如添加上一层有透明度（例如30%，50%都可以）的黑色/白色，给下一层页面的内容做模糊滤镜等等；

在写弹框规范时，应了解各自项目中需使用弹框的有哪些内容，给出相关大小弹框的比例，哪些为固定尺寸，哪些为适配比例。以及对于通知提示给出停留多少时间后自动消失，弹窗弹出状态等等相关的交互规范。

10. 其他

缺省页是互联网中常见的场景，当遇到网络不好、页面中没有内容数据、暂无资料等等情况，所导致的空白页面。

大致分可为：系统类缺省页，信息类缺省页，空白类缺省页。

遇到这些情况时，设计师一般采用一些插画&文字的组合放置本来空白的页面中提示或引导用户进行下一步操作，以缓解用户的焦虑情绪。（也就是我们常说的情感化设计的一种方式）

设计规范很大一部分是组件库，所以就把组件库单独拎出来聊聊。

1. 组件库是什么？

做一个比喻，组件库相当于积木玩具的一个个积木，每个组件就是一块积木，通过组件的拼搭可以迅速搭建出一个页面，而设计规范就相当于搭建的“说明书”。

通常我们将组件库分为基础组件和业务组件两大类，前者是系统通用组件（图标/按钮/输入框等），后者是由业务决定的相对更复杂的组件模块。

而对于B端产品和C端产品，二者的组件库又有些许差异。C端的组件库更追求极致的交互和视觉体验，因此需要考虑视觉、性能、实现、兼容性，另一方面，C端会根据活动、节日切换不同的主题，也要考虑组件视觉上的个性化扩展。对于B端而言，组件库更看重可复用性和稳定性，保证可以支持业务快速迭代。另外B端会涉及到各种各样的数据录入与展示，因此相对更高的要求是大而全，覆盖面广。

2. 组件库的原子理论

2.1 原子设计/拆分

在业务已经发展到一定体量情况下，需要将项目中具备复用性及拓展性的模块进行拆解，对于B端产品来说筛选的时候会依据之前迭代的版本内容，把页面一一罗列出来，将可替换与相似的模块提取，并利用思维导图的方式统一归纳，并做成可以被替换的组件。组件的替换建议合成一个大的排期进行替换，避免了线上组件不一致导致体验问题。

以我们现在的产品为例：依据产品类型将组件拆分为：基础组件 、业务组件、数据可视化组件、常用模块。

原子设计：

将产品拆分后，此时得到很多可复用组件。我们再依据原子设计理论针对性进行拆解直至拆分出5个层面：

从原子开始重新依据定好的视觉规范进行更改，再由原子组成新的分子。

3. 盒子理论

在与开发沟通设计规范制定的过程中，常提到他们写CSS样式的时候是采用盒子（box）去写的。通过一个个盒子填充来将我们的组件元素放入其中，最终形成前端展示的页面。

走查时使用浏览器我们也可以看到开发写的盒子，了解盒子也可以方便我们走查时知道问题在哪。

4. 如何搭建组件库

搭建组件库的步骤：