52. 🧩 场景模式集 Domain Patterns ★★★★☆

🌏 Web 网页规范

  • File Management UI · 文件树浏览器、拖拽上传、预览面板与版本历史
  • Map/Location UI · 视口控制、标记聚类、地理编码自动补全
  • Social/Community Patterns · Feed 流、嵌套评论、表情回应与关注系统
  • Print/Paginated UI · 打印样式表、PDF 预览与分页控制

📱 App 移动端规范

  • Camera/Media Capture · 快门按钮、闪光灯切换与比例叠加层
  • GPS/Location Tracking · 权限流程、精度指示器与电池优化
  • Native Sharing Sheet · iOS UIActivityViewController / Android Intent
  • Social Sharing · 分享预览卡片与深链接生成

Web 文件管理、地图与社交模式集

File Management, Map & Social Patterns

文件管理 UI 涵盖文件树浏览器 (可折叠目录节点)、拖拽上传区 (Drag-Drop Zone with file type validation)、预览面板 (图片/PDF/代码语法高亮)、版本历史时间线、分享对话框 (链接权限控制) 及存储配额指示器。地图/位置 UI 包括视口缩放控制、标记聚类 (Marker Clustering 在缩放级别变化时聚合/展开)、地理编码自动补全输入框、路线绘制显示与地理围栏可视化。社交/社区模式 覆盖 Feed/Timeline 流、嵌套评论线程 (Reddit 式折叠)、Reaction/Emoji 系统、用户资料页、关注系统与私信。打印/分页 UI 使用 @media print 样式表、PDF 预览渲染与 page-break 控制。

App 相机、GPS 与原生分享模式集

Camera, GPS & Native Sharing Patterns

相机/媒体捕获 UI 包含快门按钮 (大圆、触觉反馈)、闪光灯切换 (自动/开/关)、取景比例叠加层 (1:1 / 4:3 / 16:9) 与实时滤镜预览。GPS/位置追踪 需要渐进式权限请求流程 (粗略 → 精确)、精度指示器 (GPS/Wi-Fi/蜂窝信号来源) 与后台定位的电池优化策略。原生分享表 (Sharing Sheet) 在 iOS 使用 UIActivityViewController (底部弹出、应用网格)、Android 使用 Intent Chooser。社交分享需生成 Open Graph / Twitter Card 预览元数据，并支持深链接 (Deep Link) 直达 App 内对应页面。

LIVE PLAYGROUND: 三大场景模式复合展示 Composite Domain Patterns 切换上方 Web/App 视角轨道，观察演示形变
https://web.meta-ui.edu/domain-patterns
09:41
📶 🔋
A. 文件上传区 File Upload Zone
📁
拖拽文件到此处上传
或点击选择文件 · 支持 PDF, PNG, JPG (max 10MB)
📄
report.pdf
✓ 2.4 MB
🖼️
hero.png
⏳ 上传中...
B. 地图视口 Map Viewport
🏪 咖啡店
🏢 办公室
🌳 公园
+
−
C. 社交动态 Social Feed
Alex Chen
2 hours ago
Just shipped the new design system! 🎉 Really proud of how the token architecture turned out.
❤️ 24 💬 8 🔄 3
Maya Liu
5 hours ago
Working on accessibility audit for our component library. Found 12 WCAG AA violations 😅
❤️ 18 💬 12 🔄 5
📷 Camera Capture
4:3
⚡ AUTO
📍 GPS Tracking
Location Permission Granted
Accuracy
±5m
Source
GPS
Battery
Low
🔗 Native Sharing Sheet
Share to...
💬
WeChat
🐦
Twitter
✈️
Telegram
📋
Copy
Prism Design System
prism.design/docs/components
📋 大模型统一 Prompt (LLM Prompt)