UI的創作樂趣：創意APP元素設計實戰

目 錄

第1章 初識UI設計   1

1.1 認識UI   2

1.2 UI的分類       3

1.3 UI的色彩基礎      4

1.3.1 顏色的概念         4

1.3.2 色彩三要素         4

1.3.3 色彩的混合         5

1.3.4 色彩的分類         7

1.4 不同色彩給人的心理影響     8

1.5 常用UI設計單位解析     9

1.6 UI設計常用的軟件         9

1.7 UI設計常用的圖像格式       11

1.8 UI的設計原則    12

1.9 學習UI設計需要具備的5項能力    13

1.10 優秀作品欣賞   13

第2章 選取與填充在UI中的應用   15

2.1 瞭解選取與填充     16

2.1.1 選區的應用        16

2.1.2 填充的應用        20

2.2 使用矩形選區製作公司APP圖標    25

2.3 使用漸變工具製作金屬旋鈕控件     28

2.4 使用矩形工具和橢圓選區製作拖動條    32

2.5 使用鋼筆工具繪制卡通圖標    36

2.6 使用油漆桶工具製作票據界面        40

2.7 優秀作品欣賞    44

第3章 畫筆與形狀在UI中的應用   45

3.1 瞭解畫筆與形狀     46

3.1.1 畫筆的應用        46

3.1.2 畫筆設置面板     47

3.1.3 鉛筆工具      50

3.1.4 多邊形與星形的創建     50

3.1.5 自定義形狀的創建    51

3.2 設置畫筆製作郵票圖標      51

3.3 通過自定義形狀製作微信圖標        54

3.4 使用多邊形工具製作簡易圖標        58

3.5 優秀作品欣賞    61

第4章 圖層在UI中的應用       62

4.1 認識圖層      63

4.1.1 什麼是圖層        63

4.1.2 圖層的原理        64

4.1.3 快速顯示圖層內容    64

4.2 調整圖層凸顯局部圖標       66

4.3 使用圖層樣式製作水晶風格圖標     70

4.4 使用圖層蒙版製作圖標倒影    72

4.5 使用剪貼蒙版合成提示窗口    78

4.6 使用操控變形製作圖形圖標    81

4.7 優秀作品欣賞    84

第5章 扁平化風格案例實戰       85

5.1 瞭解扁平化設計     86

5.1.1 扁平化設計是什麼    86

5.1.2 扁平化風格設計的優點和缺點     86

5.1.3 扁平化風格的設計原則         87

5.2 實戰案例—扁平化風格鉛筆圖標       89

5.3 實戰案例—扁平化風格鋼筆圖標       92

5.4 實戰案例—扁平化風格扳手圖標       95

5.5 實戰案例—扁平化風格生肖鼠圖標    99

5.6 實戰案例—扁平化風格郵箱界面      103

5.7 實戰案例—扁平化風格音樂播放器界面   106

5.8 實戰案例—扁平化風格天氣預報控件   112

5.9 實戰案例—扁平化風格超市小票      116

5.10 優秀作品欣賞      118

 第6章 精緻按鈕的設計實戰       119

6.1 瞭解按鈕設計   120

6.1.1 移動APP按鈕尺寸分析        120

6.1.2 統一化風格      120

6.1.3 懸浮風格         121

6.1.4 強化質感風格   121

6.1.5 圓角風格         121

6.1.6 強調重點         122

6.2 實戰案例—下單按鈕     122

6.3 實戰案例—提交按鈕     124

6.4 實戰案例—圓形開關按鈕   127

6.5 實戰案例—金屬旋鈕     131

6.6 實戰案例—皮革按鈕     137

6.7 實戰案例—羅盤圖標     143

6.8 實戰案例—溫度計圖標      147

6.9 實戰案例—日歷圖標     149

6.10 優秀作品欣賞      154

 第7章 寫實風格圖標製作實戰     155

7.1 瞭解寫實風格設計      156

7.1.1 寫實的藝術表現     156

7.1.2 寫實風格設計的優點和缺點      157

7.1.3 寫實風格的設計原則   157

7.2 實戰案例—寫實火龍果圖標       158

7.3 實戰案例—寫實開關圖標   162

7.4 實戰案例—寫實優盤圖標   169

7.5 實戰案例—寫實鋼琴圖標   175

7.6 實戰案例—寫實電視圖標   181

7.7 優秀作品欣賞   186

第8章 控件製作實戰       187

8.1 瞭解UI設計中的控件       188

8.1.1 什麼是UI控件   188

8.1.2 UI設計中的控件     188

8.1.3 UI控件的設計原則      188

8.2 實戰案例—簡潔進度條      190

8.3 實戰案例—播放滑動條      193

8.4 實戰案例—加油站控件      195

8.5 實戰案例—天氣預報控件   198

8.6 實戰案例—音樂播放器控件       203

8.7 優秀作品欣賞   205

 第9章 界面設計實戰       207

9.1 瞭解UI設計中的界面       208

9.1.1 UI設計中的界面是什麼       208

9.1.2 常見的界面      208

9.1.3 屏幕尺寸         208

9.1.4 設計界面時需要註意的固定元素尺寸      210

9.1.5 什麼是好的界面設計   211

9.2 實戰案例—扁平化風格登錄界面      211

9.3 實戰案例—會員登錄界面   214

9.4 實戰案例—數據下載界面   221

9.5 實戰案例—手機開機界面   224

9.6 實戰案例—天氣預報界面   226

9.7 優秀作品欣賞   229