相关阅读：
设计规范 | Web端设计组件篇－级联、数字输入、单复选框和开关
根据组件的用途，可以分为六大类：Feedback 反馈、form 表单、basic 基础、data 数据 、navigation 导航、other 其他。
用户在使用网站过程中，数值可直观的提醒用户当前所处的状态，通过准确的量化数值让用户对当前的状态有更准确的感知。
Badge 微标数
定义：通过数字或者红点提示用户消息或状态等情况
使用场景：
1.一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
2.提示用户有新更新关注的信息。
例如知乎的消息提醒和私信，都是通过徽标数来提示用户待办处理事项数量。
数字样式：较强提醒，让用户知道和用户相关提示信息数量，引导用户处理。
红点样式：弱提示，告知用户有相关的提示消息，不告诉具体的数量，需要用户去手动通过查看详情消除。
自定义：通过自定义样式提示用户以此达到设计目的。
Uploading 上传
定义：通过点击或者把文件拖入指定区域，从而把本地文件上传到服务端。
使用场景：
1.需要上传一个或一些文件或图像
2.当需要展现上传的进度时。
点击上传：当鼠标hover在上传当列表上时，出现删除按钮，点击删除，无需二次确认。未上传完成不显示上传的时间。
拖拽上传：可拖拽文件进入指定区域上传。
图片上传：可以看预览态，当有图片数量显示时，达到限制时，添加操作隐藏。
Progress 进度条
定义：用于展示操作进度，告知用户当前状态和预期。
使用场景：
1.上传、下载过程中由于需要较长时间的等待，需要一个进度表示当前情况。
2.当需要展现上传的进度时。
每次显示进度只能由一个活动指示器呈现，不能即使用线形进度条又用圆形进度器来指示。
线形进度条：应始终从0％到100％显示，绝不能从高到低反着来。
圆形进度指示器: 圆形加载样式，不含取消按钮操作。
Loading加载
定义：用户在网页上进行操作，网页发送请求到服务器，服务器处理请求，返回数据给网页并显示给用户，这一过程成为加载。由于加载过程会需要一定的时间，所以需要加载动效会有效缓解用户的焦虑，并起到提示用户正在加载。
使用场景：
1.页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
全屏加载：整个界面整体加载，所有信息加载完成，页面才展示信息。加载loading可以含有进度，可不含进度。
分步加载：先加载文字，文字加载完成之后再加载图片例如淘宝。
组件加载：常见的是点击操作按钮，这时候需要一个加载提交过程，加载在组件中展示，减少页面的视觉的干扰。
原文始发于微信公众号（吴轶）：设计规范 | Web端设计组件篇－数据类
评论0