APP UI元素設計

《APP UI元素設計》是2018年出版的圖書，作者是張潔、楊明輝。

基本介紹

• 書名：APP UI元素設計
• 作者：張潔、楊明輝
• ISBN：9787302490067
• 定價：69.80元
• 出版時間：2018.04.01
• 印次：1-1
• 印刷日期：2018.03.02

內容簡介

《APP UI元素設計》是一本專門介紹使用Photoshop設計製作APP元素的圖書。全書共分為6章，包括APP UI元素設計基礎、APP圖示設計、按鈕設計、導航設計、其他界面元素設計和APP完整套用界面設計等內容，通過案例的逐一講解，使讀者由淺入深、逐步地了解使用Photoshop設計製作APP元素的整體設計思路和製作過程。本書將APP UI元素設計的相關理論與實例操作相結合，不僅能使讀者學到專業知識，也能使讀者掌握實際套用，全面掌握APP UI的元素設計。《APP UI元素設計》不僅適合APP UI設計愛好者，以及準備從事APP UI設計的人員，也適合Photoshop的使用者，包括平面設計師、網頁設計師等相關人員參考使用；同時也可作為相關培訓中心及學校的輔助教材。

作者

張潔，畢業於湖南工學院平面設計專業，從事UI設計多年，對APP UI設計有著豐富的實戰經驗，一直專注於iOS和Android兩大系統的界面設計研究。

目　錄

第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　APPUI設計為什麼這么受歡迎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