b端表格设计实战指南,b端表格设计指南上篇( 四 )


1. 分割线和斑马纹在很多产品设计中会发现想通过斑马纹和分割线来区分信息的内容,本身是想很好的区分的,等带设计好后就会发现其实用户的视觉体验并不是很好,造成视觉疲劳,反而会使得页面更加的杂乱无章,那么想清晰的划分信息内容,我们可以通过文字对齐,间距对齐来实现,有足够的留白,使得页面设计的更加的简约和清晰 。

b端表格设计实战指南,b端表格设计指南上篇

文章插图
2. 装饰或颜色对状态的区分,仅用轻量的颜色区分即可,操作栏保持主色按钮色 。图标 , 标签,虽然能够帮助组织数据 , 更直观的传达信息,但是物极必反 , 少即是多,要注意克制这些元素的使用,标签能用线性就不用面性,做到轻盈,否则表格中最重要的就是标签,过多的颜色细分会使表格变得更加混乱,影响用户体验 。
b端表格设计实战指南,b端表格设计指南上篇

文章插图
3. 行的对齐方式对于表格内容的对齐方式,居中和顶部对齐都是可以的,针对具体的使用方式推荐采用顶部对齐 。当列表都是文字数据 , 不管你是居中还是顶部对齐上下的边距其实是一样的 , 但是当列表中出现了比较复杂的情况,就会出现参差不齐,都采用顶部对齐,浏览数据的时候更加的直观阅读效率更高 。
b端表格设计实战指南,b端表格设计指南上篇

文章插图
4. 不留白在列表中会有很多没有数据来源的,那正对与没有数据显示的,用“—”代替,数据为0时,显示“0”,如果没显示,会给用户错觉,时后台的bug,还是什么问题,就会影响用户的使用感受 。
5. 低频操作表格中不管是信息的展示,还有很多的操作,最常见的就是增删改查 , 当然还有其他操作,就会出现操作栏就会占据列表的半壁江山,那其他的列表数据区域就会压缩,我们要知道列表的主要目的是展示信息,然后才是对信息进行增删改查的操作,所以操作栏可以考虑隐藏,用户点击更多就可以选择更多的操作内容 。不管是精简文字或是图标,能够让用户有很高的识别性就是可以操作的 。
b端表格设计实战指南,b端表格设计指南上篇

文章插图
6. 分页器大多数表单每页显示行数可能超过 30 行,因此,将分页器固定在表单底部会更加友好,方便用户在页面之间切换,无需过度地快速滚动 。使用分页可以减少加载时间,因为它限制了正在处理的信息量 。
在表格中,数据量很大,如果同时将数据全部展示,就会出现浏览器响应太慢或者是内存溢出的情况,所以分页器就很好的缓解了服务器的加载压力,缩减单词加载的数据量从而缩短了加载的时间,从而达到高效体验 。
分页同时可以跳跃查看数据,更加的灵活,便利 。还有一种情况出现就是如果数据不多 , 但是超过了一屏的显示,相比于分页器翻页而言,向下滚屏会更加的便利 。
b端表格设计实战指南,b端表格设计指南上篇

文章插图
六、总结
本文提供了表格的基础指南 , 还有很多的内容需要我们去挖掘,根据自身产品内容特性和用户的需求进行调整,但是设计原则都是通用的 , 从用户的角度出发设计表格,提升用户的使用体验,提升用户的使用效率 。
图来自 Unsplash , 基于CC0协议 。


推荐阅读