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