內(nèi)容簡(jiǎn)介

《APP UI 設(shè)計(jì)手冊(cè)》是一本全面介紹APP UI 設(shè)計(jì)的圖書，其突出特點(diǎn)是知識(shí)易懂、案例趣味、動(dòng)手實(shí)踐、發(fā)散思維。

《APP UI 設(shè)計(jì)手冊(cè)》從學(xué)習(xí)APP UI 設(shè)計(jì)的基礎(chǔ)知識(shí)入手，由淺入深地為讀者呈現(xiàn)一個(gè)個(gè)精彩實(shí)用的知識(shí)、技巧。本書共分7 章，內(nèi)容分別為APP UI 設(shè)計(jì)的原理、APP UI 設(shè)計(jì)的基礎(chǔ)知識(shí)、APP UI 設(shè)計(jì)的基礎(chǔ)色、APP UI 設(shè)計(jì)的元素、APP UI 設(shè)計(jì)的行業(yè)分類、APP UI 設(shè)計(jì)的風(fēng)格、APP UI 設(shè)計(jì)秘籍。同時(shí)，在本書第4～6 章的每章節(jié)后面還特意安排了大型的“設(shè)計(jì)實(shí)例”，為讀者詳細(xì)分析一個(gè)完整的綜合設(shè)計(jì)思路。并且在多個(gè)章節(jié)中安排了案例解析、設(shè)計(jì)技巧、配色方案、設(shè)計(jì)欣賞、設(shè)計(jì)秘籍等經(jīng)典模塊，豐富本書結(jié)構(gòu)的同時(shí)，也增強(qiáng)了實(shí)用性。

《APP UI 設(shè)計(jì)手冊(cè)》內(nèi)容豐富、案例精彩、版式設(shè)計(jì)新穎，適合APP UI 設(shè)計(jì)師、平面設(shè)計(jì)師、廣告設(shè)計(jì)師、網(wǎng)頁(yè)設(shè)計(jì)師、初級(jí)讀者學(xué)習(xí)使用，也可以作為大中專院校平面設(shè)計(jì)專業(yè)及平面設(shè)計(jì)培訓(xùn)機(jī)構(gòu)的教材。此外，還非常適合喜愛平面設(shè)計(jì)和APP UI 設(shè)計(jì)的讀者參考使用。

 

前言

本書是筆者對(duì)從事APP UI 設(shè)計(jì)工作多年的一個(gè)總結(jié)，是讓讀者少走彎路尋找設(shè)計(jì)捷徑的實(shí)用手冊(cè)。書中包含了APP UI 設(shè)計(jì)必學(xué)的基礎(chǔ)知識(shí)及經(jīng)典技巧。本書不僅有理論和精彩的案例賞析，還有大量的模塊啟發(fā)你的大腦，鍛煉你的設(shè)計(jì)能力。

希望讀者看完本書后，不只會(huì)說：“我看完了，挺好的，作品好看，分析也挺好的。”這不是筆者編寫本書的目的。我們希望讀者會(huì)說：“本書給我更多的是思路的啟發(fā)，讓我的思維更開闊，學(xué)會(huì)了設(shè)計(jì)的舉一反三，知識(shí)通過吸收消化變成自己的。”這是筆者編寫本書的初衷。

本書共分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 種不同的視覺印象。

第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è)的圖書供讀者選擇閱讀。

本書希望通過對(duì)知識(shí)的歸納總結(jié)、趣味的模塊講解，開闊讀者的思路，避免一味地照搬書本內(nèi)容，推動(dòng)讀者多做嘗試、多理解，增加動(dòng)腦、動(dòng)手的能力。希望通過本書能激發(fā)讀者的學(xué)習(xí)興趣，開啟設(shè)計(jì)的大門，幫助您邁出第一步，圓您一個(gè)設(shè)計(jì)師的夢(mèng)！

本書由孫芳編著，其他參與本書編寫的人員還有柳美余、蘇晴、鄭鵲、李木子、矯雪、胡娟、馬鑫銘、王萍、董輔川、楊建超、馬嘯、孫雅娜、李路、于燕香、孫芳、丁仁雯、張建霞、馬揚(yáng)、王鐵成、崔英迪、高歌。

由于編者水平有限，書中難免存在錯(cuò)誤和不妥之處，敬請(qǐng)廣大讀者批評(píng)和指正。

編　者

目錄

第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ǔ)知識(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 愛麗絲藍(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 娛樂類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 首頁(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 清新——形象可愛的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 通過實(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 頁(yè)面空間的節(jié)省      196

7.11 貼近場(chǎng)景的顯示切換  197

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

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

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