移動(dòng)UI設(shè)計(jì)與制作標(biāo)準(zhǔn)教程（全彩微課版）

第1章 移動(dòng)UI的設(shè)計(jì)基礎(chǔ) 1.1 認(rèn)識(shí)移動(dòng)UI設(shè)計(jì) 2 1.1.1 UI設(shè)計(jì) 2 1.1.2 移動(dòng)UI設(shè)計(jì) 3 1.1.3 UI設(shè)計(jì)與移動(dòng)UI設(shè)計(jì)的區(qū)別 4 1.2 移動(dòng)UI的系統(tǒng)分類(lèi) 6 1.2.1 HarmonyOS 6 1.2.2 Android 7 1.2.3 iOS 8 1.3 移動(dòng)UI的設(shè)計(jì)原則 9 1.3.1 簡(jiǎn)潔性原則 9 1.3.2 一致性原則 9 1.3.3 可訪問(wèn)性原則 10 1.3.4 響應(yīng)式原則 10 1.3.5 視覺(jué)層次原則 11 1.3.6 觸控友好原則 11 1.4 AIGC在移動(dòng)UI中的應(yīng)用 12 1.4.1 前期調(diào)研與競(jìng)品分析 12 1.4.2 設(shè)計(jì)靈感與創(chuàng)意激發(fā) 13 1.4.3 設(shè)計(jì)素材與資源生成 14 1.5 移動(dòng)UI的設(shè)計(jì)流程 16 1.5.1 用戶研究 16 1.5.2 任務(wù)分析 16 1.5.3 設(shè)計(jì)草圖 16 1.5.4 設(shè)計(jì)細(xì)化 17 1.5.5 用戶測(cè)試 17 1.5.6 反饋和優(yōu)化 18 1.5.7 方案交付 18 1.5.8 方案實(shí)施 18 新手答疑 19     第2章 移動(dòng)UI的色彩搭配 2.1 色彩的基礎(chǔ)知識(shí) 21 2.1.1 色彩的屬性 21 2.1.2 色彩的類(lèi)別 21 2.2 色彩搭配 23 2.2.1 互補(bǔ)色搭配 23 2.2.2 對(duì)比色搭配 23 2.2.3 相鄰色搭配 24 2.2.4 類(lèi)似色搭配 24 2.2.5 分裂互補(bǔ)色搭配 25 2.2.6 三角形搭配 25 2.2.7 四色搭配 26 2.2.8 正方形搭配 26 2.3 構(gòu)建UI的顏色系統(tǒng) 27 2.3.1 明確風(fēng)格 27 2.3.2 選擇主色 28 2.3.3 確定配色 29 2.3.4 定義顏色層次 29 2.4 常見(jiàn)的移動(dòng)UI配色 32 2.4.1 社交類(lèi)配色 32 2.4.2 電商類(lèi)配色 34 2.4.3 美食類(lèi)配色 36 2.4.4 教育類(lèi)配色 37 2.5 案例實(shí)戰(zhàn)：構(gòu)建美食類(lèi)App顏色系統(tǒng) 39 新手答疑 41     第3章 移動(dòng)UI的原型設(shè)計(jì) 3.1 移動(dòng)UI的草圖繪制 43 3.1.1 UI草圖的定義 43 3.1.2 UI草圖的優(yōu)缺點(diǎn) 43 3.1.3 常見(jiàn)UI草圖表現(xiàn)形式 44 3.2 移動(dòng)UI的原型設(shè)計(jì) 45 3.2.1 原型設(shè)計(jì)的概念 45 3.2.2 原型的表現(xiàn)手法 46 3.2.3 原型設(shè)計(jì)的重要性 47 3.3 原型設(shè)計(jì)的常用軟件 47 3.4 案例實(shí)戰(zhàn)：繪制旅行類(lèi)App原型圖 52 新手答疑 59     第4章 移動(dòng)UI的構(gòu)建 4.1 界面構(gòu)建的元素 61 4.2 UI控件類(lèi)型詳解 61 4.2.1 基礎(chǔ)控件 61 4.2.2 導(dǎo)航控件 62 4.2.3 輸入控件 63 4.2.4 顯示控件 65 4.2.5 反饋控件 66 4.3 按鈕的視覺(jué)設(shè)計(jì) 67 4.3.1 按鈕的類(lèi)型 67 4.3.2 按鈕的組成 69 4.3.3 按鈕的層級(jí)分類(lèi) 70 4.3.4 按鈕的邊角樣式 70 4.3.5 按鈕的顯示狀態(tài) 71 4.4 彈窗的視覺(jué)設(shè)計(jì) 71 4.4.1 彈窗的構(gòu)成 71 4.4.2 模態(tài)彈窗 72 4.4.3 非模態(tài)彈窗 73 4.4.4 彈窗的設(shè)計(jì)原則 74 4.4.5 彈窗的觸發(fā)機(jī)制 75 4.5 案例實(shí)戰(zhàn)：制作權(quán)限獲取彈窗 76 新手答疑 81     第5章 HarmonyOS UI設(shè)計(jì) 5.1 認(rèn)識(shí)HarmonyOS 83 5.1.1 常用單位 83 5.1.2 柵格系統(tǒng) 83 5.2 HarmonyOS界面構(gòu)成 84 5.2.1 狀態(tài)欄 84 5.2.2 標(biāo)題欄 85 5.2.3  工具欄 85 5.2.4 底部頁(yè)簽欄 85 5.2.5 按鈕 86 5.3 HarmonyOS圖標(biāo)設(shè)計(jì)規(guī)范 87 5.3.1 應(yīng)用圖標(biāo)設(shè)計(jì) 87 5.3.2 系統(tǒng)圖標(biāo)設(shè)計(jì) 89 5.4 HarmonyOS文字設(shè)計(jì)規(guī)范 91 5.4.1 字體規(guī)范 91 5.4.2 字體排版 92 5.5 HarmonyOS應(yīng)用架構(gòu) 94 5.5.1 界面框架與結(jié)構(gòu) 94 5.5.2 特定頁(yè)面或視圖 95 5.5.3 編輯界面 96 5.6 案例實(shí)戰(zhàn)：設(shè)計(jì)繪畫(huà)類(lèi)App界面 97 新手答疑 107     第6章 Android UI設(shè)計(jì) 6.1 Android的常用單位 109 6.2 Android界面尺寸規(guī)范 110 6.2.1 Android界面尺寸 110 6.2.2 Android的界面結(jié)構(gòu) 110 6.3 Android圖標(biāo)設(shè)計(jì)規(guī)范 112 6.3.1 Android產(chǎn)品圖標(biāo)設(shè)計(jì) 112 6.3.2 Android系統(tǒng)圖標(biāo)設(shè)計(jì) 113 6.4 Android文字設(shè)計(jì)規(guī)范 114 6.4.1 文字規(guī)范 114 6.4.2 文本顏色 115 6.5 Android圖片設(shè)計(jì)規(guī)范 116 6.5.1 圖片的使用場(chǎng)景 116 6.5.2 圖片格式 118 6.5.3 圖片遮罩 118 6.6 案例實(shí)戰(zhàn)：設(shè)計(jì)交通工具類(lèi)系統(tǒng) 圖標(biāo)120 新手答疑 131     第7章 iOS UI設(shè)計(jì) 7.1 iOS的常用單位 133 7.2 iOS界面尺寸規(guī)范 133 7.2.1 iOS界面尺寸 134 7.2.2 iOS的界面結(jié)構(gòu) 134 7.3 iOS圖標(biāo)設(shè)計(jì)規(guī)范 135 7.3.1 iOS應(yīng)用圖標(biāo)設(shè)計(jì) 135 7.3.2 iOS系統(tǒng)圖標(biāo)設(shè)計(jì) 137 7.4 iOS文字設(shè)計(jì)規(guī)范 137 7.4.1 系統(tǒng)字體規(guī)范 137 7.4.2 文字大小 138 7.4.3 文字顏色 139 7.5 iOS界面設(shè)計(jì)規(guī)范 140 7.5.1 全局邊距 140 7.5.2 卡片間距 140 7.5.3 內(nèi)容布局 140 7.5.4 圖片比例 142 7.6 案例實(shí)戰(zhàn)：設(shè)計(jì)美食類(lèi)應(yīng)用圖標(biāo) 142 新手答疑 151     第8章 交互動(dòng)效設(shè)計(jì) 8.1 關(guān)于交互設(shè)計(jì) 153 8.2 移動(dòng)UI交互類(lèi)型 153 8.2.1 按界面元素分類(lèi) 153 8.2.2 按交互模式分類(lèi) 155 8.2.3 按設(shè)計(jì)原則與效果分類(lèi) 157 8.3 關(guān)于UI動(dòng)效 160 8.4 UI動(dòng)效的屬性 161 8.4.1 時(shí)間 161 8.4.2 緩動(dòng)與速度 161 8.4.3 視覺(jué) 162 8.4.4 交互 163 8.4.5 過(guò)渡效果 163 8.5 UI動(dòng)效的類(lèi)型 164 8.5.1 按功能分類(lèi) 164 8.5.2 按運(yùn)動(dòng)方式分類(lèi) 165 8.5.3 按觸發(fā)方式分類(lèi) 165 8.5.4 按持續(xù)時(shí)間分類(lèi) 166 8.6 常用的動(dòng)效設(shè)計(jì)軟件 167 8.7 案例實(shí)戰(zhàn)：制作下載進(jìn)度條 169 新手答疑 176     第9章 標(biāo)注與切圖 9.1 界面標(biāo)注 178 9.1.1 界面標(biāo)注的作用 178 9.1.2 界面標(biāo)注的內(nèi)容 178 9.1.3 界面標(biāo)注的規(guī)范 179 9.2 界面標(biāo)注的常用工具 180 9.3 界面的切圖 182 9.3.1 界面切圖的原則 182 9.3.2 界面切圖的要點(diǎn) 183 9.3.3 界面切圖的命名規(guī)范 185 9.3.4 常見(jiàn)的切圖命名 186 9.4 界面切圖的常用工具 187 9.5 案例實(shí)戰(zhàn)：首頁(yè)界面切圖 189 新手答疑 192