導讀9
01互聯網産品的設計9
02扁平化設計思想對移動UI視覺設計的影響12
03移動UI視覺設計的要點13
第1部分基礎篇15
第1章為移動UI視覺設計鋪路——入門必備15
1.1移動UI的基礎概念16
1.1.1什麼是移動UI16
1.1.2移動UI的應用範圍17
1.1.3APP與UI視覺設計的關係17
1.1.4移動UI視覺設計的重要性18
1.1.5移動UI視覺設計的原則19
1.2移動UI視覺設計的五大階段21
1.2.1産品定位及市場分析階段21
1.2.2初步構思及架構設計階段21
1.2.3修飾美化及界麵設計階段22
1.2.4界麵輸齣及可用性測試階段22
1.2.5産品上綫及優化方案階段22
1.3移動設備尺寸的相關概念23
1.3.1英寸23
1.3.2顯示分辨率23
1.3.3像素密度24
1.4色彩對移動UI的重要性25
1.4.1色彩的基礎概念25
1.4.2移動UI視覺中常用的色彩對比26
1.4.3不同顔色的情感錶達27
1.4.4移動UI中的色彩級彆28
1.4.5不同係統的色彩應用規範28
1.5常見的移動UI設計工具29
1.5.1矢量圖形的編輯高手——Illustrator29
1.5.2強大的圖形圖像編輯利器——Photoshop29
1.6三大主流係統的UI設計特點30
1.6.1蘋果iOS7係統——扁平化30
1.6.2安卓Android係統——極高自由度32
1.6.3微軟Windows Phone8係統——極簡色塊33
第2章讓操作更高效——Photoshop基礎35
2.1五大必備的核心功能36
2.1.1控製設計對象的順序——圖層36
2.1.2調整圖像的影調和色調——調整／填充圖層38
2.1.3編輯圖像的顯示區域——濛版39
2.1.4精確把握編輯的區域——選區40
2.1.5準確傳遞UI的信息——文字40
2.2七種不同的繪圖工具41
2.2.1規則直角方形的繪製——矩形工具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十大圖層樣式提升設計質感48
2.3.1組閤高光和陰影——斜麵和浮雕48
2.3.2修飾輪廓色——描邊50
2.3.3製作凹陷外觀——內陰影51
2.3.4提升內部層次——內發光52
2.3.5創建光滑錶麵——光澤53
2.3.6更改填充色——顔色疊加54
2.3.7打造炫彩效果——漸變疊加55
2.3.8添加花樣填色——圖案疊加56
2.3.9增強外部邊緣光暈——外發光57
2.3.10增強立體感——投影58
第2部分入門篇59
第3章準確傳遞功能應用——圖標的設計59
3.1與圖標設計相關60
3.1.1圖標的標準格式及大小60
3.1.2圖標設計的三大原則63
3.1.3不同係統下圖標的設計特點65
3.2圖標設計案例67
3.2.1綫性風格的圖標製作67
3.2.2單色風格的圖標製作70
3.2.3摺紙效果的圖標製作73
3.2.4可愛風格的圖標製作77
3.2.5金屬材質的圖標製作82
第4章控製和調節應用程度——滑塊的設計87
4.1與滑塊設計相關88
4.1.1滑塊的構成要素和作用88
4.1.2滑塊的類型89
4.1.3不同係統中滑塊的設計要點89
4.2滑塊設計案例91
4.2.1簡約圖形組成的滑塊91
4.2.2清新自然的滑塊製作96
4.2.3漸變效果的滑塊製作101
4.2.4粉嫩可愛風格的滑塊107
4.2.5藍色酷炫風格的滑塊111
第5章接通和斷開功能——按鈕的設計115
5.1與按鈕設計相關116
5.1.1按鈕的不同狀態116
5.1.2按鈕形狀及作用之間的影響117
5.1.3不同係統下按鈕的設計風格117
5.1.4按鈕設計的三大技巧119
5.2按鈕設計案例121
5.2.1扁平化按鈕的製作121
5.2.2白色簡易效果的按鈕125
5.2.3半透明按鈕的製作129
5.2.4夜光效果的按鈕製作133
5.2.5木製效果的按鈕製作137
第3部分進階篇141
第6章讓時鍾錶現更有品味——時鍾界麵設計141
6.1翻轉式時鍾界麵設計142
靈感構思解析142
設計元素簡述143
色彩搭配技巧143
製作步驟詳解143
01魔方的繪製與組閤144
02界麵布局製作144
03圖標和文字的添加145
04變換對象製作翻轉效果146
不同應用平颱展示147
6.2齒輪狀平闆鍾麵設計148
靈感構思解析148
設計元素簡述149
色彩搭配技巧149
製作步驟詳解149
01時鍾界麵的繪製150
02齒輪狀設置區域的製作150
03頁麵的組閤和修飾151
不同應用平颱展示152
6.3天氣刻度樣式的時間界麵153
靈感構思解析153
設計元素簡述154
色彩搭配技巧154
製作步驟詳解154
01天氣刻度樣式的鍾麵繪製150
02時鍾界麵的組閤和修飾151
03日曆設置頁麵繪製151
不同應用平颱展示158
6.4半透明綫條感的時間界麵159
靈感構思解析159
設計元素簡述160
色彩搭配技巧160
製作步驟詳解160
01界麵背景的編輯161
02半透明鍾麵的繪製161
03頁麵的修飾和完善162
04事件設置界麵的繪製163
不同應用平颱展示164
第7章傳遞最美妙的音樂——播放器界麵設計165
7.1帶聲波的播放器界麵設計166
靈感構思解析166
設計元素簡述167
色彩搭配技巧167
製作步驟詳解167
01製作齣背景界麵168
02繪製音波和播放控件169
03製作專輯界麵170
不同應用平颱展示171
7.2清新自然風格的播放器界麵設計172
靈感構思解析172
設計元素簡述173
色彩搭配技巧173
製作步驟詳解173
01播放界麵頂欄的繪製174
02播放滑塊的製作175
03對象的組閤176
不同應用平颱展示176
7.3冷酷簡約風格的播放器界麵設計177
靈感構思解析177
設計元素簡述178
色彩搭配技巧178
製作步驟詳解178
01繪製背景和按鈕179
02繪製播放器179
03添加光盤圖像180
不同應用平颱展示181
7.4單色調風格的播放器界麵設計182
靈感構思解析182
設計元素簡述183
色彩搭配技巧183
製作步驟詳解183
01播放區域的繪製184
02按鈕控件的繪製185
03歌麯列錶的繪製187
不同應用平颱展示188
第8章把互聯網裝入口袋——瀏覽器界麵設計189
8.1白色聖潔風格的瀏覽器界麵190
構圖布局解析190
設計元素簡述191
色彩搭配技巧191
製作步驟詳解191
01界麵中基本元素的繪製192
02文字、圖標與基本元素的組閤193
03界麵的完善和拼接194
不同應用平颱展示194
8.2綫性扁平風格的瀏覽器界麵195
構圖布局解析195
設計元素簡述196
色彩搭配技巧196
製作步驟詳解196
01界麵背景的繪製197
02賬號選擇界麵的製作197
03信息界麵的製作199
不同應用平颱展示200
8.3聖誕主題風格的瀏覽器界麵201
構圖布局解析201
設計元素簡述202
色彩搭配技巧202
製作步驟詳解202
01按鈕和滑塊的繪製203
02搜索欄和標題欄的製作204
03界麵的完善和組閤206
不同應用平颱展示207
8.4暗色簡約風格的瀏覽器界麵208
構圖布局解析209
設計元素簡述209
色彩搭配技巧209
製作步驟詳解210
01網站首頁的繪製210
02購物頁麵的繪製211
03個人信息頁麵的繪製212
04搜索頁麵的繪製213
不同應用平颱展示214
第9章讓娛樂變得更享受——遊戲界麵設計215
9.1遊戲歡迎界麵設計
靈感構思解析
設計元素簡述
色彩搭配技巧
製作步驟詳解
01飄帶的繪製
02撥號盤的繪製
03圓形進度顯示的繪製
04界麵的製作及對象的組閤
不同應用平颱展示
9.2遊戲登錄界麵設計
靈感構思解析
設計元素簡述
色彩搭配技巧
製作步驟詳解
01按鈕的繪製
02標題文字的製作
03加載進度條的製作
04背景的製作和對象的組閤
不同應用平颱展示
9.3遊戲設置界麵設計
靈感構思解析
設計元素簡述
色彩搭配技巧
製作步驟詳解
01圖標的繪製
02按鈕的繪製
03滑塊和進度條的繪製
04界麵的完善及整閤
不同應用平颱展示
9.4遊戲玩耍界麵設計
靈感構思解析
設計元素簡述
色彩搭配技巧
製作步驟詳解
01天氣圖標的繪製
02遊戲分數欄及設置欄的製作
03背景的製作及對象的整閤
不同應用平颱展示
第10章打造獨特的開啓方式——解鎖界麵
10.1飛鏢盤外形的解鎖界麵
靈感構思解析
設計元素簡述
色彩搭配技巧
製作步驟詳解
01界麵背景的製作
02飛鏢盤鎖定對象的繪製
03添加時間及日期
04製作觸碰狀態下的界麵
不同應用平颱展示
10.2激光樣式的解鎖界麵
靈感構思解析
設計元素簡述
色彩搭配技巧
製作步驟詳解
01界麵背景的製作
02繪製激光發射器按鈕
03製作激光發散對象
04添加文字完善界麵
不同應用平颱展示
10.3密碼鎖樣式的解鎖界麵
靈感構思解析
設計元素簡述
色彩搭配技巧
製作步驟詳解
01繪製密碼鎖
02製作時間顯示並完善界麵
不同應用平颱展示
10.4溫度計樣式的解鎖界麵
靈感構思解析
設計元素簡述
色彩搭配技巧
製作步驟詳解
01背景及時間顯示的製作
02溫度計的繪製
不同應用平颱展示
……
第4部分提升篇
· · · · · · (收起)