《移動端UI元素圖形創意設計案例教程》是2022年電子工業出版社出版的圖書，作者是魏雲柯、賴苑圓。
基本介紹
- 書名： 移動端UI元素圖形創意設計案例教程
- 作者：魏雲柯、賴苑圓
- 出版社： 電子工業出版社
- 出版時間：2022年
- 頁數：280 頁
- 定價：57.8 元
- 開本：16 開
- ISBN： 9787121438301
內容簡介,圖書目錄,
內容簡介
本書對接1+X職業技能等級證書考試內容，融入課程思政內容，是崗課賽證融通的項目化教材。本書以培養學生的UI元素圖形創意能力為根本，結合繪圖軟體的功能演示，通過案例有針對性地講解UI項目的設計過程及軟體的操作步驟，從而達到讓學生熟練掌握繪圖軟體的目的。案例所使用的軟體包括Photoshop、Illustrator和After Effects。全書共10個項目，項目1是概述，包含UI設計的基礎知識和3個軟體的功能簡述。項目2～項目9是各個案例的分步解析，通過案例講解界面構圖、圖形元素和色彩、字型規範等。項目10是綜合實戰，包括從項目分析、策劃和設計到製作規範和如何完成的全過程講解。本書不僅可以幫助學生迅速進入職場角色，還提供了豐富的教學資源幫助教師快速開課。本書主要適合作為軟體技術專業，以及UI方向和藝術設計類相關專業的高職本科、專科學生的教材。
圖書目錄
項目1 概述............................................................................................ 001
1.1 UI 設計的概念和設計原則 ....................................................................... 001
1.2 UI 設計的流程 ......................................................................................... 003
1.3 UI 元素的分類 ......................................................................................... 007
1.4 UI 版面和字型設計 .................................................................................. 009
1.4.1 版面設計的思路 ......................................................................... 010
1.4.2 版面設計的步驟 ......................................................................... 015
1.4.3 字型設計在圖示和彈出視窗中的運用 ......................................... 016
1.4.4 字型設計的方法和步驟 ............................................................... 017
1.5 UI 色彩和圖形設計概述 .......................................................................... 019
1.5.1 UI 色彩運用法則......................................................................... 019
1.5.2 色彩規範的製作 ......................................................................... 021
1.5.3 圖形設計在UI 中的運用 ............................................................. 022
1.5.4 圖形設計的方法和步驟 ............................................................... 023
1.6 繪圖軟體Photoshop 界面工具和功能簡述.............................................. 024
1.7 繪圖軟體Illustrator 界面工具和功能簡述 ................................................ 027
1.8 動效軟體After Effects 界面工具和功能簡述 ........................................... 028
項目2 國小霸英語App 功能圖示設計及繪製方法........................................... 030
2.1 功能圖示的概念 ...................................................................................... 030
2.2 功能圖示範例——已上線 ........................................................................ 030
2.3 功能圖示的設計原則 ............................................................................... 032
2.4 功能圖示的風格類型 ............................................................................... 035
2.5 功能圖示的設計步驟 ............................................................................... 036
2.6 完整項目課堂演示+ 學生實操 國小霸英語App 底部標籤欄圖示設計及
繪製方法 ................................................................................................. 042
2.6.1 項目相關知識 ............................................................................. 042
2.6.2 項目準備與設計 ......................................................................... 042
2.6.3 項目實施 .................................................................................... 044
2.6.4 項目總結 .................................................................................... 055
2.7 拓展練習 ................................................................................................. 056
項目3 甜在心App 圖示設計及繪製方法....................................................... 058
3.1 App 圖示的概念 ...................................................................................... 058
3.2 App 圖示範例——已上線 ........................................................................ 058
3.3 App 圖示的設計原則 ............................................................................... 064
3.4 App 圖示的設計步驟 ............................................................................... 064
3.5 完整項目課堂演示+ 學生實操 甜在心App 圖示設計及繪製方法 ............ 070
3.5.1 項目相關知識 ............................................................................. 070
3.5.2 項目準備與設計 ......................................................................... 070
3.5.3 項目實施 .................................................................................... 072
3.5.4 項目總結 .................................................................................... 089
3.6 拓展練習 ................................................................................................. 091
項目4 桃兔社交通信App 圖示和個人頁設計及繪製方法.................................. 092
4.1 色彩的重要性 .......................................................................................... 092
4.2 什麼是色彩 ............................................................................................. 092
4.3 色彩搭配方法 .......................................................................................... 096
4.4 優秀的圖示和界面配色案例賞析 ............................................................. 099
4.5 使用繪圖軟體設定色彩 ........................................................................... 101
4.6 完整項目課堂演示+ 學生實操 桃兔社交通信App 圖示和個人頁設計及
繪製方法 ................................................................................................. 107
4.6.1 項目相關知識 ............................................................................. 107
4.6.2 項目準備與設計 ......................................................................... 108
4.6.3 項目實施 .................................................................................... 109
4.6.4 項目總結 .................................................................................... 124
4.7 拓展練習 ................................................................................................. 125
項目5 怪魚旅行App 引導頁設計及繪製方法..................................................126
5.1 引導頁的概念 .......................................................................................... 126
5.2 引導頁範例——已上線 ........................................................................... 126
5.3 引導頁的設計原則................................................................................... 129
5.4 引導頁的類別 .......................................................................................... 130
5.5 引導頁的設計步驟................................................................................... 136
5.6 完整項目課堂演示+ 學生實操 怪魚旅行App 引導頁設計及繪製方法 ..... 139
5.6.1 項目相關知識 ............................................................................. 140
5.6.2 項目準備與設計 ......................................................................... 140
5.6.3 項目實施 .................................................................................... 142
5.6.4 項目總結 .................................................................................... 149
5.7 拓展練習 ................................................................................................. 150
項目6 “不期而遇”女裝促銷Banner 設計及繪製方法....................................152
6.1 Banner 的概念 ........................................................................................ 152
6.2 Banner 的設計原則 ................................................................................. 153
6.3 Banner 的設計步驟 ................................................................................. 155
6.4 完整項目課堂演示+ 學生實操 “不期而遇”女裝促銷Banner 設計及
繪製方法 ................................................................................................. 163
6.4.1 項目相關知識 ............................................................................. 164
6.4.2 項目準備與設計 ......................................................................... 164
6.4.3 項目實施 .................................................................................... 165
6.4.4 項目總結 .................................................................................... 170
6.5 拓展練習 ................................................................................................. 170
項目7 好又省家裝詳情頁一屏和個人頁一屏設計及繪製方法...............................172
7.1 詳情頁和個人頁的概念 ........................................................................... 172
7.2 詳情頁和個人頁範例——已上線 ............................................................. 173
7.3 詳情頁和個人頁的設計原則 .................................................................... 180
7.4 詳情頁和個人頁的設計步驟 .................................................................... 185
7.5 完整項目課堂演示+ 學生實操 好又省家裝詳情頁一屏和個人頁一屏設計
及繪製方法 ............................................................................................. 188
7.5.1 項目相關知識 ............................................................................. 188
7.5.2 項目準備與設計 ......................................................................... 188
7.5.3 項目實施 .................................................................................... 191
7.5.4 項目總結 .................................................................................... 194
7.6 拓展練習 ................................................................................................. 195
項目8 “Weather Icons”動態圖示設計及繪製方法......................................196
8.1 動態圖示的概念 ...................................................................................... 196
8.2 動態圖示範例——已上線 ........................................................................ 197
8.3 動態圖示的類型 ...................................................................................... 199
8.4 After Effects 操作入門 ............................................................................ 203
8.5 完整項目課堂演示+ 學生實操 “Weather Icons”動態圖示設計及
繪製方法 ................................................................................................. 206
8.5.1 項目相關知識 ............................................................................. 208
8.5.2 項目準備與設計 ......................................................................... 208
8.5.3 項目實施 .................................................................................... 208
8.5.4 項目總結 .................................................................................... 215
8.6 拓展練習 ................................................................................................. 216
項目9 怪魚旅行App 首頁版式設計及繪製方法...............................................217
9.1 了解移動端界面版式設計 ........................................................................ 217
9.2 優秀的移動端App 首頁版式範例——已上線 .......................................... 217
9.3 App 界面的布局構成 ............................................................................... 219
9.4 App 界面的設計原則 ............................................................................... 229
9.5 App 界面的設計規範 ............................................................................... 231
9.6 完整項目課堂演示+ 學生實操 怪魚旅行App 首頁版式設計及繪製方法 ... 232
9.6.1 項目相關知識 ............................................................................. 232
9.6.2 項目準備與設計 ......................................................................... 233
9.6.3 方案一項目實施 ......................................................................... 233
9.6.4 方案二項目實施 ......................................................................... 248
9.6.5 項目總結 .................................................................................... 249
9.7 拓展練習 ................................................................................................. 250
項目10 怦然樂動App 界面設計及繪製方法...................................................251
10.1 App 界面設計概述 ................................................................................ 251
10.2 項目啟動 ............................................................................................... 251
10.3 項目調研與分析 .................................................................................... 252
10.4 系統設計 ............................................................................................... 260
10.5 視覺設計 ............................................................................................... 264
10.6 完整項目課堂演示+ 學生實操 怦然樂動App 界面 設計及繪製方法 ..... 268
10.6.1 項目相關知識 ........................................................................... 268
10.6.2 項目準備與設計 ....................................................................... 268
10.6.3 項目實施 .................................................................................. 268
10.6.4 項目總結 .................................................................................. 271
10.7 拓展練習 ............................................................................................... 272
