10. 🔍 特殊模式 Patterns ★★★★☆

🌏 Web 网页规范

  • 加载机制: 分页加载器 / 无限滚动加载 (Infinite Scroll)
  • 列表操作: 右键上下文菜单 / 表格行内 Hover 出现控制条
  • 交互表单: 双击行内直接编辑 / Popover 防溢出边界检测
  • 布局形式: 多栏网格流布局自适应折叠

📱 App 移动端规范

  • 加载机制: 下拉刷新 (Pull to Refresh) / 触底预加载
  • 列表操作: 行内侧滑出现按钮操作 (Swipe Action)
  • 交互表单: 长按气泡浮窗 / 原生 Bottom Sheet 折叠面板
  • 布局形式: 堆栈卡片式层叠、左右划屏交互

媒体大图灯箱、就地编辑与气泡溢出反转

Lightbox Dialogs, Inline Editing & Flip Collision

特殊网页场景下的设计范式：Lightbox (灯箱对话框) 原生 <dialog> 蒙层；Inline Edit (就地双击编辑) 让体验更连贯；以及悬浮气泡的 边界碰撞检测 (Collision Flipping) 翻向反轴以防遮挡。

App 下拉刷新、行内侧滑删除与 Bottom Sheet 抽屉

App Pull-to-Refresh, Swipe Actions & Bottom Sheets

移动端手势与层级控制设计范式：Pull to Refresh (下拉刷新) 触发更新并物理回弹；Swipe Actions (行内侧滑操作) 实现快捷删除与置顶；以及 Bottom Sheet (底部抽屉) 承载半屏复杂表单，防止模态过度层叠。

LIVE PLAYGROUND: 网页端灯箱编辑与移动端侧滑/抽屉式特殊交互模式 Web模式下双击文字或点击图片体验；App模式下测试侧滑与底部面板触发
https://web.meta-ui.edu/special-patterns
09:41
📶 🔋

A. 灯箱放大预览 (Lightbox Dialog)

🌌 蔚蓝太空
🌲 翡翠森林

B. 双击就地编辑 (Inline Edit)

用户名:
爱迪生

C. 边界碰撞自反转 (Popover Flipping)

原生 Popover

由浏览器顶层 (Top-layer) 渲染，防止受父级 overflow 截断，点击页面任意空白处可自动关闭。

气泡源
Tooltip 气泡提示

A. 列表侧滑操作 (Swipe Actions)

向左侧滑（或点击侧滑按钮）展现底层“删除”和“置顶”菜单

🗑️ 删除
📄 第一篇交互设计总结草稿

B. 底部半屏面板 (Bottom Sheet)

避开强干扰 Modal 对话框，由屏幕底端滑出，带有限定功能配置

⚙️ 配置文章发布选项
公开度:
允许评论:
📋 大模型统一 Prompt (LLM Prompt)