表格样式归纳

作者: Susurratescape | 来源:发表于2018-09-27 19:58 被阅读165次

固定表头

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


固定列

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

可伸缩列

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


基础表格

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

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

不同密度的表格

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

数据可视化表格

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


鼠标悬停显示操作

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


可编辑行内容

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

展开行信息

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

右侧快速预览

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


弹窗预览

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


多弹窗预览

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

表格排序

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

筛选

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

自定义筛选

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

为什么表格很重要

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

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

相关文章

  • 表格样式归纳

    固定表头 固定列 可伸缩列 基础表格 基础表格有三种样式:斑马纹表格、带边框表格、没有样式区分的表格 不同密度的表...

  • element 表格修改

    表头样式 表格为空的时的样式 表格斑马线样式 鼠标悬浮样式 表格列样式 其他 滚动条修改

  • Excel必学技术-表格美化

    一、表格美化步骤 1、插入表格:选中原本表格,点击“插入”选卡 =》表格 2、套用样式:可以选择套用不同的表格样式...

  • 25.html代码 表格最基本的使用

    基础表格 预览: 表格基础样式设置

  • Bootstrap样式-表格

    表格基本样式 个性风格 表格行风格 响应式表格

  • CSS 表格样式

    本节我们来学习表格样式,通过 CSS 中的属性可以设置表格的外观,例如表格边框样式、颜色、间距等。 设置表格边框 ...

  • 表格里的网格

    先正常写表格UITableView,下面的是设置表格分组的样式,(不分组就把表格样式的改成indexPath.ro...

  • 表格样式

    https://www.w3cschool.cn/css/css-sfrk2opy.html

  • 表格样式

    使用的是elementui 操作人员 操作时间 变更类型 对比 变更内容 姓名 职务 职级...

  • Bootstrap表格和按钮(三)

    1.表格 tablethead tr thtbody tr td 基本样式 ,都要基于此样式 1.1 条纹状表格 ...

网友评论

    本文标题:表格样式归纳

    本文链接:https://www.haomeiwen.com/subject/nkhyoftx.html