APP UI設(shè)計(jì)手冊（第2版）

第1章 APP UI 設(shè)計(jì)的原理
1.1 APP UI 設(shè)計(jì)的概念   2
1.2 APP UI 與用戶體驗(yàn)   2
1.3 APP UI 設(shè)計(jì)的點(diǎn)、線、面      3
1.3.1　點(diǎn)  3
1.3.2 線  3
1.3.3 面  4
1.4 尺寸與規(guī)則     5
1.4.1 IOS      5
1.4.2 Android      6
1.5 APP UI 設(shè)計(jì)的原則   7
1.5.1 突出性原則        7
1.5.2 商業(yè)性原則        7
1.5.3 趣味性原則        8
1.5.4 藝術(shù)性原則        8
1.6 APP UI 設(shè)計(jì)的法則   9
1.6.1 形式美法則        9
1.6.2 平衡法則   10
1.6.3 視覺法則   10
1.6.4 聯(lián)想法則   10
1.6.5 直接展示法則    11
第2章  APP UI設(shè)計(jì)的基礎(chǔ)知識
2.1 UI 與色彩     13
2.1.1 色相、明度、純度  14
2.1.2 主色、輔助色、點(diǎn)綴色    14
2.1.3 鄰近色、對比色     16
2.2 APP UI 設(shè)計(jì)的布局    16
2.2.1 對稱式   17
2.2.2 曲線式   17
2.2.3 傾斜式   18
2.2.4 中軸式   18
2.2.5 文字式   18
2.2.6 圖片式   19
2.2.7 自由式   19
2.2.8 背景式  20
2.2.9 水平式  20
2.2.10 引導(dǎo)式     20
第3章  APP UI設(shè)計(jì)的基礎(chǔ)色
3.1 紅    22
3.1.1 認(rèn)識紅色    22
3.1.2 洋紅& 胭脂紅       23
3.1.3　玫瑰紅& 寶石紅      23
3.1.4　朱紅& 絳紅      24
3.1.5　山茶紅& 淺玫瑰紅     24
3.1.6　火鶴紅& 鮭紅       25
3.1.7　殼黃紅& 淺粉色      25
3.1.8　勃艮第酒紅& 鮮紅     26
3.1.9 灰玫紅& 優(yōu)品紫紅     26
3.2 橙    27
3.2.1 認(rèn)識橙色    27
3.2.2　橙色& 柿子橙       28
3.2.3　橘紅色& 橘色       28
3.2.4　太陽橙& 熱帶橙      29
3.2.5 橙黃& 杏黃       29
3.2.6　米色& 蜂蜜色      30
3.2.7　沙棕色& 琥珀色     30
3.2.8　駝色& 咖啡色       31
3.2.9 棕色& 巧克力色      31
3.3 黃    32
3.3.1 認(rèn)識黃色    32
3.3.2　黃色& 鉻黃       33
3.3.3　金色& 檸檬黃       33
3.3.4　含羞草黃& 月光黃     34
3.3.5　香蕉黃& 香檳黃     34
3.3.6　金盞花黃& 姜黃色     35
3.3.7　象牙黃& 奶黃       35
3.3.8　那不勒斯黃& 卡其黃   36
3.3.9　芥末黃& 黃褐色      36
3.4 綠    37
3.4.1 認(rèn)識綠色    37
3.4.2　黃綠& 葉綠       38
3.4.3　草綠& 蘋果綠       38
3.4.4　嫩綠& 苔蘚綠       39
3.4.5　奶綠& 鈷綠       39
3.4.6　青瓷綠& 孔雀綠     40
3.4.7　鉻綠& 翡翠綠      40
3.4.8　粉綠& 松花色      41
3.4.9　竹青& 墨綠      41
3.5 青    42
3.5.1 認(rèn)識青色   42
3.5.2　青& 水青色      43
3.5.3　海青& 湖青綠      43
3.5.4　青綠色& 瓷青      44
3.5.5　淡青& 白青      44
3.5.6　花淺蔥& 鴉青      45
3.5.7　青灰& 深青      45
3.5.8　青藍(lán)& 靛青      46
3.5.9　群青& 藏青      46
3.6 藍(lán)    47
3.6.1 認(rèn)識藍(lán)色   47
3.6.2　藍(lán)& 矢車菊藍(lán)      48
3.6.3　皇室藍(lán)& 寶石藍(lán)     48
3.6.4　淺藍(lán)& 冰藍(lán)      49
3.6.5　天藍(lán)& 湛藍(lán)      49
3.6.6　灰藍(lán)& 水墨藍(lán)      50
3.6.7　午夜藍(lán)& 藍(lán)黑色     50
3.6.8　孔雀藍(lán)& 海藍(lán)       51
3.6.9　鈷藍(lán)& 深藍(lán)       51
3.7 紫    52
3.7.1 認(rèn)識紫色    52
3.7.2　紫色& 薰衣草紫      53
3.7.3　淡紫色& 雪青色      53
3.7.4　薔薇紫& 錦葵紫     54
3.7.5　三色堇紫& 蝴蝶花紫   54
3.7.6　藕荷色& 嫩木槿      55
3.7.7　灰紫色& 葡萄紫色     55
3.7.8　丁香紫& 紫藤色      56
3.7.9　紫風(fēng)信子& 藍(lán)紫色     56
3.8 黑、白、灰   57
3.8.1 認(rèn)識黑、白、灰     57
3.8.2　白& 亮灰        58
3.8.3　淺灰&50% 灰   58
3.8.4　黑灰& 黑        59
第4章  APP UI 設(shè)計(jì)的元素
4.1 標(biāo)志  61
4.1.1 簡約素雅的標(biāo)志設(shè)計(jì)     62
4.1.2 趣味多彩的標(biāo)志設(shè)計(jì)     63
4.1.3 標(biāo)志設(shè)計(jì)技巧——圖文結(jié)合的設(shè)計(jì)方法    64
4.1.4 標(biāo)志設(shè)計(jì)欣賞   64
4.2 圖案  65
4.2.1 風(fēng)格多變的圖標(biāo)設(shè)計(jì)     66
4.2.2 應(yīng)用界面的圖案設(shè)計(jì)     67
4.2.3 圖案設(shè)計(jì)技巧——造型獨(dú)特的圖案     68
4.2.4 圖案設(shè)計(jì)賞析    68
4.3 色彩  69
4.3.1 繽紛多彩的色彩設(shè)計(jì)    70
4.3.2 單一色調(diào)的色彩設(shè)計(jì)     71
4.3.3 色彩設(shè)計(jì)技巧——統(tǒng)計(jì)圖的應(yīng)用    72
4.3.4 色彩設(shè)計(jì)欣賞    72
4.4 字體  73
4.4.1 應(yīng)用中的字體設(shè)計(jì)   74
4.4.2 圖標(biāo)中的字體設(shè)計(jì)   75
4.4.3 字體設(shè)計(jì)技巧——文字樣式的修改     76
4.4.4 字體設(shè)計(jì)賞析    76
4.5 導(dǎo)航欄      77
4.5.1 頂部與底部的導(dǎo)航欄設(shè)計(jì)    78
4.5.2 “漢堡包菜單”的導(dǎo)航欄設(shè)計(jì)       79
4.5.3 導(dǎo)航欄設(shè)計(jì)技巧——適用屏幕旋轉(zhuǎn)的設(shè)計(jì)     80
4.5.4 導(dǎo)航欄設(shè)計(jì)賞析    80
4.6 主視圖      81
4.6.1 骨骼型的主視圖設(shè)計(jì)     82
4.6.2 重心型的主視圖設(shè)計(jì)     83
4.6.3 主視圖設(shè)計(jì)技巧——采用不同的設(shè)計(jì)版式     84
4.6.4 主視圖設(shè)計(jì)賞析    84
4.7 工具欄      85
4.7.1 固定工具欄設(shè)計(jì)     86
4.7.2 浮動工具欄設(shè)計(jì)     87
4.7.3 工具欄設(shè)計(jì)技巧——帶搜索功能的工具欄     88
4.7.4 工具欄設(shè)計(jì)賞析     88
4.8 設(shè)計(jì)實(shí)戰(zhàn)：社交軟件用戶信息界面設(shè)計(jì)     89
4.8.1 設(shè)計(jì)思路    89
4.8.2 配色方案    89
4.8.3 版面構(gòu)圖    91
4.8.4 色彩       91
4.8.5 字體       92
4.8.6 導(dǎo)航欄   92
第5章  APP UI 設(shè)計(jì)的行業(yè)分類
5.1 游戲類APP UI 設(shè)計(jì)      94
5.1.1 游戲類APP UI 設(shè)計(jì)——休閑類游戲     95
5.1.2 游戲類APP UI 設(shè)計(jì)——動作冒險類游戲     96
5.2 社交類APP UI 設(shè)計(jì)       98
5.2.1 社交類APP UI 設(shè)計(jì)——電話短信    99
5.2.2 社交類APP UI 設(shè)計(jì)——聊天交友      100
5.3 購物類APP UI 設(shè)計(jì)    102
5.3.1 購物類APP UI 設(shè)計(jì)——服裝類    103
5.3.2 購物類APP UI 設(shè)計(jì)——產(chǎn)品類    104
5.4 工具類APP UI 設(shè)計(jì)    106
5.4.1 工具類APP UI 設(shè)計(jì)——地圖導(dǎo)航      107
5.4.2 工具類APP UI 設(shè)計(jì)——天氣預(yù)報(bào)      108
5.5 生活類APP UI 設(shè)計(jì)     110
5.5.1 生活類APP UI 設(shè)計(jì)——旅游     111
5.5.2 生活類APP UI 設(shè)計(jì)——外賣     112
5.6 娛樂類APP UI 設(shè)計(jì)    114
5.6.1 娛樂類APP UI 設(shè)計(jì)——音樂播放器     115
5.6.2 娛樂類APP UI 設(shè)計(jì)——視頻播放器     116
5.7 閱讀類APP UI 設(shè)計(jì)    118
5.7.1 閱讀類APP UI 設(shè)計(jì)——小說閱讀器     119
5.7.2 閱讀類APP UI 設(shè)計(jì)——漫畫閱讀器    120
5.8 拍攝美化類APP UI 設(shè)計(jì)    122
5.8.1 拍攝美化類APP UI設(shè)計(jì)——相機(jī)       123
5.8.2 拍攝美化類APP UI設(shè)計(jì)——美化圖片      124
5.9 新聞類APP UI 設(shè)計(jì)    126
5.9.1 新聞類APP UI 設(shè)計(jì)——新聞資訊       127
5.9.2 新聞類APP UI 設(shè)計(jì)——報(bào)紙雜志       128
5.10 設(shè)計(jì)實(shí)戰(zhàn)：辦公類APP UI 設(shè)計(jì)流程詳解  130
5.10.1 設(shè)計(jì)思路      130
5.10.2 配色方案      131
5.10.3 版面構(gòu)圖      132
5.10.4 首頁    132
5.10.5 收件箱     133
5.10.6 編寫郵件      133
第6章  APP UI設(shè)計(jì)的風(fēng)格
6.1 安全      135
6.1.1 安全——登錄界面的UI 設(shè)計(jì)    136
6.1.2 安全——界面提示彈窗的UI 設(shè)計(jì)       137
6.2 清新      139
6.2.1 清新——明亮色彩的UI 設(shè)計(jì)   140
6.2.2 清新——形象可愛的UI 設(shè)計(jì)   141
6.3 科技      143
6.3.1 科技——指紋識別UI 設(shè)計(jì)   144
6.3.2 科技——天氣預(yù)報(bào)UI 設(shè)計(jì)   145
6.4 涼爽      147
6.4.1 涼爽——顏色       148
6.4.2 涼爽——干凈簡潔的UI 設(shè)計(jì)   149
6.5 美味      151
6.5.1 美味——烹飪類應(yīng)用的UI 設(shè)計(jì)    152
6.5.2 美味——訂餐類應(yīng)用的UI 設(shè)計(jì)    153
6.6 熱情      155
6.6.1 熱情——色彩明快的UI 設(shè)計(jì)    156
6.6.2 熱情——活力四射的運(yùn)動類UI 設(shè)計(jì)       157
6.7 高端      159
6.7.1 高端——奢侈品應(yīng)用的UI 設(shè)計(jì)   160
6.7.2 高端——個人定制的UI 設(shè)計(jì)    161
6.8 浪漫      163
6.8.1 浪漫——粉色系UI 設(shè)計(jì)     164
6.8.2 浪漫——應(yīng)用花朵元素的UI 設(shè)計(jì)    165
6.9 硬朗      167
6.9.1 硬朗——游戲界面中堅(jiān)硬感的UI 設(shè)計(jì)     168
6.9.2 硬朗——穩(wěn)定沉穩(wěn)的UI 設(shè)計(jì)    169
6.10 純凈     171
6.10.1 純凈——簡約純潔的UI 設(shè)計(jì)       172
6.10.2 純凈——線條感十足的UI 圖標(biāo)設(shè)計(jì)       173
6.11 復(fù)古     175
6.11.1 復(fù)古——像素游戲的UI 設(shè)計(jì)       176
6.11.2 復(fù)古——使用傳統(tǒng)物品進(jìn)行UI 圖標(biāo)設(shè)計(jì)     177
6.12 扁平化與擬物化   179
6.12.1 扁平化風(fēng)格   180
6.12.2 擬物化風(fēng)格    181
6.13 設(shè)計(jì)實(shí)戰(zhàn)：手機(jī)游戲啟動界面設(shè)計(jì)     183
6.13.1 設(shè)計(jì)思路     183
6.13.2 配色方案     183
6.13.3 版面構(gòu)圖     185
6.13.4 涼爽     185
6.13.5 硬朗     186
6.13.6 清新     186
第7章  APP UI 設(shè)計(jì)秘籍
7.1 UI 設(shè)計(jì)中的版式布局    188
7.2 通過實(shí)例來了解UI    189
7.3 顏色的合理搭配    190
7.4 圖標(biāo)的物理尺寸與實(shí)際尺寸  191
7.5 常用的設(shè)計(jì)尺寸    192
7.6 MBE 風(fēng)格的設(shè)計(jì)   193
7.7 開放式路徑圖標(biāo)的妙用  194
7.8 列表的設(shè)計(jì)方式    195
7.9 字體的使用      196
7.10 界面空間的節(jié)省   197
7.11 貼近場景的顯示切換    198
7.12 歡迎界面的設(shè)計(jì)   199
7.13 交互方式的設(shè)計(jì)   200
7.14 視覺風(fēng)格的設(shè)計(jì)   201