等等

根据组件的用途,可以分为六大类:Feedback 反馈、form 表单、basic 基础、data 数据 、navigation 导航、other 其他。

用户在使用网站过程中,数值可直观的提醒用户当前所处的状态,通过准确的量化数值让用户对当前的状态有更准确的感知。

 

Badge 微标数

定义:通过数字或者红点提示用户消息或状态等情况

 

使用场景:

1.一般出现在通知图标或头像的右上角,用于显示需要处理的消息条数,通过醒目视觉形式吸引用户处理。

2.提示用户有新更新关注的信息。

 

例如:知乎的消息提醒和私信,都是通过徽标数来提示用户待办处理事项数量。

 

数字样式:较强提醒,让用户知道和用户相关提示信息数量,引导用户处理。

 

红点样式:弱提示,告知用户有相关的提示消息,不告诉具体的数量,需要用户去手动通过查看详情消除。

 

自定义:通过自定义样式提示用户以此达到设计目的。

 

Uploading 上传

定义:通过点击或者把文件拖入指定区域,从而把本地文件上传到服务端。

 

使用场景:

1.需要上传一个或一些文件或图像

2.当需要展现上传的进度时。

 

点击上传:当鼠标hover在上传当列表上时,出现删除按钮,点击删除,无需二次确认。未上传完成不显示上传的时间。

 

拖拽上传:可拖拽文件进入指定区域上传。

 

图片上传:可以看预览态,当有图片数量显示时,达到限制时,添加操作隐藏。

 

Progress 进度条

定义:用于展示操作进度,告知用户当前状态和预期。

 

使用场景:

1.上传、下载过程中由于需要较长时间的等待,需要一个进度表示当前情况。

2.当需要展现上传的进度时。

每次显示进度只能由一个活动指示器呈现,不能即使用线形进度条又用圆形进度器来指示。

 

线形进度条:应始终从0%到100%显示,绝不能从高到低反着来。

 

圆形进度指示器: 圆形加载样式,不含取消按钮操作。

 

Loading 加载

定义:用户在网页上进行操作,网页发送请求到服务器,服务器处理请求,返回数据给网页并显示给用户,这一过程成为加载。由于加载过程会需要一定的时间,所以需要加载动效会有效缓解用户的焦虑,并起到提示用户正在加载。

 

使用场景:

1.页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。

 

全屏加载:整个界面整体加载,所有信息加载完成,页面才展示信息。加载loading可以含有进度,可不含进度。

分步加载:先加载文字,文字加载完成之后再加载图片例如淘宝。

 

组件加载:常见的是点击操作按钮,这时候需要一个加载提交过程,加载在组件中展示,减少页面的视觉的干扰。

 

 

相关阅读:

如何构建Web端设计规范

设计规范 | Web端设计组件篇-反馈类

Web端设计组件篇-导航类

设计规范 | Web端设计组件篇-级联、数字输入、单复选框和开关

设计规范 | Web端设计组件篇-树和日期时间选择器

设计规范 | Web端设计组件篇-文本与选择器

 

原文地址:吴轶(公众号)

作者:Echo

转载请注明:韦德1946 » 设计规范 | Web端设计组件篇-数据类

登录收藏
 
你可能喜欢的:
设计规范 | Web端设计组件篇-其他类设计规范 | Web端设计组件篇-其他类
设计规范 | Web端设计组件篇:级联、数字输入、单复选框和开关设计规范 | Web端设计组件篇:级联、数字输入、单复选框和开关
设计规范 | Web端设计组件篇-导航类设计规范 | Web端设计组件篇-导航类
如何在UI设计中使用格式塔原则如何在UI设计中使用格式塔原则
AI聊天机器人设计指南AI聊天机器人设计指南
如何系统性提升中后台产品体验如何系统性提升中后台产品体验
「专辑」提升渐变质感技法(持续更新)「专辑」提升渐变质感技法(持续更新)
一个案例掌握LOGO标准化制图!一个案例掌握LOGO标准化制图!
【原创】设计规范如何更新迭代【原创】设计规范如何更新迭代
关于适配这件小事的前世今生关于适配这件小事的前世今生