移動UI視覺設(shè)計，是以移動設(shè)備為操作平臺，對移動設(shè)備中使用的界面進行視覺設(shè)計，在創(chuàng)作中賦予界面情感意義，激起使用者的興趣。視覺設(shè)計包括對界面進行風格設(shè)定、色彩搭配和功能布局等多個內(nèi)容，為界面創(chuàng)作出華麗而實用的外衣。
《WoW！移動UI視覺設(shè)計全攻略》通過對移動設(shè)備三大主流操作系統(tǒng)的UI視覺設(shè)計的風格進行分析，講解了APP用戶界面的設(shè)計思路和制作過程，其中第1部分為基礎(chǔ)篇，講述了與移動設(shè)備相關(guān)的基礎(chǔ)概念，以及Photoshop的繪圖功能和修飾技巧；第2部分為入門篇，講述了圖標、按鈕和滑塊這三種基礎(chǔ)的界面元素的設(shè)計和創(chuàng)作要點；第3部分為進階篇，講述了時間界面、播放器界面、瀏覽器界面、游戲界面和鎖屏界面的設(shè)計要領(lǐng)和技巧；第4部分為提升篇，以項目要求的形式提出設(shè)計的內(nèi)容，根據(jù)要求來對界面進行布局、配色和風格設(shè)定，展示給讀者一個完整的APP界面的視覺設(shè)計流程。
附帶的學習資源包含書中所有案例的源文件和教學視頻，方便讀者學習使用�！禬oW！移動UI視覺設(shè)計全攻略》特別適合移動設(shè)備UI視覺設(shè)計的初學者，同時對Photoshop使用者、平面設(shè)計師和APP開發(fā)設(shè)計人員也有參考價值。
目錄：
導讀9
01互聯(lián)網(wǎng)產(chǎn)品的設(shè)計9
02扁平化設(shè)計思想對移動UI視覺設(shè)計的影響12
03移動UI視覺設(shè)計的要點13
第1部分基礎(chǔ)篇15
第1章為移動UI視覺設(shè)計鋪路——入門必備15
1.1移動UI的基礎(chǔ)概念16
1.1.1什么是移動UI16
1.1.2移動UI的應用范圍17
1.1.3APP與UI視覺設(shè)計的關(guān)系17
1.1.4移動UI視覺設(shè)計的重要性18
1.1.5移動UI視覺設(shè)計的原則19
1.2移動UI視覺設(shè)計的五大階段21
1.2.1產(chǎn)品定位及市場分析階段21
1.2.2初步構(gòu)思及架構(gòu)設(shè)計階段21
1.2.3修飾美化及界面設(shè)計階段22
1.2.4界面輸出及可用性測試階段22
1.2.5產(chǎn)品上線及優(yōu)化方案階段22
1.3移動設(shè)備尺寸的相關(guān)概念23
1.3.1英寸23
1.3.2顯示分辨率23
1.3.3像素密度24
1.4色彩對移動UI的重要性25
1.4.1色彩的基礎(chǔ)概念25
1.4.2移動UI視覺中常用的色彩對比26
1.4.3不同顏色的情感表達27
1.4.4移動UI中的色彩級別28
1.4.5不同系統(tǒng)的色彩應用規(guī)范28
1.5常見的移動UI設(shè)計工具29
1.5.1矢量圖形的編輯高手——Illustrator29
1.5.2強大的圖形圖像編輯利器——Photoshop29
1.6三大主流系統(tǒng)的UI設(shè)計特點30
1.6.1蘋果iOS7系統(tǒng)——扁平化30
1.6.2安卓Android系統(tǒng)——極高自由度32
1.6.3微軟Windows Phone8系統(tǒng)——極簡色塊33
第2章讓操作更高效——Photoshop基礎(chǔ)35
2.1五大必備的核心功能36
2.1.1控制設(shè)計對象的順序——圖層36
2.1.2調(diào)整圖像的影調(diào)和色調(diào)——調(diào)整／填充圖層38
2.1.3編輯圖像的顯示區(qū)域——蒙版39
2.1.4精確把握編輯的區(qū)域——選區(qū)40
2.1.5準確傳遞UI的信息——文字40
2.2七種不同的繪圖工具41
2.2.1規(guī)則直角方形的繪制——矩形工具41
2.2.2圓角方形的繪制——圓角矩形工具43
2.2.3橢圓圖形的繪制——橢圓工具44
2.2.4星形和多邊形的繪制——多邊形工具44
2.2.5線段和虛線的繪制——直線工具45
2.2.6復雜圖形的繪制——自動形狀工具46
2.2.7任意圖形的繪制——鋼筆工具47
2.3十大圖層樣式提升設(shè)計質(zhì)感48
2.3.1組合高光和陰影——斜面和浮雕48
2.3.2修飾輪廓色——描邊50
2.3.3制作凹陷外觀——內(nèi)陰影51
2.3.4提升內(nèi)部層次——內(nèi)發(fā)光52
2.3.5創(chuàng)建光滑表面——光澤53
2.3.6更改填充色——顏色疊加54
2.3.7打造炫彩效果——漸變疊加55
2.3.8添加花樣填色——圖案疊加56
2.3.9增強外部邊緣光暈——外發(fā)光57
2.3.10增強立體感——投影58
第2部分入門篇59
第3章準確傳遞功能應用——圖標的設(shè)計59
3.1與圖標設(shè)計相關(guān)60
3.1.1圖標的標準格式及大小60
3.1.2圖標設(shè)計的三大原則63
3.1.3不同系統(tǒng)下圖標的設(shè)計特點65
3.2圖標設(shè)計案例67
3.2.1線性風格的圖標制作67
3.2.2單色風格的圖標制作70
3.2.3折紙效果的圖標制作73
3.2.4可愛風格的圖標制作77
3.2.5金屬材質(zhì)的圖標制作82
第4章控制和調(diào)節(jié)應用程度——滑塊的設(shè)計87
4.1與滑塊設(shè)計相關(guān)88
4.1.1滑塊的構(gòu)成要素和作用88
4.1.2滑塊的類型89
4.1.3不同系統(tǒng)中滑塊的設(shè)計要點89
4.2滑塊設(shè)計案例91
4.2.1簡約圖形組成的滑塊91
4.2.2清新自然的滑塊制作96
4.2.3漸變效果的滑塊制作101
4.2.4粉嫩可愛風格的滑塊107
4.2.5藍色酷炫風格的滑塊111
第5章接通和斷開功能——按鈕的設(shè)計115
5.1與按鈕設(shè)計相關(guān)116
5.1.1按鈕的不同狀態(tài)116
5.1.2按鈕形狀及作用之間的影響117
5.1.3不同系統(tǒng)下按鈕的設(shè)計風格117
5.1.4按鈕設(shè)計的三大技巧119
5.2按鈕設(shè)計案例121
5.2.1扁平化按鈕的制作121
5.2.2白色簡易效果的按鈕125
5.2.3半透明按鈕的制作129
5.2.4夜光效果的按鈕制作133
5.2.5木制效果的按鈕制作137
第3部分進階篇141
第6章讓時鐘表現(xiàn)更有品味——時鐘界面設(shè)計141
6.1翻轉(zhuǎn)式時鐘界面設(shè)計142
靈感構(gòu)思解析142
設(shè)計元素簡述143
色彩搭配技巧143
制作步驟詳解143
01魔方的繪制與組合144
02界面布局制作144
03圖標和文字的添加145
04變換對象制作翻轉(zhuǎn)效果146
不同應用平臺展示147
6.2齒輪狀平板鐘面設(shè)計148
靈感構(gòu)思解析148
設(shè)計元素簡述149
色彩搭配技巧149
制作步驟詳解149
01時鐘界面的繪制150
02齒輪狀設(shè)置區(qū)域的制作150
03頁面的組合和修飾151
不同應用平臺展示152
6.3天氣刻度樣式的時間界面153
靈感構(gòu)思解析153
設(shè)計元素簡述154
色彩搭配技巧154
制作步驟詳解154
01天氣刻度樣式的鐘面繪制150
02時鐘界面的組合和修飾151
03日歷設(shè)置頁面繪制151
不同應用平臺展示158
6.4半透明線條感的時間界面159
靈感構(gòu)思解析159
設(shè)計元素簡述160
色彩搭配技巧160
制作步驟詳解160
01界面背景的編輯161
02半透明鐘面的繪制161
03頁面的修飾和完善162
04事件設(shè)置界面的繪制163
不同應用平臺展示164
第7章傳遞最美妙的音樂——播放器界面設(shè)計165
7.1帶聲波的播放器界面設(shè)計166
靈感構(gòu)思解析166
設(shè)計元素簡述167
色彩搭配技巧167
制作步驟詳解167
01制作出背景界面168
02繪制音波和播放控件169
03制作專輯界面170
不同應用平臺展示171
7.2清新自然風格的播放器界面設(shè)計172
靈感構(gòu)思解析172
設(shè)計元素簡述173
色彩搭配技巧173
制作步驟詳解173
01播放界面頂欄的繪制174
02播放滑塊的制作175
03對象的組合176
不同應用平臺展示176
7.3冷酷簡約風格的播放器界面設(shè)計177
靈感構(gòu)思解析177
設(shè)計元素簡述178
色彩搭配技巧178
制作步驟詳解178
01繪制背景和按鈕179
02繪制播放器179
03添加光盤圖像180
不同應用平臺展示181
7.4單色調(diào)風格的播放器界面設(shè)計182
靈感構(gòu)思解析182
設(shè)計元素簡述183
色彩搭配技巧183
制作步驟詳解183
01播放區(qū)域的繪制184
02按鈕控件的繪制185
03歌曲列表的繪制187
不同應用平臺展示188
第8章把互聯(lián)網(wǎng)裝入口袋——瀏覽器界面設(shè)計189
8.1白色圣潔風格的瀏覽器界面190
構(gòu)圖布局解析190
設(shè)計元素簡述191
色彩搭配技巧191
制作步驟詳解191
01界面中基本元素的繪制192
02文字、圖標與基本元素的組合193
03界面的完善和拼接194
不同應用平臺展示194
8.2線性扁平風格的瀏覽器界面195
構(gòu)圖布局解析195
設(shè)計元素簡述196
色彩搭配技巧196
制作步驟詳解196
01界面背景的繪制197
02賬號選擇界面的制作197
03信息界面的制作199
不同應用平臺展示200
8.3圣誕主題風格的瀏覽器界面201
構(gòu)圖布局解析201
設(shè)計元素簡述202
色彩搭配技巧202
制作步驟詳解202
01按鈕和滑塊的繪制203
02搜索欄和標題欄的制作204
03界面的完善和組合206
不同應用平臺展示207
8.4暗色簡約風格的瀏覽器界面208
構(gòu)圖布局解析209
設(shè)計元素簡述209
色彩搭配技巧209
制作步驟詳解210
01網(wǎng)站首頁的繪制210
02購物頁面的繪制211
03個人信息頁面的繪制212
04搜索頁面的繪制213
不同應用平臺展示214
第9章讓娛樂變得更享受——游戲界面設(shè)計215
9.1游戲歡迎界面設(shè)計
靈感構(gòu)思解析
設(shè)計元素簡述
色彩搭配技巧
制作步驟詳解
01飄帶的繪制
02撥號盤的繪制
03圓形進度顯示的繪制
04界面的制作及對象的組合
不同應用平臺展示
9.2游戲登錄界面設(shè)計
靈感構(gòu)思解析
設(shè)計元素簡述
色彩搭配技巧
制作步驟詳解
01按鈕的繪制
02標題文字的制作
03加載進度條的制作
04背景的制作和對象的組合
不同應用平臺展示
9.3游戲設(shè)置界面設(shè)計
靈感構(gòu)思解析
設(shè)計元素簡述
色彩搭配技巧
制作步驟詳解
01圖標的繪制
02按鈕的繪制
03滑塊和進度條的繪制
04界面的完善及整合
不同應用平臺展示
9.4游戲玩耍界面設(shè)計
靈感構(gòu)思解析
設(shè)計元素簡述
色彩搭配技巧
制作步驟詳解
01天氣圖標的繪制
02游戲分數(shù)欄及設(shè)置欄的制作
03背景的制作及對象的整合
不同應用平臺展示
第10章打造獨特的開啟方式——解鎖界面
10.1飛鏢盤外形的解鎖界面
靈感構(gòu)思解析
設(shè)計元素簡述
色彩搭配技巧
制作步驟詳解
01界面背景的制作
02飛鏢盤鎖定對象的繪制
03添加時間及日期
04制作觸碰狀態(tài)下的界面
不同應用平臺展示
10.2激光樣式的解鎖界面
靈感構(gòu)思解析
設(shè)計元素簡述
色彩搭配技巧
制作步驟詳解
01界面背景的制作
02繪制激光發(fā)射器按鈕
03制作激光發(fā)散對象
04添加文字完善界面
不同應用平臺展示
10.3密碼鎖樣式的解鎖界面
靈感構(gòu)思解析
設(shè)計元素簡述
色彩搭配技巧
制作步驟詳解
01繪制密碼鎖
02制作時間顯示并完善界面
不同應用平臺展示
10.4溫度計樣式的解鎖界面
靈感構(gòu)思解析
設(shè)計元素簡述
色彩搭配技巧
制作步驟詳解
01背景及時間顯示的制作
02溫度計的繪制
不同應用平臺展示
……
第4部分提升篇
|
