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