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