新媒體視覺設計項目式教程（AI協同）（慕課版）

張玲：蘇州經貿職業技術學院紡織服裝與藝術傳媒學院視覺傳達設計專業負責人，副教授，主要研究領域為品牌形象設計，界面設計及文創產品設計。主持主研重點課程建設3門，發表論文10余篇，國家級成果一項，省級成果3項；實用新型專利3項；主講“界面設計”“新媒體視覺設計”“印刷工藝”等課程。

基礎篇

項目 1 新媒體視覺設計概述

1.1　認識新媒體 3

1.1.1　新媒體的概念 3

1.1.2　新媒體的功能特性 3

1.2　認識新媒體視覺設計 4

1.2.1　新媒體視覺設計的概念 4

1.2.2　新媒體視覺設計的主要內容 4

1.2.3　新媒體視覺設計的分類 7

1.2.4　新媒體視覺設計經典案例 10

1.3　AIGC 與新媒體視覺設計 12

1.3.1　AIGC 在新媒體視覺設計中的應用 12

1.3.2　AIGC 技術引發的問題 14

1.3.3　AIGC 時代的能力成長 14

1.4　項目實踐 15

1.4.1　項目描述 15

1.4.2　項目發布 15

1.4.3　制訂計劃 15

1.4.4　項目實施 16

項目 2 新媒體視覺設計的準備工作

2.1 新媒體視覺設計項目需求分析 19

2.1.1 KANO 問卷設計 19

2.1.2 統計數據 21

2.1.3 分析結果可視化 22

2.2 新媒體視覺設計項目競品分析 22

2.2.1 選擇競品並設置關註點 23

2.2.2 收集並分析競品數據 23

2.2.3 總結輸出 24

2.3 新媒體視覺設計風格探索 25

2.3.1 極簡藝術風格 25

2.3.2 蘋果風 26

2.3.3 中國風 26

2.3.4 低面建模風格 26

2.3.5 NOD 風格 26

2.3.6 剪紙疊加風格 27

2.3.7 賽博朋克風格 28

2.3.8 蒸汽波風格 28

2.4 新媒體視覺設計中情緒板的應用 28

2.4.1 情緒板概述 28

2.4.2 確定關鍵詞 30

2.4.3 根據關鍵詞收集、篩選素材 30

2.4.4 情緒板制作 31

2.5 項目實踐 32

2.5.1 項目描述 32

2.5.2 項目發布 32

2.5.3 制訂計劃 33

2.5.4 項目實施 33

項目 3 新媒體視覺設計基本原則

3.1 統一原則 36

3.1.1 統一原則的內涵 36

3.1.2 統一原則的優點 38

3.1.3 統一原則的應用 39

3.1.4 統一原則應用案例賞析 41

3.2 秩序原則 43

3.2.1 秩序原則的內涵 43

3.2.2 引導視線 43

3.2.3 阻擋視線 45

3.2.4 創造視線流 46

3.2.5 秩序原則應用案例賞析 48

3.3 對比原則 49

3.3.1 對比原則的內涵 49

3.3.2 對比原則的優勢 49

3.3.3 對比的分類 49

3.3.4 對比原則應用案例賞析 52

3.4 平衡原則 53

3.4.1 平衡原則的內涵 53

3.4.2 平衡原則的作用 53

3.4.3 平衡原則的分類 53

3.4.4 平衡原則應用案例賞析 54

3.5 項目實踐 55

3.5.1 項目描述 55

3.5.2 項目發布 55

3.5.3 制訂計劃 55

3.5.4 項目實施 56

項目 4 新媒體視覺設計基本要素的靈活運用

4.1 文字 59

4.1.1 字體的分類 59

4.1.2 字體的氣質 62

4.1.3 字體的版權 62

4.1.4 字體的設計 63

4.1.5 字體設計實踐案例 64

4.2 圖片 68

4.2.1 圖片的重要性 68

4.2.2 圖片的分類 69

4.2.3 圖片版權 72

4.2.4 圖片設計實踐案例 73

4.3 色彩 74

4.3.1 色彩的基礎概念 74

4.3.2 色彩的對比 75

4.3.3 確定色彩風格 78

4.3.4 科學搭配色彩 80

4.3.5　通過色彩引導視線 87

4.3.6　色彩搭配設計實踐案例 88

4.4 項目實踐 91

4.4.1 項目描述 91

4.4.2 項目發布 91

4.4.3 制訂計劃 91

4.4.4 項目實施 92

項目 5 新媒體動態設計

5.1 新媒體動態設計概述 95

5.1.1 新媒體動態設計的概念及與動畫和視覺特效的區別 95

5.1.2 新媒體動態設計的發展歷程 96

5.1.3 新媒體動態設計的廣泛應用 97

5.2 新媒體動態設計的風格與類型 98

5.2.1 新媒體動態設計的風格 98

5.2.2 新媒體動態設計的類型 99

5.3 基於五感的新媒體動態設計 101

5.3.1　基於觸覺的動態交互設計 101

5.3.2　基於視覺的動態交互設計 102

5.3.3　基於聽覺的動態交互設計 102

5.3.4　基於嗅覺的動態交互設計 102

5.3.5　基於味覺的動態交互設計 103

5.4 動態圖形設計與制作 103

5.5 項目實踐 108

5.5.1 項目描述 108

5.5.2 項目發布 108

5.5.3 制訂計劃 108

5.5.4 項目實施 109

綜合實踐篇

項目 6 龍鱗裝制作技藝信息可視化設計實戰

6.1 認識信息可視化 113

6.2 信息可視化的發展歷程 113

6.2.1 傳統圖表的誕生 113

6.2.2 計算機圖形圖像技術推動交互可視化的發展 114

6.2.3 動態可視化興起 114

6.3 信息可視化設計三要素 114

6.3.1 圖形 115

6.3.2 色彩 115

6.3.3 文字 116

6.4 信息可視化設計的五大表現形式 116

6.4.1 圖解類信息可視化設計 116

6.4.2 圖表類信息可視化設計 117

6.4.3 地理類信息可視化設計 118

6.4.4 流程類信息可視化設計 118

6.4.5 綜合類信息可視化設計 118

6.5 AIGC 在信息可視化設計中的應用 119

6.5.1 AIGC 在信息可視化設計中的優勢 119

6.5.2 AIGC 在信息可視化設計中的應用示例 120

6.6　項目實施 123

6.7　課後練習 130

6.7.1　練習任務描述 130

6.7.2　練習任務發布 130

6.7.3　制訂計劃 130

項目 7 招聘啟事 H5 頁面設計實戰

7.1　H5 的概念與特點 135

7.2　H5 的設計與制作流程 135

7.3 H5 的設計工具和規範 137

7.4 H5 中的信息可視化設計 143

7.5 AIGC 在 H5 頁面設計中的應用 145

7.6 項目實施 145

7.7 課後練習 154

項目 8 書野微課 App 界面設計實戰

8.1　App 設計與制作的流程 159

8.2 App 的設計規範 163

8.3 App 界面設計工具 165

8.4 App 界面設計中的信息可視化設計 167

8.5 App 交互動態界面設計與制作 169

8.6 項目實施 171

8.7 AIGC 在 App 交互界面設計中的應用 186

8.8 課後練習 187