目錄

第1 章 APP UI 設(shè)計的原理

1.1 APP UI 設(shè)計的概念 2

1.2 APP UI 與用戶體驗 2

1.3 APP UI 設(shè)計的點、線、面 3

1.3.1 點 3

1.3.2 線 4

1.3.3 面 4

1.4 尺寸與規(guī)則 5

1.4.1 IOS 5

1.4.2 Android 6

1.5 APP UI 設(shè)計的原則 7

1.5.1 突出性原則 7

1.5.2 商業(yè)性原則 7

1.5.3 趣味性原則 8

1.5.4 藝術(shù)性原則 8

1.6 APP UI 設(shè)計的法則 9

1.6.1 形式美法則 9

1.6.2 平衡法則 9

1.6.3 視覺法則 10

1.6.4 聯(lián)想法則 10

1.6.5 直接展示法則 10

第2 章 APP UI 設(shè)計的基礎(chǔ)知識

2.1 UI 與色彩 12

2.1.1 色相、明度、純度 13

2.1.2 主色、輔助色、點綴色 13

2.1.3 鄰近色、對比色 15

2.2 APP UI 設(shè)計的布局 15

2.2.1 對稱式 16

2.2.2 曲線式 16

2.2.3 傾斜式 17

2.2.4 中軸式 17

2.2.5 文字式 17

2.2.6 圖片式 18

2.2.7 自由式 18

2.2.8 背景式 19

2.2.9 水平式 19

2.2.10 引導(dǎo)式 19

第3 章 APP UI 設(shè)計的基礎(chǔ)色

3.1 紅 21

3.1.1 認識紅色 21

3.1.2 洋紅& 胭脂紅 22

3.1.3 玫瑰紅& 朱紅 22

3.1.4 鮮紅& 山茶紅 23

3.1.5 淺玫瑰紅& 火鶴紅 23

3.1.6 硅紅& 殼黃紅 24

3.1.7 淺粉紅& 勃艮第酒紅 24

3.1.8 威尼斯紅& 寶石紅 25

3.1.9 灰玫紅& 優(yōu)品紫紅 25

3.2 橙 26

3.2.1 認識橙色 26

3.2.2 橘色& 橘紅 27

3.2.3 柿子橙& 熱帶橙 27

3.2.4 橙色& 陽橙 28

3.2.5 橙黃& 杏黃 28

3.2.6 蜂蜜色& 米色 29

3.2.7 沙棕色& 琥珀色 29

3.2.8 駝色& 咖啡色 30

3.2.9 巧克力色& 重褐色 30

3.3 黃 31

3.3.1 認識黃色 31

3.3.2 黃& 鉻黃 32

3.3.3 金& 香蕉黃 32

3.3.4 鮮黃& 月光黃 33

3.3.5 檸檬黃& 萬壽菊黃 33

3.3.6 香檳黃& 奶黃 34

3.3.7 土著黃& 黃褐 34

3.3.8 卡其黃& 含羞草黃 35

3.3.9 芥末黃& 灰菊色 35

3.4 綠 36

3.4.1 認識綠色 36

3.4.2 黃綠& 蘋果綠 37

3.4.3 墨綠& 葉綠 37

3.4.4 草綠& 苔蘚綠 38

3.4.5 芥末綠& 橄欖綠 38

3.4.6 枯葉綠& 碧綠 39

3.4.7 綠松石綠& 青瓷綠 39

3.4.8 孔雀石綠& 鉻綠 40

3.4.9 孔雀綠& 鈷綠 40

3.5 青 41

3.5.1 認識青色 41

3.5.2 青& 鐵青 42

3.5.3 深青& 天青色 42

3.5.4 群青& 石青色 43

3.5.5 青綠色& 青藍色 43

3.5.6 瓷青& 淡青色 44

3.5.7 白青色& 青灰色 44

3.5.8 水青色& 藏青 45

3.5.9 清漾青& 淺蔥色 45

3.6 藍 46

3.6.1 認識藍色 46

3.6.2 藍色& 天藍色 47

3.6.3 蔚藍色& 普魯士藍 47

3.6.4 矢車菊藍& 深藍 48

3.6.5 道奇藍& 寶石藍 48

3.6.6 午夜藍& 皇室藍 49

3.6.7 濃藍色& 藍黑色 49

3.6.8 愛麗絲藍& 水晶藍 50

3.6.9 孔雀藍& 水墨藍 50

