123,123

內(nèi)容簡(jiǎn)介

　　內(nèi)容提要數(shù)字媒體交互設(shè)計(jì)是在產(chǎn)品創(chuàng)建的初期搭建的簡(jiǎn)單產(chǎn)品框架中實(shí)現(xiàn)用戶與產(chǎn)品進(jìn)行交流互動(dòng)的設(shè)計(jì)，它能夠按照客戶需求快速創(chuàng)建產(chǎn)品的線框圖、流程圖、原型和Word說明文檔等內(nèi)容。同時(shí)交互設(shè)計(jì)還支持多人協(xié)作設(shè)計(jì)和共享版本的控制管理。本書由淺入深地講解了產(chǎn)品交互原型的創(chuàng)建方法和設(shè)計(jì)規(guī)范，以“知識(shí)解析+課堂案例”為主線展開講解：知識(shí)解析能幫助學(xué)生系統(tǒng)地了解Web和移動(dòng) UI 設(shè)計(jì)的各類規(guī)范；課堂案例能幫助學(xué)生快速熟悉移動(dòng) UI交互設(shè)計(jì)流程，提高學(xué)生實(shí)戰(zhàn)技能。幫助讀者快速掌握產(chǎn)品原型工具的使用方法和技巧，同時(shí)了解產(chǎn)品交互原型設(shè)計(jì)需要掌握的設(shè)計(jì)規(guī)范，全面、系統(tǒng)地介紹了網(wǎng)頁(yè)及移動(dòng) UI 設(shè)計(jì)及交互設(shè)計(jì)的基礎(chǔ)知識(shí)和操作技巧，主要內(nèi)容包括交互設(shè)計(jì)開發(fā)流程、初識(shí)web及移動(dòng) UI 設(shè)計(jì)、UI 設(shè)計(jì)規(guī)范、Web及移動(dòng)產(chǎn)品交互設(shè)計(jì)開發(fā)及項(xiàng)目實(shí)施等。章交互設(shè)計(jì)開發(fā)流程：介紹交互設(shè)計(jì)的基本概念與理論基礎(chǔ)、設(shè)計(jì)流程以及從實(shí)踐中總結(jié)的交互設(shè)計(jì)的方法體系，漸進(jìn)的理解用戶體驗(yàn)，為深入的學(xué)習(xí)建立良好的開端。第二、三章讓讀者了解web端和移動(dòng)產(chǎn)品UI設(shè)計(jì)的規(guī)范，布局設(shè)計(jì)理論以及交互設(shè)計(jì)組件的分類和應(yīng)用，雖然并不是每個(gè)項(xiàng)目都要實(shí)現(xiàn)所有的步驟，但掌握完整的流程步驟有助于設(shè)計(jì)師對(duì)于交互設(shè)計(jì)有全面的把握。第四章主要介紹了原型設(shè)計(jì)工具Axure RP9，如何使用Axure RP9以及對(duì)web端交互功能案例的詳解，包括Axure頁(yè)面設(shè)置、Axure常用元件、制作產(chǎn)品交互原型時(shí)的注意事項(xiàng)、基礎(chǔ)交互功能實(shí)訓(xùn)案例，以及高保真交互實(shí)訓(xùn)案例等內(nèi)容。通過本章的學(xué)習(xí)，讀者能掌握Axure RP9的使用方法和技巧，并根據(jù)相關(guān)案例制作相應(yīng)的交互原型。第五、六章移動(dòng)端交互設(shè)計(jì)開發(fā)制作工具-墨刀及Adobe XD，主要介紹了通過墨刀、Adobe XD基礎(chǔ)知識(shí)，在軟件中實(shí)現(xiàn)交互功能的案例講解，包括基本工具的使用、基礎(chǔ)操作、插件介紹和高保真交互原型實(shí)訓(xùn)案例等內(nèi)容。通過學(xué)習(xí)，讀者能夠掌握如何將理論知識(shí)通過交互設(shè)計(jì)軟件創(chuàng)建原型的使用方法和技巧，完成原型的交互設(shè)計(jì)。鑒于實(shí)踐在交互設(shè)計(jì)中的重要作用，本書通過多個(gè)項(xiàng)目案例的實(shí)施進(jìn)行分析研究，對(duì)設(shè)計(jì)團(tuán)隊(duì)總結(jié)的設(shè)計(jì)方法進(jìn)行了完整而詳細(xì)的介紹，幫助讀者對(duì)每個(gè)交互設(shè)計(jì)方法建立深刻的認(rèn)識(shí)，掌握方法的實(shí)踐運(yùn)用。同樣地，不是所有方法都適合每個(gè)項(xiàng)目，設(shè)計(jì)師應(yīng)該根據(jù)實(shí)際需要和用戶目標(biāo)量身設(shè)計(jì)方法體系。本書可作為職業(yè)院校數(shù)字媒體藝術(shù)類專業(yè)課程的教材，也可供移動(dòng) UI 設(shè)計(jì)初學(xué)者自學(xué)參考。

