第1章 輕鬆邁向圖示王國

1.1 圖示入門 8

1.1.1 什麼是圖示 8

1.1.2 圖示與標誌的區別 9

1.1.3 常見移動應用圖示 10

1.1.4 常見電腦應用圖示 11

1.2 圖示設計的意義和作用 12

1.2.1 什麼是圖示 12

1.2.2 圖形內在含義 13

1.2.3 圖示設計的作用 15

1.3 圖示的圖元分辨 17

1.3.1 Windows 7作業系統的圖示圖元分辨 17

1.3.2 Windows 10作業系統的圖示圖元分辨 18

1.3.3 安卓作業系統的圖示圖元分辨 19

1.3.4 iOS 7作業系統的圖示圖元分辨 21

1.4 常見圖示的標準尺寸 22

1.4.1 常見移動作業系統的圖示標準尺寸 22

1.4.2 常見電腦作業系統的圖示標準尺寸 24

1.5 圖示的設計要素和結構 25

1.5.1 圖示型的把握 26

1.5.2 圖示大小和顏色 27

1.5.3 透視、光源與陰影 28

1.5.4 元素的組合 28

1.5.5 視覺均衡 29

1.6 那些你不知道的圖示分類 30

1.6.1 PNG格式圖示 30

1.6.2 ICO格式圖示 31

1.6.3 ICL格式圖示 31

1.6.4 IP格式圖示 31

1.7 製作圖示的常用軟體 32

1.7.1 Photoshop CS6 32

1.7.2 Illustrator CS6 34


第2章 掌控圖示創意原則

2.1 圖示製作的原則 36

2.1.1 可識別性原則 36

2.1.2 差異性原則 37

2.1.3 合適的精細度和元素個數原則 38

2.1.4 風格統一性原則 38

2.1.5 原創性原則 39

2.2 圖示的創意 40

2.2.1 介面需求 40

2.2.2 圖示的創意元素 42

2.2.3 創意圖示的特點 43

2.3 圖示設計草圖的繪製和渲染 46

2.3.1 圖示的設計方法及技巧 47

2.3.2 圖示視覺分析 48

2.3.3 最終草圖定稿 49

2.3.4 草圖渲染 49

2.4 圖示的視覺分析和效果 50

2.4.1 用戶體驗 53

2.4.2 圖示的可識別性 56

2.4.3 圖示設計的連續性 60


第3章 圖示設計與軟體操作

3.1 基礎圖形繪製圖示中的元素 62

3.1.1 圓形圖示的繪製 63

3.1.2 方形圖示的繪製 66

3.1.3 圓角矩形圖示的繪製 69

3.1.4 組合圖形圖示的繪製 73

3.1.5 自訂形狀圖示的繪製 76

3.2 讓人過目不忘的簡單生活圖示 79

3.2.1 移動設備電池圖示繪製 80

3.2.2 安卓系統啟動圖示 83

3.2.3 iOS系統啟動圖示 86

3.2.4 Windows系統啟動圖示 87

3.3 具有設計性的圖示製作 90

3.3.1 具有設計性的開關圖示 91

3.3.2 具有設計性的音樂旋鈕圖示 95

3.3.3 具有設計性的巡覽列圖示的繪製 99

3.4 色彩斑斕的圖示 104

3.4.1 粉嫩色系圖示 106

3.4.2 藍綠色系圖示 109

3.4.3 暖色調圖示 112

第4章 扁平化圖示設計

4.1 純色形狀扁平化圖示 120

應用類純色形狀扁平化圖示 120

生活類純色形狀扁平化圖示 123

4.2 Windows XP作業系統的扁平化圖示 126


第5章 質感圖示的設計

5.1質感立體圖標設計 131

立體透明圖示製作 131

立體毛絨圖示製作 136

5.2質感寫實圖示設計 141

逼真質感圖示 141

逼真食物圖示 153

金屬質感寫實圖示 164

逼真生活物品圖示 169


第6章 塗鴉風格圖示設計

6.1 向量塗鴉風格圖示 178

向量牌遊質感風格圖示 178

向量趣味塗鴉圖示 185

6.2 可愛動畫塗鴉風格圖示 193

可愛遊戲塗鴉風格圖示 193

可愛動畫塗鴉風格圖示 197

6.3 手繪塗鴉介面圖示 204

手繪塗鴉介面圖示 204

手繪相機應用圖示 211

手繪導航應用圖示 216


第7章 玩轉圖示應用

7.1 移動應用和圖示 228

手機App應用和圖示 228

蘋果手機App應用和圖示 238

移動iPad應用和圖示 252

7.2 電腦桌面應用圖示 268

電腦桌面圖示 268

向量插畫主題電腦應用和圖示 282


附錄

01資源分享 293

移動 App精緻圖示欣賞 293

電腦桌面精緻圖示欣賞 296

你所需要的圖示分層素材共用 298

02移動App圖示與應用的關係 301

發現圖示 301

App從圖示到應用 303

03圖示設計中的10種錯誤 304