UI設(shè)計(jì)基礎(chǔ)與應(yīng)用標(biāo)準(zhǔn)教程（全彩微課版）

第1章 UI設(shè)計(jì)學(xué)習(xí)入門 1.1 了解UI設(shè)計(jì) 2 1.1.1 UI設(shè)計(jì)簡(jiǎn)介 2 1.1.2 UI設(shè)計(jì)原則 3 1.1.3 UI設(shè)計(jì)流程 4 1.1.4 UI設(shè)計(jì)常用軟件 5 注意事項(xiàng)在線制作網(wǎng)站7 1.1.5 UI設(shè)計(jì)行業(yè)的發(fā)展 7 1.2 UI設(shè)計(jì)方向 8 1.2.1 用戶研究 8 1.2.2 交互設(shè)計(jì) 8 1.2.3 界面設(shè)計(jì) 8 1.3 UI設(shè)計(jì)的設(shè)計(jì)規(guī)范 9 1.3.1 一致性 9 1.3.2 準(zhǔn)確性 9 1.3.3 可讀性 10 1.3.4 布局合理化 10 1.3.5 系統(tǒng)操作合理性 10 1.3.6 系統(tǒng)響應(yīng)時(shí)間 11 1.4 UI設(shè)計(jì)的色彩基礎(chǔ) 11 1.4.1 色彩的基礎(chǔ)知識(shí) 11 知識(shí)點(diǎn)撥色相環(huán)的色彩構(gòu)成12 1.4.2 色彩搭配 14 實(shí)戰(zhàn)演練：UI設(shè)計(jì)欣賞 16 新手答疑 18     第2章 圖標(biāo)設(shè)計(jì) 2.1 圖標(biāo)的設(shè)計(jì)規(guī)范 20 2.1.1 圖標(biāo)的尺寸規(guī)范 20 注意事項(xiàng)圖標(biāo)切圖21 2.1.2 圖標(biāo)的視覺(jué)規(guī)范 21 動(dòng)手練 制作視頻播放器圖標(biāo) 23 2.2 圖標(biāo)的基礎(chǔ)知識(shí) 26 2.2.1 圖標(biāo)的概念 26 2.2.2 圖標(biāo)的設(shè)計(jì)原則 27 動(dòng)手練 制作文件袋圖標(biāo) 28 2.3 圖標(biāo)的風(fēng)格類型 33 2.3.1 像素風(fēng)格 33 2.3.2 扁平化風(fēng)格 33 知識(shí)點(diǎn)撥線性圖標(biāo)分類34 知識(shí)點(diǎn)撥面性圖標(biāo)分類34 2.3.3 擬物風(fēng)格 35 2.3.4 立體風(fēng)格 35 動(dòng)手練 制作面性圖標(biāo) 35 實(shí)戰(zhàn)演練：制作扁平化風(fēng)格圖標(biāo) 39 新手答疑 44     第3章 控件設(shè)計(jì) 3.1 控件的基礎(chǔ)知識(shí) 46 3.1.1 控件的概念 46 注意事項(xiàng)控件和組件46 3.1.2 控件的規(guī)范 47 動(dòng)手練 制作搜索框控件 48 3.2 常見(jiàn)控件類型 50 3.2.1 按鈕控件 50 動(dòng)手練 制作不同狀態(tài)的按鈕控件 52 3.2.2 選擇控件 55 知識(shí)點(diǎn)撥單選按鈕56 3.2.3 文本輸入框控件 56 3.2.4 彈框控件 57 實(shí)戰(zhàn)演練：制作升級(jí)彈框 58 新手答疑 62     第4章 動(dòng)效設(shè)計(jì) 4.1 UI動(dòng)效簡(jiǎn)介 64 4.1.1 認(rèn)識(shí)UI動(dòng)效 64 4.1.2 UI動(dòng)效類型 64 動(dòng)手練 制作掃碼動(dòng)效 65 4.2 制作UI動(dòng)效 70 4.2.1 After Effects的工作界面 70 知識(shí)點(diǎn)撥工作區(qū)設(shè)置71 4.2.2 UI動(dòng)效制作 71 知識(shí)點(diǎn)撥重新設(shè)置合成72 知識(shí)點(diǎn)撥添加關(guān)鍵幀74 注意事項(xiàng)關(guān)鍵幀應(yīng)用74 4.2.3 蒙版和形狀 74 知識(shí)點(diǎn)撥鍵盤↑↓鍵的妙用75 4.2.4 輸出動(dòng)效 76 動(dòng)手練 制作logo的出現(xiàn)動(dòng)效 76 實(shí)戰(zhàn)演練：制作加載動(dòng)效 79 新手答疑 84     第5章 App界面設(shè)計(jì) 5.1 App界面設(shè)計(jì)規(guī)范 86 5.1.1 iOS系統(tǒng)設(shè)計(jì)規(guī)范 86 知識(shí)點(diǎn)撥最小點(diǎn)擊區(qū)域88 注意事項(xiàng)最小字號(hào)89 5.1.2 Android系統(tǒng)設(shè)計(jì)規(guī)范 89 注意事項(xiàng)Android界面常用尺寸90 5.2 App界面常見(jiàn)類型 91 5.2.1 閃屏頁(yè) 91 5.2.2 引導(dǎo)頁(yè) 92 注意事項(xiàng)功能介紹型引導(dǎo)頁(yè)分類92 5.2.3 注冊(cè)登錄頁(yè) 93 注意事項(xiàng)注冊(cè)登錄頁(yè)分類94 動(dòng)手練 制作食味App登錄注冊(cè)頁(yè) 94 5.2.4 空白頁(yè) 97 5.2.5 首頁(yè) 98 5.2.6 個(gè)人中心頁(yè) 99 注意事項(xiàng)其他常見(jiàn)頁(yè)面99 動(dòng)手練 制作食味App個(gè)人中心頁(yè) 99 實(shí)戰(zhàn)演練：制作旅行客App常用頁(yè)面 103 新手答疑 112     第6章 網(wǎng)頁(yè)界面設(shè)計(jì) 6.1 網(wǎng)頁(yè)界面設(shè)計(jì)規(guī)范 114 6.1.1 網(wǎng)頁(yè)尺寸規(guī)范 114 注意事項(xiàng)首屏高度115 6.1.2 網(wǎng)頁(yè)界面結(jié)構(gòu)規(guī)范 115 6.1.3 網(wǎng)頁(yè)界面布局規(guī)范 115 注意事項(xiàng)網(wǎng)格列數(shù)116 6.1.4 網(wǎng)頁(yè)界面字體規(guī)范 116 動(dòng)手練 制作花間集網(wǎng)站首頁(yè) 116 6.2 網(wǎng)頁(yè)界面常見(jiàn)類型 125 6.2.1 首頁(yè) 125 6.2.2 欄目頁(yè) 126 6.2.3 詳情頁(yè) 127 動(dòng)手練 制作花間集網(wǎng)站詳情頁(yè) 128 6.2.4 專題頁(yè) 133 實(shí)戰(zhàn)演練：制作飲炊美食網(wǎng)站首頁(yè) 133 新手答疑 142     第7章 軟件界面設(shè)計(jì) 7.1 軟件界面設(shè)計(jì)規(guī)范 144 7.1.1 軟件界面結(jié)構(gòu)布局規(guī)范 144 7.1.2 軟件界面尺寸規(guī)范 145 知識(shí)點(diǎn)撥斷點(diǎn)145 7.1.3 軟件界面字體規(guī)范 145 知識(shí)點(diǎn)撥常見(jiàn)無(wú)襯線體和襯線體146 注意事項(xiàng)文字間距147 7.1.4 軟件圖標(biāo)規(guī)范 147 動(dòng)手練 制作繪圖軟件啟動(dòng)頁(yè) 148 7.2 軟件界面常見(jiàn)類型 151 7.2.1 啟動(dòng)頁(yè) 151 7.2.2 著陸頁(yè) 151 7.2.3 集合頁(yè) 152 動(dòng)手練 制作繪圖軟件集合頁(yè) 152 7.2.4 主/細(xì)節(jié)頁(yè) 157 7.2.5 詳細(xì)信息頁(yè) 158 7.2.6 表單頁(yè) 158 實(shí)戰(zhàn)演練：制作視頻軟件界面 159 新手答疑 168     第8章 界面的標(biāo)注與切圖 8.1 界面標(biāo)注 170 8.1.1 標(biāo)注內(nèi)容 170 注意事項(xiàng)極限值170 注意事項(xiàng)圖標(biāo)標(biāo)注171 知識(shí)點(diǎn)撥其他需要標(biāo)注的內(nèi)容171 注意事項(xiàng)標(biāo)注單位171 8.1.2 標(biāo)注工具 171 動(dòng)手練 標(biāo)注App注冊(cè)登錄頁(yè) 172 8.2 界面切圖 175 8.2.1 切圖原則 176 知識(shí)點(diǎn)撥點(diǎn)九切圖176 知識(shí)點(diǎn)撥圖標(biāo)切圖176 注意事項(xiàng)不需要切圖元素176 8.2.2 切圖命名規(guī)范 176 注意事項(xiàng)切圖命名原因177 8.2.3 切圖工具 177 動(dòng)手練 切圖并輸出網(wǎng)頁(yè)界面 178 實(shí)戰(zhàn)演練：標(biāo)注軟件界面并進(jìn)行切圖 181 新手答疑 188     第9章 綜合實(shí)戰(zhàn)案例 9.1 設(shè)計(jì)美食App界面 190 9.1.1 設(shè)計(jì)思路 190 9.1.2 制作閃屏頁(yè) 190 注意事項(xiàng)參考線的區(qū)別191 9.1.3 制作首頁(yè) 193 9.1.4 制作詳情頁(yè) 201 9.2 設(shè)計(jì)移動(dòng)端創(chuàng)意圖標(biāo) 208 9.2.1 設(shè)計(jì)思路 208 9.2.2 設(shè)計(jì)準(zhǔn)備之畫板的創(chuàng)建 208 9.2.3 繪制界面圖標(biāo) 210 9.2.4 繪制交流類應(yīng)用圖標(biāo) 214 9.2.5 繪制其他常見(jiàn)圖標(biāo) 216