案例學AIGC+Photoshop UI設計（微課版）
楊嘉 石雲平
商品描述
全書共8章，第1章為UI設計基礎知識，第2章為Photoshop基礎知識；第3～7章分別講解圖標設計、UI控件設計、網頁界面設計、 App界面設計、軟件界面設計的行業知識和實戰案例；第8章為綜合案例，幫助讀者深入理解行業設計需求和UI設計應用場景，提升讀者的設計水平和實際 應用能力。 本書內容由淺入深、直觀易懂、理實結合，可作為高等院校、培訓機構設計類課程的教材，也可作為設計初學者、愛好者、相關從業人員的參考書。
作者簡介
作者為資深專家，出版過多本暢銷書。作者為資深專家，出版過多本暢銷書。作者為資深專家，出版過多本暢銷書。作者為資深專家，出版過多本暢銷書。
目錄大綱
第 1 章 UI設計基礎知識
1.1 UI 設計基礎 ........................... 002
1.1.1 什麼是 UI 設計....................002
1.1.2 UI 設計的基本原則..............004
1.1.3 UI 設計的發展趨勢..............005
1.1.4 UI 設計的常用工具..............008
1.1.5 UI 設計中的相關術語 ..........008
1.2 UI 設計要素 ............................ 010
1.2.1 點、線、面 .........................010
1.2.2 色彩....................................012
1.2.3 文字....................................016
1.2.4 風格....................................017
1.2.5 構圖....................................018
1.2.6 布局....................................019
1.3 UI 設計流程 ............................ 021
1.3.1 需求分析.............................021
1.3.2 原型設計.............................021
1.3.3 視覺設計.............................023
1.3.4 切圖與標註 .........................024
1.4 課後練習................................. 024
第 2 章 Photoshop基礎知識
2.1 熟悉 Photoshop ..................... 027
2.1.1 Photoshop 的工作界面 ......027
2.1.2 Photoshop 的基本操作 ......029
2.2 選擇與繪制圖像 ....................... 031
2.2.1 創建選區.............................031
2.2.2 編輯選區.............................031
2.2.3 繪制圖像.............................032
2.2.4 繪制矢量圖形......................032
2.3 應用圖層................................. 033
2.3.1 圖層的常見類型 ..................033
2.3.2 圖層的基本操作 ..................034
2.3.3 圖層混合模式......................034
2.3.4 圖層樣式.............................035
2.4 合成圖像................................. 036
2.4.1 添加文字.............................036
2.4.2 添加蒙版.............................037
2.4.3 添加濾鏡.............................038
2.5 課後練習................................. 040
第 3 章 圖標設計
3.1 行業知識：圖標設計基礎 .......... 044
3.1.1 圖標的優勢 .........................044
3.1.2 圖標的設計風格 ..................044
3.1.3 圖標的設計規範 ..................045
3.1.4 圖標的設計要點 ..................047
3.2 實戰案例：設計線性圖標 .......... 048
3.2.1 繪制天氣圖標......................049
3.2.2 繪制日歷圖標......................052
3.2.3 繪制地圖圖標......................053
3.3 實戰案例：設計面性圖標 .......... 054
3.3.1 繪制郵件圖標......................055
3.3.2 繪制搜索圖標......................056
3.3.3 繪制定位圖標......................057
3.4 實戰案例：設計具象圖標 .......... 058
3.4.1 繪制外賣功能圖標...............059
3.4.2 繪制自取功能圖標...............061
3.5 實戰案例：設計 2.5D 圖標........ 062
3.5.1 繪制“揮墨”應用圖標........063
3.5.2 繪制禮品圖標......................065
3.6 拓展訓練................................. 067
實訓 1 設計商務系列圖標............067
實訓 2 設計果蔬系列圖標............068
3.7 AI 輔助設計............................. 069
通義萬相 生成小袁寵物軟件應用圖標..........................069
Midjourney中文站 生成家居系統圖標..........................069
3.8 課後練習 .................................. 070
第 4 章 UI控件設計
4.1 行業知識：控件設計基礎 .......... 074
4.1.1 滑塊的類型及設計要點........074
4.1.2 表單的類型及設計要點........075
4.1.3 按鈕的類型及設計要點........076
4.2 實戰案例：設計滑塊................. 077
4.2.1 繪制播放控制線條滑塊........078
4.2.2 繪制播放加載滑塊...............079
4.3 實戰案例：設計表單................. 081
4.3.1 設計旅遊行程表單...............082
4.3.2 設計日歷選擇表單...............083
4.4 實戰案例：設計按鈕................. 085
4.4.1 設計播放和暫停按鈕 ...........086
4.4.2 繪制點擊進入按鈕...............088
4.5 拓展訓練................................. 090
實訓 1 設計開關滑塊...................090
實訓 2 設計點擊參與按鈕............091
4.6 AI 輔助設計............................. 092
Vega AI 生成預約表單............092
Midjourney中文站 生成音量調節按鈕.........................092
4.7 課後練習................................. 093
第 5 章 網頁界面設計
5.1 行業知識：網頁界面設計基礎.... 097
5.1.1 網頁界面的組成 ..................097
5.1.2 網頁界面常見的類型 ...........097
5.1.3 網頁界面的布局方式 ...........098
5.1.4 網頁界面的設計要求 ...........099
5.1.5 網頁界面的尺寸規範 ...........100
5.2 實戰案例：設計家裝公司官網首頁 ....................................... 101
5.2.1 設計標誌和導航 ..................104
5.2.2 設計 Banner.......................105
5.2.3 設計中間區域......................108
5.2.4 設計頁尾區域......................110
5.3 實戰案例：設計家裝公司官網內頁 ....................................... 111
5.3.1 設計整屋案例網頁...............114
5.3.2 設計登錄頁 .........................117
5.4 實戰案例：切片與輸出家裝公司網頁 ....................................... 118
5.4.1 切片網頁界面......................119
5.4.2 輸出網頁界面......................121
5.5 拓展訓練................................. 122
實訓 1 設計水鄉土特產網站首頁..122
實訓 2 設計水鄉土特產網站登錄頁....................................123
5.6 AI 輔助設計............................. 123
文心一言 獲取網頁設計思路和靈感123
即時 AI 生成完整智能家居頁面...124
5.7 課後練習................................. 125
第 6 章
129 App 界面設計
6.1 行業知識：App 界面設計基礎 ... 131
6.1.1 App 界面的組成..................131
6.1.2 App 界面常見的類型...........131
6.1.3 App 界面設計要求 ..............133
6.1.4 App 界面尺寸規範 ..............133
6.1.5 界面標註的規範 ..................134
6.2 實戰案例：設計教育 App
啟動頁.................................... 135
6.2.1 設計啟動頁背景 ..................136
6.2.2 設計啟動頁內容 ..................138
6.2.3 設計啟動頁動畫 ..................140
6.3 實戰案例：設計教育 App
首頁 ....................................... 142
6.3.1 設計狀態欄和導航欄 ...........143
6.3.2 設計內容區域......................144
6.3.3 設計標簽欄 .........................147
6.3.4 標註 App 首頁界面 .............148
6.4 實戰案例：設計教育 App 其他
頁面 ....................................... 151
6.4.1 設計登錄頁 .........................153
6.4.2 設計個人中心頁 ..................155
6.4.3 設計視頻播放頁 ..................157
6.5 拓展訓練................................. 158
實訓 1 設計讀書 App 啟動頁.......158
實訓 2 設計家居 App 首頁 ..........159
6.6 AI 輔助設計............................. 160
Pixso 設計音樂 App 界面........160
MODAO 墨刀 設計食堂 App 取餐
界面.......................160
6.7 課後練習................................. 161
第 7 章 軟件界面設計
7.1 行業知識：軟件界面設計基礎.... 166
7.1.1 軟件界面的組成 ..................166
7.1.2 軟件界面常見的類型 ...........166
7.2 實戰案例：設計數據分析軟件啟動頁.................................... 168
7.2.1 設計啟動頁背景 ..................169
7.2.2 設計啟動頁內容 ..................171
7.3 實戰案例：設計數據分析軟件著陸頁.................................... 172
7.3.1 設計命令區 .........................174
7.3.2 設計導航欄 .........................174
7.3.3 設計內容區 .........................175
7.4 實戰案例：設計其他頁面 .......... 179
7.4.1 設計內頁.............................181
7.4.2 設計詳情信息頁 ..................183
7.4.3 設計表單頁 .........................185
7.5 拓展訓練................................. 188
實訓 1 設計辦公軟件啟動頁.........188
實訓 2 設計辦公軟件內頁............189
7.6 AI 輔助設計............................. 190
TreeMind 樹圖 快速生成公司發展時間線圖.......................190
ProcessOn 生成圖書管理系統原型圖.......................191
7.7 課後練習................................. 193
第 8 章 綜合案例：“宛木居”UI 設計項目
8.1 “宛木居”官網界面設計 .......... 197
8.1.1 設計官網首頁......................197
8.1.2 設計官網內頁......................199
8.1.3 設計官網登錄頁 ..................201
8.1.4 切片與輸出網頁 ..................202
8.2 “宛木居”App 界面設計.......... 203
8.2.1 設計 App 啟動頁.................203
8.2.2 設計啟動頁動效 ..................204
8.2.3 設計 App 圖標 ....................204
8.2.4 設計 App 首頁 ....................205
8.2.5 設計 App 發現頁.................206
8.2.6 設計個人中心頁 ..................207
8.2.7 標註 App 界面 ....................208
8.3 “宛木居”軟件界面設計 .......... 209
8.3.1 設計軟件啟動頁 ..................209
8.3.2 設計軟件著陸頁 ..................210
8.3.3 設計軟件內頁......................211
