本書通過(guò)案例的方式介紹了如何使用Photoshop進(jìn)行移動(dòng)UI設(shè)計(jì),全書分為5章,每章都包括豐富的移動(dòng)UI設(shè)計(jì)知識(shí)和詳細(xì)的設(shè)計(jì)制作講解,包括初入移動(dòng)UI設(shè)計(jì)的世界、你所不知道的移動(dòng)UI特性和界面導(dǎo)航設(shè)計(jì)、Photoshop和移動(dòng)UI的那些事兒、現(xiàn)在就開始移動(dòng)手機(jī)之旅和超人氣平板界面是這樣煉成的等內(nèi)容,使讀者由淺入深,逐步了解使用Photoshop進(jìn)行移動(dòng)UI界面設(shè)計(jì)的整體思路和制作過(guò)程。以一個(gè)逐漸深化的方式為用戶呈現(xiàn)設(shè)計(jì)中的重點(diǎn)門類和制作方法,使讀者全面且深入地掌握各種類別移動(dòng)界面設(shè)計(jì)案例。
本書內(nèi)容專業(yè)簡(jiǎn)練,操作案例精美實(shí)用、講解詳盡,適合UI設(shè)計(jì)愛(ài)好者與設(shè)計(jì)專業(yè)的大中專學(xué)生閱讀使用。隨書附贈(zèng)教學(xué)資源,包括書中所有案例的教學(xué)視頻、素材和源文件,用于補(bǔ)充書中遺漏的細(xì)節(jié)內(nèi)容,方便讀者學(xué)習(xí)和參考。
Art Eyes設(shè)計(jì)工作室的團(tuán)隊(duì)成員都是設(shè)計(jì)界和軟件行業(yè)的精英,有著超前的設(shè)計(jì)理念和豐富的行業(yè)經(jīng)驗(yàn),更有著對(duì)設(shè)計(jì)的無(wú)比熱愛(ài)與信仰。在工作中集思廣益,精益求精,力求將每一位設(shè)計(jì)師的能力發(fā)揮出來(lái),長(zhǎng)期研究軟件與設(shè)計(jì)的結(jié)合,并以其高端性與專業(yè)性帶領(lǐng)圖書市場(chǎng)的發(fā)展趨勢(shì),熱衷將團(tuán)隊(duì)研究的精髓以圖書的形式分享給所有愛(ài)好設(shè)計(jì)和生活的讀者朋友們。
第1章 初入移動(dòng)UI設(shè)計(jì)的世界
1.1 認(rèn)識(shí)移動(dòng)UI 8
1.1.1 什么是移動(dòng)UI設(shè)計(jì) 8
1.1.2 移動(dòng)UI設(shè)計(jì)的特點(diǎn) 9
1.1.3 移動(dòng)UI設(shè)計(jì)的經(jīng)典案例 10
1.2 移動(dòng)設(shè)備的三大主流平臺(tái)和設(shè)計(jì)的基本原則 12
1.2.1 iOS平臺(tái)和設(shè)計(jì)的基本原則 12
1.2.2 Android平臺(tái)和設(shè)計(jì)的基本原則 15
1.3 常用移動(dòng)界面 16
1.3.1 常用手機(jī)界面 16
1.3.2 常用平板電腦界面 18
1.4 移動(dòng)UI的草圖設(shè)計(jì)流程 20
1.5 移動(dòng)設(shè)備界面色彩搭配 21
1.5.1 色彩對(duì)移動(dòng)界面的重要性 21
1.5.2 移動(dòng)設(shè)備界面色彩的搭配方法 21
1.5.3 移動(dòng)設(shè)備中色彩的傳達(dá) 23
1.6 移動(dòng)設(shè)備中各尺寸標(biāo)準(zhǔn) 24
1.6.1 手機(jī)的基本尺寸標(biāo)準(zhǔn) 24
1.6.2 平板的基本尺寸標(biāo)準(zhǔn) 24
1.6.3 手機(jī)的基本分辨率 26
1.6.4 平板的基本分辨率 27
1.7 移動(dòng)UI使用的注意要點(diǎn) 28
1.7.1 移動(dòng)UI設(shè)計(jì)的顏色使用要點(diǎn) 28
1.7.2 移動(dòng)UI設(shè)計(jì)的圖案使用要點(diǎn) 32
1.7.3 移動(dòng)UI設(shè)計(jì)的字體使用要點(diǎn) 33
第2章 你所不知道的移動(dòng)UI特性和界面
導(dǎo)航設(shè)計(jì)
2.1 移動(dòng)設(shè)備的特性 37
2.1.1 高便攜性 37
2.1.2 隱私性 37
2.1.3 應(yīng)用輕便 37
2.1.4 手機(jī)媒體的特性 38
2.1.5 iPad的特性 40
2.2 手摸勢(shì)交互特性 42
2.2.1 重復(fù)與循環(huán)動(dòng)作 42
2.2.2 連貫動(dòng)作法和關(guān)鍵動(dòng)作法 42
2.2.3 夸張的方式制作利于觸碰 43
2.3 移動(dòng)用戶體驗(yàn)設(shè)計(jì)方法 44
2.3.1 有效的人機(jī)交互策略 44
2.3.2 移動(dòng)設(shè)備的可用性 45
2.3.3 以用戶為中心的移動(dòng)UI設(shè)計(jì) 48
2.3.4 訪客至上的設(shè)計(jì)秘籍 48
2.4 導(dǎo)航欄和按鈕的設(shè)計(jì)要點(diǎn) 49
2.4.1 應(yīng)用的導(dǎo)航欄設(shè)計(jì) 49
2.4.2 導(dǎo)航欄返回按鈕 51
2.5 移動(dòng)應(yīng)用導(dǎo)航的設(shè)計(jì)模式 53
2.5.1 跳板式 56
2.5.2 列表菜單式 58
2.5.3 選項(xiàng)卡式 59
2.5.4 陳列館式 60
2.5.5 儀表式和隱喻式 61
2.5.6 超級(jí)菜單式 62
2.5.7 圖片輪盤式 62
2.5.8 擴(kuò)展列表式 63
2.6 2017年移動(dòng)設(shè)備的發(fā)展趨勢(shì) 66
2.6.1 隱藏菜單 66
2.6.2 Touch ID的完全控制 66
2.6.3 模糊背景圖片 67
2.6.4 代替?zhèn)鹘y(tǒng)設(shè)備的穿戴式終端 67
2.6.5 卡片式設(shè)計(jì)將會(huì)變得更頻繁 67
2.6.6 娛樂(lè)與個(gè)性化 68
2.6.7 紙質(zhì)化設(shè)計(jì) 68
2.6.8 精挑細(xì)選的配色 68
第3章 Photoshop和移動(dòng)UI的那些事兒
3.1 移動(dòng)UI中基礎(chǔ)圖形的繪制 70
3.1.1 正方形、長(zhǎng)方形 72
3.1.2 圓角矩形 74
3.1.3 橢圓 77
3.1.4 組合圖形 83
3.1.5 其他形狀 85
3.2 常見控件的制作 87
3.2.1 按鈕 87
3.2.2 對(duì)話框 91
3.2.3 選項(xiàng)條 95
3.2.4 切換條 99
3.2.5 滾動(dòng)條 103
3.2.6 播放器 108
3.3 圖標(biāo)的制作 111
3.3.1 時(shí)間圖標(biāo) 111
3.3.2 相機(jī)圖標(biāo) 117
3.3.3 音樂(lè)圖標(biāo) 122
3.3.4 天氣圖標(biāo) 127
第4章 現(xiàn)在就開始移動(dòng)手機(jī)之旅
4.1 移動(dòng)手機(jī)設(shè)置界面 136
手機(jī)時(shí)鐘設(shè)置界面 136
手機(jī)聯(lián)系人設(shè)置界面 141
手機(jī)鎖屏設(shè)置界面 146
手機(jī)顯示設(shè)置界面 150
4.2 移動(dòng)手機(jī)主題界面 154
小清新風(fēng)格手機(jī)主題 154
女性風(fēng)格手機(jī)主題界面 162
可愛(ài)風(fēng)格手機(jī)主題界面 166
特效手機(jī)主題界面 170
手繪風(fēng)格手機(jī)主題界面 176
4.3 移動(dòng)手機(jī)應(yīng)用界面 183
手機(jī)照片應(yīng)用界面 183
手機(jī)音樂(lè)應(yīng)用界面 189
手機(jī)游戲應(yīng)用界面 197
第5章 超人氣平板界面是這樣煉成的
5.1平板主題界面設(shè)計(jì) 208
安卓系統(tǒng)主題界面設(shè)計(jì) 208
蘋果系統(tǒng)主題界面設(shè)計(jì) 214
Windows系統(tǒng)主題界面設(shè)計(jì) 220
5.2平板應(yīng)用游戲界面設(shè)計(jì) 225
iPad休閑游戲 225
iPad益智游戲 233
5.3平板常用軟件界面設(shè)計(jì) 240
平板電影高清時(shí)代 240
平板娛樂(lè)應(yīng)用界面 248
平板音樂(lè)應(yīng)用界面 253
5.4平板閱讀界面設(shè)計(jì) 259
iPad電子明信片瀏覽 259
女性網(wǎng)購(gòu)站點(diǎn) 267
兒童學(xué)習(xí)教育 277
附錄
01 設(shè)計(jì)背景 286
觸控目標(biāo)大小的定義 286
僧多粥少 287
可玩性主要在于手控的操作 288
02 不同類型移動(dòng)設(shè)備的可用性各異 289
iOS移動(dòng)設(shè)備的可用性 290
Android移動(dòng)設(shè)備的可用性 291
03 移動(dòng)網(wǎng)站與完整版網(wǎng)站 292
移動(dòng)優(yōu)化的網(wǎng)站 293
為什么完整版網(wǎng)站不適合移動(dòng)使用 296
移動(dòng)端比桌面端要求更嚴(yán)格 297
響應(yīng)式設(shè)計(jì) 299
可用性原則很少非黑即白 301