移動(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)分類 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 簡潔性原則 9 1.3.2 一致性原則 9 1.3.3 可訪問性原則 10 1.3.4 響應(yīng)式原則 10 1.3.5 視覺層次原則 11 1.3.6 觸控友好原則 11 1.4 AIGC在移動(dòng)UI中的應(yīng)用 12 1.4.1 前期調(diào)研與競品分析 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 用戶測試 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 色彩的類別 21 2.2 色彩搭配 23 2.2.1 互補(bǔ)色搭配 23 2.2.2 對(duì)比色搭配 23 2.2.3 相鄰色搭配 24 2.2.4 類似色搭配 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 常見的移動(dòng)UI配色 32 2.4.1 社交類配色 32 2.4.2 電商類配色 34 2.4.3 美食類配色 36 2.4.4 教育類配色 37 2.5 案例實(shí)戰(zhàn)：構(gòu)建美食類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 常見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)：繪制旅行類App原型圖 52 新手答疑 59     第4章 移動(dòng)UI的構(gòu)建 4.1 界面構(gòu)建的元素 61 4.2 UI控件類型詳解 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 按鈕的視覺設(shè)計(jì) 67 4.3.1 按鈕的類型 67 4.3.2 按鈕的組成 69 4.3.3 按鈕的層級(jí)分類 70 4.3.4 按鈕的邊角樣式 70 4.3.5 按鈕的顯示狀態(tài) 71 4.4 彈窗的視覺設(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 底部頁簽欄 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 特定頁面或視圖 95 5.5.3 編輯界面 96 5.6 案例實(shí)戰(zhàn)：設(shè)計(jì)繪畫類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 圖片的使用場景 116 6.5.2 圖片格式 118 6.5.3 圖片遮罩 118 6.6 案例實(shí)戰(zhàn)：設(shè)計(jì)交通工具類系統(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ì)美食類應(yīng)用圖標(biāo) 142 新手答疑 151     第8章 交互動(dòng)效設(shè)計(jì) 8.1 關(guān)于交互設(shè)計(jì) 153 8.2 移動(dòng)UI交互類型 153 8.2.1 按界面元素分類 153 8.2.2 按交互模式分類 155 8.2.3 按設(shè)計(jì)原則與效果分類 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 視覺 162 8.4.4 交互 163 8.4.5 過渡效果 163 8.5 UI動(dòng)效的類型 164 8.5.1 按功能分類 164 8.5.2 按運(yùn)動(dòng)方式分類 165 8.5.3 按觸發(fā)方式分類 165 8.5.4 按持續(xù)時(shí)間分類 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 常見的切圖命名 186 9.4 界面切圖的常用工具 187 9.5 案例實(shí)戰(zhàn)：首頁界面切圖 189 新手答疑 192