前言
本書是筆者對(duì)從事APP UI 設(shè)計(jì)工作多年的一個(gè)總結(jié),是讓讀者少走彎路尋找設(shè)計(jì)捷徑的實(shí)用手冊(cè)。書中包含了APP UI 設(shè)計(jì)必學(xué)的基礎(chǔ)知識(shí)及經(jīng)典技巧。本書不僅有理論和精彩的案例賞析,還有大量的模塊啟發(fā)你的大腦,鍛煉你的設(shè)計(jì)能力。
希望讀者看完本書后,不只會(huì)說(shuō):我看完了,挺好的,作品好看,分析也挺好的。這不是筆者編寫本書的目的。我們希望讀者會(huì)說(shuō):本書給我更多的是思路的啟發(fā),讓我的思維更開(kāi)闊,學(xué)會(huì)了設(shè)計(jì)的舉一反三,知識(shí)通過(guò)吸收消化變成自己的。這是筆者編寫本書的初衷。
本書共分7 章,具體安排如下
第1 章 APP UI 設(shè)計(jì)的原理,介紹APP UI 設(shè)計(jì)的概念,用戶體驗(yàn),點(diǎn)、線、面,尺寸與規(guī)則,設(shè)計(jì)的原則,設(shè)計(jì)的法則,是最簡(jiǎn)單、最基礎(chǔ)的原理部分。
第2 章 APP UI 設(shè)計(jì)的基礎(chǔ)知識(shí),其中包括UI 與色彩、APP UI 設(shè)計(jì)的布局。
第3 章 APP UI 設(shè)計(jì)的基礎(chǔ)色,從紅、橙、黃、綠、青、藍(lán)、紫、黑、白、灰10 種顏色,逐一分析講解每種色彩在APP UI 設(shè)計(jì)中的應(yīng)用規(guī)律。
第4 章 APP UI 設(shè)計(jì)的元素,其中包括標(biāo)志、圖案、色彩、字體、導(dǎo)航欄、主視圖、工具欄。
第5 章 APP UI 設(shè)計(jì)的行業(yè)分類,其中包括9 種不同行業(yè)的APP UI 設(shè)計(jì)的詳解。
第6 章 APP UI 設(shè)計(jì)的風(fēng)格,其中包括12 種不同的視覺(jué)印象。
第7 章 APP UI 設(shè)計(jì)秘籍,精選14 個(gè)設(shè)計(jì)秘籍,讓讀者輕松愉快地學(xué)習(xí)完最后的部分。本章也是對(duì)前面章節(jié)知識(shí)點(diǎn)的鞏固和理解,需要讀者動(dòng)腦筋去思考。
本書特色如下
輕鑒賞,側(cè)重實(shí)踐。鑒賞類書籍,看完自己還是設(shè)計(jì)不好;本書則不同,增加了多個(gè)動(dòng)手的模塊,可以讓讀者邊看邊學(xué)邊練。
章節(jié)合理。第1~3 章主要講解APP UI 設(shè)計(jì)的基本知識(shí),第4~6 章介紹APPUI 設(shè)計(jì)的元素、行業(yè)分類、風(fēng)格,最后一章以輕松的方式介紹14 個(gè)設(shè)計(jì)秘籍。
針對(duì)性強(qiáng)。由設(shè)計(jì)師編寫,寫給設(shè)計(jì)師看,而且知道讀者的需求。
模塊豐富。案例解析、設(shè)計(jì)技巧、配色方案、設(shè)計(jì)欣賞、設(shè)計(jì)秘籍在本書都能找到,全方位地滿足讀者的所有需求。
本書是本系列圖書中的一本。在本系列圖書中讀者不僅能系統(tǒng)地學(xué)習(xí)APP UI設(shè)計(jì),而且還有更多設(shè)計(jì)專業(yè)的圖書供讀者選擇閱讀。
本書希望通過(guò)對(duì)知識(shí)的歸納總結(jié)、趣味的模塊講解,開(kāi)闊讀者的思路,避免一味地照搬書本內(nèi)容,推動(dòng)讀者多做嘗試、多理解,增加動(dòng)腦、動(dòng)手的能力。希望通過(guò)本書能激發(fā)讀者的學(xué)習(xí)興趣,開(kāi)啟設(shè)計(jì)的大門,幫助您邁出第一步,圓您一個(gè)設(shè)計(jì)師的夢(mèng)!
本書由孫芳編著,其他參與本書編寫的人員還有柳美余、蘇晴、鄭鵲、李木子、矯雪、胡娟、馬鑫銘、王萍、董輔川、楊建超、馬嘯、孫雅娜、李路、于燕香、孫芳、丁仁雯、張建霞、馬揚(yáng)、王鐵成、崔英迪、高歌。
由于編者水平有限,書中難免存在錯(cuò)誤和不妥之處,敬請(qǐng)廣大讀者批評(píng)和指正。
編 者
有多年藝術(shù)設(shè)計(jì)教學(xué)經(jīng)驗(yàn),因教學(xué)方法獨(dú)特、講解細(xì)致而得到廣大學(xué)生的認(rèn)同。參與多個(gè)設(shè)計(jì)項(xiàng)目的策劃及制作,曾服務(wù)過(guò)國(guó)內(nèi)多家公司。
目錄
第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 線 4
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 平衡法則 9
1.6.3 視覺(jué)法則 10
1.6.4 聯(lián)想法則 10
1.6.5 直接展示法則 10
第2 章 APP UI 設(shè)計(jì)的基礎(chǔ)知識(shí)
2.1 UI 與色彩 12
2.1.1 色相、明度、純度 13
2.1.2 主色、輔助色、點(diǎn)綴色 13
2.1.3 鄰近色、對(duì)比色 15
2.2 APP UI 設(shè)計(jì)的布局 15
2.2.1 對(duì)稱式 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è)計(jì)的基礎(chǔ)色
3.1 紅 21
3.1.1 認(rèn)識(shí)紅色 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 認(rèn)識(shí)橙色 26
3.2.2 橘色& 橘紅 27
3.2.3 柿子橙& 熱帶橙 27
3.2.4 橙色& 陽(yáng)橙 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 認(rèn)識(shí)黃色 31
3.3.2 黃& 鉻黃 32
3.3.3 金& 香蕉黃 32
3.3.4 鮮黃& 月光黃 33
3.3.5 檸檬黃& 萬(wàn)壽菊黃 33
3.3.6 香檳黃& 奶黃 34
3.3.7 土著黃& 黃褐 34
3.3.8 卡其黃& 含羞草黃 35
3.3.9 芥末黃& 灰菊色 35
3.4 綠 36
3.4.1 認(rèn)識(shí)綠色 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 認(rèn)識(shí)青色 41
3.5.2 青& 鐵青 42
3.5.3 深青& 天青色 42
3.5.4 群青& 石青色 43
3.5.5 青綠色& 青藍(lán)色 43
3.5.6 瓷青& 淡青色 44
3.5.7 白青色& 青灰色 44
3.5.8 水青色& 藏青 45
3.5.9 清漾青& 淺蔥色 45
3.6 藍(lán) 46
3.6.1 認(rèn)識(shí)藍(lán)色 46
3.6.2 藍(lán)色& 天藍(lán)色 47
3.6.3 蔚藍(lán)色& 普魯士藍(lán) 47
3.6.4 矢車菊藍(lán)& 深藍(lán) 48
3.6.5 道奇藍(lán)& 寶石藍(lán) 48
3.6.6 午夜藍(lán)& 皇室藍(lán) 49
3.6.7 濃藍(lán)色& 藍(lán)黑色 49
3.6.8 愛(ài)麗絲藍(lán)& 水晶藍(lán) 50
3.6.9 孔雀藍(lán)& 水墨藍(lán) 50
3.7 紫 51
3.7.1 認(rèn)識(shí)紫色 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 認(rèn)識(shí)黑、白、灰 56
3.8.2 白& 月光白 57
3.8.3 雪白& 象牙白 57
3.8.4 10% 亮灰&50% 灰 58
3.8.5 80% 炭灰& 黑 58
第4 章 APP UI 設(shè)計(jì)的元素
4.1 標(biāo)志 60
4.1.1 簡(jiǎn)約素雅的標(biāo)志設(shè)計(jì) 61
4.1.2 趣味多彩的標(biāo)志設(shè)計(jì) 62
4.1.3 標(biāo)志設(shè)計(jì)技巧
圖文結(jié)合的設(shè)計(jì)方法 63
4.1.4 標(biāo)志設(shè)計(jì)欣賞 63
4.2 圖案 64
4.2.1 風(fēng)格多變的圖標(biāo)設(shè)計(jì) 64
4.2.2 應(yīng)用界面的圖案設(shè)計(jì) 66
4.2.3 圖案設(shè)計(jì)技巧造型獨(dú)特的圖案 67
4.2.4 圖案設(shè)計(jì)賞析 67
4.3 色彩 68
4.3.1 繽紛多彩的色彩設(shè)計(jì) 69
4.3.2 單一色調(diào)的色彩設(shè)計(jì) 70
4.3.3 色彩設(shè)計(jì)技巧統(tǒng)計(jì)圖的應(yīng)用 71
4.3.4 色彩設(shè)計(jì)欣賞 71
4.4 字體 72
4.4.1 應(yīng)用中的字體設(shè)計(jì) 73
4.4.2 圖標(biāo)中的字體設(shè)計(jì) 74
4.4.3 字體設(shè)計(jì)技巧文字樣式
的修改 75
4.4.4 字體設(shè)計(jì)賞析 75
4.5 導(dǎo)航欄 76
4.5.1 頂部與底部的導(dǎo)航欄設(shè)計(jì) 77
4.5.2 漢堡包菜單的導(dǎo)航欄設(shè)計(jì) 78
4.5.3 導(dǎo)航欄設(shè)計(jì)技巧適用屏幕旋轉(zhuǎn)的設(shè)計(jì) 79
4.5.4 導(dǎo)航欄設(shè)計(jì)賞析 79
4.6 主視圖 80
4.6.1 骨骼型的主視圖設(shè)計(jì) 81
4.6.2 重心型的主視圖設(shè)計(jì) 82
4.6.3 主視圖設(shè)計(jì)技巧采用不同的設(shè)計(jì)版式 83
4.6.4 主視圖設(shè)計(jì)賞析 83
4.7 工具欄 84
4.7.1 固定工具欄設(shè)計(jì) 85
4.7.2 浮動(dòng)工具欄設(shè)計(jì) 86
4.7.3 工具欄設(shè)計(jì)技巧帶搜索功能的工具欄 87
4.7.4 工具欄設(shè)計(jì)賞析 87
4.8 設(shè)計(jì)實(shí)戰(zhàn):社交軟件用戶信息界面設(shè)計(jì) 88
4.8.1 設(shè)計(jì)思路 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è)計(jì)的行業(yè)分類
5.1 游戲類APP UI 設(shè)計(jì) 93
5.1.1 游戲類APP UI 設(shè)計(jì)休閑類游戲 94
5.1.2 游戲類APP UI 設(shè)計(jì)動(dòng)作冒險(xiǎn)類游戲 95
5.2 社交類APP UI 設(shè)計(jì) 97
5.2.1 社交類APP UI 設(shè)計(jì)電話短信 98
5.2.2 社交類APP UI 設(shè)計(jì)聊天交友 99
5.3 購(gòu)物類APP UI 設(shè)計(jì) 101
5.3.1 購(gòu)物類APP UI 設(shè)計(jì)服裝類 102
5.3.2 購(gòu)物類APP UI 設(shè)計(jì)產(chǎn)品類 103
5.4 工具類APP UI 設(shè)計(jì) 105
5.4.1 工具類APP UI 設(shè)計(jì)地圖導(dǎo)航 106
5.4.2 工具類APP UI 設(shè)計(jì)天氣預(yù)報(bào) 107
5.5 生活類APP UI 設(shè)計(jì) 109
5.5.1 生活類APP UI 設(shè)計(jì)旅游 110
5.5.2 生活類APP UI 設(shè)計(jì)外賣 111
5.6 娛樂(lè)類APP UI 設(shè)計(jì) 113
5.6.1 娛樂(lè)類APP UI 設(shè)計(jì)音樂(lè)播放器 114
5.6.2 娛樂(lè)類APP UI 設(shè)計(jì)視頻播放器 115
5.7 閱讀類APP UI 設(shè)計(jì) 117
5.7.1 閱讀類APP UI 設(shè)計(jì)小說(shuō)閱讀器 118
5.7.2 閱讀類APP UI 設(shè)計(jì)漫畫閱讀器 119
5.8 拍攝美化類APP UI 設(shè)計(jì) 121
5.8.1 拍攝美化類APP UI 設(shè)計(jì)相機(jī) 122
5.8.2 拍攝美化類APP UI 設(shè)計(jì)美化圖片 123
5.9 新聞?lì)怉PP UI 設(shè)計(jì) 125
5.9.1 新聞?lì)怉PP UI 設(shè)計(jì)新聞資訊 126
5.9.2 新聞?lì)怉PP UI 設(shè)計(jì)報(bào)紙雜志 127
5.10 設(shè)計(jì)實(shí)戰(zhàn):辦公類APP UI設(shè)計(jì)流程詳解 129
5.10.1 設(shè)計(jì)思路 129
5.10.2 配色方案 129
5.10.3 版面構(gòu)圖 130
5.10.4 首頁(yè) 131
5.10.5 收件箱 132
5.10.6 編寫郵件 132
第6 章 APP UI 設(shè)計(jì)的風(fēng)格
6.1 安全 134
6.1.1 安全登錄頁(yè)面的UI 設(shè)計(jì) 135
6.1.2 安全頁(yè)面提示彈窗的UI 設(shè)計(jì) 136
6.2 清新 138
6.2.1 清新明亮色彩的UI 界面設(shè)計(jì) 139
6.2.2 清新形象可愛(ài)的UI 設(shè)計(jì) 140
6.3 科技 142
6.3.1 科技指紋識(shí)別UI界面設(shè)計(jì) 143
6.3.2 科技天氣預(yù)報(bào)UI界面設(shè)計(jì) 144
6.4 涼爽 146
6.4.1 涼爽顏色 147
6.4.2 涼爽干凈簡(jiǎn)潔的UI界面設(shè)計(jì) 148
6.5 美味 150
6.5.1 美味烹飪類應(yīng)用的UI界面設(shè)計(jì) 151
6.5.2 美味訂餐類應(yīng)用的UI界面設(shè)計(jì) 152
6.6 熱情 154
6.6.1 熱情色彩明快的UI界面設(shè)計(jì) 155
6.6.2 熱情活力四射的運(yùn)動(dòng)類UI 界面設(shè)計(jì) 156
6.7 高端 158
6.7.1 高端奢侈品應(yīng)用的UI 設(shè)計(jì) 159
6.7.2 高端個(gè)人定制的UI 設(shè)計(jì) 160
6.8 浪漫 162
6.8.1 浪漫粉色系桌面的UI 界面設(shè)計(jì) 163
6.8.2 浪漫應(yīng)用花朵元素的UI 界面設(shè)計(jì) 164
6.9 硬朗 166
6.9.1 硬朗游戲頁(yè)面中堅(jiān)硬感UI 設(shè)計(jì) 167
6.9.2 硬朗穩(wěn)定沉穩(wěn)的UI 設(shè)計(jì) 168
6.10 純凈 170
6.10.1 純凈簡(jiǎn)約純潔的UI界面設(shè)計(jì) 171
6.10.2 純凈線條感十足的UI圖標(biāo)設(shè)計(jì) 172
6.11 復(fù)古 174
6.11.1 復(fù)古像素游戲的UI界面設(shè)計(jì) 175
6.11.2 復(fù)古使用傳統(tǒng)物品進(jìn)行UI 圖標(biāo)設(shè)計(jì) 176
6.12 扁平化與擬物化 178
6.12.1 扁平化風(fēng)格 179
6.12.2 擬物化風(fēng)格 180
6.13 設(shè)計(jì)實(shí)戰(zhàn):手機(jī)游戲啟動(dòng)界面設(shè)計(jì) 182
6.13.1 設(shè)計(jì)思路 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è)計(jì)秘籍
7.1 UI 設(shè)計(jì)中的版式布局 187
7.2 通過(guò)實(shí)例來(lái)了解UI 界面 188
7.3 顏色的合理搭配 189
7.4 圖標(biāo)的物理尺寸與實(shí)際尺寸 190
7.5 常用的集中設(shè)計(jì)尺寸 191
7.6 MBE 風(fēng)格的設(shè)計(jì) 192
7.7 開(kāi)放式路徑圖標(biāo)的妙用 193
7.8 列表的設(shè)計(jì)方式 194
7.9 字體的使用 195
7.10 頁(yè)面空間的節(jié)省 196
7.11 貼近場(chǎng)景的顯示切換 197
7.12 歡迎頁(yè)面的設(shè)計(jì) 198
7.13 交互方式的設(shè)計(jì) 199
7.14 視覺(jué)風(fēng)格的設(shè)計(jì) 200