WoW！移動UI視覺設計全攻略

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