作者簡(jiǎn)介

　　張靖瑤主編作為系部骨，曾參與的學(xué)校重要建設(shè)項(xiàng)目《基于數(shù)字工廠產(chǎn)品生產(chǎn)過程培養(yǎng)動(dòng)漫人才的研究與實(shí)踐》獲得了教學(xué)成果獎(jiǎng)二等獎(jiǎng)。指導(dǎo)學(xué)生的作品《茅山道士》在第二屆天津市高等學(xué)校原創(chuàng)動(dòng)漫大賽中榮獲高職組漫畫類獎(jiǎng)。指導(dǎo)學(xué)生參加的《2018“新人杯”全國(guó)大學(xué)生室內(nèi)設(shè)計(jì)競(jìng)賽》，《2019年第十六屆中國(guó)手繪藝術(shù)設(shè)計(jì)大賽》均獲得了獎(jiǎng)的成績(jī)。參與了教材《Photoshop CS5平面設(shè)計(jì)實(shí)例教程》的編寫工作。指導(dǎo)學(xué)生參加的2015KIDE 發(fā)明設(shè)計(jì)比賽獲得銅獎(jiǎng)。并且通過培訓(xùn)，獲得了北京水晶石教育中心建筑可視化合格證書，Adobe Illustrator CS5產(chǎn)品專家認(rèn)證，AutoCAD2012產(chǎn)品專家認(rèn)證等多個(gè)證書。其他參與編寫的人員均為數(shù)字藝術(shù)系系骨。具有豐富的教學(xué)經(jīng)驗(yàn)，熟悉學(xué)生的認(rèn)知規(guī)律，主編及參編了多部十三五、十四五規(guī)劃教材，主持及參與了多門精品資源共享課的建設(shè)；同時(shí)還得到了企業(yè)一線工程師的指導(dǎo)，企業(yè)工程師提供了項(xiàng)目案例資源，并進(jìn)行了技術(shù)支持。

圖書目錄

