內容簡介

《APP UI元素設計》是一本專門介紹使用Photoshop設計制作APP元素的圖書。全書共分為6章，包括APP UI元素設計基礎、APP圖標設計、按鈕設計、導航設計、其他界面元素設計和APP完整應用界面設計等內容，通過案例的逐一講解，使讀者由淺入深、逐步地了解使用Photoshop設計制作APP元素的整體設計思路和制作過程。本書將APP UI元素設計的相關理論與實例操作相結合，不僅能使讀者學到專業知識，也能使讀者掌握實際應用，全面掌握APP UI的元素設計。

《APP UI元素設計》不僅適合APP UI設計愛好者，以及準備從事APP UI設計的人員，也適合Photoshop的使用者，包括平面設計師、網頁設計師等相關人員參考使用；同時也可作為相關培訓中心及學校的輔助教材。

 

前言

隨著蘋果公司的引領、安卓系統的崛起，APP 市場發展迅速。目前，各種APP 應用層出不窮，APP UI 設計師也成為人才市場上炙手可熱的職業。

本書內容

本書是一本專門介紹使用Photoshop 設計制作APP 元素的圖書。全書共分為6 章，第1 章介紹APP UI 元素設計基礎，幫助讀者了解APP UI 的基礎知識以及使用Photoshop 繪制基礎圖形；第2 ～ 4 章介紹APP 圖標設計、按鈕設計和導航設計，通過理論知識與案例制作的結合，逐一講解這些APP 中最常見的元素設計；第5 章介紹APP 其他界面元素設計，包括表單設計、視覺吸引元素和反饋信息設計。前面章節的安排使讀者由淺入深、逐步地了解使用Photoshop 設計制作APP 元素的設計思路和制作過程。第6 章介紹APP 完整界面的設計，包括界面設計基礎知識，以及不同風格界面設計的制作，通過完整界面的制作來綜合前面各章知識，幫助讀者鞏固所學知識，并能將理論應用到實際工作中。

本書特色

1. 理論結合實際，全面掌握專業知識

本書將APP UI 元素設計的相關理論與實例操作相結合，不僅能使讀者學到專業知識，也能使讀者掌握實際應用，全面掌握APP UI 的元素設計。

2. 案例全面豐富，實際操作靈活應用

書中案例涉及APP 中的界面元素設計，如圖標設計、按鈕設計、導航設計等，最后一章介紹了完整的APP 界面設計，將前面所學應用到實際中。

3. 設計師心得，擴展行業知識

每章設置了“設計師心得”模塊，講解了APP UI 設計中的行業知識，知識更全面，可幫助讀者拓展APP UI 的相關知識。

4. 視頻教學，輕松快速學習

本書配備資源包括書中所有案例的素材、源文件以及視頻教學，讀者可以通過掃描右側的二維碼，輕松掌握書中知識。

本書創建團隊

本書由張潔、楊明輝編著，其他參與編寫的人員還有江凡、張潔、馬梅桂、戴京京、駱天、胡丹、彭斌全、林小群、劉清平、鐘睦、劉里鋒、朱海濤、廖博、喻文明、易盛、陳晶、張紹華、陳文軼、楊少波、楊芳、劉有良、劉珊、趙祖欣、毛瓊健、江濤、張范、田燕等。

由于編者水平有限，書中疏漏與不妥之處在所難免。在感謝您選擇本書的同時，也希望您能夠把對本書的意見和建議告訴我們，聯系信箱：lushanbook@qq.com，讀者QQ 群：327209040。

　　 編　者

 

目　錄

第1 章　APP UI 元素設計基礎   1

1.1　什么是APP UI 元素   2

1.1.1　認識UI   2

1.1.2　APP UI 元素的重要性   5

1.2　元素設計要點   6

1.2.1　風格   6

1.2.2　顏色   7

1.2.3　透視關系   9

1.2.4　陰影與投影   10

1.3　使用Photoshop 繪制基礎圖形   11

1.3.1　矩形和圓角矩形   11

1.3.2　橢圓   13

1.3.3　組合圖形   15

1.4　設計師心得   20

1.4.1　APP UI 設計師到底應該掌握些什么   20

