Photoshop+Illustrator+After Effects移動(dòng)UI全效實(shí)戰(zhàn)手冊(cè)
定 價(jià):99.8 元
- 作者:孟琴 李揚(yáng) 汪翔 余沁 向樺
- 出版時(shí)間:2022/1/1
- ISBN:9787115572882
- 出 版 社:人民郵電出版社
- 中圖法分類(lèi):TN929.53
- 頁(yè)碼:220
- 紙張:
- 版次:01
- 開(kāi)本:16開(kāi)
本書(shū)基于軟件Potoshop、Illustrator、After Effects來(lái)進(jìn)行移動(dòng)端UI設(shè)計(jì)解析,內(nèi)容從最基礎(chǔ)的圖標(biāo)設(shè)計(jì)開(kāi)始再到移動(dòng)端界面設(shè)計(jì),從無(wú)到有的過(guò)程解析及最終的動(dòng)效設(shè)計(jì)。分析目前年輕設(shè)計(jì)師感興趣的像素風(fēng)、MBE、正交透視(2.5D圖標(biāo))圖標(biāo)制作及手機(jī)主題圖標(biāo)的創(chuàng)作思路。界面設(shè)計(jì)部分根據(jù)分類(lèi),對(duì)應(yīng)版式、色彩、設(shè)計(jì)規(guī)范等進(jìn)行展開(kāi),同時(shí)分析了移動(dòng)端產(chǎn)品綜合案列。動(dòng)效設(shè)計(jì)部分承接界面視覺(jué)設(shè)計(jì)相關(guān)內(nèi)容,選擇AE軟件來(lái)進(jìn)行講解。本書(shū)涵蓋移動(dòng)UI設(shè)計(jì)中多個(gè)主流軟件,配合案例進(jìn)行講解,同時(shí)配書(shū)提供操作案例效果源文件和同步講解視頻,以供讀者學(xué)習(xí)使用。
1.使用Potoshop、Illustrator、After Effects作為基礎(chǔ)工具,兼顧iOS和Android系統(tǒng)設(shè)計(jì)原則,詳細(xì)講解圖標(biāo)設(shè)計(jì)和界面設(shè)計(jì)技巧;
2.贈(zèng)送案例文件和效果文件,提供在線教學(xué)視頻和配套教學(xué)PPT課件,讓讀者隨學(xué)隨練,及時(shí)解決相關(guān)問(wèn)題,提高專(zhuān)業(yè)知識(shí)轉(zhuǎn)化率;
3.按照“知識(shí)-解析-應(yīng)用”的思路進(jìn)行編排,具備科學(xué)完整的教學(xué)結(jié)構(gòu),書(shū)中設(shè)置有小貼士、設(shè)計(jì)方式等模塊,幫助讀者加深理解;
4.“UI中國(guó)推薦設(shè)計(jì)師”VIENTIANE參與本書(shū)實(shí)戰(zhàn)案例設(shè)計(jì),幫助讀者結(jié)合軟件進(jìn)行操作,在實(shí)戰(zhàn)中形成自己的設(shè)計(jì)思路。
向樺,西南財(cái)經(jīng)大學(xué)天府學(xué)院講師,UXPA中國(guó)用戶(hù)體驗(yàn)專(zhuān)業(yè)協(xié)會(huì)會(huì)員、中國(guó)用戶(hù)體驗(yàn)聯(lián)盟會(huì)員,主要從事和擅長(zhǎng)界面視覺(jué)設(shè)計(jì)、交互設(shè)計(jì)教學(xué)研究。
孟琴,西南財(cái)經(jīng)大學(xué)天府學(xué)院講師。四川省工業(yè)設(shè)計(jì)協(xié)會(huì)會(huì)員,孟宇視覺(jué)工作室創(chuàng)始人、綿陽(yáng)俊霖文化藝術(shù)廣場(chǎng)有限公司文化創(chuàng)意產(chǎn)業(yè)項(xiàng)目經(jīng)理、印客創(chuàng)學(xué)教育機(jī)構(gòu)合伙人。個(gè)人設(shè)計(jì)作品多次獲國(guó)際級(jí)獎(jiǎng)項(xiàng),多次參與省部級(jí)課題及多個(gè)商業(yè)項(xiàng)目。
李揚(yáng),西南財(cái)經(jīng)大學(xué)天府學(xué)院講師。四川省工業(yè)設(shè)計(jì)協(xié)會(huì)會(huì)員,成都文清文化傳播有限公司聯(lián)合創(chuàng)始人、設(shè)計(jì)作品獲“世界之星”、“中國(guó)之星”包裝類(lèi)希望之星一等獎(jiǎng)、中國(guó)“包裝之星”創(chuàng)意獎(jiǎng)一等獎(jiǎng)等設(shè)計(jì)大獎(jiǎng),并收錄于《中國(guó)西南設(shè)計(jì)年鑒》,學(xué)術(shù)論文發(fā)表于《包裝設(shè)計(jì)》等。參與未來(lái)中心、ACROSS.LAB跨界實(shí)驗(yàn)室、成都市藝術(shù)博覽會(huì)等多個(gè)大型商業(yè)項(xiàng)目設(shè)計(jì)。
汪翔,曾服務(wù)于各類(lèi)一線品牌設(shè)計(jì),福建省教育資源庫(kù)設(shè)計(jì)板塊授權(quán)作者,搜狗簽約設(shè)計(jì)師,UI中國(guó)推薦設(shè)計(jì)師。
余沁,四川美術(shù)學(xué)院視覺(jué)傳達(dá)碩士,主要研究方向?yàn)槠放菩蜗蟛邉澟c創(chuàng)意設(shè)計(jì)。曾就職于宜賓電視臺(tái)、重慶藝術(shù)工程職業(yè)學(xué)院、四川文化藝術(shù)學(xué)院,現(xiàn)就職于西南財(cái)經(jīng)大學(xué)天府學(xué)院。學(xué)習(xí)及工作期間曾參與西南政法大學(xué)、黔江旅游局、重慶大足石刻、中鈔油墨公司等多個(gè)相關(guān)項(xiàng)目設(shè)計(jì),參研多項(xiàng)科研項(xiàng)目及學(xué)術(shù)活動(dòng),并多次獲得國(guó)家級(jí)及省級(jí)設(shè)計(jì)獎(jiǎng)項(xiàng)。
第 1 章 圖標(biāo)設(shè)計(jì)/ 7
1.1 圖標(biāo)設(shè)計(jì)基礎(chǔ) / 8
1.1.1 圖標(biāo)的形式分類(lèi) / 8
1.1.2 圖標(biāo)的屬性分類(lèi) / 9
1.1.3 圖標(biāo)設(shè)計(jì)的視覺(jué)規(guī)范 / 10
1.1.4 圖標(biāo)設(shè)計(jì)軟件介紹 / 13
1.1.5 布爾運(yùn)算 / 14
1.2 剪影圖標(biāo)/ 18
1.2.1 剪影圖標(biāo)簡(jiǎn)介/ 18
1.2.2 剪影圖標(biāo)案例 / 19
1.3 MBE 圖標(biāo) / 25
1.3.1 MBE 圖標(biāo)簡(jiǎn)介 / 26
1.3.2 MBE 圖標(biāo)案例 / 27
1.4 扁平化圖標(biāo)/ 33
1.4.1 扁平化圖標(biāo)配色特點(diǎn) / 33
1.4.2 扁平化圖標(biāo)風(fēng)格/34
1.4.3 扁平化圖標(biāo)案例 / 35
1.5 等距視圖(2.5D)圖標(biāo) / 39
1.5.1 等距視圖風(fēng)格特點(diǎn)/ 39
1.5.2 等距視圖圖標(biāo)案例/ 40
1.6 像素風(fēng)圖標(biāo)/ 45
1.6.1 像素風(fēng)圖標(biāo)特點(diǎn) / 45
1.6.2 像素風(fēng)圖標(biāo)案例 / 46
1.7 擬物化圖標(biāo)/ 50
1.7.1 擬物化圖標(biāo)特點(diǎn)/ 50
1.7.2 圖層樣式解析/ 51
1.7.3 擬物化圖標(biāo)案例/55
1.8 主題圖標(biāo)設(shè)計(jì)/82
1.8.1 主題圖標(biāo)賞析 / 82
1.8.2 主題圖標(biāo)案例 84
第 2 章 iOS 系統(tǒng)和Android 系統(tǒng)設(shè)計(jì)原則及規(guī)范 /90
2.1 iOS 系統(tǒng)設(shè)計(jì)原則及規(guī)范/ 91
2.1.1 界面尺寸/ 91
2.1.2 欄高度 /91
2.1.3 邊距和間距 / 94
2.1.4 界面布局 / 96
2.1.5 圖片比例 / 99
2.1.6 圖標(biāo)規(guī)范/100
2.1.7 版式規(guī)范 / 101
2.1.8 文字規(guī)范 / 102
2.1.9 設(shè)計(jì)適配/ 102
2.2 Android 系統(tǒng)的界面設(shè)計(jì)原則及規(guī)范/103
2.2.1 界面尺寸/104
2.2.2 iOS與Android系統(tǒng)的設(shè)計(jì)語(yǔ)言及界面結(jié)構(gòu)差異對(duì)比 /105
2.2.3 欄高度 / 107
2.2.4 圖標(biāo)規(guī)范/ 108
2.2.5 文字與版式規(guī)范/ 110
2.2.6 設(shè)計(jì)適配/ 111
第3章 App界面設(shè)計(jì) /113
3.1 格式塔原理在界面設(shè)計(jì)中的應(yīng)用/114
3.1.1 接近性法則 / 114
3.1.2 相似性原理/ 114
3.2 控件/ 115
3.3 組件/ 117
3.4 閃屏頁(yè)和啟動(dòng)頁(yè)/ 119
3.4.1 閃屏頁(yè)和啟動(dòng)頁(yè)的特征/119
3.4.2 閃屏頁(yè)分類(lèi) /119
3.4.3 閃屏頁(yè)和啟動(dòng)頁(yè)的功能與適配 度/121
3.5 引導(dǎo)頁(yè)/ 122
3.5.1 引導(dǎo)頁(yè)分類(lèi) / 122
3.5.2 引導(dǎo)頁(yè)的功能與特征/ 123
3.6 空白頁(yè)/ 出錯(cuò)頁(yè) / 124
3.7 首頁(yè)/ 125
3.7.1 首頁(yè)的功能與特征 /125
3.7.2 首頁(yè)設(shè)計(jì)案例解析/126
3.8 個(gè)人中心頁(yè)/129
3.9 詳情頁(yè)/131
3.9.1 詳情頁(yè)內(nèi)容設(shè)置 / 131
3.9.2 詳情頁(yè)設(shè)計(jì)案例解析 / 132
3.10 登錄頁(yè) / 135
3.10.1 登錄頁(yè)設(shè)置 / 135
3.10.2 登錄頁(yè)設(shè)計(jì)案例解析 /135
3.11 沉浸式頁(yè)面 / 137
3.11.1 頁(yè)面配色 / 137
3.11.2 沉浸式頁(yè)面賞析/138
第4 章 頁(yè)面標(biāo)注與切圖 /139
4.1 常用標(biāo)注工具介紹/140
4.2 Parker使用說(shuō)明/140
4.3 切圖輸出/ 142
第5 章 交互設(shè)計(jì) /144
5.1 認(rèn)識(shí)交互設(shè)計(jì)/145
5.1.1 交互設(shè)計(jì)與界面設(shè)計(jì)的區(qū)別 /145
5.1.2 交互設(shè)計(jì)的五要素/145
5.2 交互設(shè)計(jì)七大定律/146
5.2.1 席克定律 /146
5.2.2 菲茨定律 / 147
5.2.3 泰思勒定律 / 148
5.2.4 奧卡姆剃刀原理/ 148
5.2.5 新鄉(xiāng)重夫防錯(cuò)原則/149
5.2.6 接近性法則 /149
5.2.7 神奇數(shù)字7±2 法則/149
5.3 交互設(shè)計(jì)輔助工具及應(yīng)用 /150
5.3.1 思維導(dǎo)圖/150
5.3.2 流程圖/ 150
5.3.3 線框圖/151
5.3.4 交互說(shuō)明文檔/152
第6 章 移動(dòng)端產(chǎn)品界面設(shè)計(jì)解析/ 153
6.1 互聯(lián)網(wǎng)公司團(tuán)隊(duì)架構(gòu)/154
6.1.1 產(chǎn)品團(tuán)隊(duì)/ 154
6.1.2 研發(fā)團(tuán)隊(duì)/ 155
6.2 移動(dòng)端產(chǎn)品開(kāi)發(fā)流程/155
6.3 名繡App 界面設(shè)計(jì)案例解析/ 156
6.3.1 產(chǎn)品分析/ 156
6.3.2 品牌形象/ 157
6.3.3 界面配色/ 158
6.3.4 界面圖標(biāo)設(shè)計(jì)/158
6.3.5 界面版式設(shè)計(jì)/ 158
6.4 “MUSIC & COFFEE”音咖概念A(yù)pp界面設(shè)計(jì)案例解析/162
6.4.1 產(chǎn)品定位/162
6.4.2 用戶(hù)研究/162
6.4.3 視覺(jué)規(guī)范/163
6.4.4 界面布局/165
6.4.5 界面視覺(jué)設(shè)計(jì)/166
第7 章 UI 中的動(dòng)效設(shè)計(jì)/ 171
7.1 動(dòng)效設(shè)計(jì)軟件介紹/172
7.1.1 UI 常用動(dòng)效設(shè)計(jì)軟件/172
7.1.2 AE 界面結(jié)構(gòu)與基本功能/172
7.1.3 AE 合成與變換/174
7.2 UI 動(dòng)效設(shè)計(jì)案例詳解/180
7.2.1 彈射玩具/180
7.2.2 動(dòng)態(tài)進(jìn)度條/185
7.2.3 充電顯示/188
7.2.4 發(fā)光盒子/ 189
7.2.5 信息提示/192
7.2.6 飛行動(dòng)畫(huà)/195
7.2.7 漸變字體/198
7.2.8 炫彩圖標(biāo)/202
7.2.9 廣告動(dòng)效/206
7.2.10 傳送動(dòng)效/ 208
7.2.11 變色雪花/210