目前移動(dòng)設備產(chǎn)品日益增多,移動(dòng)應用程序的市場(chǎng)呈現出百花齊放的勝景。為了能夠迎合用戶(hù)、提高用戶(hù)體驗,越來(lái)越多的移動(dòng)應用程序產(chǎn)品開(kāi)始提倡“以用戶(hù)為中心”的設計理念,這就要求移動(dòng)UI視覺(jué)設計師們要有敏銳的設計嗅覺(jué)和完整的設計流程及思維。
本書(shū)為移動(dòng)UI界面設計暢銷(xiāo)書(shū)全新升級版,包含了大量精美的界面元素、App界面視覺(jué)設計的案例,利用詳細的布局規劃、創(chuàng )意思維、配色方案、組件分析等內容來(lái)對案例的創(chuàng )作思路進(jìn)行闡述,告訴讀者移動(dòng)UI視覺(jué)設計的創(chuàng )作技巧。
本書(shū)從移動(dòng)UI視覺(jué)設計的基礎知識出發(fā),通過(guò)分析和講解兩大主流系統的設計規范和設計技巧,將移動(dòng)UI視覺(jué)設計中的創(chuàng )意思路與操作案例有機地結合在一起,力求在幫助讀者提高UI界面制作能力的同時(shí),拓展移動(dòng)UI視覺(jué)設計的創(chuàng )作思路。
本書(shū)包含三部分,共12個(gè)Part的內容。第1部分為基礎篇(Part1~Part3):介紹移動(dòng)UI視覺(jué)設計的基礎知識,Photoshop軟件的常用操作功能,以及移動(dòng)UI界面中基礎元素的設計規范;第2部分介紹兩大主流系統(Part4~Part5):分別對兩大系統進(jìn)行有針對性的講解,通過(guò)相關(guān)的案例介紹移動(dòng)UI視覺(jué)設計的制作方法和技巧;第3部分講解App應用實(shí)例(Part6~Part12):以完整的App界面設計為主要內容,展示不同風(fēng)格移動(dòng)UI界面設計的特點(diǎn)和制作方法。
本書(shū)配有下載資源,內含不同類(lèi)型App應用設計的講解視頻,以及書(shū)中的實(shí)例源文件及相關(guān)素材,讀者可以更好、更快地學(xué)習移動(dòng)UI界面設計。
創(chuàng )銳設計,由一支優(yōu)秀的平面設計師與圖形圖像資深編輯隊伍組成。出版過(guò)眾多優(yōu)秀的圖形圖像方面的專(zhuān)業(yè)書(shū)籍,不僅在國內處于領(lǐng)先地位,還有大量作品輸出過(guò)海外版權,備受讀者青睞。在課程教材方面,由于他們擁有多年教育培訓的經(jīng)驗,因此十分了解初學(xué)讀者的心理需求,從而研究出了一套行之有效的教學(xué)方法;此外,他們又參加過(guò)多個(gè)商業(yè)項目的設計工作,熟悉行業(yè)規范、了解客戶(hù)需求,擁有較高的設計水平,積累了豐富的制作經(jīng)驗、為專(zhuān)業(yè)進(jìn)階讀者指出了技術(shù)進(jìn)階的明路;在他們的圖書(shū)中,選擇的實(shí)例不僅融會(huì )貫通了軟件技法,更能通過(guò)分享圖像處理經(jīng)驗,激發(fā)讀者的靈感、迸發(fā)創(chuàng )意火花,達到事半功倍的效果。
Part 1 移動(dòng)UI設計基礎 / 1
1.1 UI設計存在的意義 / 2
1.1.1 人機交互的橋梁 / 2
1.1.2 操作邏輯系統的展現 / 3
1.1.3 展現系統的整體風(fēng)格 / 3
1.2 移動(dòng)UI設計的原則 / 4
1.2.1 視覺(jué)一致性原則 / 4
1.2.2 視覺(jué)簡(jiǎn)易性原則 / 5
1.2.3 從用戶(hù)的習慣考慮 / 6
1.2.4 操作的靈活性及人性化 / 8
1.3 兩大主流操作系統的特點(diǎn)對比 / 9
1.4 不同系統UI視覺(jué)的主要組成要素及特征 / 10
1.4.1 iOS系統中的組成要素及特征 / 10
1.4.2 Android系統中的組成要素及特征 / 11
1.5 認識移動(dòng)終端的分辨率和像素 / 13
1.6 移動(dòng)UI的創(chuàng )意與靈感收集 / 14
1.6.1 各種經(jīng)驗和靈感的記錄 / 14
1.6.2 將對象抽象化 / 15
1.6.3 設計靈感的轉移 / 16
1.7 移動(dòng)UI的視覺(jué)設計流程 / 18
Part 2 PS在移動(dòng)UI設計中的常用功能簡(jiǎn)介 / 21
2.1 繪圖工具的介紹 / 22
2.1.1 規則形狀的繪制 / 22
2.1.2 自定義形狀的繪制 / 23
2.1.3 繪制任意所需的形狀 / 25
2.2 圖層樣式的運用 / 26
2.2.1 增強立體感的圖層樣式 / 26
2.2.2 發(fā)光效果的圖層樣式 / 28
2.2.3 更改色彩的圖層樣式 / 29
2.3 蒙版的編輯 / 31
2.3.1 圖層蒙版 / 31
2.3.2 剪貼蒙版 / 32
2.4 文字的添加 / 34
2.4.1 文字的添加與設置 / 34
2.4.2 文字的高級編輯 / 35
Part 3 移動(dòng)UI界面中基本元素的制作 / 37
3.1 按鈕 / 38
3.1.1 按鈕設計的基礎知識 / 38
3.1.2 扁平化按鈕的設計 / 39
3.2 開(kāi)關(guān) / 42
3.2.1 開(kāi)關(guān)設計的基礎知識 / 42
3.2.2 簡(jiǎn)易色塊開(kāi)關(guān)的設計 / 44
3.2.3 擬物化開(kāi)關(guān)的設計 / 45
3.3 進(jìn)度條 / 47
3.3.1 進(jìn)度條設計的基礎知識 / 47
3.3.2 扁平化進(jìn)度條的設計 / 49
3.3.3 層次感強烈的進(jìn)度條設計 / 50
3.4 搜索欄 / 54
3.4.1 搜索欄設計的基礎知識 / 54
3.4.2 扁平化搜索欄的設計 / 56
3.5 列表框 / 61
3.5.1 列表框設計的基礎知識 / 61
3.5.2 簡(jiǎn)易列表框的設計 / 62
3.5.3 立體化列表框的設計 / 64
3.6 標簽欄 / 68
3.6.1 標簽欄設計的基礎知識 / 68
3.6.2 線(xiàn)性化標簽欄設計 / 69
3.6.3 木紋質(zhì)感的標簽欄設計 / 70
3.7 圖標欄 / 73
3.7.1 圖標欄設計的基礎知識 / 73
3.7.2 線(xiàn)性化圖標欄設計 / 74
3.7.3 紙箱紋理的圖標欄設計 / 77
Part 4 iOS系統及其組件的設計 / 81
4.1 iOS系統設計特點(diǎn) / 82
4.1.1 充分利用整個(gè)屏幕 / 82
4.1.2 使用半透明底板 / 82
4.1.3 信息的清晰呈現 / 83
4.2 iOS系統設計的規范 / 85
4.2.1 設計原則 / 85
4.2.2 色彩和字體 / 88
4.2.3 圖標的設計 / 92
4.3 iOS系統界面設計實(shí)訓 / 96
4.3.1 扁平化圖標的設計 / 96
4.3.2 半透明效果的界面設計 / 104
Part 5 Android系統及其組件的設計 / 111
5.1 Android系統的特點(diǎn) / 112
5.2 Android系統的設計規范 / 114
5.2.1 度量單位 / 114
5.2.2 字體的使用標準 / 116
5.2.3 色彩的應用規范 / 117
5.2.4 四種類(lèi)型的圖標 / 120
5.3 六種標準的Widget規范 / 122
5.3.1 Widget框架簡(jiǎn)介 / 122
5.3.2 Widget框架的標準尺寸 / 124
5.3.3 4×1的Widget框架設計 / 125
5.3.4 3×3的Widget框架設計 / 129
5.3.5 2×2的Widget框架設計 / 133
5.3.6 4×1的加長(cháng)Widget框架設計 / 136
5.3.7 3×3的橫向Widget框架設計 / 140
5.3.8 2×2的橫向Widget框架設計 / 145
5.4 Android系統界面設計實(shí)訓 / 150
5.4.1 立體化的圖標設計 / 150
5.4.2 超強立體感的界面設計 / 159
Part 6 孕媽幫手App設計 / 171
界面布局規劃 / 172
創(chuàng )意思路剖析 / 172
確定配色方案 / 173
定義組件風(fēng)格 / 174
制作步驟詳解 / 174
Part 7 美食網(wǎng)站App設計 / 185
界面布局規劃 / 186
創(chuàng )意思路剖析 / 186
確定配色方案 / 187
定義組件風(fēng)格 / 188
制作步驟詳解 / 188
Part 8 籃球運動(dòng)App設計 / 201
界面布局規劃 / 202
創(chuàng )意思路剖析 / 202
確定配色方案 / 203
定義組件風(fēng)格 / 203
制作步驟詳解 / 204
Part 9 流量銀行App設計 / 217
界面布局規劃 / 218
創(chuàng )意思路剖析 / 218
確定配色方案 / 219
定義組件風(fēng)格 / 219
制作步驟詳解 / 220
Part 10 藏寶游戲App設計 / 231
界面布局規劃 / 232
創(chuàng )意思路剖析 / 232
確定配色方案 / 233
定義組件風(fēng)格 / 234
制作步驟詳解 / 234
Part 11 音樂(lè )播放App設計 / 247
界面布局規劃 / 248
創(chuàng )意思路剖析 / 248
確定配色方案 / 249
定義組件風(fēng)格 / 250
制作步驟詳解 / 250
Part 12 旅游資訊App設計 / 267
界面布局規劃 / 268
創(chuàng )意思路剖析 / 268
確定配色方案 / 269
定義組件風(fēng)格 / 270
制作步驟詳解 / 270