Photoshop 移動 UI 創意設計

目 錄

第1章  學習Photoshop基礎知識

1.1 認識Photoshop工作區 2

1.1.1 管理文檔窗口 2

1.1.2 操作面板組 5

1.1.3 認識選項欄 8

1.1.4 認識工具箱 8

1.1.5 隱藏工具的操作技巧 9

1.2 創建Photoshop工作環境 9

1.2.1 創建新文檔 9

1.2.2 打開圖像 10

1.2.3 打開最近使用的文檔 11

1.2.4 將分層素材存儲為JPG格式 11

1.2.5 【存儲】與【存儲副本】命令 12

第2章  UI設計知識講解

2.1 UI設計的基本概念 15

2.2 UI設計的一般流程 17

2.3 UI設計的常用軟件 20

2.4 UI與應用的關系 23

2.5 UI設計中的規範 25

2.5.1 基礎規範 25

2.5.2 視覺原則 26

2.5.3 尺寸設置 27

2.5.4 切圖命名 27

2.6 圖標設計原則 29

2.6.1 圖標基調 29

2.6.2 顏色形式 30

2.6.3 圖標輪廓 31

2.6.4 圖標背景 33

2.6.5 設計手法 33

2.7 UI設計中的尺寸及規範 34

2.7.1 iOS尺寸概念 34

2.7.2 iOS尺寸規範 36

2.7.3 Android尺寸設計規範 37

2.7.4 主流瀏覽器的界面參數 38

2.7.5 常見的屏幕尺寸大全 39

2.8 UI設計中的色彩學 40

2.9 UI設計中的心理學 43

2.9.1 7±2法則 43

2.9.2 格式塔原則 43

2.9.3 費茨定律 44

2.9.4 雷斯托夫效應 44

2.9.5 席克定律 44

2.10 新擬物化設計要點 45

2.11 提升UI界面趣味的設計技巧 46

第3章  基礎UI控件製作

3.1 什麼是UI控件 49

3.1.1 UI控件的分類細則 49

3.1.2 基礎UI控件的製作方法 51

3.2 UI控件與UI之間的關系 52

3.2.1 上下文菜單 52

3.2.2 編輯菜單 52

3.2.3 分段控制器 53

3.2.4 頁面控制器 53

3.2.5 標簽 53

3.2.6 內容刷新控件 54

3.2.7 進度指示 54

3.3 標簽欄控件設計規範 54

3.4 下拉菜單的設計規範 55

3.4.1 下拉菜單類型 55

3.4.2 下拉菜單狀態 55

3.4.3 下拉菜單原則 56

3.5 UI控件的使用範圍 59

3.6 製作簡潔開關控件 61

3.7 製作開機控件 62

3.8 製作加載進度條控件 63

3.9 製作滑塊控件 66

3.10 製作透明按鈕 68

3.11 製作增益調節旋鈕 71

3.12 拓展訓練 76

3.12.1 圓形開關按鈕 76

3.12.2 音頻調節控件 77

第4章  簡潔扁平化圖標設計

4.1 理論知識——扁平化設計 79

4.1.1 什麼是扁平化設計 79

4.1.2 扁平化設計的優點和缺點 79

4.1.3 扁平化設計的四大原則 80

4.1.4 扁平化設計的實用技巧 81

4.2 通話圖標設計 82

4.3 郵件圖標設計 83

4.4 健康醫療圖標設計 85

4.5 導航圖標設計 86

4.6 相冊圖標設計 87

4.7 無線標識圖標設計 88

4.8 卡包管理圖標設計 89

4.9 天氣圖標設計 92

4.10 日歷圖標設計 93

4.11 四葉草圖標設計 95

4.12 健身圖標設計 97

4.13 經典相機圖標設計 98

4.14 應用商店圖標設計 101

4.15 手電圖標設計 103

4.16 標識圖標設計 106

4.17 旅行家圖標設計 110

4.18 卡片管理圖標設計 113

4.19 娛樂應用圖標設計 116

4.20 拓展訓練 119

4.20.1 便簽圖標設計 119

4.20.2 加速圖標 119

第5章  形象擬物化圖標設計

5.1 什麼是擬物化圖標 122

5.2 擬物化圖標基礎知識 123

5.2.1 圖標的定義 123

5.2.2 圖標的使用歷史 124

5.2.3 以功能分類圖標 124

5.2.4 以視覺分類圖標 126

5.2.5 擬物化圖標設計原則 127

5.2.6 擬物化圖標設計技巧 127

5.3 擬物化圖標設計規範 128

5.4 時尚時鐘圖標設計 130

5.5 煎蛋圖標設計 133

5.6 文件管理圖標設計 135

5.7 麥克風圖標設計 139

5.8 數碼音箱圖標設計 143

5.9 超強寫實吉他圖標設計 150

5.10 拓展訓練 157

5.10.1 寫實計算器 157

5.10.2 小黃人圖標 157

5.10.3 唱片機圖標 158

第6章 超強寫實質感圖標設計

6.1 寫實圖標的特點 160

6.2 寫實圖標設計指南 161

6.2.1 輔助中文字體 161

6.2.2 英文數字及特殊符號 161

6.2.3 質感圖標圖形 162

6.2.4 質感圖標色彩 163

6.2.5 圖標版形 164

6.2.6 質感圖標設計重點 164

6.3 如何設計出高質量圖標 165

6.4 質感磨砂文件夾圖標設計 167

6.5 塑料質感插座設計 168

6.6 寫實木盒愛心圖標設計 172

6.7 超強質感安全圖標設計 176

6.8 金屬質感網絡圖標設計 179

6.9 質感閃電應用圖標設計 182

6.10 精緻唱片圖標設計 185

6.11 金屬質感調節器設計 192

6.12 拓展訓練 199

6.12.1 透明質感圖標 199

6.12.2 原生紙質感圖標 200

第7章  娛樂與多媒體應用界面設計

7.1 娛樂界面的設計重點 202

7.2 娛樂界面的特點 202

7.3 娛樂界面的設計手法 204

7.4 多媒體應用界面的特點 205

7.5 提升界面設計質感原則 206

7.6 音樂應用登錄界面設計 208

7.7 音樂播放器界面設計 210

7.8 智能手錶界面設計 214

7.9 平板電腦應用界面設計 219

7.10 直播應用界面設計 225

7.11 拓展訓練 230

7.11.1 iPhone收音機界面製作 230

7.11.2 iPhone電影購票界面製作 231

第8章  潮流趣味遊戲界面設計

8.1 遊戲界面的特點 233

8.2 遊戲界面的分類 234

8.3 遊戲界面的基本特徵 237

8.4 如何設計出漂亮的遊戲界面 237

8.5 遊戲通關界面設計 240

8.6 小豬快跑遊戲界面設計 246

8.7 鬥地主遊戲界面設計 255

8.8 糖果遊戲主體界面設計 264

8.9 拓展訓練 274

8.9.1 射擊大戰遊戲界面設計 274

8.9.2 數字主題遊戲界面設計 275

第9章  手機主流應用界面設計

9.1 手機主流應用界面的特點 277

9.2 主流界面的種類 278

9.3 主流界面的特質 280

9.4 主流界面的設計技巧 283

9.5 動感鎖屏界面設計 286

9.6 掃碼界面設計 287

9.7 應用登錄界面設計 289

9.8 Windows phone手機界面設計 292

9.9 智能家電控制界面設計 296

9.10 財經統計界面設計 301

9.11 動漫應用界面設計 305

9.12 雲教育界面設計 310

9.13 拓展訓練 315

9.13.1 下載數據界面 315

9.13.2 App遊戲安裝頁 316