Module 01 · Designing Intuitive Front Ends and Mockup Design Principles直观前端与界面模型设计原则
Typography, Readability, and Color Theory in UI DesignUI 设计中的字体排印学、可读性与色彩理论
观看本视频后，你将能够：
- 定义 字体排印学（Typography）及其两个组成部分
- 描述 可读性（Readability）
- 概述 五大字体排印学元素
- 解释 色彩理论（Color Theory）
UI 设计中的关键视觉元素
用户界面（UI）设计中的某些核心元素对用户体验影响巨大。它们不仅决定了信息的传递方式，还影响用户对界面的理解和感受。
在本视频中，我们将深入探讨以下三个关键设计要素：
1️⃣ 字体排印学（Typography）🖋️
2️⃣ 可读性（Readability）📖
3️⃣ 色彩理论（Color Theory）🌈
1字体排印学（Typography）
什么是字体排印学？
字体排印学是一种视觉化的沟通方式，设计师利用它传达信息，帮助用户更好地理解和使用产品。
📌 字体排印学的两个组成部分：
| 🔠 组成部分 | 🎯 描述 |
|---|---|
| 字体族（Typefaces） | 文字形态的基本元素，保证信息易读、清晰传达。 |
| 字体（Fonts） | 字体族中的具体风格，如Arial Italic（斜体） 和 Arial Bold（加粗）。 |
🎯 示例：
Arial 是一个字体族，其中包含 Arial Italic（斜体）、Arial Bold（加粗） 等不同风格的字体。
2可读性（Readability）
📌 什么是可读性？
可读性指的是用户能够轻松阅读并理解文本内容。字体选择在提升可读性方面起着关键作用。
两种主要的字体类型
| 🏷 字体类型 | 🎯 特点 | 📌 常见用途 |
|---|---|---|
| 衬线字体（Serif） | 文字笔画末端带有小装饰线 | 适用于标题、网页头部、故事文本 |
| 无衬线字体（Sans-serif） | 笔画末端无装饰线，更加简洁 | 适用于正文、移动端内容 |
📌 常见无衬线字体（Sans-serif）示例：
- Arial
- Verdana
- Helvetica
🎯 示例：
在网页正文中使用 Sans-serif 字体（如 Arial），可以提高可读性，让用户更容易阅读和理解内容。
3五大字体排印学元素
| 🔠 元素 | 🎯 定义 |
|---|---|
| 对齐（Alignment）📏 | 文字的排列方式，如左对齐、居中、右对齐。 |
| 接近（Proximity）📌 | 根据白空间和元素之间的距离来组织内容。 |
| 行宽（Measure）📏 | 文本段落的宽度，影响可读性。 |
| 行距（Leading）📏 | 两行文字之间的垂直间距，影响文本的视觉舒适度。 |
| 字重（Weight）🔠 | 指字体的粗细程度，如细体（Light）、常规（Regular）、加粗（Bold）。 |
🎯 示例：
在 UI 设计中，正文通常使用左对齐，行距适中可提高阅读流畅度，而重要信息可用加粗字重来强调。
4色彩理论（Color Theory）
📌 色彩理论 指的是光的组合及人眼可见的波长范围，形成的视觉色彩光谱。
色彩理论的三个核心属性
| 🎨 属性 | 📌 描述 |
|---|---|
| 色相（Hue） | 颜色的本质，即物体的原始色，如红色、蓝色、黄色。 |
| 色值（Value） | 也称为亮度（Luminance），增加黑色会降低亮度，增加白色会提高亮度。 |
| 色度（Chroma） | 代表颜色的纯度，色彩越纯净，色度越高，若含有更多灰色，色度就会降低。 |
🎯 示例：
- 黑色吸收光线，看起来较暗
- 白色反射光线，看起来较亮
- 浅色调（低色值）提升可读性，深色调（高色值）可用于强调内容
📌 色彩理论的历史
📌 阿尔伯特·孟塞尔（Albert Munsell） 是 20 世纪早期的色彩理论教授，他提出了色彩系统，将色彩分为色相、色值、色度三部分。
课程总结
本视频中，你学习了：
✅ 字体排印学（Typography）：
- 字体族（Typefaces） 和 字体（Fonts）
- Serif（衬线）vs. Sans-serif（无衬线）字体
✅ 可读性（Readability）：
- 无衬线字体更适合正文
- 提高可读性的五大排印元素：对齐、接近、行宽、行距、字重
✅ 色彩理论（Color Theory）：
- 色彩的三大核心属性：色相、色值、色度
- 阿尔伯特·孟塞尔的色彩系统
🚀 掌握这些 UI 设计原则，能让界面更清晰、美观、直观，提高用户体验！ 🎨✨