第 1 章 UI設(shè)計基礎(chǔ)知識
1.1 UI 設(shè)計基礎(chǔ) ........................... 002
1.1.1 什么是 UI 設(shè)計....................002
1.1.2 UI 設(shè)計的基本原則..............004
1.1.3 UI 設(shè)計的發(fā)展趨勢..............005
1.1.4 UI 設(shè)計的常用工具..............008
1.1.5 UI 設(shè)計中的相關(guān)術(shù)語 ..........008
1.2 UI 設(shè)計要素 ............................ 010
1.2.1 點、線、面 .........................010
1.2.2 色彩....................................012
1.2.3 文字....................................016
1.2.4 風格....................................017
1.2.5 構(gòu)圖....................................018
1.2.6 布局....................................019
1.3 UI 設(shè)計流程 ............................ 021
1.3.1 需求分析.............................021
1.3.2 原型設(shè)計.............................021
1.3.3 視覺設(shè)計.............................023
1.3.4 切圖與標注 .........................024
1.4 課后練習................................. 024
第 2 章 Photoshop基礎(chǔ)知識
2.1 熟悉 Photoshop ..................... 027
2.1.1 Photoshop 的工作界面 ......027
2.1.2 Photoshop 的基本操作 ......029
2.2 選擇與繪制圖像 ....................... 031
2.2.1 創(chuàng)建選區(qū).............................031
2.2.2 編輯選區(qū).............................031
2.2.3 繪制圖像.............................032
2.2.4 繪制矢量圖形......................032
2.3 應(yīng)用圖層................................. 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 章 圖標設(shè)計
3.1 行業(yè)知識：圖標設(shè)計基礎(chǔ) .......... 044
3.1.1 圖標的優(yōu)勢 .........................044
3.1.2 圖標的設(shè)計風格 ..................044
3.1.3 圖標的設(shè)計規(guī)范 ..................045
3.1.4 圖標的設(shè)計要點 ..................047
3.2 實戰(zhàn)案例：設(shè)計線性圖標 .......... 048
3.2.1 繪制天氣圖標......................049
3.2.2 繪制日歷圖標......................052
3.2.3 繪制地圖圖標......................053
3.3 實戰(zhàn)案例：設(shè)計面性圖標 .......... 054
3.3.1 繪制郵件圖標......................055
3.3.2 繪制搜索圖標......................056
3.3.3 繪制定位圖標......................057
3.4 實戰(zhàn)案例：設(shè)計具象圖標 .......... 058
3.4.1 繪制外賣功能圖標...............059
3.4.2 繪制自取功能圖標...............061
3.5 實戰(zhàn)案例：設(shè)計 2.5D 圖標........ 062
3.5.1 繪制揮墨應(yīng)用圖標........063
3.5.2 繪制禮品圖標......................065
3.6 拓展訓(xùn)練................................. 067
實訓(xùn) 1 設(shè)計商務(wù)系列圖標............067
實訓(xùn) 2 設(shè)計果蔬系列圖標............068
3.7 AI 輔助設(shè)計............................. 069
通義萬相 生成小袁寵物軟件應(yīng)用圖標..........................069
Midjourney中文站 生成家居系統(tǒng)圖標..........................069
3.8 課后練習 .................................. 070
第 4 章 UI控件設(shè)計
4.1 行業(yè)知識：控件設(shè)計基礎(chǔ) .......... 074
4.1.1 滑塊的類型及設(shè)計要點........074
4.1.2 表單的類型及設(shè)計要點........075
4.1.3 按鈕的類型及設(shè)計要點........076
4.2 實戰(zhàn)案例：設(shè)計滑塊................. 077
4.2.1 繪制播放控制線條滑塊........078
4.2.2 繪制播放加載滑塊...............079
4.3 實戰(zhàn)案例：設(shè)計表單................. 081
4.3.1 設(shè)計旅游行程表單...............082
4.3.2 設(shè)計日歷選擇表單...............083
4.4 實戰(zhàn)案例：設(shè)計按鈕................. 085
4.4.1 設(shè)計播放和暫停按鈕 ...........086
4.4.2 繪制點擊進入按鈕...............088
4.5 拓展訓(xùn)練................................. 090
實訓(xùn) 1 設(shè)計開關(guān)滑塊...................090
實訓(xùn) 2 設(shè)計點擊參與按鈕............091
4.6 AI 輔助設(shè)計............................. 092
Vega AI 生成預(yù)約表單............092
Midjourney中文站 生成音量調(diào)節(jié)按鈕.........................092
4.7 課后練習................................. 093
第 5 章 網(wǎng)頁界面設(shè)計
5.1 行業(yè)知識：網(wǎng)頁界面設(shè)計基礎(chǔ).... 097
5.1.1 網(wǎng)頁界面的組成 ..................097
5.1.2 網(wǎng)頁界面常見的類型 ...........097
5.1.3 網(wǎng)頁界面的布局方式 ...........098
5.1.4 網(wǎng)頁界面的設(shè)計要求 ...........099
5.1.5 網(wǎng)頁界面的尺寸規(guī)范 ...........100
5.2 實戰(zhàn)案例：設(shè)計家裝公司官網(wǎng)首頁 ....................................... 101
5.2.1 設(shè)計標志和導(dǎo)航 ..................104
5.2.2 設(shè)計 Banner.......................105
5.2.3 設(shè)計中間區(qū)域......................108
5.2.4 設(shè)計頁尾區(qū)域......................110
5.3 實戰(zhàn)案例：設(shè)計家裝公司官網(wǎng)內(nèi)頁 ....................................... 111
5.3.1 設(shè)計整屋案例網(wǎng)頁...............114
5.3.2 設(shè)計登錄頁 .........................117
5.4 實戰(zhàn)案例：切片與輸出家裝公司網(wǎng)頁 ....................................... 118
5.4.1 切片網(wǎng)頁界面......................119
5.4.2 輸出網(wǎng)頁界面......................121
5.5 拓展訓(xùn)練................................. 122
實訓(xùn) 1 設(shè)計水鄉(xiāng)土特產(chǎn)網(wǎng)站首頁..122
實訓(xùn) 2 設(shè)計水鄉(xiāng)土特產(chǎn)網(wǎng)站登錄頁....................................123
5.6 AI 輔助設(shè)計............................. 123
文心一言 獲取網(wǎng)頁設(shè)計思路和靈感123
即時 AI 生成完整智能家居頁面...124
5.7 課后練習................................. 125
第 6 章
129 App 界面設(shè)計
6.1 行業(yè)知識：App 界面設(shè)計基礎(chǔ) ... 131
6.1.1 App 界面的組成..................131
6.1.2 App 界面常見的類型...........131
6.1.3 App 界面設(shè)計要求 ..............133
6.1.4 App 界面尺寸規(guī)范 ..............133
6.1.5 界面標注的規(guī)范 ..................134
6.2 實戰(zhàn)案例：設(shè)計教育 App
啟動頁.................................... 135
6.2.1 設(shè)計啟動頁背景 ..................136
6.2.2 設(shè)計啟動頁內(nèi)容 ..................138
6.2.3 設(shè)計啟動頁動畫 ..................140
6.3 實戰(zhàn)案例：設(shè)計教育 App
首頁 ....................................... 142
6.3.1 設(shè)計狀態(tài)欄和導(dǎo)航欄 ...........143
6.3.2 設(shè)計內(nèi)容區(qū)域......................144
6.3.3 設(shè)計標簽欄 .........................147
6.3.4 標注 App 首頁界面 .............148
6.4 實戰(zhàn)案例：設(shè)計教育 App 其他
頁面 ....................................... 151
6.4.1 設(shè)計登錄頁 .........................153
6.4.2 設(shè)計個人中心頁 ..................155
6.4.3 設(shè)計視頻播放頁 ..................157
6.5 拓展訓(xùn)練................................. 158
實訓(xùn) 1 設(shè)計讀書 App 啟動頁.......158
實訓(xùn) 2 設(shè)計家居 App 首頁 ..........159
6.6 AI 輔助設(shè)計............................. 160
Pixso 設(shè)計音樂 App 界面........160
MODAO 墨刀 設(shè)計食堂 App 取餐
界面.......................160
6.7 課后練習................................. 161
第 7 章 軟件界面設(shè)計
7.1 行業(yè)知識：軟件界面設(shè)計基礎(chǔ).... 166
7.1.1 軟件界面的組成 ..................166
7.1.2 軟件界面常見的類型 ...........166
7.2 實戰(zhàn)案例：設(shè)計數(shù)據(jù)分析軟件啟動頁.................................... 168
7.2.1 設(shè)計啟動頁背景 ..................169
7.2.2 設(shè)計啟動頁內(nèi)容 ..................171
7.3 實戰(zhàn)案例：設(shè)計數(shù)據(jù)分析軟件著陸頁.................................... 172
7.3.1 設(shè)計命令區(qū) .........................174
7.3.2 設(shè)計導(dǎo)航欄 .........................174
7.3.3 設(shè)計內(nèi)容區(qū) .........................175
7.4 實戰(zhàn)案例：設(shè)計其他頁面 .......... 179
7.4.1 設(shè)計內(nèi)頁.............................181
7.4.2 設(shè)計詳情信息頁 ..................183
7.4.3 設(shè)計表單頁 .........................185
7.5 拓展訓(xùn)練................................. 188
實訓(xùn) 1 設(shè)計辦公軟件啟動頁.........188
實訓(xùn) 2 設(shè)計辦公軟件內(nèi)頁............189
7.6 AI 輔助設(shè)計............................. 190
TreeMind 樹圖 快速生成公司發(fā)展時間線圖.......................190
ProcessOn 生成圖書管理系統(tǒng)原型圖.......................191
7.7 課后練習................................. 193
第 8 章 綜合案例：宛木居UI 設(shè)計項目
8.1 宛木居官網(wǎng)界面設(shè)計 .......... 197
8.1.1 設(shè)計官網(wǎng)首頁......................197
8.1.2 設(shè)計官網(wǎng)內(nèi)頁......................199
8.1.3 設(shè)計官網(wǎng)登錄頁 ..................201
8.1.4 切片與輸出網(wǎng)頁 ..................202
8.2 宛木居App 界面設(shè)計.......... 203
8.2.1 設(shè)計 App 啟動頁.................203
8.2.2 設(shè)計啟動頁動效 ..................204
8.2.3 設(shè)計 App 圖標 ....................204
8.2.4 設(shè)計 App 首頁 ....................205
8.2.5 設(shè)計 App 發(fā)現(xiàn)頁.................206
8.2.6 設(shè)計個人中心頁 ..................207
8.2.7 標注 App 界面 ....................208
8.3 宛木居軟件界面設(shè)計 .......... 209
8.3.1 設(shè)計軟件啟動頁 ..................209
8.3.2 設(shè)計軟件著陸頁 ..................210
8.3.3 設(shè)計軟件內(nèi)頁......................211