前言
本書是筆者對從事APP UI 設(shè)計(jì)工作多年的一個(gè)總結(jié),是讓讀者少走彎路尋找設(shè)計(jì)捷徑的實(shí)用手冊。書中包含了APP UI 設(shè)計(jì)必學(xué)的基礎(chǔ)知識及經(jīng)典技巧。本書不僅有理論和精彩的案例賞析,還有大量的模塊啟發(fā)你的大腦,鍛煉你的設(shè)計(jì)能力。
希望讀者看完本書后,不只會(huì)說:我看完了,挺好的,作品好看,分析也挺好的。這不是筆者編寫本書的目的。我們希望讀者會(huì)說:本書給我更多的是思路的啟發(fā),讓我的思維更開闊,學(xué)會(huì)了設(shè)計(jì)的舉一反三,知識通過吸收消化變成自己的。這是筆者編寫本書的初衷。
本書共分7 章,具體安排如下
第1 章 APP UI 設(shè)計(jì)的原理,介紹APP UI 設(shè)計(jì)的概念,用戶體驗(yàn),點(diǎn)、線、面,尺寸與規(guī)則,設(shè)計(jì)的原則,設(shè)計(jì)的法則,是最簡單、最基礎(chǔ)的原理部分。
第2 章 APP UI 設(shè)計(jì)的基礎(chǔ)知識,其中包括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 種不同的視覺印象。
第7 章 APP UI 設(shè)計(jì)秘籍,精選14 個(gè)設(shè)計(jì)秘籍,讓讀者輕松愉快地學(xué)習(xí)完最后的部分。本章也是對前面章節(jié)知識點(diǎn)的鞏固和理解,需要讀者動(dòng)腦筋去思考。
本書特色如下
輕鑒賞,側(cè)重實(shí)踐。鑒賞類書籍,看完自己還是設(shè)計(jì)不好;本書則不同,增加了多個(gè)動(dòng)手的模塊,可以讓讀者邊看邊學(xué)邊練。
章節(jié)合理。第1~3 章主要講解APP UI 設(shè)計(jì)的基本知識,第4~6 章介紹APPUI 設(shè)計(jì)的元素、行業(yè)分類、風(fēng)格,最后一章以輕松的方式介紹14 個(gè)設(shè)計(jì)秘籍。
針對性強(qiáng)。由設(shè)計(jì)師編寫,寫給設(shè)計(jì)師看,而且知道讀者的需求。
模塊豐富。案例解析、設(shè)計(jì)技巧、配色方案、設(shè)計(jì)欣賞、設(shè)計(jì)秘籍在本書都能找到,全方位地滿足讀者的所有需求。
本書是本系列圖書中的一本。在本系列圖書中讀者不僅能系統(tǒng)地學(xué)習(xí)APP UI設(shè)計(jì),而且還有更多設(shè)計(jì)專業(yè)的圖書供讀者選擇閱讀。
本書希望通過對知識的歸納總結(jié)、趣味的模塊講解,開闊讀者的思路,避免一味地照搬書本內(nèi)容,推動(dòng)讀者多做嘗試、多理解,增加動(dòng)腦、動(dòng)手的能力。希望通過本書能激發(fā)讀者的學(xué)習(xí)興趣,開啟設(shè)計(jì)的大門,幫助您邁出第一步,圓您一個(gè)設(shè)計(jì)師的夢!
本書由孫芳編著,其他參與本書編寫的人員還有柳美余、蘇晴、鄭鵲、李木子、矯雪、胡娟、馬鑫銘、王萍、董輔川、楊建超、馬嘯、孫雅娜、李路、于燕香、孫芳、丁仁雯、張建霞、馬揚(yáng)、王鐵成、崔英迪、高歌。
由于編者水平有限,書中難免存在錯(cuò)誤和不妥之處,敬請廣大讀者批評和指正。
編 者
有多年藝術(shù)設(shè)計(jì)教學(xué)經(jīng)驗(yàn),因教學(xué)方法獨(dú)特、講解細(xì)致而得到廣大學(xué)生的認(rèn)同。參與多個(gè)設(shè)計(jì)項(xiàng)目的策劃及制作,曾服務(wù)過國內(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 視覺法則 10
1.6.4 聯(lián)想法則 10
1.6.5 直接展示法則 10
第2 章 APP UI 設(shè)計(jì)的基礎(chǔ)知識
2.1 UI 與色彩 12
2.1.1 色相、明度、純度 13
2.1.2 主色、輔助色、點(diǎn)綴色 13
2.1.3 鄰近色、對比色 15
2.2 APP UI 設(shè)計(jì)的布局 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è)計(jì)的基礎(chǔ)色
3.1 紅 21
3.1.1 認(rèn)識紅色 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)識橙色 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 認(rèn)識黃色 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 認(rèn)識綠色 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)識青色 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)識藍(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 愛麗絲藍(lán)& 水晶藍(lán) 50
3.6.9 孔雀藍(lán)& 水墨藍(lán) 50
3.7 紫 51
3.7.1 認(rèn)識紫色 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)識黑、白、灰 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 簡約素雅的標(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 購物類APP UI 設(shè)計(jì) 101
5.3.1 購物類APP UI 設(shè)計(jì)服裝類 102
5.3.2 購物類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 娛樂類APP UI 設(shè)計(jì) 113
5.6.1 娛樂類APP UI 設(shè)計(jì)音樂播放器 114
5.6.2 娛樂類APP UI 設(shè)計(jì)視頻播放器 115
5.7 閱讀類APP UI 設(shè)計(jì) 117
5.7.1 閱讀類APP UI 設(shè)計(jì)小說閱讀器 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 首頁 131
5.10.5 收件箱 132
5.10.6 編寫郵件 132
第6 章 APP UI 設(shè)計(jì)的風(fēng)格
6.1 安全 134
6.1.1 安全登錄頁面的UI 設(shè)計(jì) 135
6.1.2 安全頁面提示彈窗的UI 設(shè)計(jì) 136
6.2 清新 138
6.2.1 清新明亮色彩的UI 界面設(shè)計(jì) 139
6.2.2 清新形象可愛的UI 設(shè)計(jì) 140
6.3 科技 142
6.3.1 科技指紋識別UI界面設(shè)計(jì) 143
6.3.2 科技天氣預(yù)報(bào)UI界面設(shè)計(jì) 144
6.4 涼爽 146
6.4.1 涼爽顏色 147
6.4.2 涼爽干凈簡潔的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 硬朗游戲頁面中堅(jiān)硬感UI 設(shè)計(jì) 167
6.9.2 硬朗穩(wěn)定沉穩(wěn)的UI 設(shè)計(jì) 168
6.10 純凈 170
6.10.1 純凈簡約純潔的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 通過實(shí)例來了解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 開放式路徑圖標(biāo)的妙用 193
7.8 列表的設(shè)計(jì)方式 194
7.9 字體的使用 195
7.10 頁面空間的節(jié)省 196
7.11 貼近場景的顯示切換 197
7.12 歡迎頁面的設(shè)計(jì) 198
7.13 交互方式的設(shè)計(jì) 199
7.14 視覺風(fēng)格的設(shè)計(jì) 200