← 返回学习目录

Digital Visual Design(数字视觉设计)

体系概览

核心思想:每个模块负责一类问题。基础概念统一定义,上层引用并应用。用清楚的职责与知识连接,保持 High Cohesion, Low Coupling(高内聚、低耦合)。

学习主线:从视觉基础出发,进入图像创造、时间视觉、平面传播与视觉方向;再将这些知识应用到数字界面和交互,最后通过系统管理设计,通过历史与风格研究分析案例。

概念归属:Visual Hierarchy(视觉层级)归入视觉感知,Composition(构图)单独定义,Shape Language(造型语言)在插画中研究表达、在界面中应用形态。Motion Principles(运动视觉原理)解释时间规律,Interface Motion(界面动效)应用这些规律。

Visual Foundations(视觉基础)

所有视觉领域共用的底层规律。

基础概念在这里统一定义。摄影、插画、平面设计与界面设计引用这些规律,不重复定义。

  1. Visual Perception(视觉感知)
  2. Composition(构图)
  3. Color(色彩)
  4. Form & Material(形态与材质)

Image Making(图像创造)

如何创造一张图像。

绘画研究如何观察和表现视觉世界;摄影通过镜头记录与组织画面;插画为了表达概念主动设计图像。

  1. Drawing & Painting(绘画)
  2. Photography(摄影)
  3. Illustration(插画)

Time-based Visuals(时间视觉)

视觉如何随时间发生变化。

电影语言组织镜头与叙事;运动视觉原理解释变化的时间规律。界面动效在后续章节应用这些原理。

  1. Cinematic Language(电影语言)
  2. Motion Principles(运动视觉原理)

Graphic Communication(平面视觉传播)

如何用文字、图形和图像传递信息。

字体与排版、版式和符号共同组织信息。平面设计应用构图,不重新教授构图。

  1. Typography(字体与排版)
  2. Graphic Design(平面设计)
  3. Symbols & Iconography(符号与图标)

Identity & Direction(视觉身份与方向)

如何让大量视觉产出表现成同一种性格。

艺术指导决定视觉应该是什么感觉;视觉识别决定这种感觉如何稳定地被识别。

  1. Visual Identity(视觉识别)
  2. Art Direction(艺术指导)

Interface Design(界面视觉设计)

前面的视觉知识如何进入数字界面。

界面构成组织屏幕;界面样式应用基础视觉语言;组件把这些规则组合成可复用的视觉单元。

  1. Interface Composition(界面构成)
  2. Interface Styling(界面样式)
  3. Components(组件)

Interaction & Motion(交互与动态)

用户操作以后,界面怎么变化。

状态描述当前情况,交互描述用户操作,反馈描述系统回应,动效描述变化过程。微交互将它们组合成完整体验。

  1. State(状态)
  2. Interaction(交互)
  3. Feedback(反馈)
  4. Interface Motion(界面动效)
  5. Microinteraction(微交互)

Visual Systems(视觉系统)

如何把设计变成可维护的系统。

设计变量记录可复用的取值;设计系统管理组件与规范;响应式与适应系统管理不同环境下的一致变化。

  1. Design Tokens(设计变量)
  2. Design System(设计系统)
  3. Responsive & Adaptive Systems(响应式与适应系统)

Styles & History(风格与历史)

通过历史与案例,分析视觉原则如何组合成风格。

风格属于案例层。分析它使用了什么构图、色彩、字体、形态、材质与运动,而不是把风格当作基础规律。

  1. Art & Design History(艺术与设计史)
  2. Visual Style Studies(视觉风格研究)