移動端UI元素圖形創意設計案例教程

魏雲柯
碩士研究生畢業於四川大學，任教於廣東科學技術職業學院。現任軟件技術UI方向團隊負責人，澳門設計師協會會員，中外設計研究院理事。有多年設計和一線教學經驗，設計作品曾獲得亞洲設計聯盟主辦首屆亞洲設計雙年展入選作品，並在韓國展出；秘魯“水”主題海報設計比賽入選作品，並在秘魯展出；中國創意設計年鑑.2018/2019金獎一項、銀獎兩項、銅獎一項；第七屆中國高等院校設計大賽一等獎一項、三等獎兩項；第10屆中國高校美術作品學年展三等獎等。指導學生參加大學生廣告藝術大賽、廣東省大學生計算機設計大賽等獲得多個等級獎。

項目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