恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见
masterGo

推广

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
B端产品设计规范之数据展示
2.1°
原创文章 / 规范/资料 / / 举报
367 2 2 0

2021-10-11

因为在适应新的工作,所以放慢的更新速度。本文是对针对规范内容中的数据展示进行讲解。

本文受有赞设计师@美芳的指导,将我日常工作通过统一设计规范来提效的思路整理成文章。

数据展示有哪些?



01.徽标

是收纳消息数量的样式,一般出现在图标或者头像右上角。



02.标签

数据展示里面抽取出来的共性特征,将它们转化为标签。标签样式有线框、带不透明底或者面性。



03.走马灯

相当于c端的轮播图




04.文字提示

可以出现在鼠标悬浮按钮时候的行为解释说明,也可以是文案或者导航图标的解释说明。鼠标移入时候出现移出时候消失。



05.气泡卡片

比起文字提示可以承载更多内容,相对弹窗,气泡卡片操作更轻盈。





06.标签页/选项卡

标签页可以帮助用户在一个页面内快速切换不同类型内容,提升单个页面整体的扩展性。标签本质上就是内容区的导航。



07.折叠面板

折叠面板可以更好的收纳内容区域,提高页面利用率。可以和表格结合使用,折叠表格部分详情内容,使得纵向空间更节约。





08.表格

表格是数据展示的重要内容。当有大量结构化数据需要展示时或者需要对数据进行排序、搜索分页时可以用表格进行展现。



当笔记本过小,表格展示不全时候,可以固定首尾重要信息进行滚动。



带排序的表头,可对数量或者金额进行排序。



带分组的表格,建议带边框并且用色块区分表头和内容。



单元格可编辑



批量选中时只会选中当前页,因为分页还没加载出来,为了给用户正确的引导,可以给上提示性文案,例如“已选中XX项内容”。





如果当前页批量选中的数据量不满足要求,可以改变分页器,增加当前页数据量,从而增加选项。



因为之前发布过一篇表格类文章,讲述数据过滤,数据操作和数据查看,这里就不再重复。


以上是对设计规范中的数据展示进行的详细讲解,再次翻开一些文章结合当前设计体验工作,会对一些场景页面有新的想法,会陆续进行文章编写以及工作复盘,提高自己的认知水平。



最后再次感谢有赞设计师@美芳在CCtalk的分享,我们是一群本着提升B端体验汇聚在一起的团队,欢迎关注公众号【且曼B端产品设计】交流探讨。


参考文献:


1.《CCtalk B端产品设计课》by 美芳

Powered by Froala Editor

收藏

2人已收藏

最多三分糖

除了放弃,没有失败

  • 3

    作品

  • 18

    粉丝

  • 1

    关注

  • B端产品设计规范(上篇)
  • B端典型表格设计

猜你喜欢

    最多三分糖

    最多三分糖

    除了放弃,没有失败

    • 18

      粉丝

    • 23.4

      人气

    • 502

      颜值

    作品

      最多三分糖

      点赞:2

      收藏:2

      评论:0

      B端产品设计规范之数据展示

      你确定要举报B端产品设计规范之数据展示

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年10月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      账号或密码错误

      发送验证码 120s 验证码错误

      登录

      可云端编辑的专业级UI设计工具

      立即体验