《Photoshop+Adobe XD+Illustrator移動UI設計教程》是2021年電子工業出版社出版的圖書，作者是張曉景。
基本介紹
- 中文名：Photoshop+Adobe XD+Illustrator移動UI設計教程
- 作者：張曉景
- 出版社：電子工業出版社
- 出版時間：2021年
- 頁數：204 頁
- 定價：89.8 元
- 開本：16 開
- ISBN：9787121414312
內容簡介,作者簡介,目 錄,
內容簡介
如今，各種通信和網路連線設備與大眾生活的聯繫日益密切，而UI是用戶與設備互動的界面，這導致人們對各種類型的UI的要求越來越高，同時促進了UI設計行業的飛速發展，本書為了滿足廣大UI設計者的需求，介紹如何設計美觀又符合要求的UI。
本書主要依據初學者學習UI設計的普遍規律安排內容，由淺入深地講解初學者感興趣和需要掌握的基礎知識和操作技巧，全面解析各個知識點。全書結合實例詳細地講解了UI的製作步驟和軟體的套用技巧，使讀者能夠輕鬆學習並掌握。
本書共8章，主要根據UI設計知識的難易程度，以及讀者在實際工作中的套用需求來安排章節，真正做到為讀者考慮，也讓不同程度的讀者可以更有針對性地學習內容，彌補自己的弱項，並有效提高UI設計愛好者的操作速度與效率。
本書結構清晰、內容有針對性、實例精美實用，適合大部分UI設計愛好者與設計專業的大、中專學生閱讀。隨書附贈的配套資源包中包含了本書所有實例的教學視頻、相關素材和源檔案，用於補充細節內容，方便讀者學習和參考。
作者簡介
張曉景 資深設計師
Adobe 專家委員會成員
Adobe 網頁設計師認證講師
Adobe 用戶界面設計師
國家信息產業部653工程講師
中國軟體行業協會專家委員
參與國家開放大學網頁設計和網頁界面設計課程體系開發。從事平面設計、網站設計和UI設計多年，參與開發過數十個多媒體商業網站。曾參與設計了999集團設計宣傳冊，北京西單金澤大廈設計VI設計，以及國務院國資委電子資料室設計製作網站等眾多設計工作。
目 錄
第1章 移動UI設計基礎
1.1 UI設計與移動UI設計 1
1.1.1 了解UI設計 1
1.1.2 了解移動UI設計 2
1.1.3 移動UI與平面UI 3
1.2 移動UI設計的平台類型 4
1.2.1 Android系統 5
1.2.2 iOS系統 6
1.2.3 Wear OS系統和Watch OS 系統 7
1.3 移動UI的設計內容 8
1.3.1 配色方案的設計 8
1.3.2 頁面布局的設計 10
1.3.3 按鈕和圖示的設計 12
1.3.4 文字和版式的設計 15
1.4 了解移動UI設計常用的軟體 16
1.4.1 Axure RP 和Adobe XD 16
1.4.2 Photoshop和Sketch 17
1.4.3 PxCook和Assistor PS 18
1.5 了解UI設計的工作流程 19
1.5.1 需求分析 19
1.5.2 互動設計 22
1.5.3 視覺設計 25
1.6 了解網際網路產品職位劃分 26
1.6.1 產品經理 27
1.6.2 項目經理 27
1.6.3 頁面設計師 27
1.6.4 開發人員 27
1.7 本章小結 28
第2章 iOS系統界面設計
2.1 解析度與界面設計尺寸 29
2.1.1 像素與解析度 29
2.1.2 iOS系統界面設計尺寸 30
實戰練習01—使用Photoshop新建App檔案 30
2.2 iOS系統的組件尺寸 32
2.2.1 組件尺寸 32
2.2.2 邊距和間距 32
實戰練習02—創建輔助線繪製iOS組件 35
2.3 iOS系統文字設計規範 36
2.3.1 字型 36
2.3.2 字號 37
2.3.3 顏色和字重 38
2.4 iOS系統圖示設計規範 39
2.5 iOS系統圖片設計規範 40
2.5.1 圖片的比例 40
2.5.2 圖片的格式 41
2.6 iOS系統內容布局 42
2.6.1 列表式布局 42
2.6.2 陳列館式布局 42
2.6.3 宮格式布局 43
2.6.4 卡片式布局 43
2.7 iOS系統版式設計規範 44
實戰練習03—設計製作iOS 系統App版面 45
2.8 iOS系統設計適配 47
2.8.1 向下適配 47
2.8.2 向上適配 49
2.9 iOS切圖規範 50
2.9.1 切圖輸出 51
實戰練習04—使用Photoshop切圖輸出 52
2.9.2 切片命名規範 54
2.9.3 設計稿標註 55
2.10 提交終檔案 58
2.11 本章小結 58
第3章 Android系統界面設計
3.1 了解Android系統“碎片化” 59
3.2 Android系統界面設計尺寸 60
3.2.1 了解螢幕密度的概念 60
3.2.2 Android系統開發單位 61
3.2.3 Android系統界面設計尺寸 61
實戰練習01—使用Adobe XD創建Android
文檔 62
3.3 Android系統組件設計尺寸 64
3.3.1 Android系統組件尺寸 64
3.3.2 Android系統的元素間距 64
實戰練習02—創建Android系統界面的組件 65
3.4 Android系統文字設計規範 66
3.4.1 字型 66
3.4.2 字號 67
3.5 Android系統中圖示設計規範 67
3.5.1 圖示尺寸 69
3.5.2 觸摸反饋 70
實戰練習03—繪製Android App界面結構 70
3.6 Android界面標註與切圖 73
3.6.1 Android界面的標註 73
3.6.2 Android界面的切圖 74
3.6.3 “點9”切圖的套用 75
3.7 Android系統界面適配問題 79
3.7.1 採用哪種解析度設計 79
3.7.2 設計師需要提供幾套切圖 79
3.7.3 界面設計中字型的套用技巧 79
3.8 如何做到一稿兩用 80
3.9 本章小結 80
第4章 移動UI圖示設計
4.1 圖示設計基礎 81
4.1.1 圖示設計的必要性 81
4.1.2 影響圖示的屬性 82
4.1.3 好圖示的特點 85
4.2 了解圖示柵格系統 85
4.2.1 系統圖示柵格 86
4.2.2 不同造型圖示的柵格規範 86
4.3 圖示的渲染風格 88
4.4 圖示的透視 91
4.4.1 關於透視 91
4.4.2 繪製零點透視圖示 91
實戰練習01—繪製零點透視圖示 92
4.4.3 繪製一點透視圖示 93
實戰練習02—繪製一點透視圖示 94
4.4.4 繪製兩點透視圖示 95
實戰練習03—繪製兩點透視圖示 96
4.5 圖示集的製作流程 97
4.5.1 創建製作清單 98
4.5.2 設計草圖 98
4.5.3 數字呈現 98
4.5.4 確定終效果 99
4.5.5 命名並導出 99
4.6 移動UI圖示設計形式 99
4.6.1 中文形式 99
4.6.2 英文形式 101
4.6.3 圖形形式 102
4.6.4 數字和特殊符號形式 102
4.7 啟動圖示設計 103
4.7.1 啟動圖示設計要求 103
4.7.2 啟動圖示設計規範 104
實戰練習04—設計製作iOS指南針啟動圖示 104
4.7.3 快速索引、設定頁面和通知圖示 107
4.8 標籤欄圖示設計 107
實戰練習05—設計製作標籤欄圖示 108
4.9 圖示設計的優點與原則 111
4.10 本章小結 112
第5章 iOS系統界面套用設計
5.1 設計製作旅遊App界面 113
5.1.1 旅遊App界面布局分析 113
實戰練習01—設計製作旅遊App界面布局 114
5.1.2 旅遊App界面色彩搭配分析 115
5.1.3 旅遊App界面元素分析 116
實戰練習02—設計製作旅遊App界面 118
5.1.4 旅遊App界面輸出分析 123
實戰練習03—旅遊App界面適配 123
5.2 設計製作外賣App界面 125
5.2.1 外賣App界面布局分析 125
實戰練習04—設計製作外賣App界面布局 126
5.2.2 外賣App界面色彩搭配分析 127
5.2.3 外賣App界面元素分析 128
實戰練習05—設計製作外賣App登錄界面 129
實戰練習06—設計製作外賣App主頁界面 134
5.2.4 外賣App界面輸出分析 138
實戰練習07—外賣App界面適配 139
5.2.5 外賣App界面互動效果分析 140
實戰練習08—設計製作外賣App互動原型 141
5.3 設計製作播放器App界面 143
5.3.1 播放器App界面圖示組 143
實戰練習09—設計製作播放器App界面圖
標組 144
5.3.2 設計製作播放器App界面 146
實戰練習10—設計製作播放器App界面 147
5.3.3 輸出適配播放器App界面 152
實戰練習11—輸出播放器App界面 152
5.3.4 標註適配播放器App界面 154
5.4 本章小結 158
第6章 Android系統界面套用設計
6.1 設計製作商城App界面 159
6.1.1 商城App界面布局分析 159
實戰練習01—設計製作商城App界面布局 160
6.1.2 商城App界面色彩搭配分析 162
6.1.3 商城App界面元素分析 163
實戰練習02—設計製作商城App首頁界面 165
6.1.4 商城App界面輸出分析 173
實戰練習03—商城App界面適配 174
6.2 設計製作社交App界面 177
6.2.1 社交App界面設計同質化分析 177
實戰練習04—設計製作社交App“推薦”
界面 178
6.2.2 社交App界面邊距的設定分析 183
實戰練習05—設計製作社交App“自己”
界面 183
6.2.3 社交App界面互動設計分析 187
實戰練習06—設計製作社交App“信息”
界面 188
6.2.4 社交App界面標註和輸出 192
實戰練習07—輸出和標註社交App界面 193
6.3 本章小結 196
