📐 层次 vs 扁平 · 设计实践
30 章 · 对比之旅
🎨 点击目录卡片，跳转对应章节 (01.html ~ 30.html)
01
设计哲学对比
层次化与扁平化的历史渊源、核心思想与适用场景
➔
02
视觉层次构建
尺寸、颜色、间距与阴影创造深度感，对比纯色与极简主义
➔
03
交互反馈机制
拟物化反馈 vs 微交互与色彩变化
➔
04
信息架构与导航
深度导航(面包屑) vs 广度导航(标签栏)
➔
05
排版与可读性
文字阴影与渐变 vs 无衬线字体与高对比度
➔
06
图标与视觉符号
拟物化图标 vs 线性/填充/双色调
➔
07
色彩策略
渐变与多色搭配 vs 纯色块 & Material Design
➔
08
动效与过渡
物理模拟动效 vs 缓动函数与遮罩过渡
➔
09
表单与数据输入
立体输入框 vs 底线输入与浮动标签
➔
10
卡片与容器设计
阴影层级与圆角 vs 边框与背景色区分
➔
11
响应式设计适配
层次化移动端缩放挑战 vs 扁平适应性
➔
12
加载与空状态
骨架屏与进度环 vs 微动效与插画
➔
13
错误与异常处理
模态弹窗 vs 内联提示与 Toast
➔
14
数据可视化
3D图表与立体柱状图 vs 极简折线图与热力图
➔
15
品牌与情感化设计
奢华质感 vs 色彩记忆与几何图形
➔
16
可访问性与包容性
对比度与纹理辅助 vs 大点击区域与语音
➔
17
设计工具与工作流
Sketch/Figma层次化技巧 vs 扁平组件快速搭建
➔
18
前端实现对比
box-shadow/filter vs border/background
➔
19
性能与加载优化
图片渐变开销 vs CSS矢量图轻量化
➔
20
用户测试与A/B测试
实验验证层次化与扁平化对任务完成率的影响
➔
21
电商应用案例
商品展示层次化 vs 购物车扁平流程
➔
22
社交媒体应用案例
信息流卡片 vs 个人主页与故事功能
➔
23
企业级后台管理
仪表盘与数据监控 vs 设置页面与列表
➔
24
移动端游戏界面
主菜单与道具商店 vs 关卡选择与HUD
➔
25
教育类应用界面
互动课件与实验模拟 vs 课程列表与进度
➔
26
医疗健康应用
患者数据仪表盘 vs 预约流程与健康记录
➔
27
金融理财应用
资产分布图与交易记录 vs 预算管理与支付
➔
28
未来趋势与融合
Neumorphism · Glassmorphism · 扁平2.0
➔
29
设计系统与规范
统一层次化/扁平化规范与组件库
➔
30
综合实战项目
混合风格应用 · 从零设计
➔