看点高级的
拿点有用的
学点真干货
找点新财路
发布
登录
注册
列表页设计总结
三悠
杭州
/
设计爱好者
/
240天前
/
173浏览
版权
私信
关注
列表页设计总结
三悠
关注
前言
列表页可以查看和处理大量的条目，常有导航至详情的作用。用户可在列表页对条目进行筛选、对比、新增、分析、下钻至条目完整详情页等操作。
设计目标
让列表易于扫读。
快速查找列表中的对象。
帮助用户更高效地查看、处理、查找条目。
设计原则
易扫读
采用格式一致的外观，突出有利于对象识别的关键信息。利用富交互分层展示信息以减少认知负荷。
富交互：
富交互是一种强调用户与产品之间多层次、多维度的交互方式。它不仅仅局限于简单的点击和浏览，而是通过更加智能的技术手段，如人工智能、大数据等，为用户提供个性化的服务。
可寻性
列表以易于浏览的逻辑排序。提供合适的搜寻组件帮助用户快速查找信息。
列表类型
表格 Table
列表 List
卡片列表 Card list
收藏
表格 Table
强调浏览性。
矩阵布局，趋向于展示复杂数据，数据按照矩阵布局对齐，方便横纵浏览数据，研究数据之间的关系。
特别当用户受益于更多的数据外露，而无需进入该对象详情时，使用表格。
收藏
列表 List
兼顾浏览性与展示性。
垂直排列，趋向于展示对象的基础概述，有层次地展示内容，适合快速扫读。
特别当展示空间存在限制，如较小的 弹窗、侧栏、下拉面板等容器中，使用列表。
收藏
卡片列表 Card list
强调展示性。
网格布局无特定浏览顺序，每个对象拥有更平等的展示机会，网格布局在页面中更具吸引力，适合突出对象时使用。
收藏
操作行为
搜寻数据
选择适合的搜寻组件。
明确用户主要的搜寻模式。
已知项探索：从可言语描述的已知项开始搜寻。
探索性查询：对需求确定但范围宽泛的目标进行搜寻。
搜寻频次越高对效率的要求越高。
与开发做好沟通，了解系统性能，选择合适的组件。
查询
按照预设的条件，选择多个查询条件后一次性提交获取查询。
收藏
筛选
用户调整筛选项，结果即随之调整。
收藏
搜索
更智能的查找，输入关键词一次性在多种数据属性中查询后，展示结果。
收藏
分页
默认使用分页加载，用于减少用户等待。应缓存用户在原列表中的浏览位置，并标记列表中已浏览项，当用户返回上级页面是回到原浏览位置。
分页器
默认推荐使用。使用时，当页面内容不足一页时，不展示分页器。
收藏
同页加载
当用户常常能够在列表靠前位置找到所需条目，且无定位特定列表项的需求时可以考虑使用这种模式，如动态、邮件。
收藏
查看全部
当需跳转页面查看完整列表时使用。
收藏
导航至详情
默认点击标题导航至详情，可以从以下几个角度判断如何打开详情：
自然交互：同页展开列表更自然，需注意展开的内容区高度不要超过一屏。
详情的信息量大小：如果信息展示超过一屏，使用展开的方式不便于用户操作，此时使用抽屉展开更好。
详情需要被单独分享给他人，或复杂的沉浸式任务：跳转独立页更合适。
每条详情中都可能有用户感兴趣的内容，以方便切换的导航，快速查看和处理不同的项目：可以使用双栏展示。
收藏
批量操作
当用户勾选条目后，触发批量操作模式，列表工具栏呼出批量操作工具条。
收藏
新建
右上角新建按钮
点击触发新建表单弹窗、抽屉、页面等，完成创建后新创建的内容出现在列表的第一条，并短暂地高亮展示。
收藏
虚线新建按钮
点击新建，在按钮位置出现对象编辑区，完成新建后即在该位置展示该新建对象。虚线新建按钮位置放在列表首或尾。
收藏
删除
直接删除
删除后，允许用户撤销。
收藏
二次确认
点击删除操作时，需要二次确认。
收藏
安全校验
破坏性操作需高安全级别验证确认操作。
收藏
列表工具栏
在较小的空间中集成列表所需的常用功能，非常推荐使用。
收藏
结语
本次分享内容到此结束，下期继续分享如何设计列表页。
注：以上文中配图均来自于网络或应用截图，仅作学习分享使用。
0
举报
|
声明
2
分享
原创文章
UI
网页
相关推荐
换一换
怎么找到体验设计灵感 第5期
244
三悠
怎么找到体验设计灵感第4期
410
三悠
最全的导航设计
777
三悠
B端数据可视化的设计思路
111
三悠
数据可视化太重要了
51
三悠
关注
B端
1
Noey_
会员精选
官网升级｜阿里巴巴公益金网站
92
Qinm_Studio
推广
如何设计列表页
48
三悠
表单设计的三大场景
78
三悠
B端表单页设计总结
198
三悠
交互设计灵感总结
123
三悠
评论
登录
评论你的想法~
表情
发布评论
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
你可能喜欢
换一换
百万汽车TVC是怎么做的？【喂饭教程】
186
Ai训练师大宇
Signage | 泊荼BOATEA导视设计
258
OnedayDesign
包装设计 | 海洋之星鱼油流心罐产品包装原创设计
126
吴志杰_zj
波点视觉x信谊视觉升级方案
249
POP波点视觉
STAR FLASH（星闪）—嘻哈精神IP形象
357
建模机器MK
装备登场 I 飞智×终末地
202
飞智视觉中心
相关收藏夹
换一换
关注
B端
1
Noey_
关注
国潮&国风
6489
曜Shea
关注
地产VI
1715
喾二
关注
品牌VI系统
1986
恶狗设计中心
关注
白酒包装 酒产品
934
老馬识图
关注
简历/作品集/述职
3713
瘫_ATAN
大家都在看
查看更多
IP 形象
国庆
LOGO 设计
海报设计
插画设计
壁纸图片
作品集
VI 设计
UI 设计规范
AI 绘画
表情包
PPT模板
、设计
设计.
设计】
设计
设计、
设计
#设计#
🤮设计
设计‘’
is设计
设计‘
设计
设计。
#设计
if设计
设计，
设计
@设计
an设计
设计 、
设计|
设计／
设计
#设计
#设计
设计#
#设计
设计
设计’
以设计
设计in
in设计
AS设计
it设计是
by设计
a设计
it设计
把设计
登录注册
推荐
登录即可同步推荐记录哦
2
登录即可加入我的收藏
评论
登录即可评论想法
分享
分享
