0-introduction

讲师介绍

讲师：Sarah Drasner
背景：
- 这是她首次根据大众需求制作的课程。
- 课程名称：Design For Developers (为开发者设计)
职业角色：
- 微软 (Microsoft) - 高级开发者布道师 (Senior Developer Advocate)
- CSS-Tricks - 特约撰稿人 (Staff Writer)
- Vue 核心团队成员

1-right-vs-left-brain

迷思：右脑 vs. 左脑

核心观点：所谓的“左脑主逻辑，右脑主创意”是一个神话 (myth)，并不科学。
- 证据：哈佛、大英百科全书以及大量研究都已证实这一点。
为什么这个很重要？
- 人们常常用这个迷思来自我设限，比如：“我是开发者，所以我做不好设计”或“我是设计师，所以我写不了代码”。
- 这种想法将人分成了两个阵营，但大脑的运作方式并非如此。擅长一件事并不会阻碍你擅长另一件事。
- 有些开发者甚至以自己糟糕的设计为荣，认为这反衬了他们是更好的开发者，但这只意味着他们不擅长设计而已。
科学事实：
- 大脑越用越强：用不同方式使用大脑，能使其变得更强大，特别是能强化连接两个大脑半球的胼胝体 (corpus callosum)。
- 跨学科学习的优势：学习不同领域的知识能帮助你建立他人无法建立的联系，这对你成为更好的开发者也有益。
- 大脑协同工作：核磁共振 (MRI) 等脑部扫描显示，无论是数学、阅读还是识别阿拉伯数字，左右两个半球的许多区域都会被同时激活和使用。
结论：不要因为“我不是那种人”而说服自己做不到某件事。如果你这么想，你很可能就真的做不到了。

2-what-this-course-is-setup

课程定位与项目设置

本课程不是什么？
- ❌ 无法替代设计学院：设计学院是四年制教育，本课程只是一个入门。
- ❌ 无法替代多年实践经验：课程中每一个主题（如色彩、布局）都可以扩展成一整天的课程。
- ❌ 不是让你对设计师产生优越感的工具：尊重专业，就像设计师学了一天 JavaScript 后，你也不希望他来指导你写代码一样。
本课程是什么？
- ✅ 提供基础概念：帮助你理解设计师的工作，更好地与他们沟通。
- ✅ 提升个人项目：为你提供基础，让你能将个人项目从概念到执行完整地做出来，不再受限于简陋或“Bootstrap 风格”的界面。
- ✅ 赋予独立完成项目的能力：让你无需依赖他人合作，就能自由地将自己的想法变为现实。
- ✅ 提供大量资源：课程会提供丰富的阅读材料、网站和工具，帮助你独立成长。
推荐的项目文件夹结构
- 建议创建一个主文件夹，并在其中建立以下子文件夹：
  - 📁 insp (inspiration): 存放能激发你灵感的东西。
  - 📁 source: 存放项目使用的原始图片、字体等素材。
  - 📁 dev: 存放通过 CLI 工具创建的实际开发项目，最终可以成为一个 GitHub 仓库。
- 好处：这种结构让所有资源都触手可及，特别适合个人项目，能清晰地管理从开始到结束的整个流程。

3-perfection

别追求一步到位的完美

坦然接受不完美
- 当你刚开始做设计时，作品可能不会完全符合预期，这很正常。
- 就像学习编程一样，你也是从写出很多糟糕的代码开始，然后才慢慢变好。回顾一年前的代码，你可能也会觉得“天哪，我怎么会写出这个”。
- 持续尝试，持续改进是关键。
《艺术与恐惧》(Art and Fear) 中的故事
一位陶瓷老师将班级分为两组：
- 数量组 (Quantity Group)：评分标准是作品的总重量。50 磅作品得 A，40 磅得 B，以此类推。
- 质量组 (Quality Group)：只需提交一个“完美”的作品即可获得 A。
  
  结果：课程结束时，所有最高质量的作品都出自“数量组”。
  
  原因：当“数量组”在忙着大量制作、并从错误中学习时，“质量组”却只是坐着空想何为“完美”，最终除了宏大的理论和一堆死气沉沉的黏土外，一无所获。
核心启示：
- 通过犯错来学习和成长。
- 如果你在课程中觉得自己的作品不够好，没关系，继续做下去。这门课是为你提供工具，让你未来能创造出更棒的东西。

4-designer-vs-developer

开发者 vs. 设计师的视角

讲师的自我定位
- Sarah Drasner 不认为自己是“设计师”，而是 “一个会设计的开发者” (a developer who can design)。
- 原因：出于对全职设计师的尊重。她的绝大部分时间都在写代码，而非整天做设计。
- 她为什么要做设计？：她利用设计来让自己的代码和开发概念更具吸引力。一个酷炫的视觉效果能让人们对背后的技术产生兴趣。
讲师的背景
- 虽然主要身份是开发者，但她并非“门外汉”。
- 她曾是大学的艺术教授，并拥有艺术硕士学位。
- 这意味着她拥有扎实的设计理论基础。
本课程的视角
- 这门课程是为开发者设计的，视角更贴近一个开发者去学习设计的过程。
- 它不是一门面向专业设计师的课程。

5-introduction-to-layouts-grids

布局与网格入门

布局的重要性
- 布局是本课程中最长且最重要的部分之一，它是构建优美设计的基础。
- 本节将同时涵盖设计理论和代码实现（如 CSS Grid）。
为什么使用网格 (Grids)？
1. 为混乱带来秩序 (Brings order to chaos)
  - 网格系统是一种古老且行之有效的概念，能帮助我们将分散的元素组织起来，让大脑更容易导航和理解空间。
  - 例子：古代的城市规划。按街道和大道组织的城市（如 A 大道 1 号街）远比在希腊小岛上随意找路要容易得多。
2. 简化设计流程 (Simplifies the design process)
  - 网格能帮助我们将复杂的设计问题分步解决。
  - 无需一次性考虑布局、颜色、字体、图片等所有元素。可以先用简单的色块确定整体布局，然后再逐一深入思考其他设计细节。
  - 这种模块化思考有助于大脑更好地解决问题。

6-balance-symmetry

平衡与对称 (Balance & Symmetry)

对称 (Symmetry)
- 定义：通过让物体在中心轴两侧形成镜像，从而创造出一种和谐、有序的感觉。
- 应用：对称是一种历史悠久的设计原则，在艺术（如 Damien Hirst 的画作）和建筑中被广泛应用。在建筑上的巨大投入（历时千年）足以证明对称原则的重要性。
打破对称 (Breaking Symmetry)
- 作用：当你在一个整体对称的布局中故意打破对称时，人的目光会立即被吸引到那个不对称的点上。
- 目的：这是一种非常有效的引导用户注意力的技巧。
- 例子：
  - 在游戏《纪念碑谷》(Monument Valley) 中，通过打破对称将玩家的视线引向关键的隧道入口。
  - 网站设计中，将“行为召唤 (Call to Action)”按钮等重要元素以鲜艳的颜色或不对称的形式呈现，使其脱颖而出。
对称的弊端 (Downside of Symmetry)
- 问题：过度或一成不变的对称会显得非常单调、乏味、基础 (boring, basic)。
- 效果：虽然看起来专业、整洁，但缺乏独特性，容易让人觉得“和其他所有网站都长得一样”，过目就忘。

7-balance-asymmetry

平衡与不对称 (Balance & Asymmetry)

不对称的挑战 (The Challenge of Asymmetry)
- 难点：不对称设计比对称设计更难，因为它需要你更深思熟虑地去平衡画面中的各种视觉元素，而不仅仅是简单地复制和镜像。
不对称的吸引力 (The Appeal of Asymmetry)
- 人类偏好：研究表明，人们实际上更偏爱不对称的构图，例如梵高的《星夜》。
- 原因：这更贴近我们所看到的自然世界，因为自然景观几乎从不是完美对称的。
- 跨文化应用：
  - 无论是西方艺术还是东方艺术，都非常注重不对称的平衡美学。
  - 例子：日本江户时代的浮世绘（讲师的 Twitter 名Sarah Edo也源于此）。著名的《神奈川冲浪里》如果把浪花放在正中间，可能就不会如此闻名。
  - 建筑：悉尼歌剧院。
侘寂 (Wabi-Sabi) 哲学
- 概念：一种在不完美中发现美的日本哲学。
- 例子：一个破碎的陶器，用金子去修补裂痕（金缮 Kintsugi），这些“不完美”的痕迹反而让它变得更独特、更美丽，承载了自身的历史。
现代设计中的应用
- 在现代网页设计中，不对称构图非常普遍。设计师常常会建立一个网格系统，然后故意打破它，以此来创造视觉趣味，引导用户的视线。

8-exploring-asymmetry-learning-from-art-history

从艺术史中学习不对称

三分法 (Rule of Thirds)
- 概念：一个源于摄影的构图法则，同样适用于网页设计。将画面的关键元素放置在三等分线的交点或线上，而不是正中央。
- 效果：能极大地改善构图的平衡感和视觉吸引力。
三角构图 (Triad Compositions)
- 概念：一种在古典绘画中（尤其在卡拉瓦乔之后）非常流行的构图技巧。
- 作用：通过在画面中构建无形的三角形，引导观众的视线在画布内部循环，而不是看到边缘就离开，从而让视线持续停留在作品上。
- 应用：这种技巧在绘画、品牌摄影、浮世绘和瑞士设计中都非常普遍，画面中元素的位置都是经过精心安排以形成三角关系。
瑞士设计 (Swiss Design)
- 特点：以使用大块、扁平的几何形状而闻名。
- 网格运用：非常清晰、明显地使用并打破网格系统。
- 学习价值：如果你想学习构图，瑞士设计是一个绝佳的研究和模仿范本。

9-shape

形状 (Shape)

圆形的吸引力 (The Appeal of Circles)
- 现象：在一组不同的形状中，人的眼睛会不自觉地、反复地被圆形所吸引。
- 原因 (眼跳/扫视 Saccade)：人眼在观察时会不断快速扫描以构建心理地图。大脑对某些事物有优先处理机制：
  1. 动态物体 (源于生存本能，判断是猎物还是捕食者)。
  2. 鲜艳色彩 (源于觅食本能，如水果、浆果)。
  3. 圆形 (与人脸和眼睛高度相关，大脑天生就对识别面孔极为敏感)。