3.7 紫 51

3.7.1 認識紫色 51

3.7.2 紫& 淡紫色 52

3.7.3 靛青色& 紫藤 52

3.7.4 木槿紫& 藕荷色 53

3.7.5 丁香紫& 水晶紫 53

3.7.6 礦紫& 三色堇紫 54

3.7.7 錦葵紫& 淡丁香紫 54

3.7.8 淺灰紫& 江戶紫 55

3.7.9 蝴蝶花紫& 薔薇紫 55

3.8 黑、白、灰 56

3.8.1 認識黑、白、灰 56

3.8.2 白& 月光白 57

3.8.3 雪白& 象牙白 57

3.8.4 10% 亮灰&50% 灰 58

3.8.5 80% 炭灰& 黑 58

第4 章 APP UI 設(shè)計的元素

4.1 標志 60

4.1.1 簡約素雅的標志設(shè)計 61

4.1.2 趣味多彩的標志設(shè)計 62

4.1.3 標志設(shè)計技巧

圖文結(jié)合的設(shè)計方法 63

4.1.4 標志設(shè)計欣賞 63

4.2 圖案 64

4.2.1 風(fēng)格多變的圖標設(shè)計 64

4.2.2 應(yīng)用界面的圖案設(shè)計 66

4.2.3 圖案設(shè)計技巧造型獨特的圖案 67

4.2.4 圖案設(shè)計賞析 67

4.3 色彩 68

4.3.1 繽紛多彩的色彩設(shè)計 69

4.3.2 單一色調(diào)的色彩設(shè)計 70

4.3.3 色彩設(shè)計技巧統(tǒng)計圖的應(yīng)用 71

4.3.4 色彩設(shè)計欣賞 71

4.4 字體 72

4.4.1 應(yīng)用中的字體設(shè)計 73

4.4.2 圖標中的字體設(shè)計 74

4.4.3 字體設(shè)計技巧文字樣式

的修改 75

4.4.4 字體設(shè)計賞析 75

4.5 導(dǎo)航欄 76

4.5.1 頂部與底部的導(dǎo)航欄設(shè)計 77

4.5.2 漢堡包菜單的導(dǎo)航欄設(shè)計 78

4.5.3 導(dǎo)航欄設(shè)計技巧適用屏幕旋轉(zhuǎn)的設(shè)計 79

4.5.4 導(dǎo)航欄設(shè)計賞析 79

4.6 主視圖 80

4.6.1 骨骼型的主視圖設(shè)計 81

4.6.2 重心型的主視圖設(shè)計 82

4.6.3 主視圖設(shè)計技巧采用不同的設(shè)計版式 83

4.6.4 主視圖設(shè)計賞析 83

4.7 工具欄 84

4.7.1 固定工具欄設(shè)計 85

4.7.2 浮動工具欄設(shè)計 86

4.7.3 工具欄設(shè)計技巧帶搜索功能的工具欄 87

4.7.4 工具欄設(shè)計賞析 87

4.8 設(shè)計實戰(zhàn)：社交軟件用戶信息界面設(shè)計 88

4.8.1 設(shè)計思路 88

4.8.2 配色方案 88

4.8.3 版面構(gòu)圖 90

4.8.4 色彩 90

4.8.5 字體 91

4.8.6 導(dǎo)航欄 91

第5 章 APP UI 設(shè)計的行業(yè)分類

5.1 游戲類APP UI 設(shè)計 93

5.1.1 游戲類APP UI 設(shè)計休閑類游戲 94

5.1.2 游戲類APP UI 設(shè)計動作冒險類游戲 95

5.2 社交類APP UI 設(shè)計 97

5.2.1 社交類APP UI 設(shè)計電話短信 98

5.2.2 社交類APP UI 設(shè)計聊天交友 99

5.3 購物類APP UI 設(shè)計 101

5.3.1 購物類APP UI 設(shè)計服裝類 102

5.3.2 購物類APP UI 設(shè)計產(chǎn)品類 103

5.4 工具類APP UI 設(shè)計 105

5.4.1 工具類APP UI 設(shè)計地圖導(dǎo)航 106

5.4.2 工具類APP UI 設(shè)計天氣預(yù)報 107

5.5 生活類APP UI 設(shè)計 109

5.5.1 生活類APP UI 設(shè)計旅游 110

5.5.2 生活類APP UI 設(shè)計外賣 111

5.6 娛樂類APP UI 設(shè)計 113

