WoW！移動(dòng)UI視覺設(shè)計(jì)全攻略

導(dǎo)讀 9
01 互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì) 9
02 扁平化設(shè)計(jì)思想對移動(dòng)UI視覺設(shè)計(jì)的影響 12
03 移動(dòng)UI視覺設(shè)計(jì)的要點(diǎn) 13
第1部分·基礎(chǔ)篇 15
第1章 *為移動(dòng)UI視覺設(shè)計(jì)鋪路
—入門必備 15
1．1 移動(dòng)UI的基礎(chǔ)概念 16
1．1．1 什么是移動(dòng)UI 16
1．1．2 移動(dòng)UI的應(yīng)用范圍 17
1．1．3 APP與UI視覺設(shè)計(jì)的關(guān)系 17
1．1．4 移動(dòng)UI視覺設(shè)計(jì)的重要性 18
1．1．5 移動(dòng)UI視覺設(shè)計(jì)的原則 19
1．2 移動(dòng)UI視覺設(shè)計(jì)的五大階段 21
1．2．1 產(chǎn)品定位及市場分析階段 21
1．2．2 初步構(gòu)思及架構(gòu)設(shè)計(jì)階段 21
1．2．3 修飾美化及界面設(shè)計(jì)階段 22
1．2．4 界面輸出及可用性測試階段 22
1．2．5 產(chǎn)品上線及優(yōu)化方案階段 22
1．3 移動(dòng)設(shè)備尺寸的相關(guān)概念 23
1．3．1 英寸 23
1．3．2 顯示分辨率 23
1．3．3 像素密度 24
1．4 色彩對移動(dòng)UI的重要性 25
1．4．1 色彩的基礎(chǔ)概念 25
1．4．2 移動(dòng)UI視覺中常用的色彩對比 26
1．4．3 不同顏色的情感表達(dá) 27
1．4．4 移動(dòng)UI中的色彩級(jí)別 28
1．4．5 不同系統(tǒng)的色彩應(yīng)用規(guī)范 28
1．5 常見的移動(dòng)UI設(shè)計(jì)工具 29
1．5．1 矢量圖形的編輯高手—Illustrator 29
1．5．2 強(qiáng)大的圖形圖像編輯利器—Photoshop 29
1．6 三大主流系統(tǒng)的UI設(shè)計(jì)特點(diǎn) 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è)計(jì)對象的順序—圖層 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 準(zhǔn)確傳遞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 復(fù)雜圖形的繪制—自動(dòng)形狀工具 46
2．2．7 任意圖形的繪制—鋼筆工具 47
2．3 十大圖層樣式提升設(shè)計(jì)質(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 增強(qiáng)外部邊緣光暈—外發(fā)光 57
2．3．10 增強(qiáng)立體感—投影 58
第2部分·入門篇 59
第3章 *準(zhǔn)確傳遞功能應(yīng)用
—圖標(biāo)的設(shè)計(jì) 59
3．1 與圖標(biāo)設(shè)計(jì)相關(guān) 60
3．1．1 圖標(biāo)的標(biāo)準(zhǔn)格式及大小 60
3．1．2 圖標(biāo)設(shè)計(jì)的三大原則 63
3．1．3 不同系統(tǒng)下圖標(biāo)的設(shè)計(jì)特點(diǎn) 65
3．2 圖標(biāo)設(shè)計(jì)案例 67
3．2．1 線性風(fēng)格的圖標(biāo)制作 67
3．2．2 單色風(fēng)格的圖標(biāo)制作 70
3．2．3 折紙效果的圖標(biāo)制作 73
3．2．4 可愛風(fēng)格的圖標(biāo)制作 77
3．2．5 金屬材質(zhì)的圖標(biāo)制作 82
第4章 *控制和調(diào)節(jié)應(yīng)用程度
—滑塊的設(shè)計(jì) 87
4．1 與滑塊設(shè)計(jì)相關(guān) 88
4．1．1 滑塊的構(gòu)成要素和作用 88
4．1．2 滑塊的類型 89
4．1．3 不同系統(tǒng)中滑塊的設(shè)計(jì)要點(diǎn) 89
4．2 滑塊設(shè)計(jì)案例 91
4．2．1 簡約圖形組成的滑塊 91
4．2．2 清新自然的滑塊制作 96
4．2．3 漸變效果的滑塊制作 101
4．2．4 粉嫩可愛風(fēng)格的滑塊 107
4．2．5 藍(lán)色酷炫風(fēng)格的滑塊 111
第5章 *接通和斷開功能
—按鈕的設(shè)計(jì) 115
5．1 與按鈕設(shè)計(jì)相關(guān) 116
5．1．1 按鈕的不同狀態(tài) 116
5．1．2 按鈕形狀及作用之間的影響 117
5．1．3 不同系統(tǒng)下按鈕的設(shè)計(jì)風(fēng)格 117
5．1．4 按鈕設(shè)計(jì)的三大技巧 119
5．2 按鈕設(shè)計(jì)案例 121
5．2．1 扁平化按鈕的制作 121
5．2．2 白色簡易效果的按鈕 125
5．2．3 半透明按鈕的制作 129
5．2．4 夜光效果的按鈕制作 133
5．2．5 木制效果的按鈕制作 137
第3部分·進(jìn)階篇 141
第6章 *讓時(shí)鐘表現(xiàn)更有品味
—時(shí)鐘界面設(shè)計(jì) 141
6．1 翻轉(zhuǎn)式時(shí)鐘界面設(shè)計(jì) 142
靈感構(gòu)思解析 142
設(shè)計(jì)元素簡述 143
色彩搭配技巧 143
制作步驟詳解 143
01 魔方的繪制與組合 144
02 界面布局制作 144
03 圖標(biāo)和文字的添加 145
04 變換對象制作翻轉(zhuǎn)效果 146
不同應(yīng)用平臺(tái)展示 147
6．2 齒輪狀平板鐘面設(shè)計(jì) 148
靈感構(gòu)思解析 148
設(shè)計(jì)元素簡述 149
色彩搭配技巧 149
制作步驟詳解 149
01 時(shí)鐘界面的繪制 150
02 齒輪狀設(shè)置區(qū)域的制作 150
03 頁面的組合和修飾 151
不同應(yīng)用平臺(tái)展示 152
6．3 天氣刻度樣式的時(shí)間界面 153
靈感構(gòu)思解析 153
設(shè)計(jì)元素簡述 154
色彩搭配技巧 154
制作步驟詳解 154
01 天氣刻度樣式的鐘面繪制 150
02 時(shí)鐘界面的組合和修飾 151
03 日歷設(shè)置頁面繪制 151
不同應(yīng)用平臺(tái)展示 158
6．4 半透明線條感的時(shí)間界面 159
靈感構(gòu)思解析 159
設(shè)計(jì)元素簡述 160
色彩搭配技巧 160
制作步驟詳解 160
01 界面背景的編輯 161
02 半透明鐘面的繪制 161
03 頁面的修飾和完善 162
04 事件設(shè)置界面的繪制 163
不同應(yīng)用平臺(tái)展示 164
第7章 *傳遞最美妙的音樂
—播放器界面設(shè)計(jì) 165
7．1 帶聲波的播放器界面設(shè)計(jì) 166
靈感構(gòu)思解析 166
設(shè)計(jì)元素簡述 167
色彩搭配技巧 167
制作步驟詳解 167
01 制作出背景界面 168
02 繪制音波和播放控件 169
03 制作專輯界面 170
不同應(yīng)用平臺(tái)展示 171
7．2 清新自然風(fēng)格的播放器界面設(shè)計(jì) 172
靈感構(gòu)思解析 172
設(shè)計(jì)元素簡述 173
色彩搭配技巧 173
制作步驟詳解 173
01 播放界面頂欄的繪制 174
02 播放滑塊的制作 175
03 對象的組合 176
不同應(yīng)用平臺(tái)展示 176
7．3 冷酷簡約風(fēng)格的播放器界面設(shè)計(jì) 177
靈感構(gòu)思解析 177
設(shè)計(jì)元素簡述 178
色彩搭配技巧 178
制作步驟詳解 178
01 繪制背景和按鈕 179
02 繪制播放器 179
03 添加光盤圖像 180
不同應(yīng)用平臺(tái)展示 181
7．4 單色調(diào)風(fēng)格的播放器界面設(shè)計(jì) 182
靈感構(gòu)思解析 182
設(shè)計(jì)元素簡述 183
色彩搭配技巧 183
制作步驟詳解 183
01 播放區(qū)域的繪制 184
02 按鈕控件的繪制 185
03 歌曲列表的繪制 187
不同應(yīng)用平臺(tái)展示 188
第8章 *把互聯(lián)網(wǎng)裝入口袋
—瀏覽器界面設(shè)計(jì) 189
8．1 白色圣潔風(fēng)格的瀏覽器界面 190
構(gòu)圖布局解析 190
設(shè)計(jì)元素簡述 191
色彩搭配技巧 191
制作步驟詳解 191
01 界面中基本元素的繪制 192
02 文字、圖標(biāo)與基本元素的組合 193
03 界面的完善和拼接 194
不同應(yīng)用平臺(tái)展示 194
8．2 線性扁平風(fēng)格的瀏覽器界面 195
構(gòu)圖布局解析 195
設(shè)計(jì)元素簡述 196
色彩搭配技巧 196
制作步驟詳解 196
01 界面背景的繪制 197
02 賬號(hào)選擇界面的制作 197
03 信息界面的制作 199
不同應(yīng)用平臺(tái)展示 200
8．3 圣誕主題風(fēng)格的瀏覽器界面 201
構(gòu)圖布局解析 201
設(shè)計(jì)元素簡述 202
色彩搭配技巧 202
制作步驟詳解 202
01 按鈕和滑塊的繪制 203
02 搜索欄和標(biāo)題欄的制作 204
03 界面的完善和組合 206
不同應(yīng)用平臺(tái)展示 207
8．4 暗色簡約風(fēng)格的瀏覽器界面 208
構(gòu)圖布局解析 209
設(shè)計(jì)元素簡述 209
色彩搭配技巧 209
制作步驟詳解 210
01 網(wǎng)站首頁的繪制 210
02 購物頁面的繪制 211
03 個(gè)人信息頁面的繪制 212
04 搜索頁面的繪制 213
不同應(yīng)用平臺(tái)展示 214
第9章 *讓娛樂變得更享受
—游戲界面設(shè)計(jì) 215
9．1 游戲歡