列表在B端设计中,算是一个非常基础的设计元素,无论是什么产品设计,绝大多数的内容都要通过列表进行展示,才能最大程度的体现出清晰与美观,帮助使用者快速定位内容。常用来预览、查询、筛选、项目增减等等。所以为了方便B端企业在产品设计过程中,更加高效且高质量的进行列表的交互设计,在此特为大家呈上一份列表设计总结。
基础型列表
纵向列表
常用于一个范围内相关的各项数据或选项项目的纵向平铺展示,通常左对齐、操作按钮位于右侧,用户只需上下滑动即可预览所有。
纵向列表一般条目详细,方便用户快速预览。
横向列表
常见于网站首页的横向轮播滚动面板,用户也是只需左右滑动面板,就会实现图片的一个切换。
较纵向列表,横向列表能更加充分的利用空间,但是页面一般较少,过多容易造成用户的视觉疲劳,并且不易操作。
网格型列表
除了纵向列表和横向列表外,还有一种兼顾了两种维度的列表形式,那就是网格列表,这也是一种非常常见的列表形式。
网格列表的信息承载内容更多,单一网格内可展示多行信息。数据项之间的边界清晰,方便对网格内的数据进行对比。操作按钮根据业务需求和用户需求可置于列表右侧或单个网格内。
主从型列表
主从列表即项目之间存在着从属递进的关系。常见为一个主项目下拉会出现从属项目。列表具有较强的层级关系、从属关系、递进关系时可选用。
主从列表也能够充分利用空间,不需要的项目可以选择隐藏,需要的项目详细展开。
(四)综合型列表
综合型列表即列表数据之间既包含并列关系,又包含从属关系等。综合型列表适用于展示复杂的项目场景。综合型列表可以对不同项目进行预览、下载、编辑、删除等操作。
基于综合型表格可方便地对业务数据进行组合、分解和重新布局排列。
在JNPF快速开发平台上就是一个综合型的列表,从并列上看有创建人、创建时间、修改人、操作等,在操作栏下还可以再次编辑、删除等等。从属上看主项目有日常工作、人事管理、费用相关等,从项目又细分为库房管理、市场活动、入职申请等等。
最重要的是,在JNPF快速开发平台上用户可以自行新建一个列表设计,详细视频教程也已同步上线在公众号、视频号上,简单便捷,帮助您快速建立一个清晰美观的列表,赶快查看试一试吧!
领取专属 10元无门槛券
私享最新 技术干货