1.4.2　APP UI 設計師有多大的就業前景   21

1.4.3　關于APP UI 設計的那些事兒   21

第2 章　APP 圖標設計   25

2.1　APP 圖標設計基礎   26

2.1.1　圖標的分類   26

2.1.2　圖標的標準尺寸   27

2.1.3　圖標的設計原則   30

2.1.4　圖標的設計流程   36

2.2　不同風格的圖標設計   36

2.2.1　線性圖標的設計   36

2.2.2　扁平化圖標的設計   38

2.2.3　立體圖標的設計   40

2.2.4　逼真寫實圖標的設計   51

2.3　不同質感紋理與效果的圖標設計   57

2.3.1　金屬質感   57

2.3.2　玻璃質感   61

2.3.3　皮質質感   67

2.3.4　木頭紋理   71

2.3.5　發光效果   79

2.4　應用圖標設計   90

2.4.1　日歷圖標   90

2.4.2　郵件圖標   92

2.4.3　計算器圖標   95

2.5　功能圖標設計   99

2.6　設計師心得   101

2.6.1　圖標設計的重要細節   101

2.6.2　什么樣的圖標才更加吸引用戶   103

第3 章　按鈕設計   105

3.1　按鈕設計技巧   106

3.1.1　按鈕的尺寸   106

3.1.2　關聯分組   107

3.1.3　善用陰影   107

3.1.4　圓角邊界   108

3.1.5　強調重點   108

3.2　按鈕設計案例   110

3.2.1　開關按鈕   110

3.2.2　電源按鈕   114

3.2.3　滑塊按鈕   120

3.3　設計師心得   126

3.3.1　APP UI 設計為什么這么受歡迎   126

3.3.2　如何將iOS 的UI 設計換成安卓的UI 設計   127

第4 章　導航設計   129

4.1　常見的UI 設計模式   130

4.1.1　主體  細節模式   130

4.1.2　分欄瀏覽模式   131

4.1.3　搜索  結果模式   132

4.1.4　過濾數據組模式   133

4.1.5　表單模式   134

4.1.6　向導模式   135

4.2　標簽式導航   136

4.2.1　底部標簽式導航   136

4.2.2　頂部標簽式導航   138

4.2.3　底部標簽的擴展導航   139

4.2.4　設計實例   140

4.3　抽屜式導航   145

4.3.1　關于抽屜式導航   145

4.3.2　設計實例   147

4.4　列表式導航   156

4.4.1　關于列表式導航   157

4.4.2　設計實例   158

4.5　平鋪式導航   164

4.6　宮格式導航   166

4.7　懸浮式導航   167

4.8　設計師心得   169

第5 章　其他界面元素設計   173

5.1　表單設計   174

5.1.1　登錄表單   174

5.1.2　注冊表單   178

5.1.3　計算表單   186

5.1.4　搜索表單   187

5.1.5　長表單   188

5.2　視覺吸引元素   204

5.2.1　對話框設計   204

5.2.2　提示設計   205

5.2.3　使用向導設計   205

5.2.4　幻燈片設計   206

5.2.5　首次使用引導設計   207

5.2.6　持續視覺吸引設計   207

5.2.7　可發現的視覺吸引設計   207

5.3　反饋信息設計   208

5.3.1　操作反饋設計   209

5.3.2　出錯信息設計   209

5.3.3　確認信息設計   210

5.4　設計師心得   211

第6 章　APP 完整應用界面設計   217

6.1　界面設計基礎   218

6.1.1　界面的構圖   218

6.1.2　常見的界面   219

6.1.3　界面切圖與導出   225

6.2　不同風格的界面設計   229

6.2.1　游戲類APP 界面設計（安卓系統）   230

6.2.2　音樂類APP 界面設計（iOS 系統）   231

6.2.3　新聞類APP 界面設計   239

6.2.4　旅游類APP 界面設計   240

6.2.5　交友類APP 界面設計   245

6.2.6　購物類APP 界面設計   255

6.2.7　攝影圖像類APP 界面設計   255

6.3　設計師心得   265

6.3.1　什么是好的設計   265

6.3.2　關于安卓屏幕   265