移動 UI 設計 (微課版)
李萬軍
買這商品的人也買了...
-
漫畫結構力學入門$260$234 -
LabVIEW 2010 與 ZigBee 感測電路$550$495 -
實用機構設計圖集$160$144 -
創意之鑰－Android 互動應用開發$520$442 -
30 個飆進第一志願的奇效讀書術$280$252 -
Android 手機程式超簡單!! App Inventor 入門卷$420$378 -
MySQL 完全攻略 : 資料庫開發與效能調校$520$406 -
作業系統概念, 9/e (授權經銷版) (Operating System Concepts, 9/e)$850$808 -
用 Visual Basic 您也能開發 Android App (增訂版B4A+B4i)--跨平台開發Android與iOS App$520$411 -
機構學, 4/e$380$372 -
漫畫 賽局理論，解決問題最簡單的方法$280$252 -
輕鬆學習 DraftSight 2D CAD 工業製圖, 2/e$880$686 -
微積分究竟在說甚麼？:老師從不會教你這些$450$405 -
AIoT 智慧物聯網使用 Webduino Bit 超入門應用 結合 AI × Line Bot$480$432 -
$356移動 UI 設計實戰 (微課版) -
如何設計好網站之 UX 與美學基礎 (Hello Web Design: Design Fundamentals and Shortcuts for Non-Designers)$450$356 -
最強圖解 ESP32 輕鬆玩物聯網和 AI 小積木疊創意以 PocketCard 為教學板$690$545 -
UX策略｜設計創新數位解決方案的產品策略心法, 2/e (UX Strategy: Product Strategy Techniques for Devising Innovative Digital Solutions, 2/e)$580$458 -
Figma UI/UX 設計技巧實戰：打造擬真介面原型$600$420 -
$505Photoshop 移動 UI 創意設計 -
OAuth 2.0 從入門到實戰：利用驗證和授權守護 API 的安全$600$468 -
Illustrator CC 向量視覺創意 設計寶典 (舊名: Illustrator CC 向量視覺設計寶典)$650$514 -
ChatGPT 領軍 DALL-E 2 + Midjourney + D-ID + Synthesia：邁向 AI文字、圖像、影片之路 (全彩印刷)$500$395 -
快速精通 SwiftUI 框架：全面進化 SwiftUI 進階開發實戰技術$720$360 -
Android App 效能改善：48個掌握 App 運行流暢的技巧（iThome鐵人賽系列書）【軟精裝】$680$340
相關主題
商品描述
本書採用全流程設計的方式，對iOS和Android系統移動設備界面的結構及設計規範進行講解。全書採用知識點輔助案例的教學方式，在大量的知識點中融入豐富有趣的案例製作，系統解析移動端App界面設計的流程及設計技巧。書中案例使用Axure RP 10、Adobe XD、Adobe Photoshop CC、Adobe Illustrator CC和PxCook等主流UI設計軟件製作。
本書共8章:第1章，關於移動UI設計；第2章，移動UI策劃與原型設計；第3章，優秀的移動UI色彩搭配；第4章，出色的移動圖標設計；第5章，移動App 的UI設計；第6章，移動App交互設計；第7章，適配與輸出移動UI設計；第8章，設計製作移動App項目。
本書將提供全部案例的素材、源文件和教學視頻，讀者可以結合書、練習文件和教學視頻，提高移動UI設計的學習效率。本書適合UI 設計愛好者、移動UI 設計從業者閱讀，也適合作為各院校設計相關專業的教材。
作者簡介
受欢迎的艺术设计类图书作者，编写过多本设计类图书，包括《移动应用UI设计》《HTML+CSS+Javascript网站制作案例教程》等。
目錄大綱
第 1章 關於移動UI設計
1.1 瞭解移動UI設計 1
1.1.1 初識UI設計 1
1.1.2 移動UI設計的概念 2
1.1.3 移動UI與PC端UI 2
1.1.4 PC端UI重置為移動UI 4
1.2 移動UI的系統分類 6
1.2.1 iOS系統 6
1.2.2 HarmonyOS系統 7
1.2.3 Android系統 7
1.2.4 Wear OS和Watch OS系統 9
1.3 移動UI設計流程 9
1.3.1 需求分析 10
1.3.2 原型設計 12
1.3.3 UI設計 15
1.4 移動UI設計原則 16
1.4.1 風格一致性原則 16
1.4.2 元素準確性原則 17
1.4.3 界面佈局合理化原則 17
1.4.4 系統響應時間原則 18
1.5 移動UI流程的職位劃分 18
1.5.1 產品經理 19
1.5.2 項目經理 19
1.5.3 UI設計師 19
1.5.4 開發工程師 20
1.6 本章小結 20
第 2章 移動UI策劃與原型設計
2.1 確定移動UI目標用戶 21
2.1.1 分析移動UI項目背景 21
2.1.2 掌握用戶畫像分析法 23
2.2 完成移動UI策劃書 24
2.3 瞭解思維導圖 25
2.3.1 思維導圖的設計依據 25
2.3.2 思維導圖的特點 25
2.3.3 思維導圖的作用 26
2.4 思維導圖的常用軟件 27
2.4.1 MindMeister 27
2.4.2 MindManager 27
2.4.3 XMind 28
2.4.4 操作案例——下載並安裝Xmind 28
2.5 繪制移動UI思維導圖 29
2.5.1 思維導圖的操作流程 30
2.5.2 思維導圖的基本類型 31
2.5.3 操作案例——繪制美妝App的首頁思維導圖 33
2.6 繪制移動UI草圖 34
2.6.1 瞭解草圖的概念 35
2.6.2 認識草圖的特點 36
2.6.3 草圖功能的體現 36
2.6.4 常見的草圖形式 39
2.7 瞭解原型設計 41
2.7.1 原型設計的概念 41
2.7.2 原型設計的參與者 41
2.8 製作原型的常用軟件 42
2.8.1 Axure RP 42
2.8.2 Adobe XD 43
2.8.3 操作案例——安裝Axure RP 10 43
2.9 繪制移動UI原型圖 45
2.9.1 原型的表現手法 45
2.9.2 原型的重要性 47
2.9.3 操作案例——繪制美妝App首頁草圖 49
2.9.4 App原型設計與用戶體驗 51
2.9.5 操作案例——繪制美妝App分類界面原型 54
2.10 本章小結 55
第3章 優秀的移動UI色彩搭配
3.1 認識色彩 56
3.1.1 色彩的基礎 56
3.1.2 色彩三屬性 57
3.2 和諧、統一的色彩搭配方法 58
3.2.1 同色系配色方法 58
3.2.2 鄰近色配色方法 59
3.2.3 類似色配色方法 60
3.2.4 同色調配色方法 60
3.2.5 類似色調配色方法 61
3.3 突出、對比的配色方法 62
3.3.1 中差色配色方法 62
3.3.2 對比色配色方法 62
3.3.3 互補色配色方法 63
3.3.4 對比色調配色方法 64
3.4 構建移動UI顏色系統 65
3.4.1 確定設計風格 65
3.4.2 確定主色 66
3.4.3 確定輔色 69
3.4.4 操作案例——構建美妝App顏色系統 69
3.4.5 調整配色 70
3.5 移動UI色彩搭配的註意事項 71
3.5.1 切忌將精緻美觀放在第 一位 72
3.5.2 配色方案要符合用戶的心理印象 72
3.5.3 操作案例——美妝App首頁界面配色設計 73
3.5.4 App界面內容必須便於閱讀 74
3.5.5 保守的使用色彩 75
3.5.6 規避雜亂的配色方案 75
3.5.7 操作案例——美妝App分類界面配色設計 76
3.6 本章小結 77
第4章 出色的移動圖標設計
4.1 初識App圖標 78
4.1.1 App圖標的概念 78
4.1.2 App圖標的重要性 78
4.2 圖標設計常用軟件 79
4.2.1 Illustrator 79
4.2.2 Photoshop 80
4.2.3 CorelDRAW 80
4.3 熟悉圖標柵格系統 80
4.3.1 系統圖標柵格 81
4.3.2 圖標柵格規範 81
4.4 圖標設計形式 83
4.4.1 中文風格 83
4.4.2 英文風格 84
4.4.3 圖形風格 85
4.4.4 數字風格 86
4.4.5 特殊符號風格 86
4.5 App圖標的分類 86
4.5.1 工具圖標 86
4.5.2 操作案例——設計製作磨砂質感工具圖標 91
4.5.3 裝飾圖標 94
4.5.4 啟動圖標 95
4.6 圖標尺寸 97
4.6.1 Android系統的圖標設計尺寸 97
4.6.2 操作案例——設計製作水果裝飾圖標 99
4.6.3 iOS系統的圖標設計尺寸 102
4.6.4 操作案例——設計製作時鐘啟動圖標 102
4.7 圖標組設計規範 106
4.7.1 創建製作清單 106
4.7.2 設計草圖 106
4.7.3 數字呈現 106
4.7.4 確定最終效果 107
4.7.5 命名並導出 107
4.8 本章小結 107
第5章 移動AppUI設計
5.1 移動UI的基礎元素 108
5.2 常見的UI設計軟件 108
5.2.1 Photoshop 108
5.2.2 Sketch 108
5.2.3 Adobe XD 109
5.3 移動UI的設計基礎 109
5.3.1 iOS系統的開發單位 109
5.3.2 iOS系統的界面尺寸規範 110
5.3.3 操作案例——設計製作iOS系統App啟動界面 111
5.3.4 Android系統的開發單位 115
5.3.5 Android系統的界面尺寸規範 115
5.3.6 操作案例——設計製作Android系統App界面 116
5.4 移動UI的字體規範 119
5.4.1 iOS系統字體規範 119
5.4.2 操作案例——設計製作iOS系統App登錄界面 120
5.4.3 Android系統字體規範 122
5.4.4 操作案例——設計製作Android系統App分類界面 123
5.5 移動UI圖片尺寸規範 125
5.6 移動App內容佈局 126
5.6.1 瞭解App界面中的全局邊距 126
5.6.2 操作案例——設計製作iOS系統App首頁界面 126
5.6.3 設置App界面中的內容間距 130
5.6.4 操作案例——設計製作iOS系統App側面菜單界面 131
5.6.5 移動App界面的佈局方式 133
5.7 本章小結 135
第6章 移動App交互設計
6.1 瞭解UI交互設計 135
6.1.1 交互動效的概念 135
6.1.2 基礎動效類型 135
6.2 常見的交互設計軟件 137
6.2.1 Affter Effect 137
6.2.2 Adobe XD 138
6.3 交互設計的基本流程 138
6.3.1 提出交互設計創意想法 139
6.3.2 根據想法進行豐滿實現 140
6.4 移動UI交互的類型 140
6.4.1 轉場過渡 140
6.4.2 操作案例——設計製作App轉場交互 141
6.4.3 層級展示 143
6.4.4 空間擴展 144
6.4.5 關註聚焦 144
6.4.6 內容呈現 144
6.4.7 操作案例——設計製作相冊App內容呈現交互 145
6.4.8 操作反饋 148
6.4.9 操作案例——設計製作App點贊反饋交互 149
6.5 動效在UI界面中的作用 150
6.5.1 吸引用戶註意力 150
6.5.2 為用戶提供操作反饋 151
6.5.3 加強指向性 151
6.5.4 操作案例——設計製作App後台交互 151
6.5.5 傳遞信息深度 155
6.6 交互設計需要遵循的習慣 155
6.7 本章小結 156
第7章 適配與輸出移動UI設計
7.1 標註的重要性 157
7.2 常見的標註與輸出軟件 157
7.2.1 PxCook 157
7.2.2 Assistor PS 158
7.3 標註移動UI 158
7.3.1 移動App標註內容 158
7.3.2 操作案例——標註iOS系統App界面 158
7.3.3 標註的聲明文檔 161
7.3.4 操作案例——標註Android系統App界面 161
7.4 移動UI標註規範 164
7.4.1 位置與尺寸的標註規範 164
7.4.2 色彩和文字的標註規範 165
7.4.3 切圖資源的尺寸必須是雙數 165
7.5 輸出與適配iOS系統UI設計 166
7.5.1 向上適配與向下適配 166
7.5.2 適配切片命名規範 168
7.5.3 操作案例——導出iOS系統App界面切圖資源 169
7.6 輸出與適配Android系統UI設計 171
7.6.1 Android系統中的“點9”切圖 171
7.6.2 輸出與適配的一稿兩用 174
7.6.3 操作案例——導出Android系統App切圖資源 175
7.7 本章小結 176
第8章 設計製作移動App項目
8.1 設計製作美妝電商App項目 177
8.1.1 分析美妝電商App的項目背景 177
8.1.2 製作美妝電商App的草圖原型 177
8.1.3 構建美妝電商App的顏色系統 179
8.1.4 設計製作美妝電商App的圖標組 180
8.1.5 完成美妝電商App的界面設計 182
8.1.6 完成美妝電商App的交互設計 185
8.1.7 完成美妝電商App的界面標註 186
8.1.8 導出美妝電商App的切圖資源 188
8.2 設計製作美食外賣App項目 189
8.2.1 分析美食外賣App的項目背景 189
8.2.2 製作美食外賣App的草圖原型 190
8.2.3 創建美食外賣App的顏色系統 192
8.2.4 設計製作美食外賣App的圖標組 193
8.2.5 完成美食外賣App的界面設計 196
8.2.6 完成美食外賣App的交互設計 200
8.2.7 完成美食外賣App的界面標註 201
8.2.8 導出美食外賣App的切圖資源 203
