UI設(shè)計其實很簡單：Photoshop界面設(shè)計高手之道
定 價：99 元
- 作者：創(chuàng)銳設(shè)計
- 出版時間：2019/9/1
- ISBN：9787121372452
- 出 版 社：電子工業(yè)出版社
- 中圖法分類：TP311.1；TP391.413
- 頁碼：264
- 紙張：
- 版次：01
- 開本：16開
隨著智能設(shè)備的飛速發(fā)展，移動設(shè)備 App 界面設(shè)計領(lǐng)域也得到了行業(yè)的關(guān)注和重視。人們在不斷追求 App 界面設(shè)計的個性化與酷炫效果的同時，企業(yè)更希望通過 App 界面設(shè)計為產(chǎn)品提供營銷服務(wù)。因此，也就有越來越多的人參與移動設(shè)備 App 的界面設(shè)計與開發(fā)。本書的作者有豐富的移動 UI 界面的設(shè)計經(jīng)驗，從基礎(chǔ)的設(shè)計知識入手，詳細(xì)講解了 App 的設(shè)計原則、界面中的元素及制作方法等。全書共包含 UI 設(shè)計你要知道的事兒、UI 設(shè)計你要會用Photoshop、不同系統(tǒng)及其組件的設(shè)計、移動 UI 界面中的常用元素設(shè)計、界面元素的組合應(yīng)用、購物App 界面設(shè)計、音樂 App 界面設(shè)計、資訊 App 界面設(shè)計和游戲 App 界面設(shè)計 9 章的內(nèi)容。讀者通過對本書的學(xué)習(xí)，既能掌握相關(guān)的設(shè)計理論知識，同時還能通過書中案例提高設(shè)計 App 界面的實戰(zhàn)技能。 全書結(jié)構(gòu)清晰、內(nèi)容由簡到難、案例精美、步驟詳細(xì)，使讀者學(xué)習(xí)起來更為輕松。為了方便讀者學(xué)習(xí)，本書還贈送了超值資料包，收錄了書中所有案例的素材和源文件，方便讀者隨時查閱。
創(chuàng)銳設(shè)計，由一支優(yōu)秀的平面設(shè)計師與圖形圖像資深編輯隊伍組成。出版過眾多優(yōu)秀的圖形圖像方面的專業(yè)書籍，不僅在國內(nèi)處于領(lǐng)先地位，還有大量作品輸出過海外版權(quán)，備受讀者青睞。在課程教材方面，由于他們擁有多年教育培訓(xùn)的經(jīng)驗，因此十分了解初學(xué)讀者的心理需求，從而研究出了一套行之有效的教學(xué)方法；此外，他們又參加過多個商業(yè)項目的設(shè)計工作，熟悉行業(yè)規(guī)范、了解客戶需求，擁有較高的設(shè)計水平，積累了豐富的制作經(jīng)驗、為專業(yè)進(jìn)階讀者指出了技術(shù)進(jìn)階的明路；在他們的圖書中，選擇的實例不僅融會貫通了軟件技法，更能通過分享圖像處理經(jīng)驗，激發(fā)讀者的靈感、迸發(fā)創(chuàng)意火花，達(dá)到事半功倍的效果。
第 1 章 UI 設(shè)計你要知道的事兒 / 1
1.1 認(rèn)識 UI 設(shè)計 / 2
1.2 UI 設(shè)計的原則 / 4
1.2.1 一致性原則 / 4
1.2.2 完整性原則 / 5
1.2.3 直觀性原則 / 6
1.2.4 習(xí)慣性原則 / 7
1.3 確定 UI 視覺風(fēng)格的構(gòu)成要素 / 7
1.3.1 色彩 / 7
1.3.2 文字 / 10
1.3.3 圖標(biāo) / 13
1.3.4 圖片 / 15
1.4 UI 視覺設(shè)計中的常用布局 / 17
1.4.1 列表式布局 / 17
1.4.2 陳列館式布局 / 18
1.4.3 九宮格布局 / 18
1.4.4 選項卡式布局 / 18
1.4.5 旋轉(zhuǎn)木馬式布局 / 19
1.4.6 行為擴(kuò)展式布局 / 19
1.4.7 多面板式布局 / 20
1.4.8 圖表式布局 / 20
1.5 UI 設(shè)計的流程 / 20
1.5.1 產(chǎn)品定位及市場分析階段 / 21
1.5.2 交互設(shè)計階段 / 21
1.5.3 界面視覺設(shè)計階段 / 23
1.5.4 界面輸出階段 / 24
1.5.5 可用性測試階段 / 26
第 2 章 UI 設(shè)計你要會用 Photoshop / 27
2.1 初識 Photoshop / 28
2.1.1 掌握 Photoshop 的界面構(gòu)成 / 28
2.1.2 新建圖像文件 / 28
2.1.3 打開和最近打開文件 / 29
2.1.4 在 Photoshop 中置入文件 / 31
2.1.5 保存與關(guān)閉文件 / 32
2.2 圖層的運用 / 33
2.2.1 “圖層”面板 / 33
2.2.2 創(chuàng)建圖層與圖層組 / 34
2.2.3 復(fù)制和刪除圖層 / 35
2.2.4 圖層樣式的應(yīng)用 / 36
2.2.5 設(shè)置圖層的整體和填充不透明度 / 39
2.3 選區(qū)的設(shè)置 / 40
2.3.1 規(guī)則選區(qū)的創(chuàng)建 / 40
2.3.2 不規(guī)則選區(qū)的創(chuàng)建 / 41
2.3.3 調(diào)整與編輯選區(qū) / 42
2.4 圖形的繪制 / 44
2.4.1 基礎(chǔ)圖形的繪制 / 44
2.4.2 自定義形狀的繪制 / 46
2.4.3 繪制任意所需的圖形 / 47
2.5 蒙版的編輯 / 49
2.5.1 圖層蒙版 / 49
2.5.2 剪貼蒙版 / 51
2.5.3 矢量蒙版 / 52
2.6 文字編排設(shè)計 / 53
2.6.1 文字的添加與設(shè)置 / 53
2.6.2 變形文字的制作 / 55
第 3 章 不同系統(tǒng)及其組件的設(shè)計 / 57
3.1 iOS 系統(tǒng)及其組件的設(shè)計 / 58
3.1.1 iOS 系統(tǒng)的特點 / 58
3.1.2 iOS 系統(tǒng)的適配規(guī)則 / 61
3.1.3 iOS 系統(tǒng)設(shè)計的規(guī)范 / 64
3.1.4 iOS 系統(tǒng)界面設(shè)計實戰(zhàn) / 71
3.2 Android 系統(tǒng)及其組件的設(shè)計 / 73
3.2.1 Android 系統(tǒng)的特點 / 73
3.2.2 Android 系統(tǒng)的適配規(guī)則 / 76
3.2.3 Android 系統(tǒng)設(shè)計的規(guī)范 / 82
3.2.4 Android 系統(tǒng)界面設(shè)計實戰(zhàn) / 85
第 4 章 移動 UI 界面中的常用元素設(shè)計 / 87
4.1 圖標(biāo) / 88
4.1.1 擬物化的圖標(biāo)設(shè)計 / 88
4.1.2 扁平化的圖標(biāo)設(shè)計 / 95
4.2 按鈕 / 99
4.2.1 突顯狀態(tài)的按鈕設(shè)計 / 99
4.2.2 皮革質(zhì)感的按鈕設(shè)計 / 102
4.3 開關(guān) / 106
4.3.1 擬物效果的開關(guān)設(shè)計 / 106
4.3.2 層次分明的開關(guān)設(shè)計 / 109
4.3.3 單選和復(fù)選開關(guān)設(shè)計 / 112
4.4 進(jìn)度條 / 114
4.4.1 發(fā)光效果的線形進(jìn)度條設(shè)計 / 114
4.4.2 清新風(fēng)格的圓形進(jìn)度條設(shè)計 / 118
4.5 搜索欄 / 121
4.5.1 扁平化的搜索欄設(shè)計 / 121
4.5.2 布紋材質(zhì)的搜索欄設(shè)計 / 123
4.6 列表框 / 126
4.6.1 整潔風(fēng)格的列表框設(shè)計 / 126
4.6.2 暗色冷酷風(fēng)格的列表框設(shè)計 / 128
4.7 標(biāo)簽欄 / 131
4.7.1 線形風(fēng)格的標(biāo)簽欄設(shè)計 / 131
4.7.2 組合式標(biāo)簽欄的設(shè)計 / 133
4.8 圖標(biāo)欄 / 136
4.8.1 簡單時尚的圖標(biāo)欄設(shè)計 / 136
4.8.2 立體化的圖標(biāo)欄設(shè)計 / 139
第 5 章 界面元素的組合應(yīng)用 / 142
5.1 引導(dǎo)頁設(shè)計 / 143
5.1.1 營造趣味感的引導(dǎo)頁設(shè)計 / 143
5.1.2 半透明質(zhì)感的引導(dǎo)頁設(shè)計 / 147
5.1.3 線形風(fēng)格的引導(dǎo)頁設(shè)計 / 150
5.2 登錄頁設(shè)計 / 152
5.2.1 扁平化的登錄頁設(shè)計 / 152
5.2.2 黑白主題的登錄頁設(shè)計 / 155
5.2.3 時尚紫色風(fēng)格的登錄頁設(shè)計 / 158
5.3 首頁設(shè)計 / 161
5.3.1 甜美風(fēng)格的首頁設(shè)計 / 161
5.3.2 時尚酷炫的首頁設(shè)計 / 165
5.3.3 干凈清爽的首頁設(shè)計 / 169
5.4 列表頁設(shè)計 / 172
5.4.1 工整的產(chǎn)品列表頁設(shè)計 / 172
5.4.2 時間軸列表頁設(shè)計 / 176
5.5 詳情頁設(shè)計 / 180
5.5.1 突出活動內(nèi)容的詳情頁設(shè)計 / 180
5.5.2 白色清新風(fēng)格的詳情頁設(shè)計 / 185
5.6 個人中心頁面設(shè)計 / 190
5.6.1 簡約風(fēng)格的個人中心頁面設(shè)計 / 190
5.6.2 藍(lán)色清爽風(fēng)格的個人中心頁面設(shè)計 / 193
第 6 章 購物 App 界面設(shè)計 / 197
6.1 界面布局規(guī)劃 / 198
6.2 創(chuàng)意思路剖析 / 198
6.3 確定配色方案 / 199
6.4 定義組件風(fēng)格 / 199
6.5 制作步驟詳解 / 199
6.5.1 啟動界面 / 200
6.5.2 登錄界面 / 202
6.5.3 首頁界面 / 205
6.5.4 分類界面 / 207
6.5.5 商品詳情界面 / 209
6.5.6 購買界面 / 212
6.5.7 商品結(jié)算界面 / 213
6.5.8 個人中心界面 / 215
第 7 章 音樂 App 界面設(shè)計 / 217
7.1 界面布局規(guī)劃 / 218
7.2 創(chuàng)意思路剖析 / 218
7.3 確定配色方案 / 219
7.4 定義組件風(fēng)格 / 219
7.5 制作步驟詳解 / 220
7.5.1 首頁界面 / 220
7.5.2 發(fā)現(xiàn)界面 / 224
7.5.3 電臺界面 / 225
7.5.4 歌曲播放界面 / 228
7.5.5 音效調(diào)節(jié)界面 / 230
7.5.6 個人中心界面 / 232
第 8 章 資訊 App 界面設(shè)計 / 236
8.1 界面布局規(guī)劃 / 237
8.2 創(chuàng)意思路剖析 / 237
8.3 確定配色方案 / 238
8.4 定義組件風(fēng)格 / 238
8.5 制作步驟詳解 / 239
8.5.1 登錄界面 / 239
8.5.2 個人界面 / 240
8.5.3 新聞首頁界面 / 241
8.5.4 下載分區(qū)界面 / 242
8.5.5 新聞內(nèi)容界面 / 244
8.5.6 評論界面 / 244
第 9 章 游戲 App 界面設(shè)計 / 246
9.1 界面布局規(guī)劃 / 247
9.2 創(chuàng)意思路剖析 / 247
9.3 確定配色方案 / 248
9.4 定義組件風(fēng)格 / 248
9.5 制作步驟詳解 / 249
9.5.1 歡迎界面 / 249
9.5.2 加載界面 / 250
9.5.3 積分界面 / 252
9.5.4 游戲界面 / 254
9.5.5 預(yù)覽界面 / 255
9.5.6 結(jié)束界面 / 255
書單推薦
