B端通用组件使用法则(四)

一、数据展示

数据展示类组件可以让界面的信息更合理、更有序地展现,有助于用户阅读。

1. 设计原则

1)合理展现

使用合理的数据展示方式,可以帮助用户高效获取信息。

2)低频收纳

中后台系统数据量很大,设计者要考虑将用户低频使用的数据进行收纳,给予高频数据更充分地展示空间。

3)状态提示

数据会存在一定的状态,合理的状态提示,使用户的下一步操作目标更明确。

2. 徽标数

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

B端通用组件使用法则(四)-数据展示、其他

3. 折叠面板

折叠面板通过对界面信息的分组和收纳,提高界面的使用率。

B端通用组件使用法则(四)-数据展示、其他

4. 时间轴

以纵向信息流的方式组织和展现信息。

  1. 通常这一系列信息具有很强的时间属性,可正序或者倒序排列。
  2. 时间通常为主要字段,重点展示,顺着时间,引导用户查阅信息。

B端通用组件使用法则(四)-数据展示、其他

5. 时间轴(带操作)

时间轴中单个时间节点上的信息内容较多,不适合全部展示给用户,可以将不太重要的信息置入操作内。

B端通用组件使用法则(四)-数据展示、其他

6. 文字提示

简单的文字提示框,当鼠标移入则显示提示,移出则消失,通常会在以下情况使用。

  1. 当文字太长,被隐藏显示。
  2. 当操作被禁用,需要告知用户如何启用禁用的操作。
  3. 当图标代替文字展示的时候晦涩难懂。

B端通用组件使用法则(四)-数据展示、其他

7. 气泡提示

当目标元素有进一步的描述和相关操作时,可以收纳到卡片中,根据用户的操作行为进行展现。

B端通用组件使用法则(四)-数据展示、其他

8. 走马灯

作为一组平级内容的并列展示模式,常用于图片或卡片轮播。

  1. 轮播的数量不宜过多,控制在 3~5 个之间为最佳。
  2. 在设计上提供暗示,让用户对轮播的数量和方向保持清晰的认知。
  3. 用户主动触发或者系统自动轮播。

B端通用组件使用法则(四)-数据展示、其他

9. 日历

当数据是日期或按照日期划分时,使用日历组件。

B端通用组件使用法则(四)-数据展示、其他

10. 空状态

当目前没有数据时,用很直观的方式告知用户。

B端通用组件使用法则(四)-数据展示、其他

11. 标签

当需将事物进行标记时,使用标签。

  1. 用于对事物进行分类。
  2. 用于标注事物的属性或维度。

B端通用组件使用法则(四)-数据展示、其他

12. 彩色标签

在不同场景中,需要区分标签的类型,可使用彩色标签。

B端通用组件使用法则(四)-数据展示、其他

13. 动态标签

用数组生成一组标签,可以动态添加和删除。

B端通用组件使用法则(四)-数据展示、其他

14. 卡片

卡片可以承载信息,且对信息的内容类型无过多限制,但系列类型的卡片中体现的信息为一类。卡片通常以栅格形式排列,一行建议不超过四个。卡片和卡片之间的间距要保持视觉合适。

B端通用组件使用法则(四)-数据展示、其他

二、其他

其他类组件协助用户达成页面上的其他操作行为。

1. 设计原则

1)合理取用

界面上任何组件都有其使用场景,需合理取用,帮助用户高效完成界面行为。

2)观察细节

组件使用是充分考虑用户在界面上的行为细节而做的决定,例如在页面不长,一屏就可以展示完信息的情况下,无需给用户提供回到顶部组件。

2. 文件直接导入

点击“文件导入”直接将系统中的文件导入到界面。

B端通用组件使用法则(四)-数据展示、其他

3. 文件手动导入

点击“文件导入”后,用户选择系统中要导入的文件,此时文件并未开始导入,只是呆在待导入区,需要用户手动触发文件导入。

B端通用组件使用法则(四)-数据展示、其他

4. 文件导出

当表格等数据需要被导出查看时,可以选择导出本页或导出全部。

B端通用组件使用法则(四)-数据展示、其他

5. 回到顶部

当页面内容区域比较长,用户浏览页面信息时到达了页面的底部区域,可点击返回顶部查看相关内容。

B端通用组件使用法则(四)-数据展示、其他

6. 直达底部

当页面内容区域比较长,用户想快速查看页面底部区域的信息时,可点击直达底部查看相关内容。

B端通用组件使用法则(四)-数据展示、其他

7. 分割线

当页面信息需要被区分,但通过间距等方式很难达到目的时,可使用分割线。

B端通用组件使用法则(四)-数据展示、其他

接下来将送出:B端通用组件设计法则(五)。

 

作者:知果;公众号:知果日记

本文作者 @知果 。

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部