🏗️
交互设计方案

工地列表交互设计方案对比

针对"相关工地列表"区域的点击展开与查看详情交互,提供五种不同的设计方案供评估选择。已针对 30+ 隐患类别标签场景做专项优化。

侧滑面板
悬浮卡片
微展开+抽屉
翻转卡片
手风琴卡片
点击列表项,详情从右侧滑入面板(宽420px,可滚动)。标签采用「折叠 + 展开 + 搜索过滤」策略:默认显示前3个标签,点击展开全部并可关键字搜索。
相关工地列表共 7 个工地
↑ 可交互演示区域 — 点击工地行体验效果
👆 操作步骤
1次点击
即可查看详情
📐 空间占用
右侧滑出
420px面板
方案分析
面板可滚动,30+标签完美承载
支持关键字搜索快速定位标签
列表始终可见,切换工地流畅
信息层级清晰,阅读舒适
需要较宽屏幕(>900px)
列表区域被压缩
标签溢出策略
1 默认折叠,仅显示前3个标签
2 点击「展开全部 N 项」查看所有
3 搜索框支持关键字过滤
4 面板整体可上下滚动

适用场景

最适合需要逐一审阅全部隐患类别的场景。面板空间充裕,分类信息一目了然,适合50-60岁领导审核工作使用。

点击列表项,浮动卡片出现在右侧,零布局干扰。卡片内标签区域固定高度可滚动,整张卡片最高520px,卡片整体可滚动。
相关工地列表共 7 个工地
↑ 可交互演示区域 — 点击工地行体验效果
👆 操作步骤
1次点击
即可查看详情
📐 空间占用
零布局干扰
浮于列表之上
方案分析
列表布局完全不受影响
标签区域可独立滚动
卡片整体可滚动承载大量内容
卡片可能遮挡相邻工地行
需要右侧有额外空间
标签溢出策略
1 标签区固定96px高度
2 超出部分上下滚动查看
3 卡片顶部显示标签总数

适用场景

快速浏览各工地关键数据。不需要深入审阅全部标签,只需快速了解关键指标和主要隐患类别。

两步渐进式:点击展开摘要行(含标签数量徽章),点击「详情」打开底部抽屉。抽屉内标签按类别分组 + 搜索过滤,最适合 30+ 标签场景。
相关工地列表共 7 个工地
↑ 可交互演示区域 — 点击工地行体验效果
👆 操作步骤
1次摘要
2次完整详情
📐 空间占用
摘要行64px
抽屉覆盖75%
方案分析
抽屉空间最大,分类展示最清晰
支持搜索,30+标签快速定位
摘要行只显示计数,不占空间
最适合严肃审查工作场景
看完整详情需两步操作
抽屉打开时遮挡列表
标签溢出策略
1 摘要行只显示「N类隐患」徽章
2 抽屉内按安全/管理/施工等分组
3 搜索框快速过滤关键字
4 抽屉整体可滚动

适用场景

最推荐用于标签数量多(30+)的审查场景。分组展示让几十个隐患类别一目了然,搜索功能节省领导查找时间。

列表项原地3D翻转,正面显示名称和状态,背面显示关键指标和标签数量。点击标签计数徽章弹出底部弹层查看全部标签。
相关工地列表点击行翻转 · 点击标签数查看全部
全部隐患类别
↑ 可交互演示区域 — 点击工地行翻转查看详情
👆 操作步骤
1次翻转
2次看全部标签
📐 空间占用
零增长
+可选弹层
方案分析
背面简洁,不强塞大量标签
点击标签计数弹出完整列表
3D翻转动画视觉冲击力强
操作逻辑需要学习成本
背面信息量有限
标签溢出策略
1 背面只显示「N类隐患」徽章
2 点击徽章弹出底部弹层
3 弹层内完整展示全部标签

适用场景

视觉创新性强,适合展示汇报场景。翻转带来即时反馈感,标签按需弹出,不干扰核心指标阅读。

列表项向下展开详情区域(可滚动),手风琴模式自动收起其他项。标签采用「折叠 + 展开 + 可滚动」策略,默认显示前4个,展开后区域可滚动。
相关工地列表点击展开详情 · 手风琴模式
↑ 可交互演示区域 — 点击工地行展开详情
👆 操作步骤
1次点击
展开完整详情
📐 空间占用
展开约180px
内容可滚动
方案分析
单次点击即可展开全部信息
手风琴保持整体列表整洁
标签折叠+展开控制密度
适合各种屏幕尺寸
展开后推移下方列表项
多项展开时页面较长
标签溢出策略
1 默认折叠显示前4个标签
2 点击「展开全部N项」查看所有
3 展开区域整体可上下滚动

适用场景

最通用的方案,无需学习成本。单次点击、逻辑直观,适合各种年龄层用户。当列表项目数量适中(<15个)时效果最佳。