从零开始的设计课

用文字、图形和颜色在一个平面上把话说清楚、说好看。

1. 1
   看见设计：什么是平面设计

   海报、App 界面、包装都是平面设计：在一个平面上安排信息。

   下一课
2. 2
   点、线、面：画面的基本积木

   任何画面都能拆成点、线、面，学会拆就学会了看。

   先学：平面 第 1 课
3. 3
   字体入门：衬线与无衬线

   带小脚的字和不带小脚的字，气质完全不同。

   先学：平面 第 1 课
4. 4
   字号、字重与行距：让字好读

   大小、粗细、行与行之间的空隙，决定读起来累不累。

   先学：平面 第 3 课
5. 5
   屏幕上的字：像素字、矢量字与 MSDF

   电脑怎么把字画在屏幕上，以及为什么有的字放大会糊。

   先学：平面 第 3 课
6. 6
   网格系统：看不见的格子

   好看的版面背后几乎都有一套对齐用的隐形格子。

   先学：平面 第 2 课
7. 7
   留白：空着也是设计

   不放东西的地方，让放了东西的地方被看见。

   先学：平面 第 2 课
8. ✓
   色彩基础：色相、明度、饱和度

   用三个问题描述任何颜色，再加上色温这把情绪开关。

   已学 · 09-24 Momiji ›
9. 9
   配色方法：互补、类比与主次色

   几种常用的配色套路，以及怎么分主色和点缀色。

   先学：平面 第 8 课
10. 10
    对比：让重要的东西跳出来

    大小、颜色、粗细、明暗的反差，是吸引目光的第一工具。

    先学：平面 第 4 课、平面 第 8 课
11. 11
    视觉层级：眼睛先看哪里

    把信息分成一、二、三级，让人按你设计的顺序读。

    先学：平面 第 10 课
12. 12
    构图：三分法、对称与平衡

    画面里的东西放在哪，决定了稳还是动、静还是闹。

    先学：平面 第 6 课
13. 13
    图像与裁切：照片怎么用

    同一张照片，裁得不同，讲的故事就不同。

    先学：平面 第 12 课
14. 14
    图标与插画：用图形说话

    把复杂的东西简化成一眼能认的小图形。

    先学：平面 第 2 课、平面 第 12 课
15. 15
    品牌与识别：Logo 和一套视觉语言

    颜色、字体、图形组成的一整套「长相」，让人一眼认出你。

    先学：平面 第 9 课、平面 第 11 课
16. 16
    版式实战：一张海报从零到一

    把前面学的全部用上，完整做一张海报。

    先学：平面 第 11 课、平面 第 12 课

让画面动起来，而且动得自然、有节奏、有情绪。

1. 1
   动起来的本质：帧与帧率

   动画其实是一张张静止画面快速翻过去。

   下一课
2. 2
   时间与节奏：快慢决定性格

   同一个动作，0.2 秒和 1 秒给人的感觉完全不同。

   先学：动态 第 1 课
3. ✓
   缓动：为什么东西不该匀速动

   加速和减速让运动像真的，这是动效最重要的一课。

   已学 · 09-26 NIMBÉ ›
4. 4
   读懂缓动曲线：贝塞尔曲线

   用一条曲线看懂「速度怎么变化」。

   先学：动态 第 3 课
5. 5
   弹簧与跟随：插值（lerp）的魔法

   每一帧往目标靠近一点，就得到柔和的跟随感。

   先学：动态 第 3 课
6. 6
   动画 12 原则（上）：挤压拉伸、预备、跟随

   迪士尼动画师总结的经验，今天的界面动效依然适用。

   先学：动态 第 3 课
7. 7
   动画 12 原则（下）：弧线、夸张、次要动作

   让动作更生动、更有生命感的另外几条原则。

   先学：动态 第 6 课
8. 8
   关键帧与时间轴

   定下几个关键瞬间，中间交给电脑补。

   先学：动态 第 2 课
9. 9
   编排：多个元素错开出场

   一群东西一起动时，先后顺序就是节奏。

   先学：动态 第 8 课
10. 10
    转场：从一个画面到下一个

    切换画面时，怎么让人不迷路。

    先学：动态 第 9 课
11. 11
    微交互：按钮和开关里的小动画

    点一下时那 0.2 秒的小变化，决定了好不好用。

    先学：动态 第 5 课
12. 12
    滚动驱动动画：把滚动条当时间轴

    滚到哪里，动画就放到哪里。

    先学：动态 第 8 课
13. 13
    镜头运动：推、拉、摇、移

    借用电影的镜头语言来引导视线。

    先学：动态 第 10 课
14. 14
    动态排版：让文字动起来

    文字不只是读的，也可以是表演的。

    先学：动态 第 9 课、平面 第 3 课
