APP UI設計手冊

APP UI設計手冊

作者：孫芳
　　定價：69.80元
印次：1-1
ISBN：9787302501701
出版日期：2018.07.01
印刷日期：2018.06.28

《APP UI 設計手冊》是一本全面介紹APP UI 設計的圖書，其突出特點是知識易懂、案例趣味、動手實踐、發散思維。《APP UI 設計手冊》從學習APP UI 設計的基礎知識入手，由淺入深地為讀者呈現一個個精彩實用的知識、技巧。本書共分7 章，內容分別為APP UI 設計的原理、APP UI 設計的基礎知識、APP UI 設計的基礎色、APP UI 設計的元素、APP UI 設計的行業分類、APP UI 設計的風格、APP UI 設計秘籍。同時，在本書第4～6 章的每章節後面還特意安排了大型的“設計實例”，為讀者詳細分析一個完整的綜合設計思路。並且在多個章節中安排了案例解析、設計技巧、配色方案、設計欣賞、設計秘籍等經典模組，豐富本書結構的同時，也增強了實用性。

目錄

第1章APPUI設計的原理

1.1APPUI設計的概念2

1.2APPUI與用戶體驗2

1.3APPUI設計的點、線、面3

1.3.1點3

1.3.2線4

1.3.3面4

1.4尺寸與規則5

1.4.1IOS5

1.4.2Android6

1.5APPUI設計的原則7

1.5.1突出性原則7

1.5.2商業性原則7

1.5.3趣味性原則8

1.5.4藝術性原則8

1.6APPUI設計的法則9

1.6.1形式美法則9

1.6.2平衡法則9

1.6.3視覺法則10

1.6.4聯想法則10

1.6.5直接展示法則10

第2章APPUI設計的基礎知識

2.1UI與色彩12

2.1.1色相、明度、純度13

2.1.2主色、輔助色、點綴色13

2.1.3鄰近色、對比色15

2.2APPUI設計的布局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章APPUI設計的基礎色

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灰玫紅&優品紫紅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.410%亮灰&50%灰58

3.8.580%炭灰&黑58

第4章APPUI設計的元素

4.1標誌60

4.1.1簡約素雅的標誌設計61

4.1.2趣味多彩的標誌設計62

4.1.3標誌設計技巧——

圖文結合的設計方法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單一色調的色彩設計70

4.3.3色彩設計技巧——統計圖的套用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導航欄設計技巧——適用螢幕旋轉的設計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設計實戰：社交軟體用戶信息界面設計88

4.8.1設計思路88

4.8.2配色方案88

4.8.3版面構圖90

4.8.4色彩90

4.8.5字型91

4.8.6導航欄91

第5章APPUI設計的行業分類

5.1遊戲類APPUI設計93

5.1.1遊戲類APPUI設計——休閒類遊戲94

5.1.2遊戲類APPUI設計——動作冒險類遊戲95

5.2社交類APPUI設計97

5.2.1社交類APPUI設計——電話簡訊98

5.2.2社交類APPUI設計——聊天交友99

5.3購物類APPUI設計101

5.3.1購物類APPUI設計——服裝類102

5.3.2購物類APPUI設計——產品類103

5.4工具類APPUI設計105

5.4.1工具類APPUI設計——地圖導航106

5.4.2工具類APPUI設計——天氣預報107

5.5生活類APPUI設計109

5.5.1生活類APPUI設計——旅遊110

5.5.2生活類APPUI設計——外賣111

5.6娛樂類APPUI設計113

5.6.1娛樂類APPUI設計——音樂播放器114

5.6.2娛樂類APPUI設計——視頻播放器115

5.7閱讀類APPUI設計117

5.7.1閱讀類APPUI設計——小說閱讀器118

5.7.2閱讀類APPUI設計——漫畫閱讀器119

5.8拍攝美化類APPUI設計121

5.8.1拍攝美化類APPUI設計——相機122

5.8.2拍攝美化類APPUI設計——美化圖片123

5.9新聞類APPUI設計125

5.9.1新聞類APPUI設計——新聞資訊126

5.9.2新聞類APPUI設計——報紙雜誌127

5.10設計實戰：辦公類APPUI設計流程詳解129

5.10.1設計思路129

5.10.2配色方案129

5.10.3版面構圖130

5.10.4首頁131

5.10.5收件箱132

5.10.6編寫郵件132

第6章APPUI設計的風格

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硬朗——穩定沉穩的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復古——使用傳統物品進行UI圖示設計176

6.12扁平化與擬物化178

6.12.1扁平化風格179

6.12.2擬物化風格180

6.13設計實戰：手機遊戲啟動界面設計182

6.13.1設計思路182

6.13.2配色方案182

6.13.3版面構圖184

6.13.4涼爽184

6.13.5硬朗185

6.13.6清新185

第7章APPUI設計秘籍

7.1UI設計中的版式布局187

7.2通過實例來了解UI界面188

7.3顏色的合理搭配189

7.4圖示的物理尺寸與實際尺寸190

7.5常用的集中設計尺寸191

7.6MBE風格的設計192

7.7開放式路徑圖示的妙用193

7.8列表的設計方式194

7.9字型的使用195

7.10頁面空間的節省196

7.11貼近場景的顯示切換197

7.12歡迎頁面的設計198

7.13互動方式的設計199

7.14視覺風格的設計200