隨著移動智能設備的普及，Android繫統、iOS繫統的移動智能設備正在飛速改變人們的生活方式。伴隨著移動智能設備屏幕變得更大，功能變得更多，對於移動UI界面設計的要求也越來越高。本書是使用Photoshop軟件進行移動UI界面設計的案例教程，在編寫過程中作者采取從簡單到復雜、從基礎到專業、從理論到實戰的方式，一步步教會讀者移動UI界面設計的知識，使其掌握真正的設計精髓。

全書結構清晰、內容由簡到難、案例精美、步驟詳細，使讀者學習起來更為輕松。為了方便讀者學 習，本書還贈送了超值資料包，收錄了書中所有案例的素材和源文件，方便讀者隨時查閱。

隨著智能設備的飛速發展，移動設備App界面設計領域也得到了行業的關注和重視。人們在不 斷追求App界面設計的個性化與酷炫效果的同時，企業更希望通過App界面設計為產品提供營銷服務。因此，也就有越來越多的人參與移動設備App的界面設計與開發。

本書的作者有豐富的移動 UI 界面的設計經驗，從基礎的設計知識入手，詳細講解了 App的設計原則、界素及制作方法等。全書共包含UI設計你要知道的事兒、UI設計你要會用 Photoshop、不同繫統及其組件的設計、移動 UI 界面中素設計素的組合應用、購物App界面設計、音樂App界面設計、資訊App界面設計和遊戲App界面設計 9 章的內容。讀者通過 對本書的學習，既能掌握相關的設計理論知識，同時還能通過書中案例提高設計App界面的實戰技能。

創銳設計，由一支優秀的平面設計師與圖形圖像資深編輯隊伍組成。出版過眾多優秀的圖形圖像方面的專業書籍，不僅在國內處於領先地位，還有大量作品輸出過海外版權，備受讀者青睞。在課程教材方面，由於他們擁有多年教育培訓的經驗，因此十分了解初學讀者的心理需求，從而研究出了一套行之有效的教學方法；此外，他們又參加過多個商業項目的設計工作，熟悉行業規範、了解客戶需求，擁有較高的設計水平，積累了豐富的制作經驗、為專業進階讀者指出了技術進階的明路；在他們的圖書中，選擇的實例不僅融會貫通了軟件技法，更能通過分享圖像處理經驗，激發讀者的靈感、迸發創意火花，達到事半功倍的效果。

第 1 章 UI 設計你要知道的事兒 / 1
1．1 認識 UI 設計 / 2
1．2 UI 設計的原則 / 4
1．2．1 一致性原則 / 4
1．2．2 完整性原則 / 5
1．2．3 直觀性原則 / 6
1．2．4 習慣性原則 / 7
1．3 確定 UI 視覺風格的構成要素 / 7
1．3．1 色彩 / 7
1．3．2 文字 / 10
1．3．3 圖標 / 13
1．3．4 圖片 / 15
1．4 UI 視覺設計中的常用布局 / 17
1．4．1 列表式布局 / 17
1．4．2 陳列館式布局 / 18
1．4．3 九宮格布局 / 18
1．4．4 選項卡式布局 / 18
1．4．5 旋轉木馬式布局 / 19
1．4．6 行為擴展式布局 / 19
1．4．7 多面板式布局 / 20
1．4．8 圖表式布局 / 20
1．5 UI 設計的流程 / 20
1．5．1 產品定位及市場分析階段 / 21
1．5．2 交互設計階段 / 21
1．5．3 界面視覺設計階段 / 23
1．5．4 界面輸出階段 / 24
1．5．5 可用性測試階段 / 26

第 2 章 UI 設計你要會用 Photoshop / 27
2．1 初識 Photoshop / 28
2．1．1 掌握 Photoshop 的界面構成 / 28
2．1．2 新建圖像文件 / 28
2．1．3 打開和最近打開文件 / 29
2．1．4 在 Photoshop 中置入文件 / 31
2．1．5 保存與關閉文件 / 32
2．2 圖層的運用 / 33
2．2．1 “圖層”面板 / 33
2．2．2 創建圖層與圖層組 / 34
2．2．3 復制和刪除圖層 / 35
2．2．4 圖層樣式的應用 / 36
2．2．5 設置圖層的整體和填充不透明度 / 39
2．3 選區的設置 / 40
2．3．1 規則選區的創建 / 40
2．3．2 不規則選區的創建 / 41
2．3．3 調整與編輯選區 / 42
2．4 圖形的繪制 / 44
2．4．1 基礎圖形的繪制 / 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 文字編排設計 / 53
2．6．1 文字的添加與設置 / 53
2．6．2 變形文字的制作 / 55

