移動(dòng)端UI元素圖形創(chuàng)意設(shè)計(jì)案例教程
定 價(jià)：57.8 元
- 作者：魏云柯
- 出版時(shí)間：2022/6/1
- ISBN：9787121438301
- 出 版 社：電子工業(yè)出版社
- 中圖法分類(lèi)：TN929.53
- 頁(yè)碼：280
- 紙張：
- 版次：01
- 開(kāi)本：16開(kāi)
本書(shū)對(duì)接1+X職業(yè)技能等級(jí)證書(shū)考試內(nèi)容，融入課程思政內(nèi)容，是崗課賽證融通的項(xiàng)目化教材。本書(shū)以培養(yǎng)學(xué)生的UI元素圖形創(chuàng)意能力為根本，結(jié)合繪圖軟件的功能演示，通過(guò)案例有針對(duì)性地講解UI項(xiàng)目的設(shè)計(jì)過(guò)程及軟件的操作步驟，從而達(dá)到讓學(xué)生熟練掌握繪圖軟件的目的。案例所使用的軟件包括Photoshop、Illustrator和After Effects。全書(shū)共10個(gè)項(xiàng)目，項(xiàng)目1是概述，包含UI設(shè)計(jì)的基礎(chǔ)知識(shí)和3個(gè)軟件的功能簡(jiǎn)述。項(xiàng)目2～項(xiàng)目9是各個(gè)案例的分步解析，通過(guò)案例講解界面構(gòu)圖、圖形元素和色彩、字體規(guī)范等。項(xiàng)目10是綜合實(shí)戰(zhàn)，包括從項(xiàng)目分析、策劃和設(shè)計(jì)到制作規(guī)范和如何完成的全過(guò)程講解。本書(shū)不僅可以幫助學(xué)生迅速進(jìn)入職場(chǎng)角色，還提供了豐富的教學(xué)資源幫助教師快速開(kāi)課。本書(shū)主要適合作為軟件技術(shù)專(zhuān)業(yè)，以及UI方向和藝術(shù)設(shè)計(jì)類(lèi)相關(guān)專(zhuān)業(yè)的高職本科、專(zhuān)科學(xué)生的教材。
魏云柯，碩士研究生畢業(yè)于四川大學(xué)，任教于廣東科學(xué)技術(shù)職業(yè)學(xué)院。現(xiàn)任軟件技術(shù)UI方向團(tuán)隊(duì)負(fù)責(zé)人，澳門(mén)設(shè)計(jì)師協(xié)會(huì)會(huì)員，中外設(shè)計(jì)研究院理事。有多年設(shè)計(jì)和一線教學(xué)經(jīng)驗(yàn)，設(shè)計(jì)作品曾獲得亞洲設(shè)計(jì)聯(lián)盟主辦首屆亞洲設(shè)計(jì)雙年展入選作品，并在韓國(guó)展出；秘魯“水”主題海報(bào)設(shè)計(jì)比賽入選作品，并在秘魯展出；中國(guó)創(chuàng)意設(shè)計(jì)年鑒.2018/2019金獎(jiǎng)一項(xiàng)、銀獎(jiǎng)兩項(xiàng)、銅獎(jiǎng)一項(xiàng)；第七屆中國(guó)高等院校設(shè)計(jì)大賽一等獎(jiǎng)一項(xiàng)、三等獎(jiǎng)兩項(xiàng)；第10屆中國(guó)高校美術(shù)作品學(xué)年展三等獎(jiǎng)等。指導(dǎo)學(xué)生參加大學(xué)生廣告藝術(shù)大賽、廣東省大學(xué)生計(jì)算機(jī)設(shè)計(jì)大賽等獲得多個(gè)等級(jí)獎(jiǎng)。
項(xiàng)目1 概述............................................................................................ 001
1.1 UI 設(shè)計(jì)的概念和設(shè)計(jì)原則 ....................................................................... 001
1.2 UI 設(shè)計(jì)的流程 ......................................................................................... 003
1.3 UI 元素的分類(lèi) ......................................................................................... 007
1.4 UI 版面和字體設(shè)計(jì) .................................................................................. 009
1.4.1 版面設(shè)計(jì)的思路 ......................................................................... 010
1.4.2 版面設(shè)計(jì)的步驟 ......................................................................... 015
1.4.3 字體設(shè)計(jì)在圖標(biāo)和彈出窗口中的運(yùn)用 ......................................... 016
1.4.4 字體設(shè)計(jì)的方法和步驟 ............................................................... 017
1.5 UI 色彩和圖形設(shè)計(jì)概述 .......................................................................... 019
1.5.1 UI 色彩運(yùn)用法則......................................................................... 019
1.5.2 色彩規(guī)范的制作 ......................................................................... 021
1.5.3 圖形設(shè)計(jì)在UI 中的運(yùn)用 ............................................................. 022
1.5.4 圖形設(shè)計(jì)的方法和步驟 ............................................................... 023
1.6 繪圖軟件Photoshop 界面工具和功能簡(jiǎn)述.............................................. 024
1.7 繪圖軟件Illustrator 界面工具和功能簡(jiǎn)述 ................................................ 027
1.8 動(dòng)效軟件After Effects 界面工具和功能簡(jiǎn)述 ........................................... 028
項(xiàng)目2 小學(xué)霸英語(yǔ)App 功能圖標(biāo)設(shè)計(jì)及繪制方法........................................... 030
2.1 功能圖標(biāo)的概念 ...................................................................................... 030
2.2 功能圖標(biāo)范例——已上線 ........................................................................ 030
2.3 功能圖標(biāo)的設(shè)計(jì)原則 ............................................................................... 032
2.4 功能圖標(biāo)的風(fēng)格類(lèi)型 ............................................................................... 035
2.5 功能圖標(biāo)的設(shè)計(jì)步驟 ............................................................................... 036
2.6 完整項(xiàng)目課堂演示+ 學(xué)生實(shí)操 小學(xué)霸英語(yǔ)App 底部標(biāo)簽欄圖標(biāo)設(shè)計(jì)及
繪制方法 ................................................................................................. 042
2.6.1 項(xiàng)目相關(guān)知識(shí) ............................................................................. 042
2.6.2 項(xiàng)目準(zhǔn)備與設(shè)計(jì) ......................................................................... 042
2.6.3 項(xiàng)目實(shí)施 .................................................................................... 044
2.6.4 項(xiàng)目總結(jié) .................................................................................... 055
2.7 拓展練習(xí) ................................................................................................. 056
項(xiàng)目3 甜在心App 圖標(biāo)設(shè)計(jì)及繪制方法....................................................... 058
3.1 App 圖標(biāo)的概念 ...................................................................................... 058
3.2 App 圖標(biāo)范例——已上線 ........................................................................ 058
3.3 App 圖標(biāo)的設(shè)計(jì)原則 ............................................................................... 064
3.4 App 圖標(biāo)的設(shè)計(jì)步驟 ............................................................................... 064
3.5 完整項(xiàng)目課堂演示+ 學(xué)生實(shí)操 甜在心App 圖標(biāo)設(shè)計(jì)及繪制方法 ............ 070
3.5.1 項(xiàng)目相關(guān)知識(shí) ............................................................................. 070
3.5.2 項(xiàng)目準(zhǔn)備與設(shè)計(jì) ......................................................................... 070
3.5.3 項(xiàng)目實(shí)施 .................................................................................... 072
3.5.4 項(xiàng)目總結(jié) .................................................................................... 089
3.6 拓展練習(xí) ................................................................................................. 091
項(xiàng)目4 桃兔社交通信App 圖標(biāo)和個(gè)人頁(yè)設(shè)計(jì)及繪制方法.................................. 092
4.1 色彩的重要性 .......................................................................................... 092
4.2 什么是色彩 ............................................................................................. 092
4.3 色彩搭配方法 .......................................................................................... 096
4.4 優(yōu)秀的圖標(biāo)和界面配色案例賞析 ............................................................. 099
4.5 使用繪圖軟件設(shè)置色彩 ........................................................................... 101
4.6 完整項(xiàng)目課堂演示+ 學(xué)生實(shí)操 桃兔社交通信App 圖標(biāo)和個(gè)人頁(yè)設(shè)計(jì)及
繪制方法 ................................................................................................. 107
4.6.1 項(xiàng)目相關(guān)知識(shí) ............................................................................. 107
4.6.2 項(xiàng)目準(zhǔn)備與設(shè)計(jì) ......................................................................... 108
4.6.3 項(xiàng)目實(shí)施 .................................................................................... 109
4.6.4 項(xiàng)目總結(jié) .................................................................................... 124
4.7 拓展練習(xí) ................................................................................................. 125
項(xiàng)目5 怪魚(yú)旅行App 引導(dǎo)頁(yè)設(shè)計(jì)及繪制方法..................................................126
5.1 引導(dǎo)頁(yè)的概念 .......................................................................................... 126
5.2 引導(dǎo)頁(yè)范例——已上線 ........................................................................... 126
5.3 引導(dǎo)頁(yè)的設(shè)計(jì)原則................................................................................... 129
5.4 引導(dǎo)頁(yè)的類(lèi)別 .......................................................................................... 130
5.5 引導(dǎo)頁(yè)的設(shè)計(jì)步驟................................................................................... 136
5.6 完整項(xiàng)目課堂演示+ 學(xué)生實(shí)操 怪魚(yú)旅行App 引導(dǎo)頁(yè)設(shè)計(jì)及繪制方法 ..... 139
5.6.1 項(xiàng)目相關(guān)知識(shí) ............................................................................. 140
5.6.2 項(xiàng)目準(zhǔn)備與設(shè)計(jì) ......................................................................... 140
5.6.3 項(xiàng)目實(shí)施 .................................................................................... 142
5.6.4 項(xiàng)目總結(jié) .................................................................................... 149
5.7 拓展練習(xí) ................................................................................................. 150
項(xiàng)目6 “不期而遇”女裝促銷(xiāo)Banner 設(shè)計(jì)及繪制方法....................................152
6.1 Banner 的概念 ........................................................................................ 152
6.2 Banner 的設(shè)計(jì)原則 ................................................................................. 153
6.3 Banner 的設(shè)計(jì)步驟 ................................................................................. 155
6.4 完整項(xiàng)目課堂演示+ 學(xué)生實(shí)操 “不期而遇”女裝促銷(xiāo)Banner 設(shè)計(jì)及
繪制方法 ................................................................................................. 163
6.4.1 項(xiàng)目相關(guān)知識(shí) ............................................................................. 164
6.4.2 項(xiàng)目準(zhǔn)備與設(shè)計(jì) ......................................................................... 164
6.4.3 項(xiàng)目實(shí)施 .................................................................................... 165
6.4.4 項(xiàng)目總結(jié) .................................................................................... 170
6.5 拓展練習(xí) ................................................................................................. 170
項(xiàng)目7 好又省家裝詳情頁(yè)一屏和個(gè)人頁(yè)一屏設(shè)計(jì)及繪制方法...............................172
7.1 詳情頁(yè)和個(gè)人頁(yè)的概念 ........................................................................... 172
7.2 詳情頁(yè)和個(gè)人頁(yè)范例——已上線 ............................................................. 173
7.3 詳情頁(yè)和個(gè)人頁(yè)的設(shè)計(jì)原則 .................................................................... 180
7.4 詳情頁(yè)和個(gè)人頁(yè)的設(shè)計(jì)步驟 .................................................................... 185
7.5 完整項(xiàng)目課堂演示+ 學(xué)生實(shí)操 好又省家裝詳情頁(yè)一屏和個(gè)人頁(yè)一屏設(shè)計(jì)
及繪制方法 ............................................................................................. 188
7.5.1 項(xiàng)目相關(guān)知識(shí) ............................................................................. 188
7.5.2 項(xiàng)目準(zhǔn)備與設(shè)計(jì) ......................................................................... 188
7.5.3 項(xiàng)目實(shí)施 .................................................................................... 191
7.5.4 項(xiàng)目總結(jié) .................................................................................... 194
7.6 拓展練習(xí) ................................................................................................. 195
項(xiàng)目8 “Weather Icons”動(dòng)態(tài)圖標(biāo)設(shè)計(jì)及繪制方法......................................196
8.1 動(dòng)態(tài)圖標(biāo)的概念 ...................................................................................... 196
8.2 動(dòng)態(tài)圖標(biāo)范例——已上線 ........................................................................ 197
8.3 動(dòng)態(tài)圖標(biāo)的類(lèi)型 ...................................................................................... 199
8.4 After Effects 操作入門(mén) ............................................................................ 203
8.5 完整項(xiàng)目課堂演示+ 學(xué)生實(shí)操 “Weather Icons”動(dòng)態(tài)圖標(biāo)設(shè)計(jì)及
繪制方法 ................................................................................................. 206
8.5.1 項(xiàng)目相關(guān)知識(shí) ............................................................................. 208
8.5.2 項(xiàng)目準(zhǔn)備與設(shè)計(jì) ......................................................................... 208
8.5.3 項(xiàng)目實(shí)施 .................................................................................... 208
8.5.4 項(xiàng)目總結(jié) .................................................................................... 215
8.6 拓展練習(xí) ................................................................................................. 216
項(xiàng)目9 怪魚(yú)旅行App 首頁(yè)版式設(shè)計(jì)及繪制方法...............................................217
9.1 了解移動(dòng)端界面版式設(shè)計(jì) ........................................................................ 217
9.2 優(yōu)秀的移動(dòng)端App 首頁(yè)版式范例——已上線 .......................................... 217
9.3 App 界面的布局構(gòu)成 ............................................................................... 219
9.4 App 界面的設(shè)計(jì)原則 ............................................................................... 229
9.5 App 界面的設(shè)計(jì)規(guī)范 ............................................................................... 231
9.6 完整項(xiàng)目課堂演示+ 學(xué)生實(shí)操 怪魚(yú)旅行App 首頁(yè)版式設(shè)計(jì)及繪制方法 ... 232
9.6.1 項(xiàng)目相關(guān)知識(shí) ............................................................................. 232
9.6.2 項(xiàng)目準(zhǔn)備與設(shè)計(jì) ......................................................................... 233
9.6.3 方案一項(xiàng)目實(shí)施 ......................................................................... 233
9.6.4 方案二項(xiàng)目實(shí)施 ......................................................................... 248
9.6.5 項(xiàng)目總結(jié) .................................................................................... 249
9.7 拓展練習(xí) ................................................................................................. 250
項(xiàng)目10 怦然樂(lè)動(dòng)App 界面設(shè)計(jì)及繪制方法...................................................251
10.1 App 界面設(shè)計(jì)概述 ................................................................................ 251
10.2 項(xiàng)目啟動(dòng) ............................................................................................... 251
10.3 項(xiàng)目調(diào)研與分析 .................................................................................... 252
10.4 系統(tǒng)設(shè)計(jì) ............................................................................................... 260
10.5 視覺(jué)設(shè)計(jì) ............................................................................................... 264
10.6 完整項(xiàng)目課堂演示+ 學(xué)生實(shí)操 怦然樂(lè)動(dòng)App 界面 設(shè)計(jì)及繪制方法 ..... 268
10.6.1 項(xiàng)目相關(guān)知識(shí) ........................................................................... 268
10.6.2 項(xiàng)目準(zhǔn)備與設(shè)計(jì) ....................................................................... 268
10.6.3 項(xiàng)目實(shí)施 .................................................................................. 268
10.6.4 項(xiàng)目總結(jié) .................................................................................. 271
10.7 拓展練習(xí) ............................................................................................... 272
書(shū)單推薦