- 正因如此，我们才会在无生命的物体上看到各种“人脸表情”。
圆形的视觉校正 (Optical Adjustment for Circles)
- 问题：当把一个圆形和一个方形沿直线对齐时，如果按照几何中心精确对齐，圆形在视觉上会感觉向内“缩”了一点，显得不对齐。
- 解决方案：需要将圆形稍微向外推出一点（例如在 CSS 中用 margin-left: -5px），才能让它在视觉上真正显得对齐。
对角线的动态感 (The Dynamism of Diagonals)
- 特点：对角线非常有活力、有冲击力。在设计中，当想要表达“极致”、“顶尖”等概念时，经常会用到对角线。
- 现状：尽管对角线效果出众，但在网页设计中应用较少，因为我们的思维仍受限于传统的、方正的“表格布局”模式。
- 机会：正因为它不常见，使用对角线是让你的设计脱颖而出的一个好方法。瑞士设计就经常使用对角线来打破网格的沉闷。

10-scale-and-cropping

缩放与裁剪 (Scale and Cropping)

缩放 (Scale)
- 核心作用：这是一个简单但极其有效的技巧，能彻底改变设计的观感。
- 效果：通过改变图像的尺寸，使其不再仅仅是页面上的一个孤立物件，而是成为布局本身的一部分，从而变得更有趣、更有活力。
- 例子：
  - 一张原本单调的手部骨骼图，通过放大、旋转和非常规的裁剪，立刻变得充满动感。
  - 一张普通的女性照片，通过复制、放大并裁剪掉大部分身体，可以从一张平淡的图片，创造出一幅优美且独特的构图。
裁剪 (Cropping)
- 核心思想：你不需要展示图片的全部内容。有选择地裁剪能创造视觉焦点，并带来独特的美感。
实践案例 (微软演讲 Keynote)
- 背景：在 4 小时内，基于一个乏味的表格进行美化设计。
- 解决方案：
  1. 找到一张包含咖啡豆的图片。
  2. 将其旋转、并极大地放大。
  3. 只截取其中一小块有纹理的部分作为背景。
- 结果：图片本身的信息变得不重要，它成功转化为了不抢眼的背景纹理，让观众的焦点能够自然地集中在核心内容——表格上。
关键技巧
- 本课程后续会演示如何在 Photoshop 中使用蒙版 (mask)，让图片能够柔和地融入背景，而不是像贴纸一样生硬地“贴”在页面上。

11-grid

网格系统 (Grid System)

推荐书籍：《创建与打破网格》(Making and Breaking the Grid)
- 这是一本设计学院的必读经典，对于理解网格和构图至关重要。
- 核心理念：即使你打算打破规则，也必须先了解规则。网格就像是设计领域的“最佳实践”，了解它能让你明白为什么要遵循或打破它。
网格的核心作用：锚定 (Anchoring)
- 使用网格的精髓不在于死板地遵循每一条线，而在于让页面上的所有元素都相互关联、有所依附，而不是随意地散落在各处。
- 例子：在一个设计中，即使有一条不规则的曲线打破了网格，但其他所有元素（文字、图片、按钮等）的边缘或基线都会与其他元素对齐，形成一种无形的联系。
- 一旦你开始留意，你会发现“锚定”无处不在。
与设计师沟通的桥梁
- 当设计师要求你“把这个元素向上移动 2 像素”时，这并非无理取闹。背后通常是基于整个网格系统和锚定原则的考量。
- 随意移动一个元素，可能会破坏整个设计的和谐与一致性。设计师需要确保在解决新问题的同时，不破坏既有的设计规则和结构。
空间建筑学 (The Architecture of Space)
- 这是书中反复提到的一个概念，强调布局设计如同建筑设计，关乎空间感知。
- 类比：当你走进一栋建筑，你会直观地感受到空间是开阔还是压抑，是容易找到方向还是像迷宫一样，这都源于建筑设计。网页布局同理，一个混乱的布局会让用户感到困惑。
先设计，后开发 (Design first, then develop)
- 不推荐直接在浏览器中设计，因为开发模式下的思维是“问题解决模式”，追求的是最高效、最快捷的实现路径，但这往往会导致最平庸的设计。
- 推荐流程：
  1. 戴上“设计师的帽子”：先不考虑实现难度，专注于创造有趣、独特的布局。可以先在纸上或设计软件中完成。
  2. 戴上“开发者的帽子”：思考如何用代码实现之前设计好的布局。这就像是给自己设置挑战。
- 这种思维上的区隔，能帮助你摆脱“最省事”的开发路径，从而创造出更具吸引力的设计。
名言警句

"The grid is like a lion in a cage, and the designer is the lion tamer. It's fun to play with the lion, but the designer has to know when to get out before the lion eats them."

网格就像笼中的狮子，设计师是驯兽师。与狮子玩耍很有趣，但设计师必须知道在被狮子吃掉之前及时抽身。
- 寓意：要懂得打破网格。如果一切都过于系统化，设计就会变得可预测且乏味。

12-layout-tools

布局工具介绍

核心观点：没有“最好”的工具，就像没有“最好”的 JavaScript 框架一样。所有工具都能完成任务，选择哪个更多取决于个人偏好和项目需求。
Adobe Photoshop
- 特点：历史悠久，功能强大，是处理位图 (Bitmap) 的王者。
- 强项：
  - JPEGs、位图处理
  - 图像蒙版、透明度效果
  - 滤镜、特效
  - 复杂的渐变和纹理
- 现状：现在也集成了矢量工具和画板功能，与 Illustrator 的界限不再那么分明。
Adobe Illustrator
- 特点：最初为矢量图 (Vector) 设计。
- 强项：
  - 创建 SVG
  - 绘制路径和形状
  - 形状的合并、分割、裁剪等操作
  - SVG 导出功能极其强大（因为其开发者是 Snap.svg 的作者）。
Sketch
- 特点：一款较新的工具，在 UI/UX 设计领域迅速流行。
- 强项：
  - 高效管理多个画板 (artboards)：可以在一个文件中轻松展示桌面端、移动端等多个视图，且性能优异。
  - 可复用的符号 (symbols)：非常适合创建和使用图标库等可复用组件。
- 弱点：
  - SVG 导出功能较弱：导出的 SVG 代码结构复杂，嵌套层级多，不利于优化和制作动画。

13-photoshop-keyboard-shortcuts

Photoshop 核心快捷键

为什么要记快捷键？
- 它们能极大提升你的工作效率。以下是值得花时间记住的最重要的几个快捷键。
核心快捷键列表：
- V：移动工具 (Move Tool) - 用于移动图层或选区。
- M：选框工具 (Marquee Tool) - 默认为矩形，按 Shift + M 可切换为圆形等其他形状。
- G：油漆桶 (Paint Bucket) - 按 Shift + G 可切换为渐变工具。
- D：默认颜色 (Default Colors) - 将前景色和背景色重置为黑/白。
- X：切换颜色 (Switch Colors) - 快速切换前景色和背景色。
- T：文字工具 (Text Tool) - 当光标在文本框内时，快捷键会失效，因为系统会认为你在输入文本。
- I：吸管工具 (Eyedropper) - 用于从图像中拾取颜色，非常实用。

14-layout-and-composition-demo

布局与构图演示 (Photoshop)

