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ì)簡介 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)時間 11 1.4 UI設(shè)計(jì)的色彩基礎(chǔ) 11 1.4.1 色彩的基礎(chǔ)知識 11 知識點(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)的視覺規(guī)范 21 動手練 制作視頻播放器圖標(biāo) 23 2.2 圖標(biāo)的基礎(chǔ)知識 26 2.2.1 圖標(biāo)的概念 26 2.2.2 圖標(biāo)的設(shè)計(jì)原則 27 動手練 制作文件袋圖標(biāo) 28 2.3 圖標(biāo)的風(fēng)格類型 33 2.3.1 像素風(fēng)格 33 2.3.2 扁平化風(fēng)格 33 知識點(diǎn)撥線性圖標(biāo)分類34 知識點(diǎn)撥面性圖標(biāo)分類34 2.3.3 擬物風(fēng)格 35 2.3.4 立體風(fēng)格 35 動手練 制作面性圖標(biāo) 35 實(shí)戰(zhàn)演練：制作扁平化風(fēng)格圖標(biāo) 39 新手答疑 44     第3章 控件設(shè)計(jì) 3.1 控件的基礎(chǔ)知識 46 3.1.1 控件的概念 46 注意事項(xiàng)控件和組件46 3.1.2 控件的規(guī)范 47 動手練 制作搜索框控件 48 3.2 常見控件類型 50 3.2.1 按鈕控件 50 動手練 制作不同狀態(tài)的按鈕控件 52 3.2.2 選擇控件 55 知識點(diǎn)撥單選按鈕56 3.2.3 文本輸入框控件 56 3.2.4 彈框控件 57 實(shí)戰(zhàn)演練：制作升級彈框 58 新手答疑 62     第4章 動效設(shè)計(jì) 4.1 UI動效簡介 64 4.1.1 認(rèn)識UI動效 64 4.1.2 UI動效類型 64 動手練 制作掃碼動效 65 4.2 制作UI動效 70 4.2.1 After Effects的工作界面 70 知識點(diǎn)撥工作區(qū)設(shè)置71 4.2.2 UI動效制作 71 知識點(diǎn)撥重新設(shè)置合成72 知識點(diǎn)撥添加關(guān)鍵幀74 注意事項(xiàng)關(guān)鍵幀應(yīng)用74 4.2.3 蒙版和形狀 74 知識點(diǎn)撥鍵盤↑↓鍵的妙用75 4.2.4 輸出動效 76 動手練 制作logo的出現(xiàn)動效 76 實(shí)戰(zhàn)演練：制作加載動效 79 新手答疑 84     第5章 App界面設(shè)計(jì) 5.1 App界面設(shè)計(jì)規(guī)范 86 5.1.1 iOS系統(tǒng)設(shè)計(jì)規(guī)范 86 知識點(diǎn)撥最小點(diǎn)擊區(qū)域88 注意事項(xiàng)最小字號89 5.1.2 Android系統(tǒng)設(shè)計(jì)規(guī)范 89 注意事項(xiàng)Android界面常用尺寸90 5.2 App界面常見類型 91 5.2.1 閃屏頁 91 5.2.2 引導(dǎo)頁 92 注意事項(xiàng)功能介紹型引導(dǎo)頁分類92 5.2.3 注冊登錄頁 93 注意事項(xiàng)注冊登錄頁分類94 動手練 制作食味App登錄注冊頁 94 5.2.4 空白頁 97 5.2.5 首頁 98 5.2.6 個人中心頁 99 注意事項(xiàng)其他常見頁面99 動手練 制作食味App個人中心頁 99 實(shí)戰(zhàn)演練：制作旅行客App常用頁面 103 新手答疑 112     第6章 網(wǎng)頁界面設(shè)計(jì) 6.1 網(wǎng)頁界面設(shè)計(jì)規(guī)范 114 6.1.1 網(wǎng)頁尺寸規(guī)范 114 注意事項(xiàng)首屏高度115 6.1.2 網(wǎng)頁界面結(jié)構(gòu)規(guī)范 115 6.1.3 網(wǎng)頁界面布局規(guī)范 115 注意事項(xiàng)網(wǎng)格列數(shù)116 6.1.4 網(wǎng)頁界面字體規(guī)范 116 動手練 制作花間集網(wǎng)站首頁 116 6.2 網(wǎng)頁界面常見類型 125 6.2.1 首頁 125 6.2.2 欄目頁 126 6.2.3 詳情頁 127 動手練 制作花間集網(wǎng)站詳情頁 128 6.2.4 專題頁 133 實(shí)戰(zhàn)演練：制作飲炊美食網(wǎng)站首頁 133 新手答疑 142     第7章 軟件界面設(shè)計(jì) 7.1 軟件界面設(shè)計(jì)規(guī)范 144 7.1.1 軟件界面結(jié)構(gòu)布局規(guī)范 144 7.1.2 軟件界面尺寸規(guī)范 145 知識點(diǎn)撥斷點(diǎn)145 7.1.3 軟件界面字體規(guī)范 145 知識點(diǎn)撥常見無襯線體和襯線體146 注意事項(xiàng)文字間距147 7.1.4 軟件圖標(biāo)規(guī)范 147 動手練 制作繪圖軟件啟動頁 148 7.2 軟件界面常見類型 151 7.2.1 啟動頁 151 7.2.2 著陸頁 151 7.2.3 集合頁 152 動手練 制作繪圖軟件集合頁 152 7.2.4 主/細(xì)節(jié)頁 157 7.2.5 詳細(xì)信息頁 158 7.2.6 表單頁 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 知識點(diǎn)撥其他需要標(biāo)注的內(nèi)容171 注意事項(xiàng)標(biāo)注單位171 8.1.2 標(biāo)注工具 171 動手練 標(biāo)注App注冊登錄頁 172 8.2 界面切圖 175 8.2.1 切圖原則 176 知識點(diǎn)撥點(diǎn)九切圖176 知識點(diǎn)撥圖標(biāo)切圖176 注意事項(xiàng)不需要切圖元素176 8.2.2 切圖命名規(guī)范 176 注意事項(xiàng)切圖命名原因177 8.2.3 切圖工具 177 動手練 切圖并輸出網(wǎng)頁界面 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 制作閃屏頁 190 注意事項(xiàng)參考線的區(qū)別191 9.1.3 制作首頁 193 9.1.4 制作詳情頁 201 9.2 設(shè)計(jì)移動端創(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 繪制其他常見圖標(biāo) 216