ux-design-principles

UX 设计原则

来源：“10 分钟内讲解每个 UI/UX 概念”——Kole Jain（2026 年 3 月，138K 次观看） Figma 文件：https://www.kolejain.com/resources?scrollTo=every-ui-concept

统领一切的一条规则

“用户进行任何操作时，都应该得到响应。”

每一次交互——点击、悬停、聚焦、错误、加载、成功——都必须有明确且有意义的可见响应。这是 UI/UX 设计中最重要的原则。

---

章节一览

章节	核心概念	快速规则
可供性与指示符	UI 通过外观传达其工作方式	好的 UI 不言自明
视觉层级	尺寸、位置和颜色决定用户首先看到什么	最重要的元素 = 最大、最粗、最靠上
网格、布局与间距	结构与留白	留白 > 僵硬的网格
排版	字体选择、字号、字间距	使用一种无衬线字体，最多 6 种字号
色彩理论	品牌色 + 语义色 + 色阶	让颜色承载意义，而非装饰
深色模式	通过亮度而非阴影营造层次	在深色背景上使用更亮的卡片
阴影	浅色模式下的高度与层次	低不透明度，高模糊度
图标与按钮	尺寸、内边距、幽灵按钮	图标尺寸与行高匹配
反馈与状态	每个元素都需要多种状态	每个按钮至少 4 种状态
微交互	用动效确认操作并带来愉悦感	用动画确认操作
叠加层	在图像上叠加渐变与模糊	先用线性渐变，再逐步增加模糊

---

面向工程师：如何与 AI 助手交流

向 AI 编码助手描述 UI 时，请使用准确的术语：

BAD:  "Make the button look better"
GOOD: "Add hover, active/pressed, and disabled states. Use ghost button style
       (transparent background, border only) as secondary CTA next to primary."

BAD:  "Fix the dark mode"
GOOD: "In dark mode: elevate card by lightening surface relative to background,
       remove box-shadow, lower border opacity, reduce chip saturation/brightness."

BAD:  "Add some animation"
GOOD: "Add micro-interaction on copy button: slide up a 'Copied!' chip on click
       that auto-dismisses after 1.5s. This confirms the action."

BAD:  "Fix the spacing"
GOOD: "Apply 4-point grid: all spacing values must be multiples of 4.
       32px between top-level sections, group related items with 8-16px."

完整的速查指南请参阅 text/engineering-rules.md。

---

10 条设计法则

1. 每次交互都需要响应——绝不允许状态悄无声息地改变
2. 对比营造层级——大与小、鲜艳与灰暗、粗体与常规
3. 留白也是设计——让元素有呼吸空间；区块间默认留出 32px
4. 颜色承载意义——蓝色=信任，红色=危险，黄色=警告，绿色=成功
5. 一种字体就够了——选一种无衬线字体，通过字重和字号体现变化
6. 图标尺寸与行高匹配——正文行高为 24px 时，图标也用 24px
7. 如果你第一眼注意到的是阴影，那它就太重了
8. 图像总能改善视觉层级——增添色彩、便于扫读、吸引目光
9. 深色模式 = 使用更亮的表面来营造层次，而非阴影
10. 线性渐变胜过纯色叠加层——保留图像，同时确保文字易读

---

深入了解

• 可供性与指示符
• 视觉层级
• 网格、布局与间距
• 排版
• 色彩理论
• 深色模式
• 阴影
• 图标与按钮
• 反馈与状态
• 微交互
• 叠加层
• 工程速查指南
• 完整术语表