目錄
項(xiàng)目1　交互設(shè)計(jì)開發(fā)流程與設(shè)計(jì)分析　1
1.1　交互設(shè)計(jì)基礎(chǔ)概念　1
1.1.1交互設(shè)計(jì)的定義　1
1.1.2交互設(shè)計(jì)與用戶體驗(yàn)　1
1.1.3交互設(shè)計(jì)可用性原則　3
1.2　交互設(shè)計(jì)開發(fā)流程　6
1.3開發(fā)人員配置　9
1.4　產(chǎn)品交互原型分類　10
1.5　交互設(shè)計(jì)常用軟件　12
1.5.1Visio　12
1.5.2　Teambition　12
1.5.3墨刀　13
1.5.4　Axure RP　13
1.5.5　Adobe XD　14
1.6　項(xiàng)目實(shí)施-交互設(shè)計(jì)案例分析　14
1.7　項(xiàng)目小結(jié)　16
1.8　思政知識(shí)小課堂　16
1.9　鞏固與拓展　16
1.10習(xí)題　17
項(xiàng)目2　Web端“家居”交互UI設(shè)計(jì)　18
2.1　“家居”網(wǎng)頁(yè)交互UI項(xiàng)目背景分析　18
2.2　交互UI布局設(shè)計(jì)　18
2.2.1　布局設(shè)計(jì)理論與分析　18
2.2.2版式設(shè)計(jì)常見類型與分析　26
2.3　交互UI基礎(chǔ)元素設(shè)定　28
2.3.1界面尺寸　28
2.3.2文字設(shè)計(jì)　30
2.3.3色彩搭配　30
2.4　交互UI設(shè)計(jì)類型分析　31
2.4.1網(wǎng)頁(yè)設(shè)計(jì)的分類　31
2.4.2網(wǎng)頁(yè)交互UI組件的分類　32
2.5　項(xiàng)目實(shí)施-Web端“家居”網(wǎng)頁(yè)交互UI設(shè)計(jì)　38
2.5.1設(shè)計(jì)“家居”網(wǎng)頁(yè)首頁(yè)　38
2.5.2設(shè)計(jì)“家居”網(wǎng)頁(yè)交互UI導(dǎo)航菜單組件　42
2.6　項(xiàng)目小結(jié)　45
2.7思政知識(shí)小課堂　45
2.8　鞏固與拓展　45
2.9　習(xí)題　45
項(xiàng)目3　移動(dòng)端“美食小吃”App交互UI設(shè)計(jì)　47
3.1　“美食小吃”App交互UI設(shè)計(jì)項(xiàng)目背景分析　47
3.2　App交互UI設(shè)計(jì)項(xiàng)目需求分析　47
3.3　App頁(yè)面視覺層次結(jié)構(gòu)與視覺引導(dǎo)　48
3.3.1層次結(jié)構(gòu)的構(gòu)建　48
3.3.2視覺引導(dǎo)及反饋　50
3.4　App 界面元素構(gòu)成設(shè)計(jì)　52
3.4.1　App 交互界面的構(gòu)成概念　53
3.4.2　App界面元素設(shè)計(jì)的構(gòu)成方法　54
3.5　App界面布局風(fēng)格設(shè)計(jì)　56
3.6　移動(dòng)端平臺(tái)界面設(shè)計(jì)規(guī)范　57
3.6.1　Android平臺(tái)　57
3.6.2　iOS平臺(tái)　60
3.7　App交互UI設(shè)計(jì)流程分析　64
3.7.1版式界面設(shè)計(jì)的概念梳理　64
3.7.2切圖的重要性　67
3.7.3界面標(biāo)注的注意事項(xiàng)　67
3.7.4　Ps動(dòng)態(tài)元素的優(yōu)化存儲(chǔ)設(shè)置　68
3.8　項(xiàng)目實(shí)施-移動(dòng)端“美食小吃”App 交互UI設(shè)計(jì)　70
3.8.1設(shè)計(jì)“美食小吃”App界面UI　70
3.8.2頁(yè)面適配　74
3.8.3實(shí)現(xiàn)美食App界面素材切片輸出　75
3.8.4使用Pxcook標(biāo)注美食App界面　79
3.8.5美食App動(dòng)態(tài)加載畫面優(yōu)化　85
3.9　項(xiàng)目小結(jié)　88
3.10　思政知識(shí)小課堂　88
3.11　鞏固與拓展　88
3.12習(xí)題　88
項(xiàng)目4　Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開發(fā)　90
4.1　Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目背景分析　90
4.2　Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目需求分析　90
4.3　Axure RP9工具介紹　92
4.3.1Axure　RP 9的工作界面　92
4.3.2Axure　RP9的元件庫(kù)　94
4.3.3Axure　RP9中的交互功能添加　96
4.3.4Axure交互使用說明　98
4.3.5各個(gè)系統(tǒng)變量說明　99
4.3.6元件交互樣式　101
4.3.7動(dòng)畫和邊界　102
4.4　Axure常用元件　103
4.4.1　Axure常用元件——?jiǎng)討B(tài)面板　103
4.4.2　Axure常用元件——中繼器　106
4.4.3　Axure常用元件——內(nèi)聯(lián)框架　110
4.5　查看原型　111
4.5.1Axure原型快速預(yù)覽　111
4.5.2預(yù)覽選項(xiàng)設(shè)置　111
4.5.3Axure原型生成HTML文件　112
4.5.4Axure原型生成Word說明書　113
4.6　項(xiàng)目實(shí)施——Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開發(fā)　114
4.6.1　使用“動(dòng)態(tài)面板”制作Web端Banner輪播效果　114
4.6.2　使用“動(dòng)態(tài)面板+顯示/隱藏”制作懸浮按鈕顯示與隱藏效果　118
4.6.3　使用“交互-移動(dòng)”制作文字跑馬燈效果　123
4.6.4　使用“中繼器”制作商品列表頁(yè)　127
4.6.5　使用“交互-變量”制作功能　132
4.6.6　使用“動(dòng)態(tài)面板+熱區(qū)”制作面板隨鼠標(biāo)滑動(dòng)　136
4.6.7　使用“內(nèi)聯(lián)框架”制作添加視頻　141
4.6.8　使用“動(dòng)態(tài)面板+移動(dòng)”制作圖片放大預(yù)覽功能　146
4.7　項(xiàng)目小結(jié)　154
4.8　思政知識(shí)小課堂　154
4.9　鞏固與拓展　155
4.10　習(xí)題　155
項(xiàng)目5　App移動(dòng)端“思政助手”產(chǎn)品交互設(shè)計(jì)開發(fā)　156
5.1App移動(dòng)端“思政助手”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目背景分析　156
5.2App移動(dòng)端“思政助手”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目需求分析　156
5.3　墨刀原型工具概述　157
5.3.1墨刀工作界面介紹　157
5.3.2墨刀元件介紹　162
5.3.3墨刀交互事件添加　170
5.3.4演示分享　172
5.3.5墨刀工具狀態(tài)功能詳解　176
5.4　項(xiàng)目實(shí)施——App移動(dòng)端“思政助手”產(chǎn)品交互設(shè)計(jì)開發(fā)　178
5.4.1　“思政助手”——底部導(dǎo)航功能制作　178
5.4.2　“思政助手”——TAB切換功能制作　183
5.4.3　“思政助手”——點(diǎn)贊效果制作　186
5.4.4　“思政助手”——圖片左右滾動(dòng)效果制作　188
5.5　項(xiàng)目小結(jié)　189
5.6　思政知識(shí)小課堂　190
5.7　鞏固與拓展　190
5.8　習(xí)題　190
項(xiàng)目6　App移動(dòng)端“茶物語(yǔ)”產(chǎn)品交互設(shè)計(jì)開發(fā)　192
6.1　App移動(dòng)端“茶物語(yǔ)”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目背景分析　192
6.2　App移動(dòng)端“茶物語(yǔ)”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目需求分析　192
6.3　Adobe XD工具介紹　193
6.3.1　Adobe XD的基礎(chǔ)操作　193
6.3.2　Adobe XD的基本工具　201
6.3.3　使用Adobe XD完成原型　211
6.3.4　使用Adobe XD成果輸出　215
6.4　項(xiàng)目實(shí)施——App移動(dòng)端“茶物語(yǔ)”產(chǎn)品交互設(shè)計(jì)開發(fā)　216
6.4.1　Loading動(dòng)畫效果　216
6.4.2　左右滑動(dòng)的效果　218
6.4.3　輪播圖的演示效果　219
6.5　項(xiàng)目小結(jié)　221
6.6　思政知識(shí)小課堂　222
6.7　鞏固與拓展　222
6.8　習(xí)題　222