表格样式归纳

固定表头

将标题固定以便一页内展示大量数据


固定列

对于列数很多的数据,可以固定前后的列,横向滚动查看其它数据


可伸缩列

调整列的大小,让用户完整地查看缩写数据。


基础表格

基础表格有三种样式:斑马纹表格、带边框表格、没有样式区分的表格

使用带斑马纹的表格,可以更容易区分出不同行的数据。


不同密度的表格

较小的行高使用户无需滚动即可查看更多数据。 但是,它会影响可扫描性,从而导致解析错误。


数据可视化表格

可视化让数据看起来更直观清晰


鼠标悬停显示操作

当鼠标悬停显示操作可以避免视觉混乱


可编辑行内容

用户可在当前页编辑任意一行内容


展开行信息

允许用户在当前表格能够查看更多信息


右侧快速预览

允许用户在当前表格能够查看更多信息


弹窗预览

弹窗预览能在用户停在当前页,但是更重要的信息放在弹窗里


多弹窗预览

多弹窗可以查看更多细节内容,并且可以对比数据


表格排序

对表格进行排序,可快速查找或对比数据。


筛选

对表格进行筛选,可快速查找到自己想看的数据。 


自定义筛选

自定义高级筛选,更易快速查找数据


为什么表格很重要

在B端的操作系统中表格是必不可少的一部分,如何让表格更易于操作更符合用户行为,是设计师需要钻研的地方。

良好的UI设计是基于人类的目标和行为的。UI设计反过来影响行为,从而推动进一步的设计决策。 用户体验以微妙和无意识的方式改变人类的决策。就像所看到的一样,交互方式会影响用户行为。我们可以从表格设计开始,让这个世界因为我们的设计而变成更美好。


相关文章推荐:

17组值得收藏的设计规范&组件库下载

给初级UI&UE设计师的Sketch资源分享

在构建设计规范之前,你需要看看这些设计资源

如何构建设计语言系统

交互设计原则和理论1——尼尔森十大可用性原则

国外设计团队的高频设计工具与协作工具

怎样提高注册登录流程的交互体验

你可能感兴趣的:(表格样式归纳)