金蝶云星辰典型页面-列表原创
金蝶云社区-李秉宸
李秉宸
2人赞赏了该文章 331次浏览 未经作者许可,禁止转载编辑于2023年04月10日 14:21:13

定义

列表页是一种可以查看和处理大量数据的载体,常有导航至详情的作用。用户可在列表页对条目进行筛选、对比、新增、分析、下钻至条目完整详情页等操作。


根据列表应用场景分为以下4类:

矩形.png矩形.png

3.png

4.png




设计目标

帮助用户更高效的查看、处理、查找条目。


设计原则

易读性:采用格式一致的外观,突出有利于对象识别的关键信息。利用富交互分层展示信息以减少认知负荷。

可寻性:列表以易于浏览的逻辑排序。提供合适的搜寻组件帮助用户快速查找信息。


布局结构

列表是基于动态页面的平面布局。除了导航区域外,动态页面还包含以下区域:




1.筛选区域(按需配置)

筛选区域包含搜索、过虑功能,用户可以使用过滤展开/折叠图标来展开和折叠过滤区域


2.工具栏操作区域

用于放置列表相关的操作按钮,详情规则见【工具栏】和列表视图切换按钮


3.列表内容区域

显示列表已选数据汇总和全选操作、分页器、数据列表,也可以显示现有表格的其他视图(可切换)



矩形备份 4.png


分类及用法

1.基础列表

当用户需要操作较多数据量或需要进行数据对比时;

当数据只需显示单级层次结构时。


特点:

可放置的列数较多,能够容纳更多的数据维度;

列表功能操作常驻显示;

筛选功能可以展开或者收起,右侧为展开状态。


编组 9.png



image.pngimage.pngimage.png

2.左树右表

当列表数据需要以多层级结构的方式显示或编辑时;

当用户需要操作较多数据量或需要进行数据对比时;

特点:

可以完整展现数据的复杂层级关系;



编组 10.png


image.pngimage.pngimage.png


3.卡片列表

当用户需要快速了解单据的概要信息时;


3.1 卡片列表-带多选操作


特点:

可以完美兼容图片内容或特殊表达方式,可以快速呈现多层数据;

可将每个条目以富有吸引力的方式呈现;

可以支持将卡片按照日期或者其他关系进行分组展示,卡片也支持多选操作


编组 12.png




image.png


3.2 卡片列表-带多选操作


可以完美兼容图片内容或特殊表达方式,可以快速呈现多层数据;


编组 17.png


image.png

4.带Tab的列表

当有多个大块内容需要被组织到一个页面时;

每一块内容应足够多,如果内容过少且未来不会再扩展请使用折叠面板;

信息之间不应该存在对比或并行关系,否则用户会在便签之间不断切换。



4.1 二级页签-格子风格


将不同类型内容页组织到一起,页签数量较少时优先推荐使用


编组 18.png


image.png

4.2 二级页签-迷你风格


将不同类型内容页组织到一起,页签数量较多时使用


编组 19.png


image.png

4.3容器页签-迷你风格


在容器卡片内使用页签将不同类型内容页组织到一起


编组 20.png

4.4 容器页签-格子风格


在容器卡片内使用页签将不同类型内容页组织到一起,格子风格的页签比较突出,容易引起用户注意


编组 21.png



图标赞 2
2人点赞
还没有人点赞,快来当第一个点赞的人吧!
图标打赏
0人打赏
还没有人打赏,快来当第一个打赏的人吧!