15. 15
    克制：什么时候不该动

    动效太多会累、会晕，学会做减法。

    先学：动态 第 11 课

网页和游戏里那些会动的 3D 画面，是怎么被电脑现场画出来的。

1. ✓
   实时渲染与着色器：屏幕每秒重画 60 次

   3D 网页不是视频，而是电脑每一帧现场算出来的画面。

   已学 · 09-28 Liquid Geo ›
2. 2
   坐标与空间：x、y、z 和相机

   3D 世界里怎么说清楚「东西在哪」「从哪看」。

   先学：3D 第 1 课

   下一课
3. 3
   网格（Mesh）：物体是三角形拼的

   任何 3D 物体，拆到最后都是一堆小三角形。

   先学：3D 第 2 课
4. 4
   材质入门：表面是什么做的

   同一个形状，换个材质就从塑料变成金属。

   先学：3D 第 3 课
5. 5
   贴图：给表面穿衣服

   颜色图、法线图、粗糙度图，各自管什么。

   先学：3D 第 4 课
6. 6
   PBR：像真的一样的材质

   基于物理的材质，为什么能在任何光下都像真的。

   先学：3D 第 5 课
7. 7
   光照：光从哪里来

   平行光、点光、环境光，以及它们怎么塑造形体。

   先学：3D 第 4 课
8. 8
   阴影、雾与氛围

   阴影让东西「落地」，雾让空间有深度。

   先学：3D 第 7 课
9. 9
   相机：焦距、视角与景深

   3D 里的相机和真相机一样，也有广角和长焦。

   先学：3D 第 2 课
10. 10
    着色器进阶：顶点与片元

    着色器分两种：一种管形状，一种管颜色。

    先学：3D 第 1 课、3D 第 4 课
11. 11
    噪声：让电脑画出自然的乱

    云、火、水波背后的「有规律的随机」。

    先学：3D 第 10 课
12. ✓
    粒子系统：成千上万个小东西

    烟、火、雪、尘埃，都是一大群小粒子加简单规则。

    已学 · 09-27 WebGPU Gommage ›
13. 13
    模拟：让粒子像水、像布

    给粒子加上物理规则，它们就会流动、碰撞、摆动。

    先学：3D 第 12 课
14. 14
    后期处理：泛光（Bloom）与色调映射

    画完之后再加的「滤镜」，让亮处发光、画面有电影感。

    先学：3D 第 7 课
15. 15
    模型文件与加载：glTF / GLB

    建模软件做好的模型，怎么打包、压缩、放进网页。

    先学：3D 第 3 课
16. 16
    WebGL 与 WebGPU：浏览器里的两代图形接口

    网页调用显卡的老方法和新方法，有什么不同。

    先学：3D 第 10 课

你做一件事，它回应你——怎么让这种「对话」清楚、顺手、好玩。

1. ✓
   交互是什么：输入 → 处理 → 反馈

   所有交互都是一个回路：你动一下，它回应一下。

   已学 · 09-23 Ferrofluid Microphone ›
2. 2
   反馈：让人知道「我做到了」

   声音、动画、震动，告诉用户操作成功了。

   先学：交互 第 1 课

   下一课
3. 3
   示能：一看就知道怎么用

   按钮看起来能按，把手看起来能拉。

   先学：交互 第 1 课
4. 4
   映射：控制和结果要对得上

   往右拨就往右走，往上推就变大。

   先学：交互 第 2 课
5. 5
   状态：按下、悬停、禁用、加载

   同一个按钮在不同时刻，应该长得不一样。

   先学：交互 第 2 课
6. 6
   游戏循环：目标、行动、奖励

   让人一直想「再来一次」的基本结构。

   先学：交互 第 2 课
7. 7
   手感（Game Feel）：为什么有的操作很爽

   响应速度、惯性和反馈共同造出「手感」。

   先学：交互 第 2 课、动态 第 3 课
8. 8
   Juice：给反馈加点「汁」

   抖动、粒子、音效，让简单的动作变得带劲。

   先学：交互 第 7 课
9. 9
   声音设计：用耳朵做反馈

   声音是最快、最被低估的反馈通道。

   先学：交互 第 2 课
10. 10
    难度曲线与心流

    不太难也不太简单，人才会沉浸进去。

    先学：交互 第 6 课
11. 11
    玩具与游戏：没有目标也好玩

    能随便摆弄的东西，本身就是乐趣。

    先学：交互 第 6 课
12. 12
    引导：不用说明书也会玩

    用设计本身教会用户，而不是一大段文字。

    先学：交互 第 3 课
13. 13
    多感官交互：麦克风、陀螺仪、触感

    不只是鼠标和手指，声音和身体也能当输入。

    先学：交互 第 9 课
