商品簡介
作者簡介
名人/編輯推薦
目次
相關商品
商品簡介
內容提要
本書以項目引入的方式講解,針對iOS系統和Android系統兩種移動設備界面的結構及設計規範進行學習。採用案例帶動知識點的教學方式,將枯燥的知識點融入豐富有趣的案例製作中,全面解析移動端App界面設計的流程及設計技巧。書中案例使用Adobe XD、Photoshop和PxCook主流UI設計軟件製作。
本書共5個項目。項目1,移動UI界面設計基礎;項目2,掌握移動UI圖標設計;
項目3,iOS系統電子商務App界面設計;項目4,iOS系統美食App界面設計;項目5,Android系統創意家居App界面設計。
本書將提供全部案例的素材、源文件和教學視頻,讀者可以結合書、練習文件和教學視頻,提升移動端App UI界面設計的學習效率。
本書適合UI設計愛好者、App界面設計、移動UI設計從業者閱讀,也適合作為各院校相關設計專業的參考教材。
本書以項目引入的方式講解,針對iOS系統和Android系統兩種移動設備界面的結構及設計規範進行學習。採用案例帶動知識點的教學方式,將枯燥的知識點融入豐富有趣的案例製作中,全面解析移動端App界面設計的流程及設計技巧。書中案例使用Adobe XD、Photoshop和PxCook主流UI設計軟件製作。
本書共5個項目。項目1,移動UI界面設計基礎;項目2,掌握移動UI圖標設計;
項目3,iOS系統電子商務App界面設計;項目4,iOS系統美食App界面設計;項目5,Android系統創意家居App界面設計。
本書將提供全部案例的素材、源文件和教學視頻,讀者可以結合書、練習文件和教學視頻,提升移動端App UI界面設計的學習效率。
本書適合UI設計愛好者、App界面設計、移動UI設計從業者閱讀,也適合作為各院校相關設計專業的參考教材。
作者簡介
Adobe專家組成員。國家軟件協會會員, 國家863專業講師。
出版過多本暢銷教材,深受讀者好評
從事UI設計工作多年,曾出版多本UI設計方面的暢銷書籍。
出版過多本暢銷教材,深受讀者好評
從事UI設計工作多年,曾出版多本UI設計方面的暢銷書籍。
名人/編輯推薦
1.本書采用全新的寫法,走在同類選題之前。
2.全書將針對移動UI設計領域中最為常見的行業進行講解,即有利於讀者理解,又方便查找相關內容學習。
3.本書中將用戶體驗知識點融入到移動UI設計案例中。在教會讀者設計移動UI界面的同時,也告訴讀者為什麼4.慕課視頻。幫助讀者加深理解,強化操作。
5.每個知識點針對一個真實的案例進行分析,也能夠幫助讀者鞏固所學內容。
2.全書將針對移動UI設計領域中最為常見的行業進行講解,即有利於讀者理解,又方便查找相關內容學習。
3.本書中將用戶體驗知識點融入到移動UI設計案例中。在教會讀者設計移動UI界面的同時,也告訴讀者為什麼4.慕課視頻。幫助讀者加深理解,強化操作。
5.每個知識點針對一個真實的案例進行分析,也能夠幫助讀者鞏固所學內容。
目次
項目1 移動UI界面設計基礎
1.1 熟悉移動UI設計 1
1.1.1 了解UI設計 1
1.1.2 了解移動UI設計 2
1.1.3 移動UI與平面UI 2
1.2 移動UI設計的平臺分類 4
1.2.1 Android系統 4
1.2.2 iOS系統 6
1.2.3 Wear OS系統和Watch OS系統 7
1.3 了解移動UI設計常用軟件 8
1.3.1 Axure RP和Adobe XD 8
1.3.2 Photoshop和Sketch 9
1.3.3 PxCook和Assistor PS 10
1.4 分析互聯網產品的需求 11
1.4.1 知識鏈接——互聯網產品設計流程 11
1.4.2 技術引入——了解互聯網產品職業劃分 11
1.4.3 實戰案例——分析互聯網產品需求 13
1.5 設計互聯網產品交互效果 15
1.5.1 知識鏈接——互聯網產品交互設計流程 15
1.5.2 技術引入——了解交互設計和交互設計師 16
1.5.3 實戰案例——分析互聯網產品交互設計 17
1.6 設計互聯網產品視覺效果 19
1.6.1 知識鏈接——互聯網產品配色趨勢 20
1.6.2 技術引入——頁面布局影響視覺效果 22
1.6.3 實戰案例——互聯網產品視覺設計流程 24
1.6 舉一反三——互聯網產品專屬色彩的變更 25
1.7 本章小結 27
1.8 課後測試 27
1.8.1 選擇題 27
1.8.2 判斷題 28
1.8.3 創新題 28
項目2 掌握移動UI圖標設計
2.1 圖標設計的必要性 29
2.2 了解圖標柵格系統 30
2.2.1 系統圖標柵格 31
2.2.2 不同造型圖標的柵格規範 31
2.3 圖標集的制作流程 33
2.31. 創建制作清單 33
2.3.2 設計草圖 33
2.3.3 數字呈現 34
2.3.4 確定最終效果 34
2.3.5 命名並導出 34
2.4 移動UI圖標設計形式 34
2.4.1 中文形式 34
2.4.2 英文形式 36
2.4.3 圖形形式 37
2.4.4 數字和特殊符號形式 37
2.5 設計制作工具圖標 38
2.5.1 知識鏈接——工具圖標的設計風格 38
2.5.2 技術引入——Android系統圖標分類和尺寸 39
2.5.3 實戰案例——設計制作產品工具圖標 41
2.6 設計制作裝飾圖標 45
2.6.1 知識鏈接——裝飾圖標設計風格 46
2.6.2 技術引入——iOS系統圖標尺寸 47
2.6.3 實戰案例——設計制作饒舌音樂風格裝飾圖標 48
2.7 設計制作啟動圖標 51
2.7.1 知識鏈接——啟動圖標設計形式 51
2.7.2 技術引入——啟動圖標設計要求與規範 52
2.7.3 實戰案例——設計制作收音機APP啟動圖標 54
2.8 舉一反三——設計制作iOS系統圖標 60
2.9 本章小結 60
2.10 課後測試 61
2.10.1 選擇題 61
2.10.2 判斷題 61
2.10.3 創新題 61
項目3 iOS系統電子商務APP界面設計
3.1 電子商務APP項目——“約起”界面設計 63
3.1.1 分析電子商務APP項目背景 63
3.1.2 繪制電子商務APP項目用戶畫像 64
3.2 電子商務APP草圖制作 64
3.2.1 電子商務類APP界面尺寸 64
3.2.2 電子商務類APP界面布局類型 65
3.2.3 實戰案例——設計制作電子商務APP“首頁”草圖 66
3.3 電子商務APP界面色彩搭配 69
3.3.1 電子商務APP界面主色的確定 69
3.3.2 電子商務APP輔色的確定 69
3.3.3 電子商務APP文本色確定 69
3.4 電子商務APP界面頁面元素分析 70
3.4.1 界面中的圖標設置 70
3.4.2 界面中的圖片設置 70
3.4.3 界面中的文字設置 71
3.4.4 實戰案例——設計制作電子商務APP圖標組 71
3.5 電子商務APP界面設計 73
3.5.1 知識鏈接——了解像素與分辨率 73
3.5.2 技術引入——iOS系統界面設計尺寸 74
3.5.3 實戰案例——設計制作電子商務APP界面 75
3.6 電子商務APP交互設計 80
3.6.1 交互設計的重要性 80
3.6.2 交互設計的基本流程 81
3.6.3 實戰案例——設計制作電子商務APP交互效果 82
3.7 電子商務APP界面的標注 84
3.7.1 位置與尺寸標注 84
3.7.2 色彩與字號標注 85
3.7.3 實戰案例——使用PxCook完成“首頁”界面的標注 85
3.8 電子商務APP界面適配 89
3.8.1 iOS系統向下和向上適配 89
3.8.2 適配切片命名規範 91
3.8.3 實戰案例——使用Adobe XD完成“首頁”界面的適配輸出 92
3.9 舉一反三——設計制作電子商務APP界面 94
3.10 本章小結 94
3.11 課後測試 95
3.11.1 選擇題 95
3.11.2 判斷題 95
3.11.3 創新題 95
項目4 iOS系統美食APP界面設計
4.1 美食APP項目——“吃吃喝喝”界面設計 97
4.1.1 分析美食APP項目背景 97
4.1.2 繪制美食APP項目用戶畫像 98
4.2 美食APP草圖制作 98
4.2.1 美食APP界面尺寸 98
4.2.2 美食APP界面布局類型 99
4.2.3 實戰案例——設計制作美食APP“首頁”草圖 100
4.3 美食APP界面色彩搭配 104
4.3.1 美食APP界面主色的確定 104
4.3.2 美食APP輔色的確定 104
4.3.3 美食APP文本色確定 105
4.4 美食APP界面頁面元素分析 105
4.4.1 界面中的圖片設置 105
4.4.2 界面中的文字設置 106
4.4.3 界面中的圖標設置 106
4.4.4 實戰案例——設計制作美食APP圖標組 107
4.5 美食APP界面設計 109
4.5.1 知識鏈接——了解APP界面中的邊距 109
4.5.2 技術引入——設置APP內容間距 110
4.5.3 實戰案例——設計制作美食APP界面 111
4.6 美食APP交互設計 115
4.6.1 Adobe XD檢查APP界面交互 115
4.6.2 實戰案例——設計制作電子商務APP交互效果 116
4.7 美食APP界面標注 118
4.7.1 APP界面標注內容 118
4.7.2 列一份總表 118
4.7.3 實戰案例——使用PxCook標注美食APP界面 119
4.8 美食APP界面適配與切圖 122
4.8.1 iOS系統適配iPhone X 122
4.8.2 切圖操作中的兩個重要因素 123
4.8.3 實戰案例——完成“首頁”界面素材切片輸出 123
4.9 舉一反三——設計制作外賣APP界面 125
4.10 本章小結 126
4.11 課後測試 126
4.11.1 選擇題 126
4.11.2 判斷題 127
4.11.3 創新題 127
項目5 Android系統創意家居APP界面設計
5.1 創意家居APP項目——“ICON”界面設計 128
4.1.1 完成創意家居APP思維導圖 128
4.1.2 繪制創意家居APP項目用戶畫像 130
5.2 創意家居APP草圖制作 130
5.2.1 創意家居APP界面布局分析 130
5.2.2 創意家居APP界面布局類型 131
5.2.3 實戰案例——設計制作創意家居APP草圖 132
5.3 創意家居APP界面色彩搭配 138
5.3.1 創意家居APP界面主色的確定 138
5.3.2 創意家居APP輔色的確定 139
5.3.3 創意家居APP文本色確定 139
5.4 創意家居APP界面頁面元素分析 139
5.4.1 界面元素間距設置 139
5.4.2 界面中的文本設置 140
5.4.3 界面中的圖標設置 141
5.4.4 實戰案例——設計制作創意家居APP圖標組 142
5.5 創意家居APP界面設計 146
5.5.1 知識鏈接——了解屏幕密度和開發單位 146
5.5.2 技術引入——了解Android系統的開發單位 147
5.5.3 實戰案例——設計制作創意家居APP界面 147
5.6 創意家居APP交互設計 152
5.6.1 交互設計需要考慮的內容 153
5.6.2 交互設計需要遵循的習慣 153
5.6.3 實戰案例——設計制作創意教具APP交互效果 154
5.7 創意家居APP界面標注 158
5.7.1 Android系統界面的標注 158
5.7.2 實戰案例——使用PxCook標注創意家居APP界面 159
5.8 創意家居APP界面切圖與適配 163
5.8.1 Android系統中的“點9”切圖 163
5.8.2 如何做到一稿兩用 166
5.8.3 實戰案例——完成“首頁”界面素材切片輸出 167
5.9 舉一反三——設計制作創意家居APP其他頁面 169
5.10 本章小結 169
5.11 課後測試 169
5.11.1 選擇題 169
5.11.2 判斷題 170
5.11.3 創新題 170
1.1 熟悉移動UI設計 1
1.1.1 了解UI設計 1
1.1.2 了解移動UI設計 2
1.1.3 移動UI與平面UI 2
1.2 移動UI設計的平臺分類 4
1.2.1 Android系統 4
1.2.2 iOS系統 6
1.2.3 Wear OS系統和Watch OS系統 7
1.3 了解移動UI設計常用軟件 8
1.3.1 Axure RP和Adobe XD 8
1.3.2 Photoshop和Sketch 9
1.3.3 PxCook和Assistor PS 10
1.4 分析互聯網產品的需求 11
1.4.1 知識鏈接——互聯網產品設計流程 11
1.4.2 技術引入——了解互聯網產品職業劃分 11
1.4.3 實戰案例——分析互聯網產品需求 13
1.5 設計互聯網產品交互效果 15
1.5.1 知識鏈接——互聯網產品交互設計流程 15
1.5.2 技術引入——了解交互設計和交互設計師 16
1.5.3 實戰案例——分析互聯網產品交互設計 17
1.6 設計互聯網產品視覺效果 19
1.6.1 知識鏈接——互聯網產品配色趨勢 20
1.6.2 技術引入——頁面布局影響視覺效果 22
1.6.3 實戰案例——互聯網產品視覺設計流程 24
1.6 舉一反三——互聯網產品專屬色彩的變更 25
1.7 本章小結 27
1.8 課後測試 27
1.8.1 選擇題 27
1.8.2 判斷題 28
1.8.3 創新題 28
項目2 掌握移動UI圖標設計
2.1 圖標設計的必要性 29
2.2 了解圖標柵格系統 30
2.2.1 系統圖標柵格 31
2.2.2 不同造型圖標的柵格規範 31
2.3 圖標集的制作流程 33
2.31. 創建制作清單 33
2.3.2 設計草圖 33
2.3.3 數字呈現 34
2.3.4 確定最終效果 34
2.3.5 命名並導出 34
2.4 移動UI圖標設計形式 34
2.4.1 中文形式 34
2.4.2 英文形式 36
2.4.3 圖形形式 37
2.4.4 數字和特殊符號形式 37
2.5 設計制作工具圖標 38
2.5.1 知識鏈接——工具圖標的設計風格 38
2.5.2 技術引入——Android系統圖標分類和尺寸 39
2.5.3 實戰案例——設計制作產品工具圖標 41
2.6 設計制作裝飾圖標 45
2.6.1 知識鏈接——裝飾圖標設計風格 46
2.6.2 技術引入——iOS系統圖標尺寸 47
2.6.3 實戰案例——設計制作饒舌音樂風格裝飾圖標 48
2.7 設計制作啟動圖標 51
2.7.1 知識鏈接——啟動圖標設計形式 51
2.7.2 技術引入——啟動圖標設計要求與規範 52
2.7.3 實戰案例——設計制作收音機APP啟動圖標 54
2.8 舉一反三——設計制作iOS系統圖標 60
2.9 本章小結 60
2.10 課後測試 61
2.10.1 選擇題 61
2.10.2 判斷題 61
2.10.3 創新題 61
項目3 iOS系統電子商務APP界面設計
3.1 電子商務APP項目——“約起”界面設計 63
3.1.1 分析電子商務APP項目背景 63
3.1.2 繪制電子商務APP項目用戶畫像 64
3.2 電子商務APP草圖制作 64
3.2.1 電子商務類APP界面尺寸 64
3.2.2 電子商務類APP界面布局類型 65
3.2.3 實戰案例——設計制作電子商務APP“首頁”草圖 66
3.3 電子商務APP界面色彩搭配 69
3.3.1 電子商務APP界面主色的確定 69
3.3.2 電子商務APP輔色的確定 69
3.3.3 電子商務APP文本色確定 69
3.4 電子商務APP界面頁面元素分析 70
3.4.1 界面中的圖標設置 70
3.4.2 界面中的圖片設置 70
3.4.3 界面中的文字設置 71
3.4.4 實戰案例——設計制作電子商務APP圖標組 71
3.5 電子商務APP界面設計 73
3.5.1 知識鏈接——了解像素與分辨率 73
3.5.2 技術引入——iOS系統界面設計尺寸 74
3.5.3 實戰案例——設計制作電子商務APP界面 75
3.6 電子商務APP交互設計 80
3.6.1 交互設計的重要性 80
3.6.2 交互設計的基本流程 81
3.6.3 實戰案例——設計制作電子商務APP交互效果 82
3.7 電子商務APP界面的標注 84
3.7.1 位置與尺寸標注 84
3.7.2 色彩與字號標注 85
3.7.3 實戰案例——使用PxCook完成“首頁”界面的標注 85
3.8 電子商務APP界面適配 89
3.8.1 iOS系統向下和向上適配 89
3.8.2 適配切片命名規範 91
3.8.3 實戰案例——使用Adobe XD完成“首頁”界面的適配輸出 92
3.9 舉一反三——設計制作電子商務APP界面 94
3.10 本章小結 94
3.11 課後測試 95
3.11.1 選擇題 95
3.11.2 判斷題 95
3.11.3 創新題 95
項目4 iOS系統美食APP界面設計
4.1 美食APP項目——“吃吃喝喝”界面設計 97
4.1.1 分析美食APP項目背景 97
4.1.2 繪制美食APP項目用戶畫像 98
4.2 美食APP草圖制作 98
4.2.1 美食APP界面尺寸 98
4.2.2 美食APP界面布局類型 99
4.2.3 實戰案例——設計制作美食APP“首頁”草圖 100
4.3 美食APP界面色彩搭配 104
4.3.1 美食APP界面主色的確定 104
4.3.2 美食APP輔色的確定 104
4.3.3 美食APP文本色確定 105
4.4 美食APP界面頁面元素分析 105
4.4.1 界面中的圖片設置 105
4.4.2 界面中的文字設置 106
4.4.3 界面中的圖標設置 106
4.4.4 實戰案例——設計制作美食APP圖標組 107
4.5 美食APP界面設計 109
4.5.1 知識鏈接——了解APP界面中的邊距 109
4.5.2 技術引入——設置APP內容間距 110
4.5.3 實戰案例——設計制作美食APP界面 111
4.6 美食APP交互設計 115
4.6.1 Adobe XD檢查APP界面交互 115
4.6.2 實戰案例——設計制作電子商務APP交互效果 116
4.7 美食APP界面標注 118
4.7.1 APP界面標注內容 118
4.7.2 列一份總表 118
4.7.3 實戰案例——使用PxCook標注美食APP界面 119
4.8 美食APP界面適配與切圖 122
4.8.1 iOS系統適配iPhone X 122
4.8.2 切圖操作中的兩個重要因素 123
4.8.3 實戰案例——完成“首頁”界面素材切片輸出 123
4.9 舉一反三——設計制作外賣APP界面 125
4.10 本章小結 126
4.11 課後測試 126
4.11.1 選擇題 126
4.11.2 判斷題 127
4.11.3 創新題 127
項目5 Android系統創意家居APP界面設計
5.1 創意家居APP項目——“ICON”界面設計 128
4.1.1 完成創意家居APP思維導圖 128
4.1.2 繪制創意家居APP項目用戶畫像 130
5.2 創意家居APP草圖制作 130
5.2.1 創意家居APP界面布局分析 130
5.2.2 創意家居APP界面布局類型 131
5.2.3 實戰案例——設計制作創意家居APP草圖 132
5.3 創意家居APP界面色彩搭配 138
5.3.1 創意家居APP界面主色的確定 138
5.3.2 創意家居APP輔色的確定 139
5.3.3 創意家居APP文本色確定 139
5.4 創意家居APP界面頁面元素分析 139
5.4.1 界面元素間距設置 139
5.4.2 界面中的文本設置 140
5.4.3 界面中的圖標設置 141
5.4.4 實戰案例——設計制作創意家居APP圖標組 142
5.5 創意家居APP界面設計 146
5.5.1 知識鏈接——了解屏幕密度和開發單位 146
5.5.2 技術引入——了解Android系統的開發單位 147
5.5.3 實戰案例——設計制作創意家居APP界面 147
5.6 創意家居APP交互設計 152
5.6.1 交互設計需要考慮的內容 153
5.6.2 交互設計需要遵循的習慣 153
5.6.3 實戰案例——設計制作創意教具APP交互效果 154
5.7 創意家居APP界面標注 158
5.7.1 Android系統界面的標注 158
5.7.2 實戰案例——使用PxCook標注創意家居APP界面 159
5.8 創意家居APP界面切圖與適配 163
5.8.1 Android系統中的“點9”切圖 163
5.8.2 如何做到一稿兩用 166
5.8.3 實戰案例——完成“首頁”界面素材切片輸出 167
5.9 舉一反三——設計制作創意家居APP其他頁面 169
5.10 本章小結 169
5.11 課後測試 169
5.11.1 選擇題 169
5.11.2 判斷題 170
5.11.3 創新題 170
主題書展
更多
主題書展
更多書展今日66折
您曾經瀏覽過的商品
購物須知
大陸出版品因裝訂品質及貨運條件與台灣出版品落差甚大,除封面破損、內頁脫落等較嚴重的狀態,其餘商品將正常出貨。
特別提醒:部分書籍附贈之內容(如音頻mp3或影片dvd等)已無實體光碟提供,需以QR CODE 連結至當地網站註冊“並通過驗證程序”,方可下載使用。
無現貨庫存之簡體書,將向海外調貨:
海外有庫存之書籍,等候約45個工作天;
海外無庫存之書籍,平均作業時間約60個工作天,然不保證確定可調到貨,尚請見諒。
為了保護您的權益,「三民網路書店」提供會員七日商品鑑賞期(收到商品為起始日)。
若要辦理退貨,請在商品鑑賞期內寄回,且商品必須是全新狀態與完整包裝(商品、附件、發票、隨貨贈品等)否則恕不接受退貨。