Photoshop CC 移動(dòng)UI 界面設(shè)計(jì)與實(shí)戰(zhàn)(第2版)
定 價(jià):79 元
- 作者:創(chuàng)銳設(shè)計(jì)
- 出版時(shí)間:2017/12/1
- ISBN:9787121329807
- 出 版 社:電子工業(yè)出版社
- 中圖法分類(lèi):TN929.53
- 頁(yè)碼:
- 紙張:膠版紙
- 版次:2
- 開(kāi)本:16開(kāi)
本書(shū)從移動(dòng)UI視覺(jué)設(shè)計(jì)的基礎(chǔ)知識(shí)出發(fā),通過(guò)分析和講解兩大主流系統(tǒng)的設(shè)計(jì)規(guī)范和設(shè)計(jì)技巧,將移動(dòng)UI視覺(jué)設(shè)計(jì)中的創(chuàng)意思路與操作案例有機(jī)地結(jié)合在一起,力求在幫助讀者提高UI界面制作能力的同時(shí),拓展移動(dòng)UI視覺(jué)設(shè)計(jì)的創(chuàng)作思路。本書(shū)包含三部分,共12個(gè)Part的內(nèi)容。第1部分為基礎(chǔ)篇(Part1~Part3):介紹移動(dòng)UI視覺(jué)設(shè)計(jì)的基礎(chǔ)知識(shí),Photoshop軟件的常用操作功能,以及移動(dòng)UI界面中基礎(chǔ)元素的設(shè)計(jì)規(guī)范;第2部分介紹兩大主流系統(tǒng)(Part4~Part5):分別對(duì)兩大系統(tǒng)進(jìn)行有針對(duì)性的講解,通過(guò)相關(guān)的案例介紹移動(dòng)UI視覺(jué)設(shè)計(jì)的制作方法和技巧;第3部分講解App應(yīng)用實(shí)例(Part6~Part12):以完整的App界面設(shè)計(jì)為主要內(nèi)容,展示不同風(fēng)格移動(dòng)UI界面設(shè)計(jì)的特點(diǎn)和制作方法。本書(shū)配有下載資源,內(nèi)含不同類(lèi)型App應(yīng)用設(shè)計(jì)的講解視頻,以及書(shū)中的實(shí)例源文件及相關(guān)素材,讀者可以更好、更快地學(xué)習(xí)移動(dòng)UI界面設(shè)計(jì)。
在科技高速發(fā)展的今天,移動(dòng)設(shè)備已經(jīng)成為人們生活和娛樂(lè)的必需品之一,移動(dòng)設(shè)備的用戶(hù)界面及體驗(yàn)越來(lái)越受到用戶(hù)的關(guān)注。對(duì)于一個(gè)優(yōu)秀的App應(yīng)用程序而言,其界面的視覺(jué)設(shè)計(jì)起著關(guān)鍵的作用,它是除交互式設(shè)計(jì)外,用戶(hù)能夠直接接觸到的東西。如果把App的功能比作人的肌肉和骨骼,那么移動(dòng)UI的視覺(jué)設(shè)計(jì)就是人的外貌和品格,是一款成功的應(yīng)用程序必不可少的重要組成部分。設(shè)計(jì)師如何才能設(shè)計(jì)出讓人過(guò)目不忘且實(shí)用美觀(guān)的界面呢?在本書(shū)中你可以找到答案。
本書(shū)從移動(dòng)UI界面設(shè)計(jì)的基礎(chǔ)開(kāi)始,針對(duì)當(dāng)今主流的兩大移動(dòng)系統(tǒng),講述移動(dòng)UI視覺(jué)設(shè)計(jì)的創(chuàng)意收集、設(shè)計(jì)重點(diǎn)、制作規(guī)范等一系列的知識(shí),將理論與實(shí)踐進(jìn)行有機(jī)結(jié)合,通過(guò)從無(wú)到有、從局部到整體的方式講解App應(yīng)用程序的界面設(shè)計(jì),幫助讀者建立正確、實(shí)用的移動(dòng)UI視覺(jué)設(shè)計(jì)的思路與方法。
本書(shū)內(nèi)容梗概
第1部分 基礎(chǔ)篇(Part 1~Part 3):介紹移動(dòng)UI視覺(jué)設(shè)計(jì)的基礎(chǔ)知識(shí),講解移動(dòng)UI視覺(jué)設(shè)計(jì)所使用到的Photoshop軟件的常用操作功能,以及移動(dòng)UI界面中基礎(chǔ)元素的設(shè)計(jì)規(guī)范。
第2部分 兩大主流系統(tǒng)(Part 4~Part 5):對(duì)兩大系統(tǒng)進(jìn)行有針對(duì)性的講解,從界面的圖標(biāo)、設(shè)計(jì)風(fēng)格等角度入手,講述兩大系統(tǒng)各自的區(qū)別與特點(diǎn),并利用相關(guān)的案例來(lái)介紹移動(dòng)UI視覺(jué)設(shè)計(jì)的制作方法和技巧。
第3部分 App應(yīng)用實(shí)例(Part 6~Part 12):以完整的App界面設(shè)計(jì)為主要內(nèi)容,通過(guò)對(duì)界面布局、創(chuàng)意、配色和組件等進(jìn)行詳細(xì)分析,用不同功能的App的創(chuàng)作思維和制作步驟來(lái)展示不同風(fēng)格的移動(dòng)UI界面設(shè)計(jì)的特點(diǎn)和制作方法。
本書(shū)特色分析
全面系統(tǒng)的知識(shí)體系:書(shū)中將兩大主流系統(tǒng)的設(shè)計(jì)規(guī)范和風(fēng)格進(jìn)行了詳細(xì)介紹,通過(guò)圖文并茂、層次清晰的方式直觀(guān)地展示出全面而系統(tǒng)的移動(dòng)UI視覺(jué)設(shè)計(jì)的相關(guān)知識(shí),幫助讀者了解和掌握與移動(dòng)UI視覺(jué)設(shè)計(jì)相關(guān)的概念和必備的基礎(chǔ)知識(shí)。
精辟的設(shè)計(jì)思路剖析:在本書(shū)的案例中,我們針對(duì)案例設(shè)計(jì)的創(chuàng)意思路、設(shè)計(jì)來(lái)源等進(jìn)行詳細(xì)闡述,幫助讀者形成自己的設(shè)計(jì)思維,并將設(shè)計(jì)創(chuàng)意分析與軟件操作相結(jié)合,讓讀者在提升移動(dòng)UI界面制作技能的同時(shí),拓展創(chuàng)意和設(shè)計(jì)思維。
呈現(xiàn)精美的設(shè)計(jì)案例:書(shū)中包含了大量精美的App設(shè)計(jì)案例,每個(gè)案例都根據(jù)不同類(lèi)型和功能的App進(jìn)行構(gòu)思和創(chuàng)作,并將平面設(shè)計(jì)知識(shí)和軟件運(yùn)用知識(shí)貫穿其中,可以幫助讀者快速提高設(shè)計(jì)思維的靈活性和軟件操作技能。
本書(shū)由創(chuàng)銳設(shè)計(jì)團(tuán)隊(duì)編寫(xiě),參加編寫(xiě)工作的有馬世旭、羅潔、陳慧娟、陳宗會(huì)、李江、李德華、徐文彬、朱淑容、劉瓊、徐洪、趙冉、陳建平、李杰臣、馬濤、秦加林。盡管作者在編寫(xiě)過(guò)程中力求準(zhǔn)確、完善,但是書(shū)中難免會(huì)存在疏漏之處,懇請(qǐng)廣大讀者批評(píng)、指正,也歡迎大家加入QQ群(111083348)進(jìn)行交流。
讀者服務(wù)
輕松注冊(cè)成為博文視點(diǎn)社區(qū)用戶(hù)(www.broadview.com.cn),您即可享受以下服務(wù):
下載資源:本書(shū)教學(xué)視頻及資源文件,均可在下載資源處下載。
提交勘誤:您對(duì)書(shū)中內(nèi)容的修改意見(jiàn)可在【提交勘誤】處提交,若被采納,將獲贈(zèng)博文視點(diǎn)社區(qū)積分(在您購(gòu)買(mǎi)電子書(shū)時(shí),積分可用來(lái)抵扣相應(yīng)金額)。
與作者交流:在頁(yè)面下方【讀者評(píng)論】處留下您的疑問(wèn)或觀(guān)點(diǎn),與作者和其他讀者一同學(xué)習(xí)交流。
創(chuàng)銳設(shè)計(jì)創(chuàng)銳設(shè)計(jì),由一支優(yōu)秀的平面設(shè)計(jì)師與圖形圖像資深編輯隊(duì)伍組成。出版過(guò)眾多優(yōu)秀的圖形圖像方面的專(zhuān)業(yè)書(shū)籍,不僅在國(guó)內(nèi)處于領(lǐng)先地位,還有大量作品輸出過(guò)海外版權(quán),備受讀者青睞。在課程教材方面,由于他們擁有多年教育培訓(xùn)的經(jīng)驗(yàn),因此十分了解初學(xué)讀者的心理需求,從而研究出了一套行之有效的教學(xué)方法;此外,他們又參加過(guò)多個(gè)商業(yè)項(xiàng)目的設(shè)計(jì)工作,熟悉行業(yè)規(guī)范、了解客戶(hù)需求,擁有較高的設(shè)計(jì)水平,積累了豐富的制作經(jīng)驗(yàn)、為專(zhuān)業(yè)進(jìn)階讀者指出了技術(shù)進(jìn)階的明路;在他們的圖書(shū)中,選擇的實(shí)例不僅融會(huì)貫通了軟件技法,更能通過(guò)分享圖像處理經(jīng)驗(yàn),激發(fā)讀者的靈感、迸發(fā)發(fā)創(chuàng)意火花,達(dá)到事半功倍的效果。
Part 1 移動(dòng)UI設(shè)計(jì)基礎(chǔ) / 1
1.1 UI設(shè)計(jì)存在的意義 / 2
1.1.1 人機(jī)交互的橋梁 / 2
1.1.2 操作邏輯系統(tǒng)的展現(xiàn) / 3
1.1.3 展現(xiàn)系統(tǒng)的整體風(fēng)格 / 3
1.2 移動(dòng)UI設(shè)計(jì)的原則 / 4
1.2.1 視覺(jué)一致性原則 / 4
1.2.2 視覺(jué)簡(jiǎn)易性原則 / 5
1.2.3 從用戶(hù)的習(xí)慣考慮 / 6
1.2.4 操作的靈活性及人性化 / 8
1.3 兩大主流操作系統(tǒng)的特點(diǎn)對(duì)比 / 9
1.4 不同系統(tǒng)UI視覺(jué)的主要組成要素及特征 / 10
1.4.1 iOS系統(tǒng)中的組成要素及特征 / 10
1.4.2 Android系統(tǒng)中的組成要素及特征 / 11
1.5 認(rèn)識(shí)移動(dòng)終端的分辨率和像素 / 13
1.6 移動(dòng)UI的創(chuàng)意與靈感收集 / 14
1.6.1 各種經(jīng)驗(yàn)和靈感的記錄 / 14
1.6.2 將對(duì)象抽象化 / 15
1.6.3 設(shè)計(jì)靈感的轉(zhuǎn)移 / 16
1.7 移動(dòng)UI的視覺(jué)設(shè)計(jì)流程 / 18
Part 2 PS在移動(dòng)UI設(shè)計(jì)中的常用功能簡(jiǎn)介 / 21
2.1 繪圖工具的介紹 / 22
2.1.1 規(guī)則形狀的繪制 / 22
2.1.2 自定義形狀的繪制 / 23
2.1.3 繪制任意所需的形狀 / 25
2.2 圖層樣式的運(yùn)用 / 26
2.2.1 增強(qiáng)立體感的圖層樣式 / 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 文字的添加與設(shè)置 / 34
2.4.2 文字的高級(jí)編輯 / 35
Part 3 移動(dòng)UI界面中基本元素的制作 / 37
3.1 按鈕 / 38
3.1.1 按鈕設(shè)計(jì)的基礎(chǔ)知識(shí) / 38
3.1.2 扁平化按鈕的設(shè)計(jì) / 39
3.2 開(kāi)關(guān) / 42
3.2.1 開(kāi)關(guān)設(shè)計(jì)的基礎(chǔ)知識(shí) / 42
3.2.2 簡(jiǎn)易色塊開(kāi)關(guān)的設(shè)計(jì) / 44
3.2.3 擬物化開(kāi)關(guān)的設(shè)計(jì) / 45
3.3 進(jìn)度條 / 47
3.3.1 進(jìn)度條設(shè)計(jì)的基礎(chǔ)知識(shí) / 47
3.3.2 扁平化進(jìn)度條的設(shè)計(jì) / 49
3.3.3 層次感強(qiáng)烈的進(jìn)度條設(shè)計(jì) / 50
3.4 搜索欄 / 54
3.4.1 搜索欄設(shè)計(jì)的基礎(chǔ)知識(shí) / 54
3.4.2 扁平化搜索欄的設(shè)計(jì) / 56
3.5 列表框 / 61
3.5.1 列表框設(shè)計(jì)的基礎(chǔ)知識(shí) / 61
3.5.2 簡(jiǎn)易列表框的設(shè)計(jì) / 62
3.5.3 立體化列表框的設(shè)計(jì) / 64
3.6 標(biāo)簽欄 / 68
3.6.1 標(biāo)簽欄設(shè)計(jì)的基礎(chǔ)知識(shí) / 68
3.6.2 線(xiàn)性化標(biāo)簽欄設(shè)計(jì) / 69
3.6.3 木紋質(zhì)感的標(biāo)簽欄設(shè)計(jì) / 70
3.7 圖標(biāo)欄 / 73
3.7.1 圖標(biāo)欄設(shè)計(jì)的基礎(chǔ)知識(shí) / 73
3.7.2 線(xiàn)性化圖標(biāo)欄設(shè)計(jì) / 74
3.7.3 紙箱紋理的圖標(biāo)欄設(shè)計(jì) / 77
Part 4 iOS系統(tǒng)及其組件的設(shè)計(jì) / 81
4.1 iOS系統(tǒng)設(shè)計(jì)特點(diǎn) / 82
4.1.1 充分利用整個(gè)屏幕 / 82
4.1.2 使用半透明底板 / 82
4.1.3 信息的清晰呈現(xiàn) / 83
4.2 iOS系統(tǒng)設(shè)計(jì)的規(guī)范 / 85
4.2.1 設(shè)計(jì)原則 / 85
4.2.2 色彩和字體 / 88
4.2.3 圖標(biāo)的設(shè)計(jì) / 92
4.3 iOS系統(tǒng)界面設(shè)計(jì)實(shí)訓(xùn) / 96
4.3.1 扁平化圖標(biāo)的設(shè)計(jì) / 96
4.3.2 半透明效果的界面設(shè)計(jì) / 104
Part 5 Android系統(tǒng)及其組件的設(shè)計(jì) / 111
5.1 Android系統(tǒng)的特點(diǎn) / 112
5.2 Android系統(tǒng)的設(shè)計(jì)規(guī)范 / 114
5.2.1 度量單位 / 114
5.2.2 字體的使用標(biāo)準(zhǔn) / 116
5.2.3 色彩的應(yīng)用規(guī)范 / 117
5.2.4 四種類(lèi)型的圖標(biāo) / 120
5.3 六種標(biāo)準(zhǔn)的Widget規(guī)范 / 122
5.3.1 Widget框架簡(jiǎn)介 / 122
5.3.2 Widget框架的標(biāo)準(zhǔn)尺寸 / 124
5.3.3 41的Widget框架設(shè)計(jì) / 125
5.3.4 33的Widget框架設(shè)計(jì) / 129
5.3.5 22的Widget框架設(shè)計(jì) / 133
5.3.6 41的加長(zhǎng)Widget框架設(shè)計(jì) / 136
5.3.7 33的橫向Widget框架設(shè)計(jì) / 140
5.3.8 22的橫向Widget框架設(shè)計(jì) / 145
5.4 Android系統(tǒng)界面設(shè)計(jì)實(shí)訓(xùn) / 150
5.4.1 立體化的圖標(biāo)設(shè)計(jì) / 150
5.4.2 超強(qiáng)立體感的界面設(shè)計(jì) / 159
Part 6 孕媽幫手App設(shè)計(jì) / 171
界面布局規(guī)劃 / 172
創(chuàng)意思路剖析 / 172
確定配色方案 / 173
定義組件風(fēng)格 / 174
制作步驟詳解 / 174
Part 7 美食網(wǎng)站App設(shè)計(jì) / 185
界面布局規(guī)劃 / 186
創(chuàng)意思路剖析 / 186
確定配色方案 / 187
定義組件風(fēng)格 / 188
制作步驟詳解 / 188
Part 8 籃球運(yùn)動(dòng)App設(shè)計(jì) / 201
界面布局規(guī)劃 / 202
創(chuàng)意思路剖析 / 202
確定配色方案 / 203
定義組件風(fēng)格 / 203
制作步驟詳解 / 204
Part 9 流量銀行App設(shè)計(jì) / 217
界面布局規(guī)劃 / 218
創(chuàng)意思路剖析 / 218
確定配色方案 / 219
定義組件風(fēng)格 / 219
制作步驟詳解 / 220
Part 10 藏寶游戲App設(shè)計(jì) / 231
界面布局規(guī)劃 / 232
創(chuàng)意思路剖析 / 232
確定配色方案 / 233
定義組件風(fēng)格 / 234
制作步驟詳解 / 234
Part 11 音樂(lè)播放App設(shè)計(jì) / 247
界面布局規(guī)劃 / 248
創(chuàng)意思路剖析 / 248
確定配色方案 / 249
定義組件風(fēng)格 / 250
制作步驟詳解 / 250
Part 12 旅游資訊App設(shè)計(jì) / 267
界面布局規(guī)劃 / 268
創(chuàng)意思路剖析 / 268
確定配色方案 / 269
定義組件風(fēng)格 / 270
制作步驟詳解 / 270