AIGC互聯網產品設計實踐

趙懿（Clippp），現任某世界五百強企業設計經理，優設網2022年度十大作者&百萬人氣專欄作家，UI中國推薦設計師，人人都是產品經理平臺年度作者，微信公眾號“Clip設計夾”主理人。從業期間擔任過C端和B端產品的主設計師，在AIGC來臨之際，積極探索將其應用到多種不同場景的設計工作中，總結出大量的AIGC設計實踐經驗。

目  錄

第1章 初識AIGC 1

1.1 什麼是AIGC  2

1.1.1 AIGC簡介 2

1.1.2 AIGC與AI繪畫 2

1.1.3 AIGC未來展望 3

1.2 探索Midjourney   3

1.2.1 Midjourney簡介 3

1.2.2 Midjourney的工作原理 4

1.2.3 使用Midjourney的優勢 4

1.3 Midjourney使用準備  8

1.3.1 註冊流程 8

1.3.2 創建專屬服務器 9

1.3.3 添加Midjourney機器人 10

1.4 生成第一張圖  11

1.4.1 輸入描述詞 11

1.4.2 生成圖像 12

1.4.3 圖像選擇與編輯 13

1.4.4 保存圖像 17

第2章 Midjourney出圖要素解析 18

2.1 常用指令解析  19

2.1.1 圖像生成指令 19

2.1.2 偏好設置指令 22

2.1.3 系統輔助指令 27

2.2 描述詞解析  27

2.2.1 描述詞結構 28

2.2.2 精準描述技巧 30

2.3 常用參數解析  31

2.3.1 基本參數 32

2.3.2 模型參數 41

2.4 出圖方法解析  42

2.4.1 文生圖 42

2.4.2 圖生圖 44

2.4.3 圖生文+文生圖 45

第3章 AIGC設計實踐——UI設計 48

3.1 引導頁設計  49

3.1.1 引導頁設計原則 49

3.1.2 扁平插畫風格 49

3.1.3 輕質感流行風格 52

3.1.4 2.5D商務風格 54

3.1.5 深色科技風格 57

3.2 提示彈窗設計  60

3.2.1 升級提示彈窗 60

3.2.2 權限獲取彈窗 64

3.2.3 結果反饋彈窗 68

3.3 圖標設計  71

3.3.1 圖標基礎介紹 71

3.3.2 扁平風格 71

3.3.3 霓虹漸變風格 75

3.3.4 輕擬物風格 77

3.3.5 玻璃擬態風格 85

3.3.6 2.5D等距風格 88

3.3.7 卡通3D風格 93

3.3.8 插畫風格 104

3.3.9 主題運營風格 108

3.4 徽章設計  113

3.4.1 等級徽章 113

3.4.2 互動徽章 121

3.5 IP形象設計  127

3.5.1 動物IP形象設計 127

3.5.2 人物IP形象設計 132

3.5.3 特定IP形象設計 136

3.5.4 IP延展：IP形象2D轉3D 139

3.5.5 IP延展：IP形象變裝設計 142

3.6 表情包設計  146

3.6.1 動物形象表情包 147

3.6.2 人物形象表情包 149

3.7 網頁設計  153

3.7.1 插畫風格網頁 153

3.7.2 實景風格網頁 156

3.7.3 簡約概念風格網頁 162

第4章 AIGC設計實踐——運營設計 165

4.1 運營活動分類介紹  166

4.2 新年主題運營設計  168

4.2.1 項目背景 168

4.2.2 活動框架 168

4.2.3 設計流程 169

4.2.4 活動頁主視覺區設計 169

4.2.5 活動頁操作區設計 175

4.2.6 活動頁互動區設計 178

4.2.7 活動頁合成及視覺延展 180

4.3 周年慶主題運營設計  182

4.3.1 項目背景 182

4.3.2 活動目標 182

4.3.3 設計思路 182

4.3.4 周年慶活動圖設計 183

4.3.5 周年慶活動圖延展應用 186

4.4 情人節主題運營設計  189

4.4.1 項目背景 189

4.4.2 活動框架 190

4.4.3 設計流程 190

4.4.4 活動頁主視覺區設計 191

4.4.5 活動頁互動區設計 195

4.4.6 活動頁抽獎區設計 196

4.4.7 活動頁創意合成 197

4.5 環保日主題運營設計  198

4.5.1 項目背景 198

4.5.2 活動框架 198

4.5.3 設計流程 199

4.5.4 活動頁主視覺區設計 199

4.5.5 活動頁操作區設計 205

4.5.6 活動頁互動區設計 207

4.5.7 活動頁合成及視覺延展 210

4.6 消消樂主題運營設計  211

4.6.1 項目背景 211

4.6.2 活動框架 211

4.6.3 設計流程 211

4.6.4 遊戲封面視覺設計 212

4.6.5 地圖頁面視覺設計 217

4.6.6 關卡頁面視覺設計 220

4.6.7 結算彈窗視覺設計 224

4.6.8 消消樂遊戲創意合成總結 227

4.7 出遊季主題運營設計  228

4.7.1 項目背景 228

4.7.2 活動框架 228

4.7.3 設計流程 228

4.7.4 海報主視覺區設計 229

4.7.5 海報其他元素設計 237

4.7.6 海報合成效果展示 239

4.7.7 視覺延展 240

第5章 AIGC設計實踐——B端設計 241

5.1 B端產品分類/應用場景  242

5.1.1 B端產品的分類與特點 242

5.1.2 B端產品設計原則 243

5.1.3 設計應用場景 243

5.2 B端登錄頁設計  244

5.2.1 登錄頁設計要點 244

5.2.2 3D立體場景B端登錄頁 245

5.2.3 深色科技場景B端登錄面 250

5.2.4 數字城市場景B端登錄頁 251

5.3 B端圖標設計  255

5.3.1 三種圖標生成方法 255

5.3.2 玻璃風格圖標 259

5.3.3 黑金風格圖標 264

5.3.4 抽象風格圖標 268

5.4 B端背景設計  271

5.4.1 背景類型和應用場景 271

5.4.2 幾何圖形背景 273

5.4.3 流體漸變背景 275

5.4.4 抽象粒子背景 276

5.5 B端KV海報設計  278

5.5.1 KV海報構成分析 278

5.5.2 KV海報設計 279

第6章 AIGC設計實踐——輔助工具 283

6.1 設計靈感工具  284

6.1.1 設計素材網站：花瓣網、Dribbble 284

6.1.2 AI繪畫風格庫：Kalos.art、Midlibrary 287

6.2 描述詞輔助工具  289

6.2.1 描述詞參考：Midjourney中文站、PromptHero 289

6.2.2 描述詞編輯：OPS、PromptFolder 292

6.3 圖片處理工具  294

6.3.1 AI摳圖：Pixian.AI 294

6.3.2 Al高清：Bigjpg、UpscayI 296

6.3.3 圖片轉矢量：Vector Magic 298

6.3.4 圖像擦除：Photoroom 299

6.4 設計排版工具：Figma、Photoshop  300

結語 304