隨著移動(dòng)互聯(lián)網(wǎng)的迅速發(fā)展和智能手機(jī)的普及，移動(dòng)APP應(yīng)用也隨之高速發(fā)展，直接拉動(dòng)了市場(chǎng)對(duì)移動(dòng)交互設(shè)計(jì)人才的需求。
未來，市場(chǎng)上會(huì)有更多的APP應(yīng)用，這些APP應(yīng)用都需要設(shè)計(jì)師來設(shè)計(jì)，包括圖標(biāo)設(shè)計(jì)、界面設(shè)計(jì)、體驗(yàn)設(shè)計(jì)等。市場(chǎng)需要的APP應(yīng)用越多，對(duì)交互界面設(shè)計(jì)的需求自然也會(huì)越多，需要的相關(guān)設(shè)計(jì)人員也就越多。本書希望能夠幫助廣大初學(xué)者掌握移動(dòng)APP界面設(shè)計(jì)的方法和技巧，能夠真正理解APP界面設(shè)計(jì)，從而進(jìn)入APP界面設(shè)計(jì)行業(yè)，這也是作者編寫本書的目的。
內(nèi)容安排本書使用Photoshop作為工具，采用理論知識(shí)與實(shí)用案例相結(jié)合的方式，全面講解了移動(dòng)APP界面設(shè)計(jì)各個(gè)方面的知識(shí)，讓讀者在學(xué)習(xí)的過程中豐富自己的設(shè)計(jì)創(chuàng)意并提高動(dòng)手制作能力。全書共7章，每章的內(nèi)容安排如下。
第1章 移動(dòng)APP設(shè)計(jì)基礎(chǔ)。本章主要向讀者介紹了UI設(shè)計(jì)與移動(dòng)APP設(shè)計(jì)相關(guān)的理論基礎(chǔ)，包括什么是UI設(shè)計(jì)、什么是APP設(shè)計(jì)、移動(dòng)APP設(shè)計(jì)的流程和移動(dòng)設(shè)備的尺寸標(biāo)準(zhǔn)等相關(guān)內(nèi)容，使讀者對(duì)移動(dòng)APP設(shè)計(jì)有更深入的認(rèn)識(shí)。
第2章 移動(dòng)APP圖標(biāo)設(shè)計(jì)。向讀者介紹了有關(guān)APP圖標(biāo)設(shè)計(jì)的相關(guān)知識(shí)，包括擬物化圖標(biāo)與扁平化圖標(biāo)，iOS系統(tǒng)和Android系統(tǒng)圖標(biāo)的常用尺寸等，并結(jié)合案例的制作講解，使讀者掌握APP圖標(biāo)的設(shè)計(jì)方法。
第3章 移動(dòng)APP界面基本元素設(shè)計(jì)。移動(dòng)APP界面都是由各種基本圖形元素與組件構(gòu)成的，本章詳細(xì)介紹了APP界面中各種基本組件和圖形的繪制和表現(xiàn)方法。
第4章 iOS系統(tǒng)界面設(shè)計(jì)。本章詳細(xì)介紹了iOS系統(tǒng)的相關(guān)知識(shí)及iOS系統(tǒng)的UI設(shè)計(jì)規(guī)范，從而使讀者能夠設(shè)計(jì)出符合iOS系統(tǒng)要求的APP界面。本章還通過多個(gè)iOS系統(tǒng)APP界面的制作講解，使讀者掌握iOS系統(tǒng)APP界面的設(shè)計(jì)方法。
第5章 Android系統(tǒng)界面設(shè)計(jì)。本章詳細(xì)介紹了Android系統(tǒng)的相關(guān)知識(shí)及Android系統(tǒng)的UI設(shè)計(jì)規(guī)范、Android與iOS系統(tǒng)界面設(shè)計(jì)的區(qū)別等內(nèi)容，使讀者能夠清楚Android與iOS系統(tǒng)界面的異同。本章通過多個(gè)Android系統(tǒng)APP界面的制作講解，使讀者掌握Android系統(tǒng)APP界面的設(shè)計(jì)方法。
第6章 Windows Phone系統(tǒng)界面設(shè)計(jì)。本章詳細(xì)介紹了Windows Phone系統(tǒng)的相關(guān)知識(shí)及Windows Phone系統(tǒng)的UI設(shè)計(jì)規(guī)范，并且還介紹了Windwos Phone系統(tǒng)中特有的Tile（磁貼）、Pivot（樞軸視圖）和Panorama（全景視圖），使讀者對(duì)Windows Phone系統(tǒng)有全面的認(rèn)識(shí)。
第7章 APP界面設(shè)計(jì)。本章介紹了有關(guān)APP界面設(shè)計(jì)的原則、要求和技巧等內(nèi)容，并通過多個(gè)不同風(fēng)格的APP界面的設(shè)計(jì)制作講解，使讀者能夠輕松掌握APP界面的設(shè)計(jì)。
本書特點(diǎn)全書內(nèi)容豐富、條理清晰，為讀者全面、系統(tǒng)地介紹了移動(dòng)APP界面設(shè)計(jì)知識(shí)，以及使用Photoshop進(jìn)行移動(dòng)APP界面設(shè)計(jì)的方法和技巧，采用理論知識(shí)和案例相結(jié)合的方法，使知識(shí)融會(huì)貫通。
? 語言通俗易懂，精美案例圖文同步，涉及大量移動(dòng)APP界面設(shè)計(jì)的豐富知識(shí)講解，幫助讀者深入了解APP界面設(shè)計(jì)。
? 實(shí)例涉及面廣，幾乎涵蓋了移動(dòng)APP設(shè)計(jì)中所在的各個(gè)領(lǐng)域，每個(gè)領(lǐng)域下通過大量的設(shè)計(jì)講解和案例制作幫助讀者掌握領(lǐng)域中的專業(yè)知識(shí)點(diǎn)。
? 注重設(shè)計(jì)知識(shí)點(diǎn)和案例制作技巧的歸納總結(jié)，知識(shí)點(diǎn)和案例的講解過程中穿插了大量的軟件操作技巧提示等，使讀者更好地對(duì)知識(shí)點(diǎn)進(jìn)行歸納吸收。
? 每一個(gè)案例的制作過程，都配有相關(guān)視頻教程和素材，步驟詳細(xì)，使讀者輕松 掌握。
本書讀者對(duì)象本書適合有一定Photoshop軟件操作基礎(chǔ)的UI設(shè)計(jì)初學(xué)者及設(shè)計(jì)愛好者閱讀，也可以為一些UI設(shè)計(jì)人員及相關(guān)專業(yè)的學(xué)習(xí)者提供參考。本書配套的光盤中提供了本書所有案例的源文件及素材，方便讀者借鑒和使用。
本書由高鵬編寫，另外高金山、周寶平、單子娟、夏志麗、王俊萍、馮海、林學(xué)遠(yuǎn)、衣波、馮紅娟、張偉、杜秋磊、高杰、郭莉、何經(jīng)偉、董亮、金昊、李政、劉剛、盧斌、林秋、毛穎等也參與了本書的編寫。書中難免有錯(cuò)誤和疏漏之處，希望廣大讀者朋友批評(píng)、指正。
編者
機(jī)工授權(quán)書
收起全部↑
前言
第1章 移動(dòng)APP設(shè)計(jì)基礎(chǔ) 1
1.1 移動(dòng)UI設(shè)計(jì)概述 2
1.1.1 什么是UI設(shè)計(jì) 2
1.1.2 移動(dòng)UI設(shè)計(jì)的特點(diǎn) 3
1.1.3 移動(dòng)UI與網(wǎng)站UI的區(qū)別 5
1.2 了解UI設(shè)計(jì)師 7
1.2.1 研究界面—圖形設(shè)計(jì)師（Graphic UI Designer） 7
1.2.2 研究人與界面的關(guān)系—交互設(shè)計(jì)師（Interaction Designer） 7
1.2.3 研究人—用戶測(cè)試/研究工程師（User Experience Engineer） 7
1.3 了解移動(dòng)APP 7
1.3.1 什么是APP 8
1.3.2 APP視覺設(shè)計(jì)的奧秘 8
1.3.3 APP視覺效果的個(gè)性化 10
1.4 移動(dòng)APP設(shè)計(jì)流程及視覺設(shè)計(jì) 11
1.4.1 移動(dòng)APP設(shè)計(jì)流程 11
1.4.2 視覺設(shè)計(jì) 12
1.5 移動(dòng)APP設(shè)計(jì)中的色彩搭配 14
1.5.1 認(rèn)識(shí)色彩 14
1.5.2 色彩在APP界面設(shè)計(jì)中的作用 15
1.5.3 APP界面配色原則 17
1.5.4 使用Kuler配色 19
1.6 常見移動(dòng)設(shè)備尺寸標(biāo)準(zhǔn) 19
1.6.1 屏幕尺寸 19
1.6.2 屏幕分辨率 20
1.6.3 屏幕密度 21
1.7 本章小結(jié) 21
第2章 移動(dòng)APP圖標(biāo)設(shè)計(jì) 22
2.1 了解APP圖標(biāo) 23
2.1.1 什么是圖標(biāo) 23
2.1.2 圖標(biāo)設(shè)計(jì)的作用 24
2.1.3 iOS系統(tǒng)圖標(biāo)常用尺寸 26
2.1.4 Android系統(tǒng)圖標(biāo)常用尺寸 28
2.1.5 圖標(biāo)常用格式 28
2.2 擬物化圖標(biāo) 30
2.2.1 什么是擬物化圖標(biāo) 30
2.2.2 擬物化圖標(biāo)的特點(diǎn) 31
實(shí)戰(zhàn)案例——設(shè)計(jì)擬物化時(shí)鐘圖標(biāo) 32
2.3 扁平化圖標(biāo) 40
2.3.1 什么是扁平化圖標(biāo) 40
2.3.2 扁平化圖標(biāo)的特點(diǎn) 40
2.3.3 基礎(chǔ)風(fēng)格扁平化圖標(biāo) 41
實(shí)戰(zhàn)案例——設(shè)計(jì)基礎(chǔ)風(fēng)格購(gòu)物圖標(biāo) 42
2.3.4 陰影風(fēng)格扁平化圖標(biāo) 47
實(shí)戰(zhàn)案例——設(shè)計(jì)陰影風(fēng)格設(shè)置圖標(biāo) 47
2.3.5 長(zhǎng)陰影風(fēng)格扁平化圖標(biāo) 53
實(shí)戰(zhàn)案例——設(shè)計(jì)長(zhǎng)陰影風(fēng)格日期圖標(biāo) 54
2.3.6 微漸變風(fēng)格扁平化圖標(biāo) 62
實(shí)戰(zhàn)案例——設(shè)計(jì)微漸變風(fēng)格天氣圖標(biāo) 62
2.4 APP圖標(biāo)設(shè)計(jì)原則 68
2.4.1 辨識(shí)性 68
2.4.2 實(shí)用性 68
2.4.3 差異性 69
2.4.4 創(chuàng)意性 69
2.4.5 視覺性 70
2.4.6 協(xié)調(diào)性 70
實(shí)戰(zhàn)案例——設(shè)計(jì)音樂APP啟動(dòng)圖標(biāo) 70
2.5 本章小結(jié) 77
第3章 移動(dòng)APP界面基本元素設(shè)計(jì) 78
3.1 認(rèn)識(shí)APP界面基本圖形 79
3.1.1 直線 79
3.1.2 矩形 79
3.1.3 圓角矩形 80
3.1.4 圓形 80
3.1.5 其他圖形 81
實(shí)戰(zhàn)案例——設(shè)計(jì)APP登錄界面 81
3.2 按鈕設(shè)計(jì) 86
3.2.1 按鈕設(shè)計(jì)注意事項(xiàng) 86
3.2.2 游戲APP界面按鈕 87
實(shí)戰(zhàn)案例——設(shè)計(jì)游戲APP界面按鈕 87
3.3 開關(guān)與滾動(dòng)條設(shè)計(jì) 91
3.3.1 開關(guān) 91
3.3.2 滾動(dòng)條 92
實(shí)戰(zhàn)案例——設(shè)計(jì)APP設(shè)置界面 92
3.3.3 進(jìn)度條 97
實(shí)戰(zhàn)案例——設(shè)計(jì)游戲進(jìn)度條 98
3.4 搜索欄設(shè)計(jì) 102
3.4.1 了解APP界面中的搜索欄 102
3.4.2 扁平化搜索欄 103
實(shí)戰(zhàn)案例——設(shè)計(jì)APP搜索欄 103
3.5 菜單和工具欄設(shè)計(jì) 106
3.5.1 菜單的重要性 106
實(shí)戰(zhàn)案例——設(shè)計(jì)APP菜單界面 107
3.5.2 菜單的設(shè)計(jì)要點(diǎn) 111
實(shí)戰(zhàn)案例——設(shè)計(jì)彈出下拉菜單 111
3.5.3 工具欄的作用 116
實(shí)戰(zhàn)案例——設(shè)計(jì)圓形快捷工具欄 116
3.6 本章小結(jié) 122
第4章 iOS系統(tǒng)界面設(shè)計(jì) 123
4.1 iOS系統(tǒng) 124
4.1.1 iOS系統(tǒng)概述 124
4.1.2 iOS系統(tǒng)的發(fā)展 124
4.1.3 iOS系統(tǒng)的基本組件 126
4.2 iOS系統(tǒng)UI設(shè)計(jì)規(guī)范 127
4.2.1 iPhone界面尺寸 127
4.2.2 iPad界面尺寸 128
4.2.3 iOS系統(tǒng)APP布局 129
實(shí)戰(zhàn)案例——設(shè)計(jì)iOS系統(tǒng)待機(jī)界面 129
4.3 了解全新的iOS 9 135
4.3.1 iOS 8與iOS 9的區(qū)別 135
4.3.2 iOS 9的特點(diǎn) 138
4.3.3 iOS 9界面設(shè)計(jì)遵循的原則 140
實(shí)戰(zhàn)案例——設(shè)計(jì)iOS 9風(fēng)格日歷界面 141
4.4 iOS系統(tǒng)界面設(shè)計(jì)規(guī)范 146
4.4.1 iOS系統(tǒng)應(yīng)用特點(diǎn) 146
4.4.2 確保在iPhone和iPad上通用 146
4.4.3 重新考慮基于Web的設(shè)計(jì) 147
實(shí)戰(zhàn)案例——設(shè)計(jì)iOS系統(tǒng)主界面 147
4.5 如何設(shè)計(jì)出色的iOS系統(tǒng)應(yīng)用界面 154
4.5.1 內(nèi)容決定設(shè)計(jì) 154
4.5.2 保證清晰的視覺效果 155
4.5.3 使用深度層次進(jìn)行交流 156
實(shí)戰(zhàn)案例——設(shè)計(jì)iOS系統(tǒng)天氣界面 158
實(shí)戰(zhàn)案例——設(shè)計(jì)iOS系統(tǒng)通話界面 162
4.6 iOS系統(tǒng)界面的設(shè)計(jì)原則 166
4.6.1 美觀性 167
4.6.2 一致性 167
4.6.3 操作便捷 168
4.6.4 及時(shí)反饋 168
4.6.5 暗喻 169
4.6.6 用戶控制 170
實(shí)戰(zhàn)案例——設(shè)計(jì)iOS系統(tǒng)音樂播放界面 170
4.7 本章小結(jié) 176
第5章 Android系統(tǒng)界面設(shè)計(jì) 177
5.1 了解Android系統(tǒng) 178
5.1.1 Android系統(tǒng)概述 178
5.1.2 Android系統(tǒng)的發(fā)展 178
5.1.3 Android系統(tǒng)的基本組件 179
5.1.4 了解深度定制Android系統(tǒng) 179
5.2 Android系統(tǒng)UI設(shè)計(jì)規(guī)范 181
5.2.1 Android系統(tǒng)的設(shè)計(jì)尺寸 181
5.2.2 字體的使用標(biāo)準(zhǔn) 182
5.2.3 色彩的應(yīng)用標(biāo)準(zhǔn) 184
實(shí)戰(zhàn)案例——設(shè)計(jì)Android系統(tǒng)鎖屏界面 188
5.3 了解全新的Android L系統(tǒng) 192
5.3.1 全新的UI設(shè)計(jì)風(fēng)格 192
5.3.2 優(yōu)化用戶體驗(yàn) 193
5.3.3 增強(qiáng)的通知中心 194
5.3.4 增強(qiáng)的多任務(wù)功能 194
5.3.5 性能升級(jí) 194
5.3.6 增強(qiáng)電池續(xù)航能力 194
實(shí)戰(zhàn)案例——設(shè)計(jì)Android L風(fēng)格手機(jī)主界面 194
5.4 認(rèn)識(shí)Android系統(tǒng)APP布局 202
5.4.1 Android系統(tǒng)APP布局 202
5.4.2 Android與iOS系統(tǒng)界面設(shè)計(jì)區(qū)別 203
實(shí)戰(zhàn)案例——設(shè)計(jì)Android系統(tǒng)待機(jī)界面 206
5.5 Android系統(tǒng)界面的特點(diǎn) 211
5.5.1 簡(jiǎn)約大方 212
5.5.2 操作便捷 212
5.5.3 通用性強(qiáng) 212
5.5.4 布局合理 213
實(shí)戰(zhàn)案例——設(shè)計(jì)Android系統(tǒng)主界面 213
5.6 Android系統(tǒng)的設(shè)計(jì)原則 218
5.6.1 美觀大方的界面 218
5.6.2 使用戶操作更加簡(jiǎn)單 219
5.6.3 完善的操作流程 222
實(shí)戰(zhàn)案例——設(shè)計(jì)Android系統(tǒng)音樂APP界面 223
5.7 本章小結(jié) 233
第6章 Windows Phone系統(tǒng)界面設(shè)計(jì) 234
6.1 了解Windows Phone系統(tǒng) 235
6.1.1 Windows Phone系統(tǒng)概述 235
6.1.2 Windows Phone系統(tǒng)的發(fā)展 236
6.1.3 Windows Phone系統(tǒng)的特點(diǎn) 237
6.1.4 Windows Phone系統(tǒng)的基本組件 239
實(shí)戰(zhàn)案例——設(shè)計(jì)Windows Phone系統(tǒng)待機(jī)界面 239
6.2 認(rèn)識(shí)Windows Phone手機(jī)UI界面 243
6.2.1 Windows Phone 7手機(jī)界面 244
6.2.2 Windows Phone 8手機(jī)界面 245
6.2.3 Windows Phone 8系統(tǒng)的新功能 246
6.2.4 Windows Phone界面的設(shè)計(jì)理念 247
實(shí)戰(zhàn)案例——設(shè)計(jì)Windows Phone系統(tǒng)主界面 249
6.3 Windows Phone系統(tǒng)UI設(shè)計(jì)規(guī)范 254
6.3.1 Windows Phone系統(tǒng)手機(jī)屏幕尺寸 254
6.3.2 主界面 254
6.3.3 狀態(tài)欄 255
6.3.4 應(yīng)用程序欄 256
6.3.5 圖標(biāo) 256
6.3.6 屏幕方向 257
6.3.7 字體 257
6.3.8 推送通知 258
實(shí)戰(zhàn)案例——設(shè)計(jì)Windows Phone系統(tǒng)音樂播放界面 259
6.4 Tile（磁貼）與Pivot（樞軸視圖）設(shè)計(jì) 264
6.4.1 Tile（磁貼）簡(jiǎn)介 264
6.4.2 Tile（磁貼）的類型 265
6.4.3 Tile（磁貼）的大小 266
6.4.4 Pivot（樞軸視圖）簡(jiǎn)介 266
實(shí)戰(zhàn)案例——設(shè)計(jì)Windows Phone平板界面 267
6.5 獨(dú)特的Panorama（全景視圖） 273
6.5.1 Panorama（全景視圖）簡(jiǎn)介 273
6.5.2 全景視圖設(shè)計(jì)注意事項(xiàng) 274
實(shí)戰(zhàn)案例——設(shè)計(jì)全景視圖界面 275
實(shí)戰(zhàn)案例——設(shè)計(jì)桌球手機(jī)游戲界面 283
6.6 本章小結(jié) 291
第7章 APP界面設(shè)計(jì) 292
7.1 常見的APP應(yīng)用類型 293
7.1.1 實(shí)用功能類APP應(yīng)用 293
7.1.2 社交類APP應(yīng)用 293
7.1.3 娛樂、游戲類APP應(yīng)用 294
7.2 APP界面設(shè)計(jì)視覺效果 294
7.2.1 簡(jiǎn)潔型的APP界面 294
7.2.2 趣味與個(gè)性的APP界面 295
7.2.3 華麗的APP界面 295
實(shí)戰(zhàn)案例——設(shè)計(jì)iPad影視APP界面 296
7.3 APP引導(dǎo)界面 303
7.3.1 功能介紹類 304
7.3.2 使用說明類 304
7.3.3 推廣類 304
7.3.4 問題解決類 305
實(shí)戰(zhàn)案例——設(shè)計(jì)APP引導(dǎo)界面 305
7.4 APP界面設(shè)計(jì)要求 311
7.4.1 APP界面的特點(diǎn) 311
7.4.2 APP界面的設(shè)計(jì)流程 312
7.4.3 APP界面的色彩搭配 313
7.4.4 平板電腦界面的特點(diǎn) 314
實(shí)戰(zhàn)案例——設(shè)計(jì)音樂APP界面 314
實(shí)戰(zhàn)案例——設(shè)計(jì)iPad游戲登錄界面 322
7.5 APP界面設(shè)計(jì)原則 331
7.5.1 實(shí)用性 331
7.5.2 統(tǒng)一的色彩與風(fēng)格 331
7.5.3 合理的配色 332
7.5.4 規(guī)范的操作流程 332
7.5.5 視覺元素規(guī)范 332
實(shí)戰(zhàn)案例——設(shè)計(jì)購(gòu)物APP界面 333
7.6 APP界面設(shè)計(jì)注意事項(xiàng) 340
7.6.1 APP界面視覺設(shè)計(jì) 341
7.6.2 APP界面設(shè)計(jì)的用戶體驗(yàn) 341
實(shí)戰(zhàn)案例——設(shè)計(jì)照片分享APP界面 342
7.7 本章小結(jié) 351
新書資訊