移動UI設計與制作標準教程（全彩微課版）

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