第 3 章 不同繫統及其組件的設計 / 57
3．1 iOS 繫統及其組件的設計 / 58
3．1．1 iOS 繫統的特點 / 58
3．1．2 iOS 繫統的適配規則 / 61
3．1．3 iOS 繫統設計的規範 / 64
3．1．4 iOS 繫統界面設計實戰 / 71
3．2 Android 繫統及其組件的設計 / 73
3．2．1 Android 繫統的特點 / 73
3．2．2 Android 繫統的適配規則 / 76
3．2．3 Android 繫統設計的規範 / 82
3．2．4 Android 繫統界面設計實戰 / 85

第 4 章 移動 UI 界面中素設計 / 87
4．1 圖標 / 88
4．1．1 擬物化的圖標設計 / 88
4．1．2 扁平化的圖標設計 / 95
4．2 按鈕 / 99
4．2．1 突顯狀態的按鈕設計 / 99
4．2．2 皮革質感的按鈕設計 / 102
4．3 開關 / 106
4．3．1 擬物效果的開關設計 / 106
4．3．2 層次分明的開關設計 / 109
4．3．3 單選和復選開關設計 / 112
4．4 進度條 / 114
4．4．1 發光效果的線形進度條設計 / 114
4．4．2 清新風格的圓形進度條設計 / 118
4．5 搜索欄 / 121
4．5．1 扁平化的搜索欄設計 / 121
4．5．2 布紋材質的搜索欄設計 / 123
4．6 列表框 / 126
4．6．1 整潔風格的列表框設計 / 126
4．6．2 暗色冷酷風格的列表框設計 / 128
4．7 標簽欄 / 131
4．7．1 線形風格的標簽欄設計 / 131
4．7．2 組合式標簽欄的設計 / 133
4．8 圖標欄 / 136
4．8．1 簡單時尚的圖標欄設計 / 136
4．8．2 立體化的圖標欄設計 / 139

第 5 章素的組合應用 / 142
5．1 引導頁設計 / 143
5．1．1 營造趣味感的引導頁設計 / 143
5．1．2 半透明質感的引導頁設計 / 147
5．1．3 線形風格的引導頁設計 / 150
5．2 登錄頁設計 / 152
5．2．1 扁平化的登錄頁設計 / 152
5．2．2 黑白主題的登錄頁設計 / 155
5．2．3 時尚紫色風格的登錄頁設計 / 158
5．3 首頁設計 / 161
5．3．1 甜美風格的首頁設計 / 161
5．3．2 時尚酷炫的首頁設計 / 165
5．3．3 干淨清爽的首頁設計 / 169
5．4 列表頁設計 / 172
5．4．1 工整的產品列表頁設計 / 172
5．4．2 時間軸列表頁設計 / 176
5．5 詳情頁設計 / 180
5．5．1 突出活動內容的詳情頁設計 / 180
5．5．2 白色清新風格的詳情頁設計 / 185
5．6 個人中心頁面設計 / 190
5．6．1 簡約風格的個人中心頁面設計 / 190
5．6．2 藍色清爽風格的個人中心頁面設計 / 193

第 6 章 購物 App 界面設計 / 197
6．1 界面布局規劃 / 198
6．2 創意思路剖析 / 198
6．3 確定配色方案 / 199
6．4 定義組件風格 / 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 商品結算界面 / 213
6．5．8 個人中心界面 / 215

第 7 章 音樂 App 界面設計 / 217
7．1 界面布局規劃 / 218
7．2 創意思路剖析 / 218
7．3 確定配色方案 / 219
7．4 定義組件風格 / 219
7．5 制作步驟詳解 / 220
7．5．1 首頁界面 / 220
7．5．2 發現界面 / 224
7．5．3 電臺界面 / 225
7．5．4 歌曲播放界面 / 228
7．5．5 音效調節界面 / 230
7．5．6 個人中心界面 / 232

