另外还有,鼠标经过的时候即可出现而不用点击的弹窗(这个弹窗通常会设计一个浮动带有阴影效果的框,不需要遮罩)。比如提示说明,显示更多信息,鼠标移过后立即消失,它不会影响下一层(当前页面内容)页面的视觉效果和操作。弱弹窗尺寸一般根据文字多少自行适配。
9.2 强反馈
第二种是强弹窗。它是一个需要用户必须对这个对话框进行操作后才可以离开。
例如弹出的列表,详情,表单等的确认信息弹窗、错误提示弹窗。这些强弹窗一般会对下面一层的页面做一些遮罩处理,例如添加上一层有透明度(例如30%,50%都可以)的黑色/白色,给下一层页面的内容做模糊滤镜等等;
在写弹框规范时,应了解各自项目中需使用弹框的有哪些内容,给出相关大小弹框的比例,哪些为固定尺寸,哪些为适配比例。以及对于通知提示给出停留多少时间后自动消失,弹窗弹出状态等等相关的交互规范。
10. 其他
缺省页是互联网中常见的场景,当遇到网络不好、页面中没有内容数据、暂无资料等等情况,所导致的空白页面。
大致分可为:系统类缺省页,信息类缺省页,空白类缺省页。
遇到这些情况时,设计师一般采用一些插画&文字的组合放置本来空白的页面中提示或引导用户进行下一步操作,以缓解用户的焦虑情绪。(也就是我们常说的情感化设计的一种方式)
二、组件库设计规范很大一部分是组件库,所以就把组件库单独拎出来聊聊。
1. 组件库是什么?
做一个比喻,组件库相当于积木玩具的一个个积木,每个组件就是一块积木,通过组件的拼搭可以迅速搭建出一个页面,而设计规范就相当于搭建的“说明书”。
通常我们将组件库分为基础组件和业务组件两大类,前者是系统通用组件(图标/按钮/输入框等),后者是由业务决定的相对更复杂的组件模块。
而对于B端产品和C端产品,二者的组件库又有些许差异。C端的组件库更追求极致的交互和视觉体验,因此需要考虑视觉、性能、实现、兼容性,另一方面,C端会根据活动、节日切换不同的主题,也要考虑组件视觉上的个性化扩展。对于B端而言,组件库更看重可复用性和稳定性,保证可以支持业务快速迭代。另外B端会涉及到各种各样的数据录入与展示,因此相对更高的要求是大而全,覆盖面广。
2. 组件库的原子理论
2.1 原子设计/拆分
在业务已经发展到一定体量情况下,需要将项目中具备复用性及拓展性的模块进行拆解,对于B端产品来说筛选的时候会依据之前迭代的版本内容,把页面一一罗列出来,将可替换与相似的模块提取,并利用思维导图的方式统一归纳,并做成可以被替换的组件。组件的替换建议合成一个大的排期进行替换,避免了线上组件不一致导致体验问题。
以我们现在的产品为例:依据产品类型将组件拆分为:基础组件 、业务组件、数据可视化组件、常用模块。
原子设计:
将产品拆分后,此时得到很多可复用组件。我们再依据原子设计理论针对性进行拆解直至拆分出5个层面:
从原子开始重新依据定好的视觉规范进行更改,再由原子组成新的分子。
3. 盒子理论
在与开发沟通设计规范制定的过程中,常提到他们写CSS样式的时候是采用盒子(box)去写的。通过一个个盒子填充来将我们的组件元素放入其中,最终形成前端展示的页面。
走查时使用浏览器我们也可以看到开发写的盒子,了解盒子也可以方便我们走查时知道问题在哪。
4. 如何搭建组件库
搭建组件库的步骤: