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

第1章 移動UI的設(shè)計(jì)基礎(chǔ) 1.1 認(rèn)識移動UI設(shè)計(jì) 2 1.1.1 UI設(shè)計(jì) 2 1.1.2 移動UI設(shè)計(jì) 3 1.1.3 UI設(shè)計(jì)與移動UI設(shè)計(jì)的區(qū)別 4 1.2 移動UI的系統(tǒng)分類 6 1.2.1 HarmonyOS 6 1.2.2 Android 7 1.2.3 iOS 8 1.3 移動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在移動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 移動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章 移動UI的色彩搭配 2.1 色彩的基礎(chǔ)知識 21 2.1.1 色彩的屬性 21 2.1.2 色彩的類別 21 2.2 色彩搭配 23 2.2.1 互補(bǔ)色搭配 23 2.2.2 對比色搭配 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 常見的移動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章 移動UI的原型設(shè)計(jì) 3.1 移動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 移動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章 移動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 按鈕的層級分類 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)識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章 交互動效設(shè)計(jì) 8.1 關(guān)于交互設(shè)計(jì) 153 8.2 移動UI交互類型 153 8.2.1 按界面元素分類 153 8.2.2 按交互模式分類 155 8.2.3 按設(shè)計(jì)原則與效果分類 157 8.3 關(guān)于UI動效 160 8.4 UI動效的屬性 161 8.4.1 時間 161 8.4.2 緩動與速度 161 8.4.3 視覺 162 8.4.4 交互 163 8.4.5 過渡效果 163 8.5 UI動效的類型 164 8.5.1 按功能分類 164 8.5.2 按運(yùn)動方式分類 165 8.5.3 按觸發(fā)方式分類 165 8.5.4 按持續(xù)時間分類 166 8.6 常用的動效設(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