B端UI交互界面基础组件-表格

一、基础表格

1. 需求场景

二维数据进行集中展示

2. 内容与布局

表格主体分为三个区域:表头、表体、统计数据。

产品经理,产品经理网站

1)表头布局

产品经理,产品经理网站

表头位于表最顶部。

一般情况下,非特殊情况,不显示序列号,存在行选择按钮时不推荐显示序号列:

有选择框无序号列:

产品经理,产品经理网站

有序号列无选择框:

产品经理,产品经理网站

在一个表格列数据中,必须制定一个关键列(对行数据具有代表意义的数据项),关健列在首列:

产品经理,产品经理网站

在表头可见的情况下,至少保留关键列标题,其他列根据业务员场景的功能的复杂性动态调整:

仅显示关键列与操作列标题:

产品经理,产品经理网站

仅保留关键列标题:

产品经理,产品经理网站

包含列标题、排序按钮、数据控制按钮。

列标题:

产品经理,产品经理网站

  • 在列数据为文本类型时,局左显示;
  • 列数据为同一单位数字时,居右显示,单位不同则按文本类型处理;
  • 单列中包含两项列数据定义时,用“/”符号连接数据项,例如:ID/名称、创建时间/到期时间;
  • 标题带单位,统一使用“标题文本(单位)”表现。

列数据控制按钮,跟随在列标题之后,提供诸如:分类、排序功能。

在特定情况下,数据宽度超过预定限制,需要对列锁定。

左侧锁定:序号必须处于锁定状态,非特殊情况关键列也需要处于左侧锁定状态。

产品经理,产品经理网站左右两侧锁定:

产品经理,产品经理网站

2)表体布局

显示高度设定,无论表体数据行数量多少显示高度固定,当内容超高时出现垂直滚动条:

表体无数据时:

产品经理,产品经理网站

表体内容较少时:

产品经理,产品经理网站

表体内容较多时:

产品经理,产品经理网站

显示高度受限,当表体高度达到限制高度时,表体高度不再变化,并出现垂直滚动条:

表体有最小高度限制:未达到最小高度时,表体以最小限制高度为准:

产品经理,产品经理网站

表体无最小高度限制:

产品经理,产品经理网站

高度已到达上限,表体出现垂直滚动条:

产品经理,产品经理网站

当表体无数据时,如需提示用户在无数据情况下进行数据新增可以进行如下显示:

产品经理,产品经理网站

表体行每列数据根据表头约束内容进行显示:

列为两项数据联合显示:每行数据占用一行,行内文本遵循文本显示规范。

产品经理,产品经理网站

如列数据仅作为补充描述内容,文本显示可以进行弱化显示。

产品经理,产品经理网站

表格中如果有关键数据项,如ID、名称,尽量保证显示宽度,一个表格中只允许一个关键数据项(尽量选取全英文字符数据项为关键数据项)。

例如ID作为本表格的关键数据项,ID涉及总长度为32个字符;则保证32个字符能完全显示的空间,其余数据项允许显示宽度不够截断展示。

产品经理,产品经理网站

3)统计项区域在可见状态时,跟随在表体后部,局左显示:

表格无选中框:只显示“总计X条”。

产品经理,产品经理网站

表格有选中框:显示“已选择X条,总计X条”

产品经理,产品经理网站4)【建议】对表格数据项数量进行控制,尽量避免出现列显示超过设计宽度。

3. 交互建议

当表格支持行选择时,选择应对行数据统计后,数据区域对应内容发生变化。

二、分屏加载表格

1. 需求场景

二维数据进行集中展示。

支持大数据量的数据展示。

避免大数据量一次获取与加载的性能问题。

2. 内容与布局

根据功能需要,表格主体分为两个区域:表头、表体、加载控制、数据统计。

产品经理,产品经理网站

表头、表体与基础表格样式约束保持一致。

加载控制按钮处于表体与统计信息显示区域之间。

手动控制加载出现加载控制按钮:

产品经理,产品经理网站

滚屏自动加载不使用加载控制按钮,直接使用加载状态:

产品经理,产品经理网站

当数据处于加载过程时,加载控制按钮变更为加载状态信息:

产品经理,产品经理网站

当表格数据无更多数据时,加载控制按钮隐藏显示:

产品经理,产品经理网站

数据统计信息在表格行数据是否具备复选功能时表现不同状态。

无复选框或有复选框但未选择任何数据“已加载X条,总计X条”:

产品经理,产品经理网站

产品经理,产品经理网站

3. 交互行为

使用点击加载更多模式,需点击加载按钮进入数据获取;完成数据更新后追加数据到标题行数据后部,每次获取数量根据业务需要进行设置:

产品经理,产品经理网站当所有数据加载完毕后,加载控制按钮区域隐藏:

产品经理,产品经理网站

当表格数据属于可选择,且已有数据被选择时,统计信息如下:

产品经理,产品经理网站

滚屏自动加载在纵向滚动条滚动到表格列底部时,自动触发加载行为:

产品经理,产品经理网站

正在加载中不允许二次加载,需加载完毕后进行再执行对应加载操作。

三、分页加载表格

1. 需求场景

二维数据进行集中展示。

支持大数据量的数据展示。

避免大数据量一次获取与加载的性能问题。

支持页面按需要快速跳转加载。

2. 内容与布局

根据功能需要,表格主体分为两个区域:表头、表体、翻页控制。

产品经理,产品经理网站

表头、表体显示规则与基础表格相同。

表格统计数据在翻页控制按钮中集中展示。

当表格数据无数据时,翻页控制按钮不可见:

有数据时,翻页按钮可见:

产品经理,产品经理网站

无数据时,翻页按钮不可见。

翻页按钮区域居于表格居右展示。根据表格业务需要选择翻页按钮类型

3. 交互行为

在有表体数据选中操作时与翻页控制按钮统计数据联动。

翻页按钮触发对应翻页操作后,表体数据、统计数据对应刷新。

当指向页码无任何数据时,自动跳转到运行跳转的最后一页。

四、总结

关于B端基础交互组件“表格”的相关分享就到这里,下一章我们介绍“表单”包括基础表单、全页表单的相关交互规范。

 

本文作者 @云计算产品汪

版权声明

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

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部