Photoshop+Adobe XD+Illustrator移動UI設計教程

定　價：￥89.80

作　者：	張曉景
出版社：	電子工業(yè)出版社
叢編項：
標　簽：	暫缺

購買這本書可以去

ISBN：	9787121414312	出版時間：	2021-09-01	包裝：	平裝-膠訂
開本：	16開	頁數(shù)：	204	字數(shù)：

內(nèi)容簡介

　　如今，各種通信和網(wǎng)絡連接設備與大眾生活的聯(lián)系日益密切，而UI是用戶與設備交互的界面，這導致人們對各種類型的UI的要求越來越高，同時促進了UI設計行業(yè)的飛速發(fā)展，本書為了滿足廣大UI設計者的需求，介紹如何設計美觀又符合要求的UI。本書主要依據(jù)初學者學習UI設計的普遍規(guī)律安排內(nèi)容，由淺入深地講解初學者感興趣和需要掌握的基礎知識和操作技巧，全面解析各個知識點。全書結(jié)合實例詳細地講解了UI的制作步驟和軟件的應用技巧，使讀者能夠輕松學習并掌握。本書共8章，主要根據(jù)UI設計知識的難易程度，以及讀者在實際工作中的應用需求來安排章節(jié)，真正做到為讀者考慮，也讓不同程度的讀者可以更有針對性地學習內(nèi)容，彌補自己的弱項，并有效提高UI設計愛好者的操作速度與效率。本書結(jié)構(gòu)清晰、內(nèi)容有針對性、實例精美實用，適合大部分UI設計愛好者與設計專業(yè)的大、中專學生閱讀。隨書附贈的配套資源包中包含了本書所有實例的教學視頻、相關素材和源文件，用于補充細節(jié)內(nèi)容，方便讀者學習和參考。

作者簡介

　　張曉景資深設計師 Adobe 專家委員會成員 Adobe 網(wǎng)頁設計師認證講師Adobe 用戶界面設計師國家信息產(chǎn)業(yè)部653工程講師中國軟件行業(yè)協(xié)會專家委員參與國家開放大學網(wǎng)頁設計和網(wǎng)頁界面設計課程體系開發(fā)。從事平面設計、網(wǎng)站設計和UI設計多年，參與開發(fā)過數(shù)十個多媒體商業(yè)網(wǎng)站。曾參與設計了999集團設計宣傳冊，北京西單金澤大廈設計VI設計，以及國務院國資委電子資料室設計制作網(wǎng)站等眾多設計工作。有豐富的教學經(jīng)驗，曾參與制作教學微課、幕課上百小時。熟悉微課策劃、設計、拍攝、制作全過程。為中國石油、中國鐵路等大型企業(yè)做專業(yè)企業(yè)培訓，參與培訓北京骨干教師活動，曾在中國傳媒大學、北京大學、北京師范大學、北京交通大學等重點院校以及Adobe創(chuàng)意大學和新東方等培訓機構(gòu)教授設計課程。出版過相關設計類書籍數(shù)十種，參與清華大學中職教材的編寫、國家開放大學網(wǎng)頁設計課程規(guī)劃及教材策劃等工作。

圖書目錄

