定 價:79.8 元
叢書名:高等院校數(shù)字藝術(shù)精品課程系列教材
- 作者:張靖瑤
- 出版時間:2023/10/1
- ISBN:9787115617873
- 出 版 社:人民郵電出版社
- 中圖法分類:TP37
- 頁碼:
- 紙張:膠版紙
- 版次:
- 開本:128開
內(nèi)容提要
數(shù)字媒體交互設(shè)計是在產(chǎn)品創(chuàng)建的初期搭建的簡單產(chǎn)品框架中實現(xiàn)用戶與產(chǎn)品進(jìn)行交流互動的設(shè)計,它能夠按照客戶需求快速創(chuàng)建產(chǎn)品的線框圖、流程圖、原型和Word說明文檔等內(nèi)容。同時交互設(shè)計還支持多人協(xié)作設(shè)計和共享版本的控制管理。
本書由淺入深地講解了產(chǎn)品交互原型的創(chuàng)建方法和設(shè)計規(guī)范,以“知識解析+課堂案例”為主線展開講解:知識解析能幫助學(xué)生系統(tǒng)地了解Web和移動 UI 設(shè)計的各類規(guī)范;課堂案例能幫助學(xué)生快速熟悉移動 UI交互設(shè)計流程,提高學(xué)生實戰(zhàn)技能。
幫助讀者快速掌握產(chǎn)品原型工具的使用方法和技巧,同時了解產(chǎn)品交互原型設(shè)計需要掌握的設(shè)計規(guī)范,全面、系統(tǒng)地介紹了網(wǎng)頁及移動 UI 設(shè)計及交互設(shè)計的基礎(chǔ)知識和操作技巧,主要內(nèi)容包括交互設(shè)計開發(fā)流程、初識web及移動 UI 設(shè)計、UI 設(shè)計規(guī)范、Web及移動產(chǎn)品交互設(shè)計開發(fā)及項目實施等。
第一章交互設(shè)計開發(fā)流程:介紹交互設(shè)計的基本概念與理論基礎(chǔ)、設(shè)計流程以及從實踐中總結(jié)的交互設(shè)計的方法體系,漸進(jìn)的理解用戶體驗,為更深入的學(xué)習(xí)建立良好的開端。
第二、三章讓讀者了解web端和移動產(chǎn)品UI設(shè)計的規(guī)范,布局設(shè)計理論以及交互設(shè)計組件的分類和應(yīng)用,雖然并不是每個項目都要實現(xiàn)所有的步驟,但掌握完整的流程步驟有助于設(shè)計師對于交互設(shè)計有更全面的把握。
第四章主要介紹了原型設(shè)計工具Axure RP9,如何使用Axure RP9以及對web端交互功能案例的詳解,包括Axure頁面設(shè)置、Axure常用元件、制作產(chǎn)品交互原型時的注意事項、基礎(chǔ)交互功能實訓(xùn)案例,以及高保真交互實訓(xùn)案例等內(nèi)容。通過本章的學(xué)習(xí),讀者能掌握Axure RP9的使用方法和技巧,并根據(jù)相關(guān)案例制作相應(yīng)的交互原型。
第五、六章移動端交互設(shè)計開發(fā)制作工具-墨刀及Adobe XD,主要介紹了通過墨刀、Adobe XD基礎(chǔ)知識,在軟件中實現(xiàn)交互功能的案例講解,包括基本工具的使用、基礎(chǔ)操作、插件介紹和高保真交互原型實訓(xùn)案例等內(nèi)容。通過學(xué)習(xí),讀者能夠掌握如何將理論知識通過交互設(shè)計軟件創(chuàng)建原型的使用方法和技巧,完成原型的交互設(shè)計。
鑒于實踐在交互設(shè)計中的重要作用,本書通過多個項目案例的實施進(jìn)行分析研究,對設(shè)計團(tuán)隊總結(jié)的設(shè)計方法進(jìn)行了完整而詳細(xì)的介紹,幫助讀者對每個交互設(shè)計方法建立更深刻的認(rèn)識,掌握方法的實踐運用。同樣地,不是所有方法都適合每個項目,設(shè)計師應(yīng)該根據(jù)實際需要和用戶目標(biāo)量身定制設(shè)計方法體系。
本書可作為職業(yè)院校數(shù)字媒體藝術(shù)類專業(yè)課程的教材,也可供移動 UI 設(shè)計初學(xué)者自學(xué)參考。
1.雙高軟件專業(yè)群A檔校,天津電子信息出品,品質(zhì)優(yōu)。
2.該課程為雙高專業(yè)群建設(shè)課程之一
3.產(chǎn)教融合產(chǎn)品,企業(yè)提供優(yōu)秀商業(yè)項目案例支撐。
4.配套豐富的慕課視頻,從內(nèi)容講解到操作講解一應(yīng)俱全。
5.切合1+X認(rèn)證的雙高專業(yè)建設(shè)要求。
本教材內(nèi)容本著立足市場、服務(wù)教學(xué)、惠及學(xué)生,使 教、學(xué)、用 形成一個統(tǒng)一的整體的原則。使本門課程擁有自主的市場生命力,為學(xué)習(xí)本門課程的學(xué)生增強未來的市場競爭力,本教材內(nèi)容始終以市場為導(dǎo)向,成為未來校企合作有力的支持后盾,成為校企合作一體化的有效保障。
本教材內(nèi)容凸顯設(shè)計理念在教學(xué)中的重要性,緊密圍繞當(dāng)今市場前沿交互理念,課程設(shè)計中鼓勵學(xué)生的獨立思維與創(chuàng)新意識,做到在扎實中產(chǎn)生突破的教學(xué)效果。課程設(shè)計中注重培養(yǎng)學(xué)生了解市場需求的能力,提高學(xué)生的市場觀察力與敏銳度,從而準(zhǔn)確把握交互產(chǎn)品市場的需求走向。課程章節(jié)內(nèi)容的設(shè)置具備開放性,避免拘泥于封閉的觀點,每個章節(jié)在傳統(tǒng)的教學(xué)資源內(nèi)容之外,增設(shè)靈活的市場性討論課題,為學(xué)生的學(xué)習(xí)提供一個頭腦創(chuàng)意的空間,這部分課題布置在一個基礎(chǔ)框架之上,由教學(xué)人員自由的開展。
張靖瑤 主編作為系部骨干教師,曾參與的學(xué)校重要建設(shè)項目《基于數(shù)字工廠產(chǎn)品生產(chǎn)過程培養(yǎng)動漫人才的研究與實踐》獲得了國家級教學(xué)成果獎二等獎。指導(dǎo)學(xué)生的作品《茅山道士》在第二屆天津市高等學(xué)校原創(chuàng)動漫大賽中榮獲高職組漫畫類優(yōu)秀獎。指導(dǎo)學(xué)生參加的《2018“新人杯”全國大學(xué)生室內(nèi)設(shè)計競賽》,《2019年第十六屆中國手繪藝術(shù)設(shè)計大賽》均獲得了優(yōu)秀獎的成績。參與了教材《Photoshop CS5平面設(shè)計實例教程》的編寫工作。指導(dǎo)學(xué)生參加的2015KIDE國際發(fā)明設(shè)計比賽獲得銅獎。并且通過培訓(xùn),獲得了北京水晶石教育中心建筑可視化合格證書,Adobe Illustrator CS5產(chǎn)品專家認(rèn)證,AutoCAD2012產(chǎn)品專家認(rèn)證等多個證書。 其他參與編寫的人員均為數(shù)字藝術(shù)系系骨干教師。具有豐富的教學(xué)經(jīng)驗,熟悉學(xué)生的認(rèn)知規(guī)律,主編及參編了多部十三五、十四五規(guī)劃教材,主持及參與了多門國家精品資源共享課的建設(shè);同時還得到了企業(yè)一線工程師的指導(dǎo),企業(yè)工程師提供了項目案例資源,并進(jìn)行了技術(shù)支持。
目錄
項目1 交互設(shè)計開發(fā)流程與設(shè)計分析 1
1.1 交互設(shè)計基礎(chǔ)概念 1
1.1.1交互設(shè)計的定義 1
1.1.2交互設(shè)計與用戶體驗 1
1.1.3交互設(shè)計可用性原則 3
1.2 交互設(shè)計開發(fā)流程 6
1.3開發(fā)人員配置 9
1.4 產(chǎn)品交互原型分類 10
1.5 交互設(shè)計常用軟件 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 項目實施-交互設(shè)計案例分析 14
1.7 項目小結(jié) 16
1.8 思政知識小課堂 16
1.9 鞏固與拓展 16
1.10習(xí)題 17
項目2 Web端“家居”交互UI設(shè)計 18
2.1 “家居”網(wǎng)頁交互UI項目背景分析 18
2.2 交互UI布局設(shè)計 18
2.2.1 布局設(shè)計理論與分析 18
2.2.2版式設(shè)計常見類型與分析 26
2.3 交互UI基礎(chǔ)元素設(shè)定 28
2.3.1界面尺寸 28
2.3.2文字設(shè)計 30
2.3.3色彩搭配 30
2.4 交互UI設(shè)計類型分析 31
2.4.1網(wǎng)頁設(shè)計的分類 31
2.4.2網(wǎng)頁交互UI組件的分類 32
2.5 項目實施-Web端“家居”網(wǎng)頁交互UI設(shè)計 38
2.5.1設(shè)計“家居”網(wǎng)頁首頁 38
2.5.2設(shè)計“家居”網(wǎng)頁交互UI導(dǎo)航菜單組件 42
2.6 項目小結(jié) 45
2.7思政知識小課堂 45
2.8 鞏固與拓展 45
2.9 習(xí)題 45
項目3 移動端“美食小吃”App交互UI設(shè)計 47
3.1 “美食小吃”App交互UI設(shè)計項目背景分析 47
3.2 App交互UI設(shè)計項目需求分析 47
3.3 App頁面視覺層次結(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è)計 52
3.4.1 App 交互界面的構(gòu)成概念 53
3.4.2 App界面元素設(shè)計的構(gòu)成方法 54
3.5 App界面布局風(fēng)格設(shè)計 56
3.6 移動端平臺界面設(shè)計規(guī)范 57
3.6.1 Android平臺 57
3.6.2 iOS平臺 60
3.7 App交互UI設(shè)計流程分析 64
3.7.1版式界面設(shè)計的概念梳理 64
3.7.2切圖的重要性 67
3.7.3界面標(biāo)注的注意事項 67
3.7.4 Ps動態(tài)元素的優(yōu)化存儲設(shè)置 68
3.8 項目實施-移動端“美食小吃”App 交互UI設(shè)計 70
3.8.1設(shè)計“美食小吃”App界面UI 70
3.8.2頁面適配 74
3.8.3實現(xiàn)美食App界面素材切片輸出 75
3.8.4使用Pxcook標(biāo)注美食App界面 79
3.8.5美食App動態(tài)加載畫面優(yōu)化 85
3.9 項目小結(jié) 88
3.10 思政知識小課堂 88
3.11 鞏固與拓展 88
3.12習(xí)題 88
項目4 Web端“電商平臺”產(chǎn)品交互設(shè)計開發(fā) 90
4.1 Web端“電商平臺”產(chǎn)品交互設(shè)計開發(fā)項目背景分析 90
4.2 Web端“電商平臺”產(chǎn)品交互設(shè)計開發(fā)項目需求分析 90
4.3 Axure RP9工具介紹 92
4.3.1Axure RP 9的工作界面 92
4.3.2Axure RP9的元件庫 94
4.3.3Axure RP9中的交互功能添加 96
4.3.4Axure交互使用說明 98
4.3.5各個系統(tǒng)變量說明 99
4.3.6元件交互樣式 101
4.3.7動畫和邊界 102
4.4 Axure常用元件 103
4.4.1 Axure常用元件——動態(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ù)覽選項設(shè)置 111
4.5.3Axure原型生成HTML文件 112
4.5.4Axure原型生成Word說明書 113
4.6 項目實施——Web端“電商平臺”產(chǎn)品交互設(shè)計開發(fā) 114
4.6.1 使用“動態(tài)面板”制作Web端Banner輪播效果 114
4.6.2 使用“動態(tài)面板+顯示/隱藏”制作懸浮按鈕顯示與隱藏效果 118
4.6.3 使用“交互-移動”制作文字跑馬燈效果 123
4.6.4 使用“中繼器”制作商品列表頁 127
4.6.5 使用“交互-變量”制作秒殺倒計時功能 132
4.6.6 使用“動態(tài)面板+熱區(qū)”制作面板隨鼠標(biāo)滑動 136
4.6.7 使用“內(nèi)聯(lián)框架”制作添加視頻 141
4.6.8 使用“動態(tài)面板+移動”制作圖片放大預(yù)覽功能 146
4.7 項目小結(jié) 154
4.8 思政知識小課堂 154
4.9 鞏固與拓展 155
4.10 習(xí)題 155
項目5 App移動端“思政助手”產(chǎn)品交互設(shè)計開發(fā) 156
5.1App移動端“思政助手”產(chǎn)品交互設(shè)計開發(fā)項目背景分析 156
5.2App移動端“思政助手”產(chǎn)品交互設(shè)計開發(fā)項目需求分析 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 項目實施——App移動端“思政助手”產(chǎn)品交互設(shè)計開發(fā) 178
5.4.1 “思政助手”——底部導(dǎo)航功能制作 178
5.4.2 “思政助手”——TAB切換功能制作 183
5.4.3 “思政助手”——點贊效果制作 186
5.4.4 “思政助手”——圖片左右滾動效果制作 188
5.5 項目小結(jié) 189
5.6 思政知識小課堂 190
5.7 鞏固與拓展 190
5.8 習(xí)題 190
項目6 App移動端“茶物語”產(chǎn)品交互設(shè)計開發(fā) 192
6.1 App移動端“茶物語”產(chǎn)品交互設(shè)計開發(fā)項目背景分析 192
6.2 App移動端“茶物語”產(chǎn)品交互設(shè)計開發(fā)項目需求分析 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 項目實施——App移動端“茶物語”產(chǎn)品交互設(shè)計開發(fā) 216
6.4.1 Loading動畫效果 216
6.4.2 左右滑動的效果 218
6.4.3 輪播圖的演示效果 219
6.5 項目小結(jié) 221
6.6 思政知識小課堂 222
6.7 鞏固與拓展 222
6.8 習(xí)題 222