从设计基础到网页与 3D：16 周学习路线

建议你先走一条 “设计基础 → 视觉表达 → 网页与 3D 应用” 的路线。第一轮的目标是：能看懂作品的组织方式，能有意识地做出选择，也能判断自己的设计哪里需要改。

下面按 16 周、每周约 4–6 小时安排。这是练习节奏，可以根据掌握情况延长；16 周适合建立基础，审美判断会在持续实践中加深。

第一阶段：观察与视觉分析｜第 1–2 周

先练习把“好看”说具体。

学习内容：点、线、面、形状、比例、正负空间，以及大小、明暗、位置如何吸引注意力。

每周选三个不同领域的作品：例如海报、建筑照片、网页。给每个作品画一张简化草图，只保留主要形状和明暗块，回答：

• 第一眼看到哪里？接着看到哪里？
• 哪些区域密集，哪些区域留空？
• 哪些元素属于同一组？是什么让它们关联？
• 去掉细节后，画面还成立吗？

阶段成果：六张分析图。 能用“大小对比、明暗集中、留白、分组”等具体原因解释感受，而不只用“高级、有氛围”。

第二阶段：构图与元素组织｜第 3–5 周

这是你说的“元素堆积”的基础：让多个元素形成秩序。

学习内容：视觉层级、对齐、平衡、重复、节奏、疏密，以及接近、相似、连续等知觉分组原则。这些也是常见的视觉设计基础。NN/g 视觉设计原则

练习时先限制为黑白：

• 用五个矩形，分别表达“稳定、紧张、轻盈”。
• 用同样的十个元素，做集中、分散、规则、自由四种构图。
• 给同一份活动信息设计三种布局，分别突出活动名称、时间、地点。

阶段成果：一组黑白构图和一张信息海报。 检查缩小后主次是否清楚，以及增加元素后是否仍有秩序。

第三阶段：色彩与明度｜第 6–7 周

学习内容：色相、明度、饱和度；颜色的面积、位置和相邻关系；统一与强调。

先理解明度，再研究配色。颜色即使不同，明度太接近，也可能让文字与背景难以区分。

练习：

• 把同一个布局做成温暖、冷静、活跃三个版本。
• 限制使用三种颜色，调整它们的面积比例。
• 从照片中提取颜色，用于一张文字海报，再根据可读性调整。
• 转成灰度，检查重要信息是否仍然突出。

阶段成果：三个配色版本及选择理由。 你应能解释某种颜色在画面里的作用，并结合受众和情境判断它是否合适。

第四阶段：字体与信息表达｜第 8–9 周

排版是连接通用设计基础与网页设计的重要一环。

学习内容：字体气质、字号、字重、行长、行距、间距、网格，以及标题和正文的关系。

练习：

• 只用一种字体，通过字号、字重和间距排出一页文章。
• 把同一段内容分别排成书页、活动海报、网页介绍。
• 将一份信息混乱的菜单或通知重新组织，说明读者应该先看什么。

阶段成果：一套纯文字版式。 检查能否快速浏览、正文是否舒适，以及标题是否准确概括内容。

第五阶段：空间、光影与材质｜第 10–12 周

现在开始建立将来做 3D 所需的视觉基础。

学习内容：透视、遮挡、尺度、前后关系；光源方向、软硬阴影、反射；不同材质如何响应光线。

可以先用手机、台灯和日常物件练习：

• 拍摄同一个杯子，比较侧光、正面光、逆光。
• 移动灯的位置，观察阴影怎样改变体积感。
• 比较纸、陶瓷、金属和布料的反光与纹理。
• 用三个物件布置静物，通过距离、遮挡和背景组织画面。

阶段成果：一组光影与材质对照图。 你应能解释空间感从何而来，以及如何用光强调主体。之后进入 3D，这些判断仍然适用。

第六阶段：风格识别与控制｜第 13–14 周

风格可以通过一组持续一致的选择来分析。

学习内容：形状语言、颜色、字体、材质、细节密度、构图和动效之间的关联，也开始了解作品的时代与文化背景。

练习：

• 选两个风格差异明显的作品系列，分别记录它们反复出现的规则。
• 为同一份内容做两个风格版本，保持信息和用途一致。
• 有意更换一个变量，例如字体或材质，观察整体气质如何改变。

阶段成果：两份风格分析及两个设计版本。 能指出具体特征，并解释哪些变化会破坏一致性。避免把所有风格都简化成固定标签。

第七阶段：设计过程与综合项目｜第 15–16 周

把前面的能力用于一个有明确受众的小项目，例如个人服务介绍页、展览宣传或小型品牌展示。

按这个过程完成：

明确受众与目的 → 整理信息 → 做三个草案 → 选择并完善 → 请人使用 → 修改。

先做静态设计，重点检验：

• 对方能否理解主题和重点？
• 视觉表达是否符合你想传达的气质？
• 对方能否找到需要的信息和下一步？
• 你能否解释主要设计选择？

阶段成果：一个完整项目，加上一页过程记录。 创意与问题定义可以配合开放大学的免费课程学习。OpenLearn《Design thinking》

整个学习过程中，固定使用同一个练习循环：

观察 → 拆解 → 模仿 → 改变一个变量 → 比较 → 独立创作。

每周保留一份修改前后的对照，记录“改了什么、为什么改、效果怎样”。这会帮助你把偶然做对，转变成能够重复运用的能力。参考作品要注明来源；选材可以涵盖书籍、摄影、建筑、绘画、产品和网页。

可访问性也从基础阶段开始练：颜色之外有没有其他辨识线索、文字是否容易读、信息结构是否清楚。进入网页应用后，再加入键盘操作、焦点、语义结构和动态效果偏好等检查。W3C 可访问性初步检查

第一周就从一个很小的任务开始：选一张海报、一张室内照片、一个网页，各画出主要形状和明暗块，并写下五条观察。 先建立观察语言，后面的练习才有判断依据。