第 8 章 資訊 App 界面設計 / 236
8．1 界面布局規劃 / 237
8．2 創意思路剖析 / 237
8．3 確定配色方案 / 238
8．4 定義組件風格 / 238
8．5 制作步驟詳解 / 239
8．5．1 登錄界面 / 239
8．5．2 個人界面 / 240
8．5．3 新聞首頁界面 / 241
8．5．4 下載分區界面 / 242
8．5．5 新聞內容界面 / 244
8．5．6 評論界面 / 244

第 9 章 遊戲 App 界面設計 / 246
9．1 界面布局規劃 / 247
9．2 創意思路剖析 / 247
9．3 確定配色方案 / 248
9．4 定義組件風格 / 248
9．5 制作步驟詳解 / 249
9．5．1 歡迎界面 / 249
9．5．2 加載界面 / 250
9．5．3 積分界面 / 252
9．5．4 遊戲界面 / 254
9．5．5 預覽界面 / 255
9．5．6 結束界面 / 255

隨著移動智能設備的普及，Android 繫統、iOS 繫統的智能設備正在飛速改變人們的生 活方式。伴隨著智能設備屏幕變得更大，功能變得更多，對於移動 UI 界面設計的要求也是 越來越高。Photoshop 是由 Adobe 公司開發的一款專業的圖形圖像處理軟件，它除了在平面廣告設計領域有著廣泛的應用，在移動 UI 界面設計領域同樣有廣泛的應用。

本書編寫目的

《UI 設計其實很簡單：Photoshop 界面設計高手之道》是一本使用 Photoshop 進行 UI 界面設計及制作的案例教程，在編寫過程中，作者采取從簡單到復雜、從基礎到專業、從理論到實踐的方式，一步步教會讀者移動 UI 面設計知識，讓讀者掌握真正的 UI 設計精髓。

本書內容安排

第 1 章 UI 設計你要知道的事兒：主要讓用戶了解 UI 設計，掌握 UI 的原則、UI 設計的 構成要素、界面設計的布局及設計流程等知識。

第 2 章 UI 設計你要會用 Photoshop：圍繞在 UI 設計中經常使用的 Photoshop 功能，如 圖層的運用、選區的設置、圖形的繪制、蒙版的編輯、文字的編排等，為後面進行 UI 界面 設計奠定基礎。

第 3 章 不同繫統及其組件的設計：主要介紹 Android 和 iOS 兩大主流繫統的特點、設計 規範、適配規則等，讓讀者能按照不同繫統的設計規則完成更規範的界面設計。

第 4 章 移動 UI 界面中素設計：對 UI 界面中的圖標、按鈕、開關、進度條、搜 索欄素的設計要點和設計方法進行講解。

第 5 章素的組合應用：通過案例的方式講解如何將圖標、按鈕、進素合理地安排到界面中，創建完整的界面效果。

第 6 章 ~ 第 9 章 項目實戰練習：分別講解了比較常見的購物 App、音樂 App、資訊 App 及遊戲 App 的界面設計，通過詳細的操作讓讀者學習如何設計一套完整的 UI 界面。

本書特色

（1）全面的知識講解 : 本書內容全面，知識涵蓋面廣，對 UI 的特點及設計原則、不同繫統的設計規則和適配規則都進行了詳細的講解。

（2）豐富的實戰教學：書中選用了大量精美的、具有代表性的案例，分別講解了UI界面中的圖標、按鈕、導航欄素的素的組合應用設計、完整的 App 界面設計等。

（3）理論和實戰結合：本書打破了常規同類書籍中的內容形式，將理論與實戰高效結合， 書中的所有案例都列出了詳細的制作過程和理論知識。無論是剛接觸 App 界面設計的菜鳥， 還是已經熟練掌握設計軟件的學員，都可以快速入門和上手。

（4）實用的技巧提示：本書在講解的過程中添加了相關的技巧提示，讓讀者在學習的過程中掌握更多實用的擴展知識。

本書適用範圍

本書適合有一定 Photoshop 軟件操作基礎的設計初學者及設計愛好者閱讀，也可以為一 些設計制作人員及相關專業的學習者提供參考，還可以作為社會培訓學校、大中專院校相關 專業的教學參考書或上機實踐指導用書。

本書力求嚴謹細致，但由於作者水平有限，寫作時間倉促，書中難免存在疏漏和不妥之處，懇請廣大讀者批評、指正，讓我們共同對書中的內容一起進行探討，實現共同進步。