APP UI設(shè)計(jì)手冊(cè)

目錄
第1 章 APP UI 設(shè)計(jì)的原理
1.1 APP UI 設(shè)計(jì)的概念 2
1.2 APP UI 與用戶(hù)體驗(yàn) 2
1.3 APP UI 設(shè)計(jì)的點(diǎn)、線(xiàn)、面 3
1.3.1 點(diǎn) 3
1.3.2 線(xiàn) 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ì)稱(chēng)式 16
2.2.2 曲線(xiàn)式 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 黃綠& 蘋(píng)果綠 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 矢車(chē)菊藍(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 淺灰紫& 江戶(hù)紫 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)：社交軟件用戶(hù)信息界面設(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è)分類(lèi)
5.1 游戲類(lèi)APP UI 設(shè)計(jì) 93
5.1.1 游戲類(lèi)APP UI 設(shè)計(jì)——休閑類(lèi)游戲 94
5.1.2 游戲類(lèi)APP UI 設(shè)計(jì)——?jiǎng)幼髅半U(xiǎn)類(lèi)游戲 95
5.2 社交類(lèi)APP UI 設(shè)計(jì) 97
5.2.1 社交類(lèi)APP UI 設(shè)計(jì)——電話(huà)短信 98
5.2.2 社交類(lèi)APP UI 設(shè)計(jì)——聊天交友 99
5.3 購(gòu)物類(lèi)APP UI 設(shè)計(jì) 101
5.3.1 購(gòu)物類(lèi)APP UI 設(shè)計(jì)——服裝類(lèi) 102
5.3.2 購(gòu)物類(lèi)APP UI 設(shè)計(jì)——產(chǎn)品類(lèi) 103
5.4 工具類(lèi)APP UI 設(shè)計(jì) 105
5.4.1 工具類(lèi)APP UI 設(shè)計(jì)——地圖導(dǎo)航 106
5.4.2 工具類(lèi)APP UI 設(shè)計(jì)——天氣預(yù)報(bào) 107
5.5 生活類(lèi)APP UI 設(shè)計(jì) 109
5.5.1 生活類(lèi)APP UI 設(shè)計(jì)——旅游 110
5.5.2 生活類(lèi)APP UI 設(shè)計(jì)——外賣(mài) 111
5.6 娛樂(lè)類(lèi)APP UI 設(shè)計(jì) 113
5.6.1 娛樂(lè)類(lèi)APP UI 設(shè)計(jì)——音樂(lè)播放器 114
5.6.2 娛樂(lè)類(lèi)APP UI 設(shè)計(jì)——視頻播放器 115
5.7 閱讀類(lèi)APP UI 設(shè)計(jì) 117
5.7.1 閱讀類(lèi)APP UI 設(shè)計(jì)——小說(shuō)閱讀器 118
5.7.2 閱讀類(lèi)APP UI 設(shè)計(jì)——漫畫(huà)閱讀器 119
5.8 拍攝美化類(lèi)APP UI 設(shè)計(jì) 121
5.8.1 拍攝美化類(lèi)APP UI 設(shè)計(jì)——相機(jī) 122
5.8.2 拍攝美化類(lèi)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)：辦公類(lèi)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 編寫(xiě)郵件 132
第6 章 APP UI 設(shè)計(jì)的風(fēng)格
...
第7 章 APP UI 設(shè)計(jì)秘籍
...