一、界面设计的核心 4 原则
（对齐、对比、留白、层次）
1. 对齐（Alignment）
- 目的：让界面看起来整洁、有秩序、专业
- 常见做法
- 使用统一的网格系统（Grid）
- 文本、图标、按钮保持左对齐/居中对齐
- 避免 "视觉漂浮" 的元素
2. 对比（Contrast）
- 目的：让信息突出、易读、可识别
- 来源：颜色、字体粗细、大小、形状、版块背景差异等
- 示例：标题 20px bold，正文 14px regular；主按钮亮色，次按钮浅灰
3. 留白（Whitespace / Negative Space）
- 目的：让界面呼吸、减少认知负荷、提高质感
- 关键点：
- 不是浪费空间，是提升重点
- 苹果界面高级感 80% 来自留白使用
4. 层次（Hierarchy）
- 目的：让用户知道先看哪里、点击哪里
- 方法：
- 字号（Title > Subtitle > Body）
- 权重（Bold > Regular）
- 颜色（主色 > 次色 > 辅助色）
- 视觉块（Card、背景对比）
二、基本视觉元素（UI 视觉基础）
1. 色彩（Color）
- 一个专业设计常构成：
主色（Primary）
辅助色（Secondary）
功能色（成功/警告/错误）
中性色（黑白灰） - 实战技巧
- 同色不同明度可形成层次
- 不要超过 3--4 个主色
- 灰色是 UI 的灵魂，因为灰色没有色相，不会与任何颜色冲突，是最稳定的颜色
2. 字体（Typography）
- 建议：一个界面只用 两个字重（Regular + Medium/Bold）
- 字体层级：
- H1 24--32px
- H2 20--24px
- Body 14--16px
- Caption 12px
- 行高建议 1.4 -- 1.6，中文略大一点
3. 图标（Iconography）
- 风格统一（线性、实心、圆角等不可混搭）
- 图标大小、线宽一致（通常 1--2px）
- 图标周围"触控区域"最少 40--48px
4. 布局（Layout）
- 推荐使用如下系统：
- 8px/4px spacing system（常见 UI 间距体系）
- 12-column grid（多数 Web 用）
- 4-column grid（移动端常见）
5. 间距（Spacing）
- 重要但容易忽视
- 常用规范：
- 小间距：4 / 8
- 中间距：12 / 16
- 大间距：24 / 32
- 同层级组件的间距要"可预期且统一"
6. 响应式设计（Responsive Design）
- 移动端：单栏
- 平板：双栏
- Web：多栏 + 最大宽度限制（如 1200px）
- 图片与容器使用百分比或自适应
三、基础交互原则
1. 一致性（Consistency）
- 按钮样式不随页面变化
- 提示信息、有错误状态规则统一
- 相似操作位置保持一致
2. 反馈（Feedback）
让用户知道"发生了什么"
- 按钮点击亮起
- 加载 Spinner
- 表单错误信息
- Hover 状态
3. 可预见性（Predictability）
用户点击前就应该知道会发生什么
- 下划线 → 可点击
- 箭头 → 导航
- 红色 →危险、删除
4. 简化操作（Simplify Action）
- 减少用户步骤
- 使用自动填充、默认值、智能提示
- 表单分组、减少必须项
四、Nielsen 的 10 条可用性原则（完整版）
Nielsen（尼尔森）10 条可用性原则（Nielsen's 10 Usability Heuristics）。
这是 UX 领域最经典、最常用的 10 大原则，也是所有 UI/UX 设计的基础。
1. 系统状态可见性
系统应该在合理时间内明确告诉用户正在发生什么。
✔ 示例
- 按钮点击后出现 loading
- 下载时显示进度条
- 表单提交成功要提示成功
2. 系统与真实世界匹配
使用用户熟悉的语言、概念，而不是技术术语。
✔ 示例
- 「保存」比「持久化」更符合真实世界
- 使用常见图标 🗑= 删除、🔍 = 搜索
- 日期格式：2025-01-02 而不是 timestamp
3. 用户掌控权与自由
用户应该能轻松撤销、返回，而不会被困住。
✔ 示例
- 可撤销操作（Undo）
- Modal 可关闭
- 有"取消"按钮而不是强制完成流程
4. 一致性与标准化
界面元素、操作方式要保持一致，不要让用户重新学习。
✔ 示例
- 所有按钮颜色规则一致（如 primary=蓝色）
- 同类型操作位置不要变来变去
- 遵循平台规范（iOS/Android/Web）
5. 错误预防（Error Prevention）
比起给错误提示，更重要的是避免用户犯错。
✔ 示例
- 禁用"提交"按钮，直到表单合法
- 删除操作加确认
- 限制输入格式（手机号自动加空格）
6. 识别优于记忆
用户不应该凭记忆操作，界面要帮用户看到、选，而不是记住。
✔ 示例
- 下拉菜单比手输文本更好
- 图标配文字（不用用户猜）
- 最近使用记录
7. 操作灵活性和高效性
为新手提供简单路径，为熟练者提供加速路径。
✔ 示例
- 键盘快捷键
- 自动补全
- 高级用户可创建模板
8. 美观与简约设计
界面不要出现无关信息。越简洁越易用。
✔ 示例
- 精简文字
- 不堆叠颜色和元素
- 只突出最重要的内容（视觉层次）
9. 帮助用户识别、诊断和恢复错误
错误提示要明确、可理解，并能告诉用户如何修复。
✔ 示例
❌ 「Error: 500」 → 用户完全不知道怎么办
✔ 「保存失败，网络连接中断，请稍后再试」
10. 帮助与文档
最好设计得不需要文档，但必要时要让用户容易找到信息。
✔ 示例
- 表单字段旁的「？」提示
- 界面内简短帮助文档
- 引导教程 onboarding