這是一本系統(tǒng)介紹移動(dòng)設(shè)計(jì)知識(shí)的書籍， 全書分為上下兩篇。
上篇為術(shù)之篇，主要講解了移動(dòng)應(yīng)用設(shè)計(jì)相關(guān)的基礎(chǔ)知識(shí)。通過基礎(chǔ)知識(shí)的學(xué)習(xí)，使大家了解手機(jī)屏幕顯示的原理及各種手機(jī)硬件的傳感器使用方法。通過講解基本的設(shè)計(jì)規(guī)范及圖標(biāo)設(shè)計(jì)方法，使讀者初步掌握移動(dòng)應(yīng)用設(shè)計(jì)知識(shí)。
下篇為道之篇，是進(jìn)階應(yīng)用設(shè)計(jì)知識(shí)，詳細(xì)講解了從如何組建設(shè)計(jì)規(guī)范，到各種組件的功能介紹及應(yīng)用設(shè)計(jì)方法，使讀者完整掌握移動(dòng)應(yīng)用的設(shè)計(jì)方法和流程。本書通過大量的案例演示，使讀者可以靈活運(yùn)用設(shè)計(jì)方法理論。
本書適合想要從事和已經(jīng)從事UI設(shè)計(jì)行業(yè)相關(guān)工作的讀者學(xué)習(xí)使用，也可以作為高校平面設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)等相關(guān)專業(yè)和相關(guān)培訓(xùn)機(jī)構(gòu)的教學(xué)參考書。
作者簡(jiǎn)介
余振華是站酷最早一批推薦設(shè)計(jì)師、十余年GUI、WUI設(shè)計(jì)從業(yè)經(jīng)歷。國(guó)內(nèi)專業(yè)網(wǎng)站發(fā)表過多篇設(shè)計(jì)研究文章。多年設(shè)計(jì)團(tuán)隊(duì)管理經(jīng)歷，負(fù)責(zé)過流量千萬級(jí)的電商網(wǎng)站，以及下載量?jī)|級(jí)應(yīng)用的無線設(shè)計(jì)團(tuán)隊(duì)管理。目前正積極探索視覺設(shè)計(jì)在工作流程中的職能和方法，整理和實(shí)施視覺設(shè)計(jì)的相關(guān)設(shè)計(jì)規(guī)范和標(biāo)準(zhǔn)，指導(dǎo)更多的設(shè)計(jì)師成長(zhǎng) 。
目錄：
術(shù)之篇
01 基礎(chǔ)知識(shí)
1.1 什么是UI設(shè)計(jì) / 20
1.1.1 UI的相關(guān)概念 / 20
1.1.2 UI的學(xué)習(xí)方法 / 22
1.2 什么是App / 25
1.2.1 App的概念 / 25
1.2.2 App的開發(fā)流程 / 25
1.3 智能手機(jī)的屏幕 / 26
1.3.1 英寸（Inch） / 27
1.3.2 像素（Pixel） / 27
1.3.3 分辨率（Resolution） / 28
1.4 網(wǎng)點(diǎn)密度與像素密度 / 28
1.4.1 網(wǎng)點(diǎn)密度（DPI） / 28
1.4.2 像素密度（PPI） / 29
1.4.3 DPI與PPI / 29
1.4.4 邏輯分辨率與像素倍率 / 30
1.4.5 視網(wǎng)膜屏幕 / 30
1.5 常見手機(jī)屏幕規(guī)格 / 31
1.5.1 熱門手機(jī)規(guī)格 / 31
1.5.2 熱門手機(jī)分辨率 / 33
1.6 iPhone 6 Plus的屏幕 / 34
1.7 智能手機(jī)的傳感器 / 37
1.7.1 攝像頭 / 37
1.7.2 麥克風(fēng) / 38
1.7.3 GPS / 38
1.7.4 電子羅盤 / 39
1.7.5 重力感應(yīng)器 / 39
1.7.6 加速度傳感器 / 40
1.7.7 光線傳感器 / 41
1.7.8 距離傳感器 / 41
1.7.9 氣壓傳感器 / 42
1.7.10 三軸陀螺儀 / 43
02 設(shè)計(jì)風(fēng)格
2.1 風(fēng)格 / 46
2.1.1 什么是設(shè)計(jì)風(fēng)格 / 46
2.1.2 如何確立設(shè)計(jì)風(fēng)格 / 47
2.2 顏色 / 50
2.2.1 認(rèn)識(shí)色彩 / 50
2.2.2 RGB與HSB / 50
2.2.3 顏色搭配基礎(chǔ) / 52
2.3 如何選擇顏色 / 53
2.3.1 常見App的顏色 / 53
2.3.2 顏色的性格 / 55
2.4 字體 / 61
2.4.1 襯線體和無襯線體 / 61
2.4.2 系統(tǒng)內(nèi)置字體 / 62
2.4.3 什么時(shí)候選擇內(nèi)嵌字體 / 62
2.4.4 如何使用內(nèi)嵌字體 / 63
03 圖標(biāo)與圖片
3.1 App圖標(biāo)特點(diǎn) / 66
3.1.1 獨(dú)特的圖形 / 66
3.1.2 表意準(zhǔn)確 / 67
3.1.3 謹(jǐn)慎用色 / 67
3.1.4 避免使用大量文字 / 68
3.1.5 避免使用照片 / 68
3.1.6 適應(yīng)不同場(chǎng)景 / 69
3.2 App圖標(biāo)設(shè)計(jì)流程 / 69
3.2.1 第一步：尋找隱喻 / 69
3.2.2 第二步：抽象圖形 / 70
3.2.3 第三步：競(jìng)品分析 / 71
3.2.4 第四步：確定風(fēng)格 / 71
3.2.5 第五步：調(diào)整細(xì)節(jié) / 72
3.2.6 第六步：場(chǎng)景測(cè)試 / 73
3.3 App圖標(biāo)設(shè)計(jì)方法 / 74
3.3.1 正負(fù)形組合 / 74
3.3.2 折疊圖形 / 75
3.3.3 局部提取 / 75
3.3.4 線性圖標(biāo) / 75
3.3.5 透明漸變 / 76
3.3.6 色塊拼接 / 76
3.3.7 圖形復(fù)用 / 76
3.3.8 背景組合 / 77
3.4 iOS圖標(biāo)規(guī)范 / 77
3.4.1 iOS圖標(biāo)適配 / 77
3.4.2 iOS圖標(biāo)標(biāo)準(zhǔn) / 78
3.5 Android圖標(biāo)規(guī)范 / 79
3.5.1 Android圖標(biāo)適配 / 79
3.5.2 圖標(biāo)的視覺統(tǒng)一 / 80
3.5.3 Android圖標(biāo)標(biāo)準(zhǔn) / 81
3.6 設(shè)計(jì)線性圖標(biāo) / 83
3.6.1 線性圖標(biāo)的風(fēng)格 / 83
3.6.2 線性圖標(biāo)的繪制方法 / 84
3.7 像素對(duì)齊 / 87
3.7.1 像素為什么要對(duì)齊 / 87
3.7.2 像素如何對(duì)齊 / 88
3.7.3 像素縮放的對(duì)齊 / 89
3.7.4 像素對(duì)齊的微調(diào) / 89
3.8 圖片的使用 / 89
3.8.1 矢量圖與位圖 / 89
3.8.2 圖片的格式 / 90
3.8.3 圖片的使用 / 91
3.8.4 圖片的存儲(chǔ) / 92
3.8.5 圖片的比例 / 92
04 iOS系統(tǒng)界面
4.1 欄 / 94
4.1.1 狀態(tài)欄 / 94
4.1.2 導(dǎo)航欄 / 94
4.1.3 標(biāo)簽欄 / 95
4.1.4 工具欄 / 96
4.2 內(nèi)容視圖 / 97
4.2.1 表格視圖 / 97
4.2.2 文本視圖 / 99
4.2.3 Web視圖 / 99
4.3 臨時(shí)視圖 / 100
4.3.1 對(duì)話框 / 100
4.3.2 操作列表 / 100
05 Android系統(tǒng)界面
5.1 導(dǎo)航機(jī)制 / 102
5.1.1 硬件特性 / 102
5.1.2 iOS導(dǎo)航機(jī)制 / 102
5.1.3 Android導(dǎo)航機(jī)制 / 103
5.2 界面布局 / 105
5.2.1 結(jié)構(gòu)差異 / 105
5.2.2 操作欄 / 106
5.2.3 多任務(wù) / 107
5.3 消息推送 / 108
5.3.1 推送方式 / 108
5.3.2 通知方式 / 109
5.4 操作方式 / 110
5.4.1 編輯 / 110
5.4.2 選擇 / 111
5.4.3 復(fù)制粘貼 / 112
5.4.4 刪除 / 113
5.5 Android系統(tǒng)的插件 / 114
5.5.1 桌面插件 / 114
5.5.2 設(shè)計(jì)趨勢(shì) / 114
道之篇
06 建立規(guī)范
6.1 組建規(guī)范 / 116
6.1.1 設(shè)計(jì)規(guī)范的目的 / 116
6.1.2 規(guī)范的組成 / 116
6.2 顏色規(guī)范 / 119
6.2.1 為什么選擇HSB / 119
6.2.2 創(chuàng)建調(diào)色板 / 120
6.2.3 調(diào)色板應(yīng)用 / 121
6.3 文字規(guī)范 / 123
6.3.1 iOS系統(tǒng) / 123
6.3.2 Android系統(tǒng) / 123
6.3.3 系統(tǒng)字號(hào) / 123
6.4 布局 / 125
6.4.1 框架 / 125
6.4.2 頂部導(dǎo)航欄 / 126
6.4.3 頂部標(biāo)簽欄 / 126
6.4.4 底部標(biāo)簽欄 / 127
6.5 圖片規(guī)范 / 127
6.5.1 用戶頭像 / 127
6.5.2 商品圖片 / 129
6.5.3 無數(shù)據(jù)圖片 / 129
07 設(shè)計(jì)組件
7.1 控制元素 / 132
7.1.1 活動(dòng)指示器 / 132
7.1.2 進(jìn)度指示器 / 132
7.1.3 頁(yè)碼控制器 / 134
7.1.4 刷新控件 / 134
7.1.5 滑動(dòng)器 / 137
7.1.6 開關(guān) / 137
7.1.7 步進(jìn)器 / 137
7.2 篩選器 / 138
7.2.1 選擇器 / 138
7.2.2 日期時(shí)間選擇器 / 138
7.2.3 分段控件 / 139
7.2.4 選項(xiàng)卡 / 139
7.2.5 排序 / 140
7.2.6 地區(qū)選擇 / 140
7.3 表單控件 / 141
7.3.1 單選框 / 141
7.3.2 復(fù)選框 / 142
7.3.3 文本框 / 142
7.3.4 下拉框 / 143
7.3.5 表格 / 144
7.4 按鈕規(guī)范 / 144
7.4.1 背景+文字 / 144
7.4.2 背景+圖標(biāo) / 145
7.4.3 圖標(biāo)+文字 / 146
7.4.4 文字 / 146
7.5 其他組件 / 147
7.5.1 加載更多 / 147
7.5.2 非模態(tài)浮層 / 147
7.5.3 模態(tài)浮層 / 148
08 導(dǎo)航設(shè)計(jì)
8.1 扁平導(dǎo)航 / 150
8.1.1 標(biāo)簽導(dǎo)航 / 150
8.1.2 舵式導(dǎo)航 / 151
8.1.3 宮格式導(dǎo)航 / 152
8.2 內(nèi)容主導(dǎo)式導(dǎo)航 / 153
8.2.1 陳列式導(dǎo)航 / 153
8.2.2 旋轉(zhuǎn)木馬式導(dǎo)航 / 154
8.3 列表式導(dǎo)航 / 155
8.3.1 列表式 / 155
8.3.2 抽屜式 / 156
8.4 其他導(dǎo)航 / 157
8.4.1 點(diǎn)聚式導(dǎo)航 / 157
8.4.2 瀑布式導(dǎo)航 / 158
09 界面設(shè)計(jì)
9.1 首頁(yè) / 160
9.1.1 搜索欄 / 160
9.1.2 標(biāo)簽欄 / 161
9.1.3 卡片式設(shè)計(jì) / 161
9.1.4 樓層設(shè)計(jì) / 162
9.2 列表頁(yè) / 163
9.2.1 消息列表 / 163
9.2.2 橫向卡片 / 163
9.2.3 瀑布流 / 164
9.3 詳情頁(yè) / 165
9.3.1 全局按鈕 / 165
9.3.2 快速通道 / 166
9.4 個(gè)人中心 167
9.4.1 頭像區(qū)域 / 167
9.4.2 個(gè)人信息 / 168
9.4.3 功能模塊 / 169
9.5 啟動(dòng)頁(yè) / 170
9.5.1 品牌宣傳類 / 170
9.5.2 首頁(yè)樣式類 / 171
9.5.3 情感故事類 / 172
9.5.4 節(jié)日氛圍類 / 173
9.6 引導(dǎo)頁(yè) / 173
9.6.1 功能介紹類 / 173
9.6.2 使用說明類 / 176
9.6.3 情感故事類 / 177
10 設(shè)計(jì)適配
10.1 iOS系統(tǒng)適配 / 180
10.1.1 設(shè)計(jì)基準(zhǔn) / 180
10.1.2 設(shè)計(jì)適配 / 181
10.1.3 適配規(guī)則 / 182
10.2 Android系統(tǒng)適配 / 183
10.2.1 密度獨(dú)立像素 / 183
10.2.2 設(shè)計(jì)基準(zhǔn) / 184
10.2.3 適配方法 / 185
10.3 iOS系統(tǒng)適配Android系統(tǒng) / 185
10.3.1 設(shè)計(jì)目的 / 185
10.3.2 換算關(guān)系 / 185
10.3.3 適配方法 / 186
10.4標(biāo)注設(shè)計(jì) / 186
10.4.1 標(biāo)注基準(zhǔn) / 187
10.4.2 標(biāo)注方法 / 187
10.5 點(diǎn)九圖 / 189
10.5.1 什么是點(diǎn)九圖 / 189
10.5.2 如何制作點(diǎn)九圖 / 191
10.6 切圖 / 191
10.6.1 界面切圖 / 191
10.6.2 圖標(biāo)切圖 / 192
10.6.3 命名規(guī)則 / 192
11 手勢(shì)應(yīng)用
11.1 為什么使用手勢(shì) / 194
11.2 常用手勢(shì)操作 / 195
11.2.1 單擊 / 195
11.2.2 雙擊 / 195
11.2.3 上下滑動(dòng) / 196
11.2.4 左右滑動(dòng) / 196
11.2.5 拖曳 / 197
11.2.6 張開 / 閉合 / 197
11.2.7 長(zhǎng)按 / 198
11.2.8 搖晃 / 198
11.3 手勢(shì)設(shè)計(jì)禁忌 / 199
11.3.1 使用標(biāo)準(zhǔn)手勢(shì) / 199
11.3.2 定義標(biāo)準(zhǔn)手勢(shì) / 199
11.3.3 使用簡(jiǎn)單手勢(shì) / 199
11.3.4 手勢(shì)使用說明 / 199
12 設(shè)計(jì)資源
12.1 網(wǎng)站資源 / 201
12.2 圖標(biāo)資源 / 202
12.3 圖片資源 / 203
參考文獻(xiàn) / 204
|