准备工作
- 新建画布，并显示网格 (View > Show > Grid 或 Cmd + ')。
- 开启对齐到网格 (Snap to Grid) 功能，有助于快速对齐。
- 可以使用标尺 (Ctrl/Cmd + R) 和参考线 (Guides) 来辅助对齐。
演示过程
1. 构图一 (垂直布局)：
  - 创建一个大的矩形作为图片区域。
  - 在旁边创建一个垂直的文本栏。
  - 顶部留出导航栏区域。
  - 使用圆形工具 (Shift + M切换) 创建一个圆形 Logo，并让它稍微超出对齐线，以进行视觉补偿。
  - 将所有图层编组，方便切换和管理。
2. 构图二 (多列与对角线)：
  - 创建一个横跨顶部的窄条。
  - 在下方创建多列文本/图片区域。
  - 元素之间注意锚定，例如导航栏与下方文本列的边缘对齐。
  - 使用多边形套索工具 (Polygonal Lasso Tool) 创建一个对角线形状，打破网格的规整感。
  - 降低对角线图层的不透明度，使其成为背景装饰，不干扰主体内容。
  - 同样可以利用套索工具从现有形状中“挖掉”一块，增加趣味性。
核心思想
- 这个阶段只思考布局和形状，不考虑颜色、字体等细节，从而简化设计过程。
- 通过快速创建多种布局方案，可以方便地与他人讨论，作为开启对话的起点，而不是最终定稿。

15-primitive-shapes-exercise

练习：使用基本形状进行构图

练习说明
- 使用最基础的形状（圆、矩形、三角形、线条等），创建三份不同的构图草稿。
- 先在纸上画：推荐先用笔和纸进行练习，这种方式更直观、更自由，便于修改。
- 使用素材：课程的 Git 仓库中提供了一些预制的文本块 PNG 图片，可以用来替代简单的矩形，让构图更贴近真实布局。
为什么要做这个练习？
- 实践是关键：只听不练是学不会的。你必须亲手尝试。
- 通过这个练习，你可以真正体验如何只用简单的形状来探索和创造布局。

16-primitive-shapes-review

练习回顾与总结

作品点评
- 展示并点评了学员的纸上构图作品。
- 亮点：
  - 使用对角线打破空间。
  - 利用圆形作为视觉焦点。
  - 将元素置于前景，利用 Z 轴创造空间感。
  - 在倾斜的形状中保持文本水平，保证可读性。
练习的价值
- 摆脱细节束缚：当你只关注基本形状时，你不会被具体的文字、图片内容所困扰，更容易进行大胆的实验和重组。
- 降低心理负担：在纸上画草图的成本很低，修改起来毫不费力。这比在 Photoshop 或代码中反复调整要轻松得多，也更能激发创造力。
- 这种方法能帮助你跳出“一个巨大文本框”的思维定式，探索更多样的布局可能性。

17-layout-in-css

CSS 中的布局

从设计到代码
- 现在我们从纯粹的设计思维转向如何用代码实现这些布局。
学习 CSS Grid 的绝佳资源
1. Grid by Example - by Rachel Andrew
  - 一个非常棒的网站，提供了大量关于 CSS Grid 的优质内容、视频和示例。
  - 她的教程清晰易懂（声音也很好听！），并且包含了对旧浏览器的优雅降级方案（如 Flexbox 或 float）。
  - 网站上有许多现成的模式 (patterns)，可以直接拿来用，是上手 Grid 的绝佳起点。
2. Experimental Layout Lab - by Jen Simmons
  - Jen Simmons 的实验性布局实验室，展示了各种富有创意和美感的布局方式。
  - 所有示例都是在浏览器中实现的，你可以直接使用开发者工具 (DevTools) 来探索和学习它们是如何构建的。
  - DevTools 的妙用：
    - 你可以直接在 DevTools 里修改代码，比如取消一个transform: rotate，就能看到布局在旋转前的原始状态。
    - Chrome 和 Firefox 都内置了强大的 Grid 检查器，只需悬停在元素上，就能清晰地看到网格线、间距 (gap) 等，是学习 Grid 的利器。
3. Grid Garden
  - 一个包含 28 个关卡的游戏化学习网站，通过玩游戏的方式教你 CSS Grid。
  - 大约半小时就能通关，能让你在实践中快速掌握 Grid 的基本概念。
学习心态
- 你不需要成为专家：讲师本人也不是 Grid 专家，但她掌握了足够的基础知识来构建出色的布局。
- 循序渐进：Grid 的功能非常庞大，但你不需要一次性全部学会。可以从最简单的几个属性开始，比如 display: grid 和 grid-template-columns，然后随着熟练度的提升再逐步学习更多高级特性。

18-css-grid-demos

CSS Grid 代码演示

1. 基本网格创建
- display: grid: 将一个容器声明为网格布局。
- grid-template-columns / grid-template-rows: 定义网格的列和行。
- fr 单位: “分数 (fraction)”单位，它会按比例分配可用空间。例如 1fr 1fr 1fr 会创建三个等宽的列。
- repeat() 函数: 简写方式，repeat(5, 1fr) 等同于写五个 1fr。
- grid-column-gap / grid-row-gap: 定义网格线之间的间距。
- 注意: 网格是独立于内容的。即使没有足够的子元素填满所有单元格，网格结构依然存在。
2. 单元格内对齐
- justify-items / align-items: 类似于 Flexbox，可以控制子元素在网格单元格内的对齐方式（如 center, start, end）。
- 这使得你可以轻松实现元素在单元格内的居中或其他对齐效果。
3. 命名区域 (Grid Naming)
- 这是 Grid 一个非常酷的特性！
- grid-area: 为网格中的子元素命名，如 grid-area: header;。
- grid-template-areas: 通过使用你定义好的名称来“绘制”布局。
```
grid-template-areas:
  "header header header header header"
  "main main main . sidebar" /* . 表示留空 */
  "footer footer footer footer footer";
```
- 优点：
  - 布局结构一目了然，非常直观。
  - 代码可读性极高，易于维护。
  - 无需计算复杂的跨列/跨行。
4. 手动放置项目 (Manual Placement)
- 长格式:
  - grid-column-start, grid-column-end
  - grid-row-start, grid-row-end
  - 可以使用行号（从 1 开始，非 0）或 span 关键字（表示跨越多少个单元格）。
- 短格式 (grid-area):
  - grid-area: row-start / column-start / row-end / column-end;
  - 记忆顺序：行开始 / 列开始 / 行结束 / 列结束。
- 结论：grid-area 属性非常强大，既可以用来命名，也可以用来精确定位。
5. minmax() 函数
- 我最喜欢的功能！ 它非常强大，可以在不使用媒体查询的情况下实现响应式。
- minmax(min, max): 为网格轨道定义一个尺寸范围。
- 例子:
  - minmax(200px, 1fr): 轨道宽度最小为 200px，但可以自由扩展。
  - minmax(auto, 300px): 轨道宽度由内容决定，但最大不超过 300px。
- 优点: 能够创建非常流畅、自适应的响应式布局，代码简洁。

19-grid-naming-example

此部分内容已合并至 18-css-grid-demos 的第 3 点“命名区域 (Grid Naming)”中，此处不再重复。

20-css-flexbox

CSS Flexbox 及其他布局技巧

Flexbox 指南 (CSS-Tricks)
- CSS-Tricks 网站上的 “A Complete Guide to Flexbox” 是一份极其经典的资源。
- 它的访问量甚至超过了网站首页，是无数开发者构建布局时的“救命稻草”。
实现圆形环绕文字效果
- shape-outside 属性: 这是一个非常酷的 CSS 属性，可以让文字环绕非矩形的形状。
- 用法: shape-outside: circle(50%);
- 浏览器支持与优雅降级:
  - 目前并非所有浏览器都支持（如 Firefox, Edge）。
  - 可以使用 @supports 查询来进行渐进增强：在不支持的浏览器中，它会自然地降级为方形环绕，效果依然可以接受。当未来浏览器支持该属性时，效果会自动出现。
实现基本的圆形图片
- 这非常简单，只需使用 border-radius: 50%; 即可。

21-using-clippath-other-masking-tools

使用 clip-path 和其他遮罩工具

方法一：使用 SVG 实现对角线
- 原理:
  1. 创建一个 SVG 元素。
  2. 在 SVG 内部用 <path> 或 <polygon> 绘制一个三角形。
  3. 设置 preserveAspectRatio="none"。这是关键，它会让 SVG 放弃固有的宽高比，从而拉伸填满其容器的整个空间。
- 优点:
  - 这不是 hack：SVG 天生就是为绘图而生，用它来创建形状是其本职工作。
  - 响应式友好：由于 preserveAspectRatio="none"，SVG 可以自适应容器的任何尺寸变化。
  - 浏览器支持良好。
方法二：使用 CSS clip-path
- clip-path 属性: 可以使用基本形状（如 polygon()）来裁剪元素。
- 辅助工具: Clippy (by Bennett Feely) 是一个非常棒的在线工具，可以帮助你可视化地创建各种clip-path形状并生成代码。
- 浏览器支持问题:
  - CSS clip-path 的浏览器支持并不完美。
  - 更好的选择：使用 SVG 作为clip-path的源，即 clip-path: url(#my-svg-clip-path);。这种方式的浏览器支持度要好得多。
终极资源：yoksel 的 CodePen
- yoksel 是一位非常有才华的开发者，她的 CodePen 集合是学习各种裁剪和遮罩技术的宝库。
- 她全面展示了使用 CSS、SVG、clip-path、mask等多种方法实现裁剪效果，并提供了实时更新的浏览器支持图表和代码示例，非常值得研究。

22-css-writing-mode

CSS `writing-mode` 属性

作用:
1. 实现垂直文本: 这是将文本旋转 90 度的“官方”方法，可以创建竖排文字效果。
2. 国际化 (Internationalization): 这是它的核心用途，用于支持从右到左或垂直书写的语言，如希伯来语、中文、日文等。这是必须使用的属性。
与 transform 的对比:
- transform: rotate(90deg):
  - 优点: 浏览器支持极其广泛，几乎所有浏览器都支持。
  - 缺点: 本质上是一种视觉上的“hack”，它只是将渲染好的元素旋转，并没有改变文本的流向。
  - 适用场景: 当你只是为了“酷炫”的视觉效果而需要旋转文本时，这是更可靠的选择。
- writing-mode:
  - 优点: 语义上正确，它真正改变了文本的书写方向和布局流。
  - 缺点: 浏览器支持不如 transform 那么普遍。
  - 适用场景: 国际化，或者当你需要真正的垂直文本流时。

23-grid-by-example-demo

演示：从 Grid by Example 开始构建布局

核心思路:
- 不要从零开始：在现实生活中，我们很少完全从零开始写代码。借鉴和修改现有成熟的示例是更高效、更实际的做法。
- 学习专家: 我们将直接使用 Rachel Andrew 的 "Grid by Example" 网站上的示例作为起点。
操作步骤:
1. 选择模板: 在 "Grid by Example" 网站上浏览，找到一个与我们之前在 Photoshop 中设计的草图最相似的布局模板。
2. Fork CodePen: 将选中的示例在 CodePen 中进行“Fork”，创建自己的副本以便修改。
3. 环境配置 (可选但推荐):
  - Normalize.css: 引入它来清除浏览器默认的、不必要的样式（如 body 的 padding），让你的样式在一个干净的基础上开始。
  - Autoprefixer: 自动为你添加各种浏览器的 CSS 前缀，省去手动编写的麻烦。
  - SCSS: 使用 Sass 预处理器，可以让你使用更强大的 CSS 语法。
4. 修改与调整:
  - 定义容器尺寸: 使用 width: 100vw; height: 100vh; 让主容器占满整个视口。
  - 处理边距: 浏览器默认有边距，如果设计稿需要全屏但有内边距，需要用 calc() 函数来计算实际宽高，如 width: calc(100vw - 80px);。
  - 修改网格定义:
    - grid-template-columns: 根据设计稿调整列的定义，比如从固定宽度改为 repeat(3, 1fr)。
    - grid-template-rows: 定义行的高度，比如头部和底部固定为80px，中间内容区域设为 1fr 自动填充剩余空间。
    - grid-template-areas: 修改布局区域的定义，以匹配新的设计。
5. 添加特殊元素:
  - 侧边栏旋转文字:
    - 使用 position: fixed; 或 position: absolute; 将其脱离文档流。
    - 使用 transform: rotate(90deg); 将其旋转。
    - 通过微调 left 和 top 属性，将其精确定位到页面的侧边。
  - 导航栏:
    - 在header区域内，使用 <ul> 和 <li> 创建导航列表。
    - 使用 display: flex; 快速实现导航项的水平排列。
    - 清除 <ul> 的默认 padding 和 <li> 的 list-style。
6. 善用工具:
  - Emmet: 使用 Emmet 缩写（如 ul>li*4）可以极大地加快 HTML 结构的编写速度。
结论:
- 在短短几分钟内，通过借鉴现有模板并进行修改，我们就能快速构建出一个与设计稿非常接近的、复杂的网格布局。

24-layout-exercise

练习：将设计稿用代码实现

练习任务:
1. 启动你的代码编辑器（或使用 CodePen 等在线工具）。
2. 选择一个你之前在纸上或 Photoshop 中设计的构图。
3. 尝试用 CSS Grid 将其在代码中重现。
建议:
- 可以从现有示例开始: 为了加快进度，你可以使用课程中提供的示例代码或 "Grid by Example" 网站上的模板作为起点。
- 暂时忽略复杂部分: 如果你的设计稿中有对角线等复杂形状，可以先不用实现，我们稍后会一起处理。
- 从零开始也可以: 如果你对自己有信心，完全可以从零开始编写 Grid 代码。

25-layout-q-a

布局问答

问：可以在 Grid 中嵌套 Grid 吗？
- 答：完全可以 (Totally can)。
嵌套 Grid 的使用场景:
- 这是一种非常好的实践，尤其是在某些特定场景下。
- 例子: 你的整体页面是一个动态的、不规则的网格布局，但其中某一个区域需要展示一个整齐的图片网格。在这种情况下，使用嵌套 Grid 就非常合适。
嵌套 Grid 的注意事项:
- 维护性 (Maintainability): 在决定是否使用嵌套 Grid 之前，要优先考虑代码的维护性。
- 尽量简化: 如果一个单层 Grid 就能解决问题，那就尽量不要使用嵌套。因为对于后续维护者来说，理解多层嵌套的 Grid 可能会变得复杂。
- 权衡利弊:
  - 思考一下：当设计需求变更时，这个布局是否容易更新？
  - 有时候，使用嵌套 Grid 反而能让结构更清晰、更易于管理，而不是更复杂。关键在于具体情况具体分析。

26-color-modes

色彩模式

颠覆传统认知:
- 我们在学校学的“红黄蓝”三原色，实际上是不完全正确的。
- 色彩的混合方式主要有两种：加色法 (Additive) 和 减色法 (Subtractive)。
加色法 (Additive Color Mixing) - RGB:
- 原理: 光的混合。混合的光越多，颜色越亮。
- 三原色: 红 (Red)、绿 (Green)、蓝 (Blue)。
- 混合结果: 红 + 绿 = 黄；红 + 绿 + 蓝 = 白光。
- 应用场景: 屏幕显示。所有你在电脑、手机上看到的颜色，都是由 RGB 光混合而成的。
减色法 (Subtractive Color Mixing) - CMYK:
- 原理: 颜料的混合。混合的颜料越多，吸收的光越多，颜色越暗。
- 三原色: 青 (Cyan)、品红 (Magenta)、黄 (Yellow)。
- 混合结果: C + M + Y 混合会得到一种深褐色，而不是纯黑色。
- K - Black: 在印刷中，会额外加入黑色 (K)，因为它能产生比三色混合更纯粹、更丰富的黑色。
- 应用场景: 印刷品。
核心要点:
- 在设计软件（如 Photoshop）中，当它询问你“色彩模式”时：
  - 如果你的设计最终用于屏幕（网页、App），选择 RGB。
  - 如果你的设计最终用于印刷（海报、书籍），选择 CMYK。

27-color-mixing

色彩混合与搭配

色彩的相对性:
- 一个颜色是什么，完全取决于它旁边的颜色是什么。
- 例子: 同一个灰色方块，放在深色背景上会显得很亮；放在浅色背景上会显得很暗。
- 这也是为什么你精心设计的调色板，在加入一个新颜色后可能突然“失灵”的原因。
色彩对比度与可访问性 (Accessibility):
- 重要性: 保证文本和背景有足够的对比度，对于视力障碍用户至关重要。
- 工具推荐:
  - Colorable: 输入两个颜色，它会告诉你对比度是否达到 AA 或 AAA 级别，或者“失败(Fail)”。是与他人沟通色彩选择的有力工具。
  - Contrast-A 和 Text on background image AI checks: 更多检查对比度的工具。
色彩搭配理论 (Color Harmonies):
1. 单色 (Monochromatic): 只使用一种颜色，通过调整其饱和度和亮度来创造变化。非常安全且容易出彩。
2. 邻近色 (Analogous): 使用色轮上相邻的几种颜色。能创造出和谐、统一的视觉效果。
3. 互补色 (Complementary): 使用色轮上相对的两种颜色。能创造出强烈的视觉对比和冲击力。
4. 三色组 (Triadic): 使用色轮上呈等边三角形分布的三种颜色。用得好会非常出彩，但也很容易搞砸。
5. 分裂互补色 (Split Complementary): 一种颜色与其互补色旁边的两种颜色搭配。比直接用互补色更柔和，但同样有对比。
工具推荐: Adobe Color (原 Kuler)
- 一个强大的在线配色工具。
- 你可以选择不同的色彩搭配规则（单色、邻近色、互补色等），在色轮上拖动，实时生成配色方案。
- 可以浏览和“fork”其他设计师创建的优秀调色板。
- 核心观点: 你不需要成为色彩天才，你可以“偷”别人的配色方案。

28-color-modes-and-properties

色彩的模式与属性

单色调 (Monotone):
- 整个图像只使用一种色调进行渲染。
- 通过改变主色调，可以赋予同一张图片完全不同的情绪和感觉。
双色调 (Duotone):
- 使用两种色调来渲染图像。
- Spotify 的广告和品牌设计让这种风格广为人知。
- 在 Photoshop 中可以轻松实现。
光与影的色彩关系:
- 物理现实: 在现实世界中，物体的阴影颜色是其所受光照颜色的互补色。
- 例子: 黄色光照射下的物体，其阴影会偏向紫色。
- 设计应用: 在设计中运用这个原理（比如给红色高光区域配上一些青绿色调的阴影），可以让你的作品看起来更真实、更有层次感。
远近与色彩的关系 (Atmospheric Perspective):
- 远处的物体: 对比度低、更模糊、色彩饱和度低。
- 近处的物体: 对比度高、更清晰、色彩更鲜艳。
- 设计应用: 你可以利用这个原理来创造空间的深度感。即使是平面布局，通过使用鲜艳、高对比的颜色来表现“近”的元素，用模糊、低饱和的颜色来表现“远”的元素，也能给用户带来微妙的远近感知。

29-color-in-code

代码中的色彩格式

RGBA (Red, Green, Blue, Alpha):
- rgba(0-255, 0-255, 0-255, 0-1)
- R, G, B 分别是 0 到 255 的整数。A (Alpha) 是 0 到 1 的小数，表示不透明度。
- (0,0,0) 是黑色，(255,255,255) 是白色。
- 缺点: 不够直观，难以凭数字想象颜色。
Hex (十六进制):
- #RRGGBB
- 优点: 非常便于复制粘贴。
- 缺点: 人类可读性最差。让你“把这个 Hex 颜色调得更红一点”，你几乎无法做到。
HSLA (Hue, Saturation, Lightness, Alpha) - 讲师的最爱:
- hsla(0-360, 0-100%, 0-100%, 0-1)
- Hue (色相): 0 到 360 的度数，代表在色轮上的位置。这是一个循环，361 度等于 1 度。
- Saturation (饱和度): 0%到 100%，表示颜色的纯度。
- Lightness (亮度): 0%到 100%，0%是黑色，100%是白色，50%是纯色。
- 优点:
  - 人类可读性极高。让你“把这个颜色调得不那么饱和，再偏向青色一点”，你可以直接修改 S 和 H 的值。
  - 非常适合生成式颜色。由于 Hue 是循环的，你可以在循环中不断增加 Hue 的值来生成一系列和谐的颜色，而不用担心越界。
Named Colors (命名颜色):
- purple, red, blue 等。
- 优点: 在做演示时非常方便。
- 缺点: 极不一致，不推荐在生产环境中使用。例如，grey 比 darkgrey 还要暗。

30-color-variables

色彩变量

为什么使用色彩变量？
- 保持一致性: 确保整个应用中的品牌色、主色、辅助色等保持统一。
- 易于维护:
  - 真实案例: 讲师曾经历过在项目发布前夜，客户决定更换品牌色。因为使用了变量，她只修改了一个地方，整个网站（超过 4000 页）的颜色就全部更新了，然后她就回家喝酒了。
  - 这就是变量的威力。
Sass/SCSS 变量:
- 使用 $ 定义变量，如 $brand-color: #ff0000;
- 优点:
  - 可以在 Sass 中进行颜色计算，如 lighten($brand-color, 10%) 或 darken()。这对于生成一系列有规律的色阶（如不同深浅的灰色）非常方便。
- 缺点: 编译后变量就不存在了，JavaScript 无法访问。
原生 CSS 变量 (Custom Properties):
- 使用 - 定义变量，如 -brand-color: #ff0000;
- 优点:
  - 它们是“活的” (They are living)。变量在运行时依然存在于 DOM 中。
  - JavaScript 可以读写。你可以用 JS 来动态修改 CSS 变量的值，实现强大的交互效果。
- 缺点: 旧版浏览器（如 IE）不支持。

31-limited-color

限制色彩

初学者建议:
- 尽可能地限制你的调色板。
- 从有限的几种颜色开始，能帮助你保持设计的一致性和凝聚力。
- 先搭建好大的色彩框架，然后再逐步添加细节。
类比构图:
- 这和我们之前做布局练习的思路一样：先用大的、基本的形状（颜色）搭建好整体结构，然后再填充细节。
案例分析:
- 一个优秀的设计通常只使用几种核心颜色。
- 比如一个网站可能只用了背景色、主色（蓝色）和图标色，但这几种颜色贯穿始终，构成了整个设计统一的视觉语言。

32-color-tools

色彩工具

1. Dribbble
- 功能:
  - “偷”调色板: 每个作品下方都有一个色板，你可以点击下载，并直接导入到 Photoshop 等软件中。
  - 按颜色浏览: 点击某个颜色，Dribbble 会展示所有使用该色系的设计作品。
- 适用场景: 当你被指定了一个品牌色时，可以用这个功能来寻找灵感，看看其他设计师是如何搭配这个颜色的。
2. Coolors (colors.co)
- 讲师最爱，尤其适合个人项目！
- 功能:
  - 一键生成: 不断按空格键，它会随机生成一组和谐的五色调色板。
  - 锁定与微调: 如果你喜欢其中的几个颜色，可以“锁定”它们，然后只刷新你不喜欢的颜色。
  - 导出方便: 可以将生成的调色板导出为 SVG、PNG、URL 等多种格式。
  - 全局调整: 可以对整组调色板进行饱和度、亮度等全局调整。
- 核心价值: 当你毫无头绪时，它能帮你快速找到一个意想不到但效果出色的起点。
3. Paletton
- 功能:
  - 基于色彩理论: 类似于 Adobe Color，你可以选择单色、邻近色、三色组等色彩关系。
  - 比例控制: 它的特色是可以用一个方形区域来控制不同颜色在调色板中的“占比”。如果你需要大量的主色和少量点缀色，这个工具非常直观。
  - 生成色阶: 会根据你选择的颜色自动生成不同深浅的色阶。
4. Palettab (Chrome 扩展)
- 功能: 每次你打开一个新的浏览器标签页，它都会展示一个新的调色板和一些字体搭配。
- 适用场景: 在日常浏览中不经意地收集灵感。
5. Adobe Capture (手机 App)
- 功能:
  - 从图片取色: 拍一张你喜欢的照片，它会利用机器学习分析图片并提取出一组和谐的调色板。
  - 情绪选择: 你可以告诉它你想要“快乐的”、“忧郁的”等情绪，它会根据情绪倾向来提取颜色。
  - 微调: 即使是从同一张图片，你也可以不断调整，直到找到满意的调色板。
6. 渐变工具
- Ultimate CSS Gradient Generator:
  - 优点: 如果你已经有颜色，需要生成 CSS 渐变代码，这个老牌工具非常好用，能提供带各种浏览器前缀的兼容代码。
- UI Gradients:
  - 优点: 如果你需要寻找渐变灵感，这个网站非常棒。可以不断按空格键切换，或者查看所有预设的渐变方案。

33-animated-gradients

动画渐变

性能问题:
- 不要直接对 background-gradient 进行动画！
- 直接对渐变进行动画会引发大量的重绘 (Repaint)，这是一个非常消耗性能的操作，会导致动画卡顿。
高性能的解决方案 (讲师提供的 CodePen 示例):
1. 创建两个不同颜色的大色块。
2. 对其中一个色块使用遮罩 (mask)。
3. 通过改变色块的 transform 属性（如平移）来移动它。
原理:
- transform 动画通常由 GPU 处理，不会触发重绘或重排 (Reflow)，性能极高。
- 你看到的渐变动画效果，实际上是一个颜色块在另一个（或遮罩）后面平滑移动的结果，而非渐变本身的颜色在变化。

34-how-to-create-a-palette

如何创建调色板

创建调色板的系统方法:
1. 确定主色 (Anchor Color):
  - 找到你的核心品牌色，比如“品牌蓝”。
  - 围绕这个主色，创建出不同情绪的版本，比如“更有活力的蓝”和“更稳重的蓝”，形成一个初步的色谱。
2. 提取灰色系:
  - 从主色中提取: 将你的主色去饱和 (desaturate)，从而得到一组带有主色倾向的灰色。
  - 为什么这么做？:
    - 这样得到的灰色会比纯粹的灰色 (#333) 更“丰富”，与你的主色搭配时会更和谐。
    - 色彩相对论: 在蓝色旁边的、略带蓝调的灰色，会比纯灰色看起来更“灰”。
3. 收集点缀色 (Accents):
  - 寻找主色的互补色或对比色作为点缀。
  - 例子: 对于蓝色主色，黄色、红色、粉色都可以作为备选点缀色。
  - 传达不同情绪: 不同的点缀色会给设计带来完全不同的感觉（橙色点缀 vs. 粉色点缀）。
  - 选择其一: 通常只选择一个点缀色，而不是全部使用。

35-data-visualization-with-hsl-a-example

HSL 在数据可视化中的应用

Nadi Bremmer 的作品:
- Nadi Bremmer 是一位杰出的数据可视化艺术家，她经常使用 HSL 来创建生成式色彩。
HSL 的优势:
- 在她的作品中，你可以看到颜色沿着色谱平滑过渡，但它们的亮度和饱和度保持一致。
- 这正是 HSL 格式的强大之处：固定 S (饱和度) 和 L (亮度) 的值，只改变 H (色相) 的值，就能轻松生成一系列视觉上统一且和谐的颜色。

36-creating-a-palette-demo

演示：在 Photoshop 中创建调色板

从图片开始:
1. 找到主图: 如果你的设计有一个核心图片（如首页大图），从它开始提取颜色是最简单的方法。
2. 置入图片: 将图片拖入你的设计稿。
3. 遮罩应用: 使用“魔棒工具”或选区工具选中你想要放置图片的形状，然后为图片图层添加图层蒙版，图片就会被裁剪成该形状。
4. 调整图片: 取消蒙版和图片的链接，这样你就可以在不移动蒙版的情况下，移动图片来找到最佳的构图。
创建调色板:
1. 吸取主色: 使用“吸管工具”从图片中吸取一个你喜欢的主色。
2. 创建色阶: 复制主色色块，然后通过在拾色器中微调亮度或饱和度，创建出一系列深浅不同的色阶。
3. 确定点缀色: 在色轮上找到主色的互补色区域（如蓝色对应橙红色），选择一个你喜欢的点缀色。同样，为点缀色也创建一些色阶。
4. 生成灰色系:
  - 将你创建的所有彩色色块编组并复制。
  - 在复制的组上方添加一个“调整图层 (Adjustment Layer)”，比如“色相/饱和度”。
  - 将饱和度降到最低，你就得到了一组与你的主色系相匹配的灰色。
  - 还可以尝试“黑白”调整图层，并微调不同通道，来获得更丰富的灰度效果。
结论:
- 通过这种系统的方法，你可以从一张图片出发，快速建立起一套包含主色、点缀色和配套灰色系的完整、和谐的调色板。

37-creating-a-palette-exercise

练习：创建并应用调色板

练习任务:
1. 创建调色板: 使用刚刚学到的任何工具或技术，创建一个包含5 个主色和5 个灰色/黑色的调色板。
2. 应用调色板: 将这套调色板应用到你上一个练习中完成的布局构图上。
应用指导:
- 不必无处不在: 你不需要把所有颜色都用上。照片和文字本身就有颜色。
- 寻找点缀机会: 在你的布局中找到可以添加点缀色的地方（如小图标、按钮、下划线），并应用你的主色之一。
- 创造点缀机会: 如果你的布局中没有可以点缀的地方，那就创造一个。

38-typography-basics

字体基础

排版的重要性:
- 真实案例（奥斯卡乌龙事件）: 颁奖嘉宾拿错了卡片，将“最佳影片”《月光男孩》念成了《爱乐之城》。
- 原因: 卡片上的排版设计有严重问题。最大的字是电影名 "La La Land"，而真正重要的信息“最佳女主角”却很小。
- 如果排版正确: 应该将“最佳女主角”作为最重要的信息突出显示，电影名作为次要信息。这样，嘉宾一眼就能看出拿错了卡片。
- 结论: 好的排版对于信息层级 (Hierarchy)、意义传达和用户理解至关重要。
字体分类:
1. Serif (衬线体): 笔画末端有装饰性的“小脚”或卷曲。
2. Sans-serif (无衬线体): 笔画末端干净利落，没有装饰。
3. Slab Serif (粗衬线体): 衬线体的一种，但“小脚”是粗壮、块状的，而非平滑的曲线。
4. Script (手写体): 模仿手写笔迹的字体。
5. Display (展示体):
  - 通常很有设计感，适合用作大标题 (H1)。
  - 当字号变小时，会变得难以辨认 (illegible)。
  - 不适合用作正文。
6. Novelty (新奇/装饰体): 极具个性的字体，如万圣节主题字体，或用爱心代替 i 上一点的字体。

39-typography-resources

字体资源

1. Google Fonts
- 优点:
  - 免费。
  - 设置超级简单，直接提供 CSS 引入链接。
  - 可能是最常用的字体库。
2. Font Squirrel
- 优点:
  - 大部分免费或价格低廉。
  - 核心功能: Webfont Generator。如果你有一个桌面字体文件，可以用这个工具生成在网页上使用的各种格式的 Web 字体。
3. Fonts.com
- 优点:
  - 核心功能: WhatTheFont。这是一个神器！你可以上传一张带有字体的图片截图，它会利用机器学习分析并告诉你这是什么字体。当你拿到一张没有源文件的设计稿时，这个功能能救命。
- 缺点:
  - 收费，价格中等。
  - 设置比 Google Fonts 稍复杂。
4. Hoefler & Co. (typography.com)
- 优点:
  - 字体极其精美，设计感一流。
  - 提供订阅服务（如一年 300 美元用 6 款字体）。
- 缺点:
  - 价格昂贵。
  - 警告: 如果你不想花钱，最好别去这个网站，就像你不想养狗就别去宠物店玩小狗一样，因为你很可能会忍不住买下来。

40-pairing-fonts

字体搭配

字体搭配的基本规则:
1. 寻求对比: 搭配两种风格差异较大的字体。
  - 经典组合:
    - 一个 Display (展示体) + 一个 Sans-serif (无衬线体)
    - 一个 Serif (衬线体) + 一个 Sans-serif (无衬线体)
2. 数量限制: 不要超过 3 种字体。
  - 原因 1 (美学): 字体太多会让设计看起来像一封“勒索信”，混乱不堪。
  - 原因 2 (性能): 字体文件会显著增加网站加载负担，严重影响性能。
3. 避免过于相似: 不要选择两种看起来“很像但又有点不一样”的字体。这会给用户一种“哪里不对劲”的感觉，破坏整体的和谐感。
常见错误与正确做法:
- 错误: 用一个难以阅读的 condensed 字体 (Oswald) 做正文，用一个平庸的字体 (Lato) 做标题。
- 正确: 用 Oswald 做标题（大而醒目），用 Lato 做正文（清晰易读）。
工具推荐:
- Google Fonts Pairing: Google Fonts 网站自带字体搭配预览功能，可以让你在选择前看到两种字体搭配在一起的效果。
- Font Joy:
  - 一个利用机器学习来生成字体搭配方案的网站。
  - 类似于 Coolors，你可以不断刷新来寻找灵感。
  - 同样有“锁定”功能，可以固定你喜欢的某一款字体，然后只更换其他的。

41-typography-for-lawyers

《写给律师的排版术》

核心观点:
- 作者和读者的专注度是完全不同的。作者对主题兴趣高、注意力长；读者兴趣低、注意力短。
- 你必须为读者优化排版，而不是想当然地认为他们会耐心阅读。
关键规则：行长 (Line Length):
- 问题: 如果一行文字太长，横跨整个屏幕，读者的眼睛会非常疲劳。更重要的是，读完一行后，很难快速找到下一行的开头。
- 解决方案: 将正文的行长限制在 45 到 90 个字符之间。
- 实践: 这也是为什么报纸和网站经常使用 分栏 (columns) 布局的原因——为了保持较短的行长，提升阅读体验。

42-typographic-color

字体的“色彩”

什么是字体的色彩 (Typographic Color)？
- 它不是指颜色的红橙黄绿，而是指一大段文字在视觉上形成的整体纹理、节奏和灰度。
如何判断？
- 眯眼测试: 当你眯起眼睛看一大段文字时，它应该呈现出一种均匀的灰色纹理 (even grays)。
- 不好的字体色彩: 如果眯眼看时，你能看到文字中有明显的“洞”或“疙瘩”，说明这款字体的内部节奏不均匀，不适合用作大段的正文。
应用:
- 这个概念主要用于选择正文字体。好的正文字体应该有均匀的“色彩”，让长时间阅读不费力。
响应式字体 (Responsive Typography):
- 工具: Mike Riethmuller 发明了一套 CSS 公式，可以实现字体大小随屏幕宽度平滑缩放。
- 实践: 你不需要从零开始写这个复杂的公式，可以直接从他的 CodePen 示例中“偷”来用。CSS-Tricks 网站就使用了这个技术。
文字锁排 (Text Lockup):
- 技术: 使用 SVG 中的 <text> 元素来创建复杂的、有创意的文字布局。
- 优点: 整个布局可以作为一个整体进行响应式缩放，同时保持文字的可读性和可访问性（因为它们仍然是文本）。

43-terminology

字体术语

Monospaced (等宽字体) vs. Proportional (比例字体):
- 等宽: 每个字符（如i和w）占据相同的水平空间。程序员最爱。
- 比例: 字符占据的空间与其自身宽度成正比。
Kerning (字偶距) vs. No Kerning:
- Kerning: 调整特定字母对（如'A'和'V'）之间的间距，使其视觉上更均衡、和谐。
- No Kerning: 字母之间只有固定的间距，不考虑视觉补偿。
- CSS 对应: letter-spacing (但 letter-spacing 是全局调整，而 kerning 是针对特定字母对的微调)。
- 如何避免事故: 检查你的字间距，确保不会产生歧义（如 "Click here" 看成 "Clit here"）。
- Photoshop 技巧: 在字符面板中，将间距设置从 Metrics (度量) 改为 Optical (视觉)，可以获得更好的 kerning 效果。
Leading (行距):
- 定义: 一行文字基线到下一行文字基线的垂直距离。
- 来源: 活字印刷时代，在两行铅字之间插入铅条 (lead) 来增加间距，因此得名。
- CSS 对应: line-height。
Widows (寡妇行) & Orphans (孤儿行):
- Widow: 一段的最后一个词单独留在下一行。
- Orphan: 一段的第一个词或短语被遗弃在上一页的末尾。
- 影响: 破坏阅读节奏，不美观。
- 处理: 在不影响语义的情况下，通过手动换行或调整字间距来消除它们。对于 API 生成的内容，可能无法控制。
Ligatures (连字):
- 传统连字: 将特定的字母组合（如 'f' 和 'i'）合并成一个更美观的单一字符。
- 代码连字: 在代码编辑器中，将常见的符号组合（如 =>, ===）显示为更直观的单个符号。这是一个个人偏好问题。
视觉居中 (Optical Centering):
- 现象: 在一本书中，正文内容实际上并不是在页面的绝对垂直中心。底部留白总是比顶部多。
- 原因: 如果绝对居中，文字在视觉上会感觉像在“下坠”。向上移动一点，才能达到视觉上的平衡。
字体性能 (Font Performance):
- 专家: Zach Leatherman 是字体性能领域的权威，他的博客有很多优化字体加载策略的干货。
- 重要性: 优化字体加载策略可以显著提升网站性能（讲师曾通过此方法将网站加载时间减少了整整 2 秒）。

44-typography-demo

字体搭配演示

流程:
1. 访问 Google Fonts: 浏览并选择字体。可以先多选几个备选。
2. 筛选与搭配:
  - 决定一个标题字体（如一个优雅的 Serif 字体 Vidaloka）。
  - 查看它与不同正文字体（Sans-serif）的搭配效果。
  - 听取他人意见（"Raleway 还是 Lato?"），最终选定 Raleway。
3. 在 CodePen 中引入:
  - 复制 Google Fonts 提供的 <link> 代码，粘贴到 HTML 的 <head> 设置中。
  - 复制 font-family CSS 规则。
4. 应用字体:
  - 将正文字体应用到 body。
  - 将标题字体应用到 h1, h2, h3 等。
  - 注意: 由于标题标签默认会加粗，而你选择的 Display 字体可能本身已经很粗，不需要再加粗，所以可以设置 font-weight: normal;。
5. 调整布局与内容:
  - 调整网格间距 (grid-gap)，让布局更舒展。
  - 移除占位的边框。
  - 替换内容，如将一个区域的背景设置为图片。
结论:
- 通过引入和搭配字体，原本只是由方块构成的布局立刻变得更有设计感和层次感。

45-typography-exercise-and-q-a

字体练习与问答

练习:
- 在你之前的布局构图中，将占位的矩形替换成真实的文本块。
- 为这些文本块搭配两种字体。
Q&A:
- 问: 我看不出两种字体搭配得好不好，怎么办？
  - 答:
    1. 这是主观的: 如果你觉得好看，那就用。
    2. 遵循安全规则: 如果你不确定，就遵循“寻求对比”的原则。选择一个 Serif 和一个 Sans-serif，或者一个 Display 和一个 Sans-serif，这样通常不会出错。
    3. 使用工具: 利用 Font Joy 这样的工具，让机器帮你生成搭配方案，直到你找到一个“虽然说不出为什么，但就是觉得好看”的组合。
- 评论: 别忘了可变字体 (Variable Fonts)！
  - 什么是可变字体: 一个单一的字体文件，包含了字体的所有变体（粗细、宽度、倾斜度等）。
  - 优点:
    - 性能好: 只需加载一个字体文件，而不是多个。
    - 灵活性高: 设计师和开发者可以精确控制字体的任何一个轴向，实现微调，而无需重新加载字体。
  - 专家推荐: 关注 Mandy Michael，她是可变字体领域的顶尖专家，她的 CodePen 作品令人惊叹。

46-remixing

重混：灵感与原创之间的平衡

核心理念 (来自 Dan Mall):
- 太阳底下无新事 (Nothing new under the sun): 基本上所有东西都是对已有事物的“重混 (Remix)”。
- 这让你摆脱了“必须创造出绝对原创艺术品”的压力。
- 你的任务不是从零创造，而是以一种独特的方式，将不同的灵感来源组合在一起。
如何寻找灵感但不抄袭:
1. 广泛收集灵感:
  - 浏览 Dribbble, Behance, CodePen, Glitch, CodeSandbox 等网站。
  - 找到你心目中的“英雄”，看他们是如何工作的。这能极大地丰富你视觉工具箱里的工具。
  - 核心: 你不是在窃取一个完整的布局，而是在学习一个概念（例如，放大图片并裁剪、打破边界等）。
2. 等待与遗忘 (The "Wait" Rule):
  - 把所有你喜欢的灵感作品都扔进一个文件夹里。
  - 然后，不要马上开始设计，去睡一觉。
  - 第二天，凭记忆来创作。
  - 原理: 当你不直接看着参考物时，你很难完全复制它。这段时间会让不同的灵感在你的脑海中重新组合，形成一种全新的、属于你自己的东西。
3. 重新审视:
  - 设计完成后，再回头去看你最初的灵感来源。
  - 如果你的作品和它看起来惊人地相似，那么你需要修改它，或者干脆扔掉重来。
跨界寻找灵感:
- 不要只局限于网页设计！ 人类历史和艺术远比这 50 年要丰富得多。
- 灵感来源:
  - 书籍/版画: 学习构图和组合方式。
  - 音乐: 感受节奏和情绪。
  - 电影/动漫: 学习动态剪辑、独特的视角、色彩运用、风格切换等（如《新世纪福音战士》中充满活力的对角线和爆炸场景）。
大师临摹 (Master Copies):
- 概念: 在博物馆里，你会看到有人坐在名画前临摹。他们不是为了把临摹品当成自己的作品，而是为了学习。
- 目的: 通过一笔一划地复制，去理解大师是如何构图、用色、运用笔触的。这和“逆向工程”代码的道理一样。
- 实践:
  - 你可以找一个 Dribbble 上的作品，在 Sketch 或 Photoshop 里尝试完整地复制一遍。
  - 你不能把这个复制品署名为自己的作品。
  - 但是，这个过程会让你学到很多技巧。之后你创作出的东西，会比之前丰富得多。

47-sources-of-inspiration

灵感来源的具体案例

Give n Go:
- 一个精选网站，展示了开发者们将 Dribbble 上的设计（通常是 GIF 或静态图）用代码实现为可交互的 CodePen 项目。
- 是前端开发者练习和展示技能的好地方。
从瑞士设计中学习 (Swiss Design):
- 实践案例: 讲师在学习 CSS Grid 时，找了很多瑞士设计的海报来临摹。
- 优点: 瑞士设计的网格系统和布局非常适合用来练习 CSS Grid。
- 过程:
  1. 找到一个瑞士设计海报作为灵感来源。
  2. 用 CSS Grid 将其布局复现出来。
  3. 加入自己的“重混”元素，比如添加动画。
  4. 在作品描述中注明灵感来源，给予原作者 credit。
通过玩乐来学习 (Learn Through Play):
- 实践案例: Miriam Suzanne 在学习 CSS Grid 和 Vue 时，做了一个太空入侵者的小游戏。
- 优点: 将学习新技术的枯燥过程，变成一个有趣的、创造性的项目。
UI Kits (UI 套件):
- 概念: 在 Shutterstock、iStockphoto 等素材网站上可以购买到预先设计好的 UI 组件套件。
- 优点:
  - 快速启动: 当你不想从零开始时，这是一个非常好的起点。
  - 可定制: 你可以购买一套 UI Kit，然后更换字体、颜色、图片、布局，最终它会变成一个完全不同的、属于你自己的设计。
  - 合法使用: 它们就是为此目的而出售的，你可以合法地使用和修改。
Photoshop Actions (PS 动作):
- 概念: 在 Creative Market 等网站上可以买到预设的 Photoshop 动作。
- 功能: 一键将普通照片处理成各种特殊风格，如亮白效果、半色调、海报化等。
- 优点: 让你从 Unsplash 下载的普通图片变得与众不同，传达出独特的视觉风格。
CodePen Patterns:
- CodePen 的一个版块，收集了各种常见 UI 组件（如按钮、手风琴、菜单等）的实现代码。
- 优点:
  - 学习与逆向工程: 查看别人是如何实现各种酷炫效果的。
  - 获取灵感: 看到一个你从未想过的 hover 效果，然后“睡一觉”，明天凭记忆创造出你自己的版本。

48-ui-kit-demo

UI Kit 重混演示

演示流程:
1. 起点: 购买一套名为 "Multicolor" 的 UI Kit。
2. 选取与裁剪: 从众多屏幕中，只选取一个你喜欢的部分进行修改。
3. 修改字体: 将原有的展示字体换成更粗犷、更有力的 Oswald，并调整为全大写。
4. 替换图标: 去 The Noun Project 网站下载新的箭头图标，替换掉原来的。
5. 调整图标样式: 在 Photoshop 中，通过“颜色叠加”图层样式，给新图标换上你的点缀色。
6. 替换背景图片: 换上你自己选择的背景图。
7. 解决可读性问题 (使用蒙版):
  - 将文字颜色改为白色。
  - 在背景图层上添加一个图层蒙版。
  - 使用一个低硬度、低不透明度的黑色画笔，在蒙版上涂抹文字所在的区域，压暗背景，使文字更清晰。
  - 蒙版的优点: 这是非破坏性编辑。如果你压得太暗，可以随时用白色画笔涂抹来恢复背景。
结论:
- 通过一系列的替换和调整（字体、图标、图片、颜色），最初从 UI Kit 中获取的设计已经变得面目全非，完全是你自己的作品了。
- 你可以对任何购买的素材（如图标 SVG、插画）进行类似的“重混”，比如添加动画，让它成为你设计中独一无二的部分。

49-image-formats-resources

图片格式与资源

图片在 Web 性能中的重要性:
- “不懂图片，就别谈 Web 性能。”
- 根据 HTTP Archive 的数据，图片是网页加载内容中占比最大的部分。
- 因此，优化图片是提升网站性能最关键的环节之一。
图片资源:
- 免费:
  - Unsplash
  - Google 图片搜索（高级技巧）:
    1. 搜索关键词（如 "mountain"）。
    2. 点击 工具 (Tools)。
    3. 在 使用权限 (Usage rights) 中，选择 允许重复使用 (Labeled for reuse)。
    - 这样可以确保你使用的图片是有合法授权的。
  - Freepik, Pexels (可能需要注册)。
- 低成本:
  - Creative Market, Adobe Stock。
- 高成本 (但高效):
  - Shutterstock, iStockPhoto。
  - 适用场景: 对于大公司来说，花 50 美元买一张图片，比让高薪员工花几小时在免费图库里寻找要划算得多。时间就是金钱。
Raster (栅格图) vs. Vector (矢量图):
- Raster (栅格图):
  - 像一张方格纸，每个小方格被填充上一种颜色，最终组合成图像。
  - 放大后会失真、出现马赛克。
  - 文件格式: JPEG, GIF, PNG, TIFF, RAW, PSD。
- Vector (矢量图):
  - 基于数学公式和指令（“从 A 点到 B 点画一条线”）。
  - 可以无限放大而不失真，分辨率无关。
  - 文件格式: SVG, AI, EPS。
常见图片格式详解:
- JPEG (JPG):
  - 特点: 有损压缩 (Lossy)。
  - 适用: 照片、色彩和色调丰富的图片（如人脸）。
  - 压缩后果: 降低质量时，图片会变得模糊、出现色块。
- GIF:
  - 特点:
    - 限制颜色数量（最多 256 色）来进行压缩。
    - 支持动画和简单的透明。
  - 压缩后果: 降低质量时，颜色会减少，色调过渡会变得生硬，但不会像 JPEG 那样模糊。
  - 注意: 动画 GIF 文件通常非常大，需要谨慎使用和压缩。
- PNG:
  - 特点:
    - 无损压缩。
    - 支持高质量的 alpha 透明通道（即可以有半透明效果）。
  - 适用: 需要透明背景的图片（如图标）、logo。

50-exporting-tips

图片导出技巧

双倍大小，低质量导出:
- 技巧: 将图片尺寸扩大一倍，然后将导出质量降到很低，最后在 CSS 中将它缩小回原始尺寸。
- 效果: 这种方法可以在保持视觉清晰度的同时，获得比常规导出更小的文件体积。
- 出处: Smashing Magazine 有相关文章详细介绍。
压缩工具:
- 1. TinyPNG / TinyJPG:
  - 神器！ 压缩效果非常好，且画质损失肉眼几乎看不出。
  - 形式:
    - 网页版应用
    - Photoshop 插件 (讲师常用)
    - 桌面应用
- 2. Webpack 插件:
  - 将图片压缩集成到你的**构建流程 (build process)**中，实现自动化。
  - 很多脚手架工具（如 Create React App）已经内置了这类插件。
- 3. SVGOMG:
  - SVG 优化神器，由 Jake Archibald 开发。
  - 特点:
    - 网页版工具。
    - 支持 Service Worker，可以离线使用（访问一次后即可）。

51-svg

SVG (可缩放矢量图形)

SVG 的优势:
1. 基于代码:
  - SVG 本质上是 XML 代码。你只需要提供几个坐标点，浏览器就能为你绘制出平滑的曲线。
2. 可操作的 DOM:
  - SVG 内部有像 HTML 一样的 DOM 结构。你可以给 SVG 的任何一个部分（如一只眼睛）添加 class，然后用 CSS 或 JS 来单独操作它。
  - 调试方便: 可以在浏览器的开发者工具中直接查看和调试 SVG 的结构。
3. 高性能:
  - 文件体积小: 如果路径点不多，SVG 文件可以非常小（几 KB）。
  - 性能关键: SVG 的性能取决于路径点的数量。一个简单的圆非常“便宜”，但一个拥有无数路径点的复杂纹理会非常“昂贵”。
4. 可优化:
  - 可以通过优化路径点来大幅减小 SVG 文件体积。讲师曾通过优化 SVG，将一个项目的加载时间从 12 秒缩短到 2 秒。
5. 创意无限:
  - 可以制作非常复杂的、响应式的、可交互的动画场景。
6. 布局利器:
  - 可以用 SVG 创建网页中难以用 CSS 实现的不规则形状（如对角线、曲线），并将其作为布局的一部分。
7. 能让其他图片变小:
  - 有工具可以利用 SVG 的特性来压缩位图，效果显著。

52-svg-handling-and-full-page-background

SVG 处理与全屏背景

Clipping (裁剪) vs. Masking (蒙版):
- Clipping (裁剪):
  - 使用一个形状的几何轮廓来“剪掉”另一个图像。它只关心形状，不关心颜色或透明度。
  - 效果是非黑即白的（要么显示，要么不显示）。
- Masking (蒙版):
  - 使用一个图像的灰度信息（亮度）来决定另一个图像的透明度。
  - 效果是渐变的。蒙版上越黑的地方，原图就越透明；越白的地方，原图就越不透明。
- 讲师建议: 写一篇博客来记下它们的区别，这样你就永远不会忘了。
SVG 的使用方式:
- 最佳实践: 使用内联 SVG (inline SVG)，即将 SVG 代码直接写在 HTML 里。
- 原因: 只有内联方式才能让你访问 SVG 内部的 DOM，从而用 CSS 或 JS 进行动画和交互操作。
Image Sprites (雪碧图/精灵图):
- 概念: 将多个小图标合并到一张大图上，通过调整 background-position 来显示不同的图标。
- 目的: 减少 HTTP 请求次数，这是在 HTTP/1.1 时代非常重要的性能优化手段。
- 未来: 随着 HTTP/2 的普及，多路复用技术解决了多请求的问题，雪碧图的重要性正在降低。
全屏背景图 (Full Page Backgrounds):
- 场景: 网站的英雄区域 (hero image) 经常需要一张铺满整个视口的背景图。
- 关键 CSS 属性:
  - background-size: cover; (核心：让图片缩放以完全覆盖容器，可能会裁剪掉部分图片)。
  - background-position: center center; (让图片居中显示)。
  - background-repeat: no-repeat; (不重复平铺)。
  - background-attachment: fixed; (让背景图固定，不随页面滚动而滚动，产生视差效果)。

53-images-demo-image-overlay-effects

演示：图片叠加效果

Photoshop 调整图层 (Adjustment Layers):
- 重要技巧: 为调整图层创建剪贴蒙版 (Clipping Mask)，这样它的效果将只作用于它正下方的那个图层，而不会影响整个设计。
- 常用调整图层:
  - Levels (色阶): 通过调整直方图的两端，可以有效改善图片的对比度和曝光，而不会严重破坏画质。
  - Black & White (黑白): 提供了对不同颜色通道（红、黄、蓝等）的精细控制，可以创造出比简单去饱和更具艺术感的黑白效果。
  - Invert (反相): 当你设计陷入僵局时，可以试试反相整个设计，有时会带来意想不到的惊喜。
  - Posterize (色调分离): 减少图像的颜色数量，产生一种风格化的、类似海报的艺术效果。
  - Hue/Saturation (色相/饱和度): 可以大幅度改变图片的颜色和鲜艳程度。
图层混合模式 (Blend Modes):
- 概念: 通过在图层样式中添加“颜色叠加”或“渐变叠加”，并更改其混合模式，可以创造出千变万化的效果。
- 常用模式: Overlay (叠加), Color Burn (颜色加深), Linear Light (线性光), Difference (差值) 等。
- 应用: 当你喜欢一张图片的构图但不喜欢它的颜色时，可以通过混合模式来彻底改变它的视觉感受。

54-layout-demo-coding-compositions

演示：用代码实现设计构图

流程:
1. 添加品牌色:
  - 将之前选定的点缀色（如红色）和主文本色（如深灰色）定义为 CSS 变量 (-brandRed, -brandGray)。
  - 将这些变量应用到设计的各个部分（如边栏、页脚、正文）。
2. SVG 与currentColor:
  - 在 SVG 的 stroke 或 fill 属性中使用 currentColor 关键字。
  - 效果: 这个 SVG 的颜色会自动继承其父元素的 color 属性。这是一个创建可复用、可变色图标系统的绝佳技巧。
3. 添加 Logo (SVG):
  - 获取: 从 The Noun Project 下载一个 SVG 图标。
  - 优化: 使用 SVGOMG 工具优化 SVG 代码，减小文件体积。
  - 注意选项:
    - Clean IDs: 如果你想用 JS/CSS 操作 SVG 内部的特定图层，不要勾选此项，因为它会移除你精心命名的 ID。
    - Round/rewrite paths: 如果你想独立动画多个部分，不要勾选此项，因为它会把多个路径合并成一个。
  - 放入 HTML: 将优化后的 SVG 代码直接内联到 HTML 中。
4. 定位 Logo (绝对定位的技巧):
  - 问题: 如何将一个元素精确定位在另一个元素的角落？
  - 解决方案:
    1. 给父容器（如header）设置 position: relative;。
    2. 给要定位的子元素（如logo）设置 position: absolute;。
    3. 使用 top, right, bottom, left 来定位。此时，它的定位将相对于父容器，而不是整个页面。
最终效果:
- 通过添加颜色、细节和 Logo，一个原本简单的布局开始变得像一个完整、有设计感的作品。

55-images-layout-exercise

练习：图片与布局

练习任务:
1. 在你之前的布局构图中，选择一个区域并用图片填充它。
2. 挑战: 尝试使用蒙版 (mask)、裁剪 (clip-path) 或背景形状，来创造一个独特的不规则形状，而不是简单的矩形。

56-loaders

加载器与感知性能

核心心理学原理:
- 被动等待被高估: 人类会高估被动等待时间的 36%。如果一个网站加载需要 10 秒，用户会感觉像是等了 13.6 秒。
- 关键词是“被动”: 如果在等待时，用户有事可做（被占据），他们就不会高估等待时间。
- 结论: 添加一个加载器 (Loader) 或其他能吸引用户注意力的东西，可以显著提升网站的感知性能 (perceived performance)，让用户感觉网站更快。
加载器的心理学效应:
- 定制加载器的力量: Viget 的研究表明，用户愿意为一个定制化的、有设计的加载器等待的时间，是普通 GIF 加载器的两倍。
  - 普通 GIF 加载器: 用户平均等待 12 秒后会离开。
  - 定制加载器: 用户平均会等待 24 秒。
  - 原因: 用户会下意识地认为“既然开发者花心思做了这么好看的加载器，那加载完之后的内容一定也值得期待”。
- 确定性 vs. 不确定性:
  - 不确定的等待感觉更长: 这就是为什么迪士尼乐园的排队处会告诉你“从这里开始大约需要 1 小时”。
  - 分散注意力: 机场会故意让你走很长一段路去取行李，当你到达时，行李也差不多到了，你会觉得“哇，这个机场好高效！”。实际上，他们只是让你在走路中度过了等待时间。
- 焦虑使等待更长:
  - 医生办公室的技巧: 他们会先把你从大候诊室叫到小诊室里继续等。这让你感觉“看病流程已经开始了”，从而缓解你的焦虑，让你觉得等待时间变短了。

57-user-experience-tools

用户体验工具

用户故事 (User Stories):
- 模板: "As a [user type], I expect that [task description] so that [anticipated outcome]."
- (作为 [用户类型], 我期望 [任务描述], 以便 [预期结果])
- 目的:
  - 让你从用户的角度思考问题，而不是从开发者的角度。
  - 识别不同用户群体的目标和期望。
- 常见问题: 很多大型应用感觉像是不同产品团队各管一页，彼此不沟通，导致用户在不同页面间的体验是断裂的。通过描绘端到端的用户故事，可以避免这个问题。
故事地图 (Story Maps):
- 概念: 一种可视化工具，通过线框图和草图，规划出用户从头到尾使用产品的每一步。
- 目的: 确保考虑到用户在整个流程中的每一步需求和期望。
线框图套件 (Wireframe Kits):
- 资源: 就像 UI Kit 一样，在 Shutterstock 等网站上可以买到预制好的线框图组件。
- 优点: 无需自己画每一个方框，可以快速拖拽页面，搭建和测试用户流程。
UI Stencils (UI 模板尺):
- 工具: 实体工具，一套包含各种常见 UI 元素的模板尺，可以让你用笔和纸快速绘制线框图。
- 优点:
  - 讲师个人很喜欢，因为有趣的工具能让她更有动力去做这件事。
  - 关键: 找到能让你对任务本身感到兴奋的工具和材料。

58-motion-design-language

动效设计语言

什么是动效设计语言？
- 一套关于网站或应用中动效如何表现的统一规则和准则。
为什么要建立自己的动效语言？
- Google Material Design 是一个优秀的例子，但你不应该直接用它。
- 原因 (品牌塑造):
  - 如果你的网站使用 Material Design 的动效，用户会联想到 Google，这对 Google 的品牌是好事，但对你的品牌毫无益处。
  - 动效是你品牌的一部分，就像 Logo 和颜色一样。
如何建立？
- 制定规则: 就像你做设计决策一样，为动效做决策。
  - “我们的元素总是从右边滑入。”
  - “我们从不使用有弹跳感的缓动效果。”
  - “我们总是使用平滑的正弦缓动。”
- 与品牌风格保持一致:
  - 如果你的品牌色彩鲜艳、充满活力，那么动效可以更活泼、有弹性。
  - 如果你的品牌色调柔和、沉稳，那么动效应该更平缓、不那么引人注目。

59-types-of-prototypes

原型类型

1. Thumbnails (缩略图/草稿):
- 目的: 只给自己看的快速草图。
- 特点:
  - 极低保真度，非常潦草。
  - 快速记录想法，快速抛弃想法。
  - 低投入感: 因为画得很随意，所以扔掉一个想法时不会感到心疼。
- 核心: 想法在这个阶段是一次性的，不要对任何一个想法产生情感依恋。
2. Storyboards (故事板):
- 目的: 向同事解释概念。
- 特点:
  - 保真度比 Thumbnails 高一点，足以让别人看懂。
  - 但仍然不要投入太多精力，要确保它还是可以被轻易抛弃的。
3. Low-Fidelity Prototypes (低保真原型):
- 工具: 可以用代码实现（如在 CodePen 上用 SVG 做简单的动画）。
- 优点:
  - 快速沟通: 即使原型很粗糙，也能有效地向客户展示交互概念。
  - 可复用: 如果客户喜欢这个概念，你可以直接从这个原型里“偷”出缓动曲线、动画逻辑等，用于最终的生产代码。
- 适用场景: 当你想展示一个动画概念，但又不想在复杂的、充满遗留代码的真实项目中实现它时，这是一个绝佳的方法。
4. High-Fidelity Prototypes (高保真原型):
- 特点:
  - 细节更丰富，看起来更接近最终产品。
  - 可能是一个独立的 React 组件，或者在 CodePen 上精心制作的 demo。
- “截图大法”:
  - 技巧: 截取现有网站的屏幕截图作为背景，然后只在你需要展示动画的部分用代码实现并绝对定位在截图之上。
  - 效果: 让客户（尤其是 CEO 们）感觉这就是真实的产品，能非常直观地感受到效果。

60-page-transitions

页面过渡

实现平滑页面过渡的思路:
- 核心: 识别在不同页面（路由）之间保持不变的共享元素。
- 技术:
  - 在 Vue 中，可以使用 Vuex (类似 Redux 的状态管理器)来存储当前页面状态，并结合 CSS Transitions 来实现。
  - 共享元素（如导航栏）在路由切换时保持不动，而其他内容则根据路由进行淡入淡出或位移。
- 资源: 讲师制作了 Vue 的示例，朋友们将其移植到了 React 和 Angular。这些开源示例可以帮助你在三大框架中实现平滑的页面过渡。
规划页面过渡的设计过程:
- 工具: 使用一个大的画板（如在 Sketch 或 Illustrator 中）。
- 方法:
  1. 将不同页面的视图并排放在一起。
  2. 识别共享元素，确保它们在不同视图中保持一致。
  3. 调整非共享元素的位置、大小、圆角等，以规划它们在过渡中的变化。
灵感来源:
- Lee-hyung (Dribbble): 他的作品是使用 After Effects 制作的概念动画，是绝佳的动效灵感来源。
- Rally (设计机构): 他们的网站充满了精美、微妙的动效和出色的排版。
- Codrops: 必看！ 一个提供大量前沿、高质量网页效果教程的网站，很多示例都使用了 CSS Grid。
高性能动画技术: FLIP:
- FLIP: First, Last, Invert, Play。一种实现高性能动画的技巧。
- 流程:
  1. First: 获取元素的初始状态（位置、大小）。
  2. Last: 获取元素的最终状态。
  3. Invert: 计算出从最终状态回到初始状态所需的transform变换。
  4. Play: 应用这个反向的transform，然后通过一个过渡动画将其清除，使元素平滑地“移动”到最终状态。
- 库:
  - Flippy: David Khourshid 创建的库，简化了 FLIP 的实现。
  - Vue <transition-group>: Vue 内置了这个功能，你只需包裹一个列表，它会自动为你处理 FLIP 动画。
  - GreenSock (GSAP): 默认开启硬件加速，是一个强大的动画库。

61-interaction-exercise

交互练习

练习任务:
1. 画两个 Thumbnails (草稿)，构思一个交互。
2. 选择你喜欢的一个，将其发展成一个 Storyboard (故事板)。
3. 挑战: 在你之前做的 CodePen 布局中，用代码实现这个故事板中的交互。
  - 可以是小交互 (图标变化、菜单展开)。
  - 也可以是大交互 (页面布局的整体变换，利用 Grid 和 Transforms)。

62-conclusion

总结

感谢:
- 感谢大家花了一天时间参与本次工作坊。
- 这是一次非常愉快的经历。

Design for Developers

0-introduction

讲师介绍

1-right-vs-left-brain

迷思：右脑 vs. 左脑

2-what-this-course-is-setup

课程定位与项目设置

3-perfection

别追求一步到位的完美

4-designer-vs-developer

开发者 vs. 设计师的视角

5-introduction-to-layouts-grids

布局与网格入门

6-balance-symmetry

平衡与对称 (Balance & Symmetry)

7-balance-asymmetry

平衡与不对称 (Balance & Asymmetry)

8-exploring-asymmetry-learning-from-art-history

从艺术史中学习不对称

9-shape

形状 (Shape)

10-scale-and-cropping

缩放与裁剪 (Scale and Cropping)

11-grid

网格系统 (Grid System)

12-layout-tools

布局工具介绍

13-photoshop-keyboard-shortcuts

Photoshop 核心快捷键

14-layout-and-composition-demo

布局与构图演示 (Photoshop)

15-primitive-shapes-exercise

练习：使用基本形状进行构图

16-primitive-shapes-review

练习回顾与总结

17-layout-in-css

CSS 中的布局

18-css-grid-demos

CSS Grid 代码演示

19-grid-naming-example

20-css-flexbox

CSS Flexbox 及其他布局技巧

21-using-clippath-other-masking-tools

使用 clip-path 和其他遮罩工具

22-css-writing-mode

CSS writing-mode 属性

23-grid-by-example-demo

演示：从 Grid by Example 开始构建布局

24-layout-exercise

练习：将设计稿用代码实现

25-layout-q-a

布局问答

26-color-modes

色彩模式

27-color-mixing

色彩混合与搭配

28-color-modes-and-properties

色彩的模式与属性

29-color-in-code

代码中的色彩格式

30-color-variables

色彩变量

31-limited-color

限制色彩

32-color-tools

色彩工具

33-animated-gradients

动画渐变

34-how-to-create-a-palette

如何创建调色板

35-data-visualization-with-hsl-a-example

HSL 在数据可视化中的应用

36-creating-a-palette-demo

演示：在 Photoshop 中创建调色板

37-creating-a-palette-exercise

练习：创建并应用调色板

38-typography-basics

字体基础

39-typography-resources

字体资源

CSS `writing-mode` 属性