看点高级的
拿点有用的
学点真干货
找点新财路
发布
登录
注册
列表页设计总结
三悠
杭州
/
设计爱好者
/
337天前
/
255浏览
版权
私信
关注
列表页设计总结
三悠
关注
前言
列表页可以查看和处理大量的条目，常有导航至详情的作用。用户可在列表页对条目进行筛选、对比、新增、分析、下钻至条目完整详情页等操作。
设计目标
让列表易于扫读。
快速查找列表中的对象。
帮助用户更高效地查看、处理、查找条目。
设计原则
易扫读
采用格式一致的外观，突出有利于对象识别的关键信息。利用富交互分层展示信息以减少认知负荷。
富交互：
富交互是一种强调用户与产品之间多层次、多维度的交互方式。它不仅仅局限于简单的点击和浏览，而是通过更加智能的技术手段，如人工智能、大数据等，为用户提供个性化的服务。
可寻性
列表以易于浏览的逻辑排序。提供合适的搜寻组件帮助用户快速查找信息。
列表类型
表格 Table
列表 List
卡片列表 Card list
收藏
表格 Table
强调浏览性。
矩阵布局，趋向于展示复杂数据，数据按照矩阵布局对齐，方便横纵浏览数据，研究数据之间的关系。
特别当用户受益于更多的数据外露，而无需进入该对象详情时，使用表格。
收藏
列表 List
兼顾浏览性与展示性。
垂直排列，趋向于展示对象的基础概述，有层次地展示内容，适合快速扫读。
特别当展示空间存在限制，如较小的 弹窗、侧栏、下拉面板等容器中，使用列表。
收藏
卡片列表 Card list
强调展示性。
网格布局无特定浏览顺序，每个对象拥有更平等的展示机会，网格布局在页面中更具吸引力，适合突出对象时使用。
收藏
操作行为
搜寻数据
选择适合的搜寻组件。
明确用户主要的搜寻模式。
已知项探索：从可言语描述的已知项开始搜寻。
探索性查询：对需求确定但范围宽泛的目标进行搜寻。
搜寻频次越高对效率的要求越高。
与开发做好沟通，了解系统性能，选择合适的组件。
查询
按照预设的条件，选择多个查询条件后一次性提交获取查询。
收藏
筛选
用户调整筛选项，结果即随之调整。
收藏
搜索
更智能的查找，输入关键词一次性在多种数据属性中查询后，展示结果。
收藏
分页
默认使用分页加载，用于减少用户等待。应缓存用户在原列表中的浏览位置，并标记列表中已浏览项，当用户返回上级页面是回到原浏览位置。
分页器
默认推荐使用。使用时，当页面内容不足一页时，不展示分页器。
收藏
同页加载
当用户常常能够在列表靠前位置找到所需条目，且无定位特定列表项的需求时可以考虑使用这种模式，如动态、邮件。
收藏
查看全部
当需跳转页面查看完整列表时使用。
收藏
导航至详情
默认点击标题导航至详情，可以从以下几个角度判断如何打开详情：
自然交互：同页展开列表更自然，需注意展开的内容区高度不要超过一屏。
详情的信息量大小：如果信息展示超过一屏，使用展开的方式不便于用户操作，此时使用抽屉展开更好。
详情需要被单独分享给他人，或复杂的沉浸式任务：跳转独立页更合适。
每条详情中都可能有用户感兴趣的内容，以方便切换的导航，快速查看和处理不同的项目：可以使用双栏展示。
收藏
批量操作
当用户勾选条目后，触发批量操作模式，列表工具栏呼出批量操作工具条。
收藏
新建
右上角新建按钮
点击触发新建表单弹窗、抽屉、页面等，完成创建后新创建的内容出现在列表的第一条，并短暂地高亮展示。
收藏
虚线新建按钮
点击新建，在按钮位置出现对象编辑区，完成新建后即在该位置展示该新建对象。虚线新建按钮位置放在列表首或尾。
收藏
删除
直接删除
删除后，允许用户撤销。
收藏
二次确认
点击删除操作时，需要二次确认。
收藏
安全校验
破坏性操作需高安全级别验证确认操作。
收藏
列表工具栏
在较小的空间中集成列表所需的常用功能，非常推荐使用。
收藏
结语
本次分享内容到此结束，下期继续分享如何设计列表页。
注：以上文中配图均来自于网络或应用截图，仅作学习分享使用。
0
举报
|
声明
2
分享
原创文章
UI
网页
相关推荐
换一换
B端筛选设计的优势盘点
393
三悠
三招做好按钮设计
326
三悠
怎么找到体验设计灵感 第5期
253
三悠
怎么找到体验设计灵感第4期
415
三悠
最全的导航设计
880
三悠
关注
B端
1
Noey_
B端数据可视化的设计思路
127
三悠
数据可视化太重要了
60
三悠
会员精选
【破晓之前，皆为纯黑】电商设计 - 电动牙刷详情视觉
162
孙啊尧
推广
如何设计列表页
63
三悠
表单设计的三大场景
89
三悠
评论
登录
评论你的想法~
表情
发布评论
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
你可能喜欢
换一换
数字孪生-城市低空可视化平台
245
佳进陈
三维渲染作品集・阶段性汇总
639
忆玖ye
New巨熊软糖！ 扁扁熊登场
212
土豆人TudouMan
概念短片-飞白|当AI越来越完美，我想画一条不完美的线
309
JIOJIO焦焦
《造物协议》｜仿生人觉醒 AI 概念短片
335
魔杰作MOJZ
SNOWPALS
379
李舜
相关收藏夹
换一换
关注
B端
1
Noey_
关注
科幻扁平
489
yiyi1105
关注
IP形象及IP内容
7694
蔡蔡文化
关注
中国风元素插画
506
蔡蔡文化
关注
IP形象——动物类
582
奶昔窝窝儿
关注
茶酒丨礼盒包装
664
风萧萧萧萧
大家都在看
查看更多
IP 形象
国庆
LOGO 设计
海报设计
插画设计
壁纸图片
作品集
VI 设计
UI 设计规范
AI 绘画
表情包
PPT模板
设计
#设计
#设计
#设计
设计#
设计a
设计🔍
a设计
设计’
设计
it设计
a设计
AS设计
by设计
设计in
in设计
设计.
、设计
设计
设计】
设计、
设计
#设计#
设计，
#设计
if设计
设计
🤮设计
设计‘’
is设计
设计‘
设计
设计。
@设计
an设计
设计／
设计 、
设计|
登录注册
推荐
登录即可同步推荐记录哦
2
登录即可加入我的收藏
评论
登录即可评论想法
分享
分享