14. 14
    环境叙事：用场景讲故事

    不用台词，靠环境和细节让人感受到故事。

    先学：交互 第 11 课

为什么有的设计让人舒服、好懂——背后那些关于人怎么看、怎么想的规律。

1. ✓
   设计和艺术的区别：设计要解决问题

   设计总有一个要服务的人和要解决的问题。

   已学 · 09-29 Infinite Liquid Glass ›
2. ✓
   格式塔（上）：接近与相似

   人会自动把离得近、长得像的东西看成一组。

   已学 · 09-30 Lumin Hands ›
3. ✓
   格式塔（下）：闭合、连续、图形与背景

   大脑会自动补全缺口、顺着线看、分出主体和背景。

   已学 · 10-01 False Earth ›
4. 4
   视觉重量与平衡

   大的、深的、鲜艳的东西「更重」，画面要称得平。

   先学：理论 第 2 课

   下一课
5. 5
   注意力：人眼怎么扫一个页面

   人读网页不是逐字读，而是跳着扫。

   先学：理论 第 1 课
6. 6
   认知负荷：少让人动脑

   要记的、要想的越少，用起来越轻松。

   先学：理论 第 5 课
7. 7
   费茨定律：越大越近越好点

   按钮的大小和距离，决定点起来有多快。

   先学：理论 第 6 课
8. 8
   希克定律：选项越多越难选

   菜单越长，人越犹豫。

   先学：理论 第 6 课
9. 9
   雅各布定律：人们习惯别家的做法

   用户大部分时间在用别的网站，别让他们重新学。

   先学：理论 第 6 课
10. 10
    一致性与设计模式

    同样的东西长一样、放一样的位置。

    先学：理论 第 9 课
11. 11
    可用性与无障碍

    让更多的人——包括视力、行动不便的人——都能用。

    先学：理论 第 10 课
12. 12
    情感化设计：好看的东西让人觉得更好用

    第一眼的感受会影响人对整件东西的评价。

    先学：理论 第 1 课
13. 13
    形式追随功能

    东西长什么样，应该从它要做什么出发。

    先学：理论 第 1 课
14. 14
    设计评论：怎么说清一个作品好在哪

    从「好看」到说出具体好在哪、为什么。

    先学：理论 第 4 课、理论 第 12 课

今天的设计从哪里来：一百多年里的几次大转向。

1. ✓
   为什么要学设计史

   知道一个风格从哪来，才能看懂它、用好它。

   已学 · 10-02 ThreeJSPunk Drive ›
2. ✓
   活字印刷与字体的诞生

   可以反复使用的铅字，让文字第一次被大量复制。

   已学 · 10-03 Mouthful of Dust ›
3. 3
   工艺美术运动：反对粗制滥造

   19 世纪末，一群人对机器批量生产的丑东西说不。

   先学：设计史 第 1 课

   下一课
4. 4
   新艺术运动：曲线与自然

   藤蔓、花朵一样流动的线条，爬满了海报和建筑。

   先学：设计史 第 3 课
5. 5
   包豪斯：艺术 + 技术

   一所只办了十几年的德国学校，影响了整个现代设计。

   先学：设计史 第 3 课
6. 6
   瑞士国际主义风格：网格与无衬线

   干净、理性、讲秩序，今天很多界面还是这个味道。

   先学：设计史 第 5 课
7. 7
   波普与迷幻：60 年代的颜色

   广告、漫画、明亮的颜色进入了设计和艺术。

   先学：设计史 第 6 课
8. 8
   后现代与孟菲斯：打破规矩

   80 年代，一群设计师故意用花哨和怪异挑战「好品味」。

   先学：设计史 第 7 课
9. 9
   早期电脑图形与像素美学

   屏幕上只有几种颜色、几个像素时，设计是什么样的。

   先学：设计史 第 1 课
10. 10
    Demoscene：用极小的程序做大画面

    一群程序员比赛用几 KB 的代码做出惊人的视听作品。

    先学：设计史 第 9 课
11. 11
    网页设计简史：从 GIF 到 Flash 到响应式

    网页怎么从一堆文字，长成今天的样子。

    先学：设计史 第 9 课
12. 12
    拟物与扁平：界面风格的大转向

    从像真皮真木头的图标，到纯色简单的图形。

    先学：设计史 第 11 课
13. 13
    今天的创意网页：WebGL 与创意编程

    设计雷达里那些炫酷网页，属于怎样一个潮流。

    先学：设计史 第 10 课、设计史 第 11 课
14. 14
    游戏视觉简史：从像素到 3D

    游戏画面几十年来的变化，和背后的技术限制。

    先学：设计史 第 9 课