第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系統(tǒng) 5
1.2.2 iOS系統(tǒng) 6
1.2.3 Wear OS系統(tǒng)和Watch OS 系統(tǒng) 7
1.3 移動UI的設計內(nèi)容 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 了解互聯(lián)網(wǎng)產(chǎn)品職位劃分 26
1.6.1 產(chǎn)品經(jīng)理 27
1.6.2 項目經(jīng)理 27
1.6.3 頁面設計師 27
1.6.4 開發(fā)人員 27
1.7 本章小結(jié) 28
第2章　iOS系統(tǒng)界面設計
2.1 分辨率與界面設計尺寸 29
2.1.1 像素與分辨率 29
2.1.2 iOS系統(tǒng)界面設計尺寸 30
實戰(zhàn)練習01—使用Photoshop新建App文件 30
2.2 iOS系統(tǒng)的組件尺寸 32
2.2.1 組件尺寸 32
2.2.2 邊距和間距 32
實戰(zhàn)練習02—創(chuàng)建輔助線繪制iOS組件 35
2.3 iOS系統(tǒng)文字設計規(guī)范 36
2.3.1 字體 36
2.3.2 字號 37
2.3.3 顏色和字重 38
2.4 iOS系統(tǒng)圖標設計規(guī)范 39
2.5 iOS系統(tǒng)圖片設計規(guī)范 40
2.5.1 圖片的比例 40
2.5.2 圖片的格式 41
2.6 iOS系統(tǒng)內(nèi)容布局 42
2.6.1 列表式布局 42
2.6.2 陳列館式布局 42
2.6.3 宮格式布局 43
2.6.4 卡片式布局 43
2.7 iOS系統(tǒng)版式設計規(guī)范 44
實戰(zhàn)練習03—設計制作iOS 系統(tǒng)App版面 45
2.8 iOS系統(tǒng)設計適配 47
2.8.1 向下適配 47
2.8.2 向上適配 49
2.9 iOS切圖規(guī)范 50
2.9.1 切圖輸出 51
實戰(zhàn)練習04—使用Photoshop切圖輸出 52
2.9.2 切片命名規(guī)范 54
2.9.3 設計稿標注 55
2.10 提交終文件 58
2.11 本章小結(jié) 58
第3章　Android系統(tǒng)界面設計
3.1 了解Android系統(tǒng)“碎片化” 59
3.2 Android系統(tǒng)界面設計尺寸 60
3.2.1 了解屏幕密度的概念 60
3.2.2 Android系統(tǒng)開發(fā)單位 61
3.2.3 Android系統(tǒng)界面設計尺寸 61
實戰(zhàn)練習01—使用Adobe XD創(chuàng)建Android
文檔 62
3.3 Android系統(tǒng)組件設計尺寸 64
3.3.1 Android系統(tǒng)組件尺寸 64
3.3.2 Android系統(tǒng)的元素間距 64
實戰(zhàn)練習02—創(chuàng)建Android系統(tǒng)界面的組件 65
3.4 Android系統(tǒng)文字設計規(guī)范 66
3.4.1 字體 66
3.4.2 字號 67
3.5 Android系統(tǒng)中圖標設計規(guī)范 67
3.5.1 圖標尺寸 69
3.5.2 觸摸反饋 70
實戰(zhàn)練習03—繪制Android App界面結(jié)構(gòu) 70
3.6 Android界面標注與切圖 73
3.6.1 Android界面的標注 73
3.6.2 Android界面的切圖 74
3.6.3 “點9”切圖的應用 75
3.7 Android系統(tǒng)界面適配問題 79
3.7.1 采用哪種分辨率設計 79
3.7.2 設計師需要提供幾套切圖 79
3.7.3 界面設計中字體的應用技巧 79
3.8 如何做到一稿兩用 80
3.9 本章小結(jié) 80
第4章　移動UI圖標設計
4.1 圖標設計基礎 81
4.1.1 圖標設計的必要性 81
4.1.2 影響圖標的屬性 82
4.1.3 好圖標的特點 85
4.2 了解圖標柵格系統(tǒng) 85
4.2.1 系統(tǒng)圖標柵格 86
4.2.2 不同造型圖標的柵格規(guī)范 86
4.3 圖標的渲染風格 88
4.4 圖標的透視 91
4.4.1 關于透視 91
4.4.2 繪制零點透視圖標 91
實戰(zhàn)練習01—繪制零點透視圖標 92
4.4.3 繪制一點透視圖標 93
實戰(zhàn)練習02—繪制一點透視圖標 94
4.4.4 繪制兩點透視圖標 95
實戰(zhàn)練習03—繪制兩點透視圖標 96
4.5 圖標集的制作流程 97
4.5.1 創(chuàng)建制作清單 98
4.5.2 設計草圖 98
4.5.3 數(shù)字呈現(xiàn) 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 數(shù)字和特殊符號形式 102
4.7 啟動圖標設計 103
4.7.1 啟動圖標設計要求 103
4.7.2 啟動圖標設計規(guī)范 104
實戰(zhàn)練習04—設計制作iOS指南針啟動圖標 104
4.7.3 快速索引、設置頁面和通知圖標 107
4.8 標簽欄圖標設計 107
實戰(zhàn)練習05—設計制作標簽欄圖標 108
4.9 圖標設計的優(yōu)點與原則 111
4.10 本章小結(jié) 112
第5章　iOS系統(tǒng)界面應用設計
5.1 設計制作旅游App界面 113
5.1.1 旅游App界面布局分析 113
實戰(zhàn)練習01—設計制作旅游App界面布局 114
5.1.2 旅游App界面色彩搭配分析 115
5.1.3 旅游App界面元素分析 116
實戰(zhàn)練習02—設計制作旅游App界面 118
5.1.4 旅游App界面輸出分析 123
實戰(zhàn)練習03—旅游App界面適配 123
5.2 設計制作外賣App界面 125
5.2.1 外賣App界面布局分析 125
實戰(zhàn)練習04—設計制作外賣App界面布局 126
5.2.2 外賣App界面色彩搭配分析 127
5.2.3 外賣App界面元素分析 128
實戰(zhàn)練習05—設計制作外賣App登錄界面 129
實戰(zhàn)練習06—設計制作外賣App主頁界面 134
5.2.4 外賣App界面輸出分析 138
實戰(zhàn)練習07—外賣App界面適配 139
5.2.5 外賣App界面交互效果分析 140
實戰(zhàn)練習08—設計制作外賣App交互原型 141
5.3 設計制作播放器App界面 143
5.3.1 播放器App界面圖標組 143
實戰(zhàn)練習09—設計制作播放器App界面圖
標組 144
5.3.2 設計制作播放器App界面 146
實戰(zhàn)練習10—設計制作播放器App界面 147
5.3.3 輸出適配播放器App界面 152
實戰(zhàn)練習11—輸出播放器App界面 152
5.3.4 標注適配播放器App界面 154
5.4 本章小結(jié) 158
第6章　Android系統(tǒng)界面應用設計
6.1 設計制作商城App界面 159
6.1.1 商城App界面布局分析 159
實戰(zhàn)練習01—設計制作商城App界面布局 160
6.1.2 商城App界面色彩搭配分析 162
6.1.3 商城App界面元素分析 163
實戰(zhàn)練習02—設計制作商城App首頁界面 165
6.1.4 商城App界面輸出分析 173
實戰(zhàn)練習03—商城App界面適配 174
6.2 設計制作社交App界面 177
6.2.1 社交App界面設計同質(zhì)化分析 177
實戰(zhàn)練習04—設計制作社交App“推薦”
界面 178
6.2.2 社交App界面邊距的設置分析 183
實戰(zhàn)練習05—設計制作社交App“自己”
界面 183
6.2.3 社交App界面交互設計分析 187
實戰(zhàn)練習06—設計制作社交App“信息”
界面 188
6.2.4 社交App界面標注和輸出 192
實戰(zhàn)練習07—輸出和標注社交App界面 193
6.3 本章小結(jié) 196