/* 加载中... */📚 UI元知识图谱 · 核心教程章节
53 个知识维度按「五大学域」分组，支持侧边栏搜索、视角选择与零基础过滤。难度星级由设计令牌统一驱动。
我的学习进度
🗺️ 推荐学习路径 — 点击路径卡片，章节将按顺序重排
零基础入门
设计/前端新手
1→6→2→3→5→8→9→15→16→24
重点：视觉基础 + 核心交互 + 心理
前端工程师
Web 开发者
1→3→14→23→12→31→27→39
重点：响应式/性能/无障碍/令牌/动画
App 开发者
移动端开发者
13→22→17→20→21→34→25
重点：移动端/手势/通知/安全/情感
产品经理思维
产品经理/体验规划师
24→30→32→33→35→53
重点：认知负荷/引导/搜索/架构/伦理
🎨 视觉基础 6 章
✨ 交互与反馈 8 章
7. 微交互 Interactions
缓动贝塞尔曲线、骨架屏扫光与微质感动效对比
8. 导航 Navigation
面包屑归属链路与物理滑动指示器平移Tab选项卡
9. 反馈状态 Feedback
轻提示Toasts延时关闭与空状态情感化卡片展示
10. 特殊模式 Patterns
原生dialog灯箱、行内编辑与Popover碰撞检测
16. 信息层级 Hierarchy
字重饱和度、留白大小对比与古腾堡规律设计
27. 动画系统 Animation
Timing缓动曲线、Spring弹簧阻尼与物理动能回弹机制
34. 情感化设计 Emotional
爆炸庆祝礼花彩蛋、Haptic微物理震动与拟人化交互文案
50. 动效设计理论 Motion Theory
Disney 12原则、缓动分类学、动效编舞与Motion Personality体系
📱 平台适配 10 章
12. 可访问性 Accessibility
focus-visible焦点指示与Aria视障人群可视化框
13. 移动端模式 Mobile Specific
触屏刘海安全区、拇指物理热区与滑动删除手势
14. 响应式自适应 Responsive
流动网格、视口相对单位与断点折叠多端转换
15. 暗色与主题化 Theme
CSS变量存储、主题亮暗自适应与对比度检测
17. 通知与推送 Push Notification
Notch刘海系统Push横幅向下滑入与上滑清除
20. 权限与安全 Biometrics
二次授权确认与系统FaceID指纹识别扫描解锁动画
21. 语音与多模态 Voice Waves
录音触发、物理微震动与正弦音频振幅波形渲染
22. 导航架构 Nav Gestures
侧滑返回手势（Swipe Back）与底层堆栈纸张拉出
25. 国际化 RTL Inversion
从左至右与RTL阿拉伯文界面一键镜像镜像转换
44. 键盘与命令 Keyboard & Command
Command Palette、快捷键系统、焦点管理与无障碍键盘工作流
🧠 认知与架构 9 章
11. 设计语言 Languages
Material/Apple/Fluent对比及CSS 3D立体翻转
24. 认知与心理 Cognitive
秒杀锚定与全新的菲茨靶心、希克列表和米勒组块
30. 用户引导 Onboarding
新手气泡高亮导览、功能发现红点与权限征求最佳时机
32. UX文案与微文案 UX Writing
有同理心的报错说明、按钮行动导向词与权限利益说服文案
33. 搜索与筛选 Search
联想输入自动补全、芯片式筛选标签与抽屉式筛选器
35. 信息架构 Info Arch
站点地图与树形测试、卡片分类归纳与Tab Bar架构决策
45. 商业与支付 Commerce & Payment
结账流程、定价表、订阅管理与购物车放弃挽回UI模式
51. 品牌与识别 Brand & Identity
Logo使用规范、品牌色扩展、插画风格指南与跨平台品牌一致性
53. 设计伦理与评估 Ethics & Evaluation
Dark Patterns分类、Nielsen启发式评估、GDPR合规与渐进披露
🛠️ 工程实践 20 章
18. 表单与输入 Inputs & Forms
密码可见性睁闭眼、智能录入推荐与行内报错验证
19. 加载与占位 Loading Shimmer
扫光库占位、下拉刷新物理阻尼回弹交互演示
23. 性能感知 Core Web Vitals
最大内容渲染LCP、交互延迟INP与位移CLS测试
26. 实战项目 Templates
简历、作品集、极简博客与跨端聊天室、动态流模板
28. 数据可视化 Data Vis
SVG动态图表重绘、配色语义映射与移动端数据密度简化
29. 空状态与错误 Empty/Error
离线阻断网络重试、零数据插画与表单即时错误恢复
31. 设计令牌 Design Tokens
实时三层变量映射、JSON/Figma Tokens与Style Dictionary
36. 拖拽与排序 Drag & Drop
长按振动激活拖动、可排序列表位置互换与跟手手势
37. 数据表格 Data Tables
列冻结双击编辑、大表格虚拟滚动渲染与批量操作导出
38. 桌面端应用 Desktop
三栏视口布局、Ctrl+K快捷命令面板与自适应右键上下文菜单
39. AI界面模式 AI UI
流式Markdown打字渲染、不确定置信度提示与自适应输入法协调
40. 滚动驱动 Scroll
Header滚动收缩、视差图片偏移滑动与粘性吸顶分组头
41. 渐进式增强 Progressive
先保证核心功能可用，再额外加美化和高级交互
42. CSS布局引擎 CSS Layout Engine
Grid vs Flexbox决策树、subgrid、Container Queries与@layer层叠控制
43. 组件架构 Component Architecture
Compound Components、Headless UI、Slot模式与设计系统治理
46. 企业后台 Enterprise & SaaS
CRUD界面、权限矩阵、审计日志、功能开关与多租户工作区
47. 协作与编辑 Collaboration & Editing
实时光标、在线状态、评论批注、富文本编辑与@提及
48. 数据状态流 Data State & Sync
乐观更新、SWR模式、同步状态指示器与离线队列管理
49. 仪表盘与报表 Dashboard & Analytics
KPI卡片、下钻模式、日期选择器、异常高亮与可定制布局
52. 场景模式集 Domain Patterns
文件管理、地图位置、社交社区与打印分页等垂直场景UI模式