Photoshop+Adobe XD+Illustrator移動UI設(shè)計(jì)教程
定 價：89.8 元
叢書名：UI設(shè)計(jì)從業(yè)必讀
- 作者：張曉景
- 出版時間：2021/8/1
- ISBN：9787121414312
- 出 版 社：電子工業(yè)出版社
- 中圖法分類：TP393.092.2
- 頁碼：204
- 紙張：
- 版次：01
- 開本：16開
本書主要講解了iOS系統(tǒng)和Android系統(tǒng)兩種移動設(shè)備系統(tǒng)界面的結(jié)構(gòu)及設(shè)計(jì)規(guī)范，全面解析了移動端App界面的設(shè)計(jì)流程及技巧。本書還介紹了如何使用Adobe XD、Photoshop、PxCook和Cutterman等主流軟件進(jìn)行UI設(shè)計(jì)制作。本書共6章。第1章主要講解移動UI設(shè)計(jì)基礎(chǔ)；第2章主要講解iOS系統(tǒng)界面設(shè)計(jì)；第3章主要講解Android系統(tǒng)界面設(shè)計(jì)；第4章主要講解移動UI圖標(biāo)設(shè)計(jì)；第5章主要講解iOS系統(tǒng)界面應(yīng)用設(shè)計(jì)；第6章主要講解Android系統(tǒng)界面應(yīng)用設(shè)計(jì)。本書將提供全部案例的素材、源文件和教學(xué)視頻，讀者可以結(jié)合書、練習(xí)文件和教學(xué)視頻，提升移動端App界面設(shè)計(jì)的學(xué)習(xí)效率。
張曉景 男 43歲 資深設(shè)計(jì)師 Adobe 專家委員會成員 Adobe 網(wǎng)頁設(shè)計(jì)師認(rèn)證講師Adobe 用戶界面設(shè)計(jì)師國家信息產(chǎn)業(yè)部653工程講師中國軟件行業(yè)協(xié)會專家委員 參與國家開放大學(xué)網(wǎng)頁設(shè)計(jì)和網(wǎng)頁界面設(shè)計(jì)課程體系開發(fā)。從事平面設(shè)計(jì)、網(wǎng)站設(shè)計(jì)和UI設(shè)計(jì)多年，參與開發(fā)過數(shù)十個多媒體商業(yè)網(wǎng)站。曾參與設(shè)計(jì)了999集團(tuán)設(shè)計(jì)宣傳冊，北京西單金澤大廈設(shè)計(jì)VI設(shè)計(jì)，以及國務(wù)院國資委電子資料室設(shè)計(jì)制作網(wǎng)站等眾多設(shè)計(jì)工作。有豐富的教學(xué)經(jīng)驗(yàn)，曾參與制作教學(xué)微課、幕課上百小時。熟悉微課策劃、設(shè)計(jì)、拍攝、制作全過程。為中國石油、中國鐵路等大型企業(yè)做專業(yè)企業(yè)培訓(xùn)，參與培訓(xùn)北京骨干教師活動，曾在中國傳媒大學(xué)、北京大學(xué)、北京師范大學(xué)、北京交通大學(xué)等重點(diǎn)院校以及Adobe創(chuàng)意大學(xué)和新東方等培訓(xùn)機(jī)構(gòu)教授設(shè)計(jì)課程。出版過相關(guān)設(shè)計(jì)類書籍?dāng)?shù)十種，參與清華大學(xué)中職教材的編寫、國家開放大學(xué)網(wǎng)頁設(shè)計(jì)課程規(guī)劃及教材策劃等工作。
第1章 移動UI設(shè)計(jì)基礎(chǔ)
1.1 UI設(shè)計(jì)與移動UI設(shè)計(jì) 1
1.1.1 了解UI設(shè)計(jì) 1
1.1.2 了解移動UI設(shè)計(jì) 2
1.1.3 移動UI與平面UI 3
1.2 移動UI設(shè)計(jì)的平臺類型 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的設(shè)計(jì)內(nèi)容 8
1.3.1 配色方案的設(shè)計(jì) 8
1.3.2 頁面布局的設(shè)計(jì) 10
1.3.3 按鈕和圖標(biāo)的設(shè)計(jì) 12
1.3.4 文字和版式的設(shè)計(jì) 15
1.4 了解移動UI設(shè)計(jì)常用的軟件 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設(shè)計(jì)的工作流程 19
1.5.1 需求分析 19
1.5.2 交互設(shè)計(jì) 22
1.5.3 視覺設(shè)計(jì) 25
1.6 了解互聯(lián)網(wǎng)產(chǎn)品職位劃分 26
1.6.1 產(chǎn)品經(jīng)理 27
1.6.2 項(xiàng)目經(jīng)理 27
1.6.3 頁面設(shè)計(jì)師 27
1.6.4 開發(fā)人員 27
1.7 本章小結(jié) 28
第2章 iOS系統(tǒng)界面設(shè)計(jì)
2.1 分辨率與界面設(shè)計(jì)尺寸 29
2.1.1 像素與分辨率 29
2.1.2 iOS系統(tǒng)界面設(shè)計(jì)尺寸 30
實(shí)戰(zhàn)練習(xí)01—使用Photoshop新建App文件 30
2.2 iOS系統(tǒng)的組件尺寸 32
2.2.1 組件尺寸 32
2.2.2 邊距和間距 32
實(shí)戰(zhàn)練習(xí)02—創(chuàng)建輔助線繪制iOS組件 35
2.3 iOS系統(tǒng)文字設(shè)計(jì)規(guī)范 36
2.3.1 字體 36
2.3.2 字號 37
2.3.3 顏色和字重 38
2.4 iOS系統(tǒng)圖標(biāo)設(shè)計(jì)規(guī)范 39
2.5 iOS系統(tǒng)圖片設(shè)計(jì)規(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)版式設(shè)計(jì)規(guī)范 44
實(shí)戰(zhàn)練習(xí)03—設(shè)計(jì)制作iOS 系統(tǒng)App版面 45
2.8 iOS系統(tǒng)設(shè)計(jì)適配 47
2.8.1 向下適配 47
2.8.2 向上適配 49
2.9 iOS切圖規(guī)范 50
2.9.1 切圖輸出 51
實(shí)戰(zhàn)練習(xí)04—使用Photoshop切圖輸出 52
2.9.2 切片命名規(guī)范 54
2.9.3 設(shè)計(jì)稿標(biāo)注 55
2.10 提交最終文件 58
2.11 本章小結(jié) 58
第3章 Android系統(tǒng)界面設(shè)計(jì)
3.1 了解Android系統(tǒng)“碎片化” 59
3.2 Android系統(tǒng)界面設(shè)計(jì)尺寸 60
3.2.1 了解屏幕密度的概念 60
3.2.2 Android系統(tǒng)開發(fā)單位 61
3.2.3 Android系統(tǒng)界面設(shè)計(jì)尺寸 61
實(shí)戰(zhàn)練習(xí)01—使用Adobe XD創(chuàng)建Android
文檔 62
3.3 Android系統(tǒng)組件設(shè)計(jì)尺寸 64
3.3.1 Android系統(tǒng)組件尺寸 64
3.3.2 Android系統(tǒng)的元素間距 64
實(shí)戰(zhàn)練習(xí)02—創(chuàng)建Android系統(tǒng)界面的組件 65
3.4 Android系統(tǒng)文字設(shè)計(jì)規(guī)范 66
3.4.1 字體 66
3.4.2 字號 67
3.5 Android系統(tǒng)中圖標(biāo)設(shè)計(jì)規(guī)范 67
3.5.1 圖標(biāo)尺寸 69
3.5.2 觸摸反饋 70
實(shí)戰(zhàn)練習(xí)03—繪制Android App界面結(jié)構(gòu) 70
3.6 Android界面標(biāo)注與切圖 73
3.6.1 Android界面的標(biāo)注 73
3.6.2 Android界面的切圖 74
3.6.3 “點(diǎn)9”切圖的應(yīng)用 75
3.7 Android系統(tǒng)界面適配問題 79
3.7.1 采用哪種分辨率設(shè)計(jì) 79
3.7.2 設(shè)計(jì)師需要提供幾套切圖 79
3.7.3 界面設(shè)計(jì)中字體的應(yīng)用技巧 79
3.8 如何做到一稿兩用 80
3.9 本章小結(jié) 80
第4章 移動UI圖標(biāo)設(shè)計(jì)
4.1 圖標(biāo)設(shè)計(jì)基礎(chǔ) 81
4.1.1 圖標(biāo)設(shè)計(jì)的必要性 81
4.1.2 影響圖標(biāo)的屬性 82
4.1.3 好圖標(biāo)的特點(diǎn) 85
4.2 了解圖標(biāo)柵格系統(tǒng) 85
4.2.1 系統(tǒng)圖標(biāo)柵格 86
4.2.2 不同造型圖標(biāo)的柵格規(guī)范 86
4.3 圖標(biāo)的渲染風(fēng)格 88
4.4 圖標(biāo)的透視 91
4.4.1 關(guān)于透視 91
4.4.2 繪制零點(diǎn)透視圖標(biāo) 91
實(shí)戰(zhàn)練習(xí)01—繪制零點(diǎn)透視圖標(biāo) 92
4.4.3 繪制一點(diǎn)透視圖標(biāo) 93
實(shí)戰(zhàn)練習(xí)02—繪制一點(diǎn)透視圖標(biāo) 94
4.4.4 繪制兩點(diǎn)透視圖標(biāo) 95
實(shí)戰(zhàn)練習(xí)03—繪制兩點(diǎn)透視圖標(biāo) 96
4.5 圖標(biāo)集的制作流程 97
4.5.1 創(chuàng)建制作清單 98
4.5.2 設(shè)計(jì)草圖 98
4.5.3 數(shù)字呈現(xiàn) 98
4.5.4 確定最終效果 99
4.5.5 命名并導(dǎo)出 99
4.6 移動UI圖標(biāo)設(shè)計(jì)形式 99
4.6.1 中文形式 99
4.6.2 英文形式 101
4.6.3 圖形形式 102
4.6.4 數(shù)字和特殊符號形式 102
4.7 啟動圖標(biāo)設(shè)計(jì) 103
4.7.1 啟動圖標(biāo)設(shè)計(jì)要求 103
4.7.2 啟動圖標(biāo)設(shè)計(jì)規(guī)范 104
實(shí)戰(zhàn)練習(xí)04—設(shè)計(jì)制作iOS指南針啟動圖標(biāo) 104
4.7.3 快速索引、設(shè)置頁面和通知圖標(biāo) 107
4.8 標(biāo)簽欄圖標(biāo)設(shè)計(jì) 107
實(shí)戰(zhàn)練習(xí)05—設(shè)計(jì)制作標(biāo)簽欄圖標(biāo) 108
4.9 圖標(biāo)設(shè)計(jì)的優(yōu)點(diǎn)與原則 111
4.10 本章小結(jié) 112
第5章 iOS系統(tǒng)界面應(yīng)用設(shè)計(jì)
5.1 設(shè)計(jì)制作旅游App界面 113
5.1.1 旅游App界面布局分析 113
實(shí)戰(zhàn)練習(xí)01—設(shè)計(jì)制作旅游App界面布局 114
5.1.2 旅游App界面色彩搭配分析 115
5.1.3 旅游App界面元素分析 116
實(shí)戰(zhàn)練習(xí)02—設(shè)計(jì)制作旅游App界面 118
5.1.4 旅游App界面輸出分析 123
實(shí)戰(zhàn)練習(xí)03—旅游App界面適配 123
5.2 設(shè)計(jì)制作外賣App界面 125
5.2.1 外賣App界面布局分析 125
實(shí)戰(zhàn)練習(xí)04—設(shè)計(jì)制作外賣App界面布局 126
5.2.2 外賣App界面色彩搭配分析 127
5.2.3 外賣App界面元素分析 128
實(shí)戰(zhàn)練習(xí)05—設(shè)計(jì)制作外賣App登錄界面 129
實(shí)戰(zhàn)練習(xí)06—設(shè)計(jì)制作外賣App主頁界面 134
5.2.4 外賣App界面輸出分析 138
實(shí)戰(zhàn)練習(xí)07—外賣App界面適配 139
5.2.5 外賣App界面交互效果分析 140
實(shí)戰(zhàn)練習(xí)08—設(shè)計(jì)制作外賣App交互原型 141
5.3 設(shè)計(jì)制作播放器App界面 143
5.3.1 播放器App界面圖標(biāo)組 143
實(shí)戰(zhàn)練習(xí)09—設(shè)計(jì)制作播放器App界面圖
標(biāo)組 144
5.3.2 設(shè)計(jì)制作播放器App界面 146
實(shí)戰(zhàn)練習(xí)10—設(shè)計(jì)制作播放器App界面 147
5.3.3 輸出適配播放器App界面 152
實(shí)戰(zhàn)練習(xí)11—輸出播放器App界面 152
5.3.4 標(biāo)注適配播放器App界面 154
5.4 本章小結(jié) 158
第6章 Android系統(tǒng)界面應(yīng)用設(shè)計(jì)
6.1 設(shè)計(jì)制作商城App界面 159
6.1.1 商城App界面布局分析 159
實(shí)戰(zhàn)練習(xí)01—設(shè)計(jì)制作商城App界面布局 160
6.1.2 商城App界面色彩搭配分析 162
6.1.3 商城App界面元素分析 163
實(shí)戰(zhàn)練習(xí)02—設(shè)計(jì)制作商城App首頁界面 165
6.1.4 商城App界面輸出分析 173
實(shí)戰(zhàn)練習(xí)03—商城App界面適配 174
6.2 設(shè)計(jì)制作社交App界面 177
6.2.1 社交App界面設(shè)計(jì)同質(zhì)化分析 177
實(shí)戰(zhàn)練習(xí)04—設(shè)計(jì)制作社交App“推薦”
界面 178
6.2.2 社交App界面邊距的設(shè)置分析 183
實(shí)戰(zhàn)練習(xí)05—設(shè)計(jì)制作社交App“自己”
界面 183
6.2.3 社交App界面交互設(shè)計(jì)分析 187
實(shí)戰(zhàn)練習(xí)06—設(shè)計(jì)制作社交App“信息”
界面 188
6.2.4 社交App界面標(biāo)注和輸出 192
實(shí)戰(zhàn)練習(xí)07—輸出和標(biāo)注社交App界面 193
6.3 本章小結(jié) 196
書單推薦