5.6.1 娛樂類APP UI 設(shè)計音樂播放器 114

5.6.2 娛樂類APP UI 設(shè)計視頻播放器 115

5.7 閱讀類APP UI 設(shè)計 117

5.7.1 閱讀類APP UI 設(shè)計小說閱讀器 118

5.7.2 閱讀類APP UI 設(shè)計漫畫閱讀器 119

5.8 拍攝美化類APP UI 設(shè)計 121

5.8.1 拍攝美化類APP UI 設(shè)計相機 122

5.8.2 拍攝美化類APP UI 設(shè)計美化圖片 123

5.9 新聞類APP UI 設(shè)計 125

5.9.1 新聞類APP UI 設(shè)計新聞資訊 126

5.9.2 新聞類APP UI 設(shè)計報紙雜志 127

5.10 設(shè)計實戰(zhàn)：辦公類APP UI設(shè)計流程詳解 129

5.10.1 設(shè)計思路 129

5.10.2 配色方案 129

5.10.3 版面構(gòu)圖 130

5.10.4 首頁 131

5.10.5 收件箱 132

5.10.6 編寫郵件 132

第6 章 APP UI 設(shè)計的風(fēng)格

6.1 安全 134

6.1.1 安全登錄頁面的UI 設(shè)計 135

6.1.2 安全頁面提示彈窗的UI 設(shè)計 136

6.2 清新 138

6.2.1 清新明亮色彩的UI 界面設(shè)計 139

6.2.2 清新形象可愛的UI 設(shè)計 140

6.3 科技 142

6.3.1 科技指紋識別UI界面設(shè)計 143

6.3.2 科技天氣預(yù)報UI界面設(shè)計 144

6.4 涼爽 146

6.4.1 涼爽顏色 147

6.4.2 涼爽干凈簡潔的UI界面設(shè)計 148

6.5 美味 150

6.5.1 美味烹飪類應(yīng)用的UI界面設(shè)計 151

6.5.2 美味訂餐類應(yīng)用的UI界面設(shè)計 152

6.6 熱情 154

6.6.1 熱情色彩明快的UI界面設(shè)計 155

6.6.2 熱情活力四射的運動類UI 界面設(shè)計 156

6.7 高端 158

6.7.1 高端奢侈品應(yīng)用的UI 設(shè)計 159

6.7.2 高端個人定制的UI 設(shè)計 160

6.8 浪漫 162

6.8.1 浪漫粉色系桌面的UI 界面設(shè)計 163

6.8.2 浪漫應(yīng)用花朵元素的UI 界面設(shè)計 164

6.9 硬朗 166

6.9.1 硬朗游戲頁面中堅硬感UI 設(shè)計 167

6.9.2 硬朗穩(wěn)定沉穩(wěn)的UI 設(shè)計 168

6.10 純凈 170

6.10.1 純凈簡約純潔的UI界面設(shè)計 171

6.10.2 純凈線條感十足的UI圖標設(shè)計 172

6.11 復(fù)古 174

6.11.1 復(fù)古像素游戲的UI界面設(shè)計 175

6.11.2 復(fù)古使用傳統(tǒng)物品進行UI 圖標設(shè)計 176

6.12 扁平化與擬物化 178

6.12.1 扁平化風(fēng)格 179

6.12.2 擬物化風(fēng)格 180

6.13 設(shè)計實戰(zhàn)：手機游戲啟動界面設(shè)計 182

6.13.1 設(shè)計思路 182

6.13.2 配色方案 182

6.13.3 版面構(gòu)圖 184

6.13.4 涼爽 184

6.13.5 硬朗 185

6.13.6 清新 185

第7 章 APP UI 設(shè)計秘籍

7.1 UI 設(shè)計中的版式布局 187

7.2 通過實例來了解UI 界面 188

7.3 顏色的合理搭配 189

7.4 圖標的物理尺寸與實際尺寸 190

7.5 常用的集中設(shè)計尺寸 191

7.6 MBE 風(fēng)格的設(shè)計 192

7.7 開放式路徑圖標的妙用 193

7.8 列表的設(shè)計方式 194

7.9 字體的使用 195

7.10 頁面空間的節(jié)省 196

7.11 貼近場景的顯示切換 197

7.12 歡迎頁面的設(shè)計 198

7.13 交互方式的設(shè)計 199

7.14 視覺風(fēng)格的設(shè)計 200