項目1 交互設(shè)計概述-備課筆記

【認(rèn)識交互設(shè)計部分】項目一：交互設(shè)計概述一、課程說明與要求1.課程性質(zhì)與考核方式說明教師首先自我介紹。然后說明本課為考查課，平時成績和期末成績各占總成績的50%，平時成績主要通過平時作業(yè)（作品）的形式評定，還要兼顧考核出勤、學(xué)習(xí)態(tài)度、課堂表現(xiàn)等因素；期末考試是在課程的最后兩次課采取限時命題創(chuàng)作的形式，全面考核課程知識的綜合運用。2.課程說明《數(shù)字媒體交互設(shè)計》共分為網(wǎng)頁交互設(shè)計、App交互設(shè)計、VR交互設(shè)計三方面的內(nèi)容。本課程是以理論為基礎(chǔ)的實踐導(dǎo)向型課程,所傳達(dá)的課程內(nèi)容圍繞“以人為本”的設(shè)計原則，重點講述人機(jī)交互的基本概念和重要意義以及發(fā)展歷程、軟件系統(tǒng)的人機(jī)交互設(shè)計原則和方法、網(wǎng)絡(luò)系統(tǒng)的人機(jī)交互設(shè)計原則和方法、移動端應(yīng)用人機(jī)交互技術(shù)、人機(jī)交互開發(fā)工具與環(huán)境等理論內(nèi)容；簡要介紹人機(jī)交互的認(rèn)知心理學(xué)、計算機(jī)硬件的人機(jī)交互設(shè)計、人機(jī)交互技術(shù)的發(fā)展趨勢,并培養(yǎng)學(xué)生利用交互設(shè)計工具制作做實際交互作品原型的能力。3.組織簽到及建立班級課程微信群組織學(xué)生使用學(xué)習(xí)通進(jìn)行簽到。然后使用微信面對面建群，說明本群作為課程的相關(guān)通知發(fā)布、知識答疑和作品交流使用，同時歡迎同學(xué)們及時在群里反饋對課程教學(xué)方面的意見和學(xué)習(xí)感想，提醒老師及時調(diào)整適合同學(xué)們的授課方式。4.工具材料準(zhǔn)備說明本課的實踐技能訓(xùn)練階段，需要同學(xué)在手機(jī)或者是計算機(jī)中下載好行業(yè)需求分析文檔，教師將所需準(zhǔn)備資料發(fā)到微信群中。資料類型與名稱備注行業(yè)需求分析報告文檔每個小組一份二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程授課對象為藝術(shù)專業(yè)學(xué)生，是在藝術(shù)專業(yè)中設(shè)立的一門邏輯思維較強(qiáng)的設(shè)計類課程，需要學(xué)生在學(xué)習(xí)過程中，對美術(shù)設(shè)計與邏輯設(shè)計內(nèi)容進(jìn)行一定程度上的融通。作為一門實踐性較強(qiáng)的課程，針對學(xué)生對當(dāng)前市場應(yīng)用需求普遍認(rèn)知不強(qiáng)，或有較多偏差的情況，強(qiáng)調(diào)進(jìn)行引導(dǎo)教學(xué)，融入市場多元化理念。另一方面，學(xué)生對未來的市場應(yīng)用有信心，對所選擇的專業(yè)感興趣，獲取知識的主動性較強(qiáng)。2.課程導(dǎo)入在日常生活中，大家會頻繁的面對各種網(wǎng)頁操作或App操作，而這些應(yīng)用中所體現(xiàn)出來的操作邏輯，動態(tài)效果，內(nèi)容編排方式，則是影響用戶對這些程序應(yīng)用體驗的全部因素；如何讓用戶感覺到一部應(yīng)用程序的流暢、方便、清晰、高效、記憶深刻，則是我們這門交互設(shè)計課程的根本任務(wù)，本節(jié)課則是介紹網(wǎng)頁交互設(shè)計中的基本流程，并了解一部網(wǎng)頁是如何通過交互設(shè)計來滿足大眾的操作需求的。三、理論知識講解（一）交互設(shè)計的基本概念1.基本概念交互設(shè)計可以用簡單的術(shù)語來理解：它是用戶和產(chǎn)品之間交互的設(shè)計。大多數(shù)情況下，當(dāng)人們談?wù)摻换ピO(shè)計時，他們討論的產(chǎn)品往往是應(yīng)用程序或網(wǎng)站等產(chǎn)品。交互設(shè)計的目的是提供給用戶具有可用性的產(chǎn)品，來幫助用戶實現(xiàn)其目標(biāo)。這個定義聽起來很廣泛，那是因為交互設(shè)計囊括了相當(dāng)多的內(nèi)容。交互設(shè)計通常涉及美學(xué)設(shè)計，動態(tài)設(shè)計，聲音設(shè)計，空間設(shè)計等內(nèi)容。當(dāng)然，這些領(lǐng)域會交疊融合，因此我們可以說交互設(shè)計是一個跨學(xué)科領(lǐng)域的融合。2.生活中的交互能量…………………【思政融入（從疫情防控，感受中國制度優(yōu)勢）】用戶與產(chǎn)品之間的交互需要在當(dāng)前更加趨向于多線程，多維度，多情境，實時化這樣的“三多一實”要素。在2020年我國的疫情攻堅戰(zhàn)中，各大綜合信息網(wǎng)站對疫情的防控情況進(jìn)行了實時的數(shù)據(jù)發(fā)布，方便了廣大群眾的“了解”需要，同時也用多維度的交互設(shè)計呈現(xiàn)方式，清晰明了的向大家展現(xiàn)了我們在各個方面的戰(zhàn)疫成果。這種實時性的動態(tài)資訊網(wǎng)站，在美術(shù)設(shè)計，交互心理設(shè)計，信息呈現(xiàn)設(shè)計等多方面都做了細(xì)致的考量?！菊n后思考：第一，生活中的交互設(shè)計中，“便捷”與“全面”的關(guān)系；第二，廣義的交互設(shè)計的含義?！浚ǘ┙换ピO(shè)計的流程1.設(shè)計流程環(huán)節(jié)網(wǎng)頁交互設(shè)計的工作，需要參與前期的需求分析、后期開發(fā)、測試驗收等產(chǎn)品設(shè)計與實現(xiàn)的多個環(huán)節(jié)。我們的工作流程如圖中所示：項目立項后，需要進(jìn)行產(chǎn)品分析包括需求和架構(gòu)分析、根據(jù)分析做原型設(shè)計，通過評審后進(jìn)行視覺設(shè)計；確認(rèn)后，進(jìn)入前端與后臺開發(fā)，完成后進(jìn)行測試階段，直至產(chǎn)品最終上線；這是網(wǎng)頁交互設(shè)計的一個流程；產(chǎn)品最終是用戶使用，那么用戶的體驗尤為重要，下面我們從用戶體驗的五個層面來進(jìn)行重點講解。（三）開發(fā)人員配置.................................................................................【思政融入：團(tuán)隊協(xié)作的本質(zhì)是共同奉獻(xiàn)】當(dāng)我們開發(fā)一款產(chǎn)品時，通常都是由一個團(tuán)隊的成員共同完成，而團(tuán)隊的特點是以目標(biāo)為導(dǎo)向，以協(xié)作為基礎(chǔ)，需要共同的規(guī)范和方法，在技術(shù)或技能上形成互補(bǔ)。團(tuán)隊協(xié)作的本質(zhì)是共同奉獻(xiàn)，這種共同奉獻(xiàn)需要一個切實可行、具有挑戰(zhàn)意義且讓成員能夠為之信服的目標(biāo)。只有這樣，才能激發(fā)團(tuán)隊的工作動力和奉獻(xiàn)精神，不分彼此，在一個團(tuán)隊里面，并不是說每一個成員各方面能力都特別棒，而是能夠很好地借物使力，取團(tuán)隊其它成員的長處來補(bǔ)自己的短處，也把自己的長處優(yōu)點分享給大家，互相學(xué)習(xí)交流，共同進(jìn)步，遇到問題都及時交流，才能讓團(tuán)隊的力量發(fā)揮得淋漓盡致。（1）產(chǎn)品經(jīng)理開發(fā)一個產(chǎn)品，需要對客戶的需求進(jìn)行分析，同時對市場上同類型或其他產(chǎn)品比較了解，了解用戶習(xí)慣、產(chǎn)品的定位、功能、邏輯，在頭腦里要有清晰的邏輯，這就是產(chǎn)品經(jīng)理的主要職責(zé)。產(chǎn)品經(jīng)理經(jīng)過專業(yè)的市場洞察、客戶分析、用戶體驗等，將客戶的要求形成詳細(xì)的功能文檔，然后和團(tuán)隊成員制作出清晰簡潔的交互產(chǎn)品原型圖，原型圖包括各項功能排布、業(yè)務(wù)邏輯、頁面交互等等。（2）UI設(shè)計師UI設(shè)計師主要負(fù)責(zé)App產(chǎn)品的界面設(shè)計和交互設(shè)計，根據(jù)產(chǎn)品經(jīng)理的需求進(jìn)行App頁面及元素的設(shè)計。（3）前端工程師前端口工程師主要負(fù)責(zé)將UI設(shè)計師設(shè)計完成的頁面是代碼實現(xiàn)出來，是開發(fā)團(tuán)隊中最不可缺少的人員。前端口工程師：主要分為Android或iOS兩個不同系統(tǒng)的客戶端的開發(fā)，分別由Android開發(fā)工程師及iOS開發(fā)工程師完成。（4）后臺程序開發(fā)主要完成運營管理后臺的開發(fā)，包括數(shù)據(jù)及服務(wù)器的部署等。（5）測試人員測試人員相當(dāng)于產(chǎn)品開發(fā)的質(zhì)量檢查員，進(jìn)行功能，性能，兼容性等總體測試，發(fā)現(xiàn)bug反饋給對應(yīng)的開發(fā)人員進(jìn)行修改。另外，當(dāng)產(chǎn)品上線后，經(jīng)過多個版本的迭代，用戶數(shù)量越來越多，就需要大數(shù)據(jù)工程師；運維工程師需要將產(chǎn)品的代碼需要部署到一個服務(wù)器上，日常的維護(hù)都是由運維工程師來負(fù)責(zé)；在產(chǎn)品剛剛上線時，如果涉及到推廣還需要有運營、市場營銷、售前/售后工程師等。（四）產(chǎn)品交互原型的分類交互原型根據(jù)頁面的保真程度可以劃分為草圖、低保真和高保真。在進(jìn)行原型設(shè)計之前，我們需要根據(jù)使用場景、使用人群、或者是項目的不同階段來設(shè)計不同保真度的產(chǎn)品原型。1.草圖草圖通常用于產(chǎn)品早期的概念階段。在項目立項的早期，對于產(chǎn)品的功能及業(yè)務(wù)場景都處于規(guī)劃階段，沒有明確成熟的產(chǎn)品方案，團(tuán)隊成員在項目規(guī)劃，進(jìn)行頭腦風(fēng)暴的會議時我們需要能夠快速呈現(xiàn)產(chǎn)品雛形的原型，且便于及時修改。草圖繪制階段的原型大部分都是手繪稿，一邊討論產(chǎn)品功能，另一邊直接繪制產(chǎn)品原型，這個階段的原型大部分都是在白板或者在白紙上手繪完成，在討論的過程中發(fā)現(xiàn)問題，及時修改。草圖原型能夠表達(dá)出基本的界面功能及內(nèi)容布局即可，利用基本的幾何圖形如方框、圓和一些線段表達(dá)產(chǎn)品雛形，只需要參與討論會議的人員明白大概意圖即可。草圖的優(yōu)勢在于設(shè)計成本低，能夠隨時進(jìn)行修改，在項目早期有很多不確定因素的前提下，盡量使用草圖進(jìn)行討論評審。2.低保真當(dāng)我們明確了產(chǎn)品的業(yè)務(wù)需求及使用場景以后，產(chǎn)品經(jīng)理和交互設(shè)計師們可以使用低保真原型來快速設(shè)計產(chǎn)品的概貌。產(chǎn)品經(jīng)理和交互設(shè)計師們通過項目早期階段明確了產(chǎn)品的功能需求及業(yè)務(wù)范圍，根據(jù)業(yè)務(wù)會議上確定的產(chǎn)品方案，首先需要梳理清楚產(chǎn)品的功能結(jié)構(gòu)和信息結(jié)構(gòu)，根據(jù)業(yè)務(wù)需求推導(dǎo)出詳細(xì)的功能點。工作產(chǎn)品的戰(zhàn)略目標(biāo)、需求范圍、功能結(jié)構(gòu)都清楚以后，就可以開始正式繪制線框圖了，線框圖又稱為低保真原型。線框圖可以幫助我們準(zhǔn)確拆分頁面、以及每個頁面的功能模塊及展示信息，確定每個頁面元素的界面布局。線框圖與草圖相比較而言，視覺顯示及意圖表達(dá)上更準(zhǔn)確了。線框圖的繪制需要借助于原型設(shè)計工具，線框圖中的元素布局以及功能模塊需要無限接近產(chǎn)品上線后的樣子。低保真原型階段可以不考慮界面元素的配色以及各功能的交互跳轉(zhuǎn)及動畫效果。界面的配色是UI設(shè)計師的工作，豐富的交互動作也不適合在這個階段去詳細(xì)分析。通常查看低保真原型完成后，需要與需求提出人員、UI設(shè)計師、前端工程師、后端工程師以及測試人員進(jìn)行召開原型設(shè)計評審會，根據(jù)評審結(jié)果，需要對低保真原型進(jìn)行多輪調(diào)整，直至達(dá)成一致結(jié)果，確保能往下推進(jìn)。低保真原型確定后，UI設(shè)計師及開發(fā)工程師們可以據(jù)此進(jìn)行項目實施了。3.高保真高保真原型常用于向高層領(lǐng)導(dǎo)進(jìn)行產(chǎn)品演示或者向投資人演示產(chǎn)品概念，以尋求項目融資。高保真原型又可以成為產(chǎn)品的Demo，除了沒有真實的后臺數(shù)據(jù)進(jìn)行支撐外，幾乎可以模擬前端界面的所有功能，完全是一個高度仿真產(chǎn)品，對于一些非專業(yè)的高層領(lǐng)導(dǎo)、老板及投資人，他們希望看到的是一個無線接近線上產(chǎn)品的Demo，能夠盡可能詳細(xì)的了解產(chǎn)品的功能及業(yè)務(wù)需求，從視覺顯示以及交互動作上都和真實產(chǎn)品大致相同。高保真原型需要在低保真的基礎(chǔ)上進(jìn)行配色，插入真實的圖片及圖標(biāo)。充分利用原型工具中每一類元件的樣式及專有的交互屬性為原型增加保真度，為相關(guān)的元件及頁面添加交互事件、配置交互動作。這樣從視覺顯示及交互設(shè)計來看，就是一個高保真原型。在明確當(dāng)前的項目階段及使用人群后，再決定什么樣保真度的原型才是最合適的。既不能為了方便而總是使用草圖，也不能一味的追求高保真原型，而是綜合評估使用的場景及用戶因素，在工作當(dāng)中，我們使用最多的是低保真原型，畢竟項目團(tuán)隊中最關(guān)心產(chǎn)品原型的是項目的實施人員，低保真原型也能較為準(zhǔn)確的闡述項目需求，以及一些簡單的交互跳轉(zhuǎn)及交互效果，可以讓行業(yè)內(nèi)的設(shè)計人員一看便知。有些業(yè)務(wù)規(guī)則及交互細(xì)節(jié)上的效果，還需要配以說明文檔，這樣才能方便開發(fā)及測試人員深刻理解產(chǎn)品需求。交互設(shè)計的常用軟件交互設(shè)計案例分析四、實踐技能訓(xùn)練（一）布置訓(xùn)練任務(wù)任務(wù)1.以實際應(yīng)用出發(fā)整理一篇網(wǎng)頁交互設(shè)計需求文字任務(wù)2.選擇一個網(wǎng)站，通過用戶體驗要素分析該網(wǎng)站的用戶體驗層級，并以word文檔的方式呈現(xiàn)。（二）實戰(zhàn)項目案例行業(yè)網(wǎng)站交互需求構(gòu)架剖析。………【難點】教師重點指導(dǎo)：典型交互網(wǎng)站的構(gòu)架分類；嘗試設(shè)計命題類的網(wǎng)站構(gòu)架設(shè)計；框架在網(wǎng)站設(shè)計中的使用?！緦W(xué)生初次進(jìn)行設(shè)計實踐，教師應(yīng)多引導(dǎo)，幫助學(xué)生形成設(shè)計方案，指導(dǎo)學(xué)生完成圖案草稿繪制】五、課堂總結(jié)今天，我們主要結(jié)合網(wǎng)頁交互設(shè)計案例學(xué)習(xí)了設(shè)計流程、網(wǎng)頁交互構(gòu)架和網(wǎng)頁交互界面設(shè)計原理（分類，適用范圍，組合）等相關(guān)理論，也針對相關(guān)理論做了一些練習(xí)，想必同學(xué)們通過練習(xí)對網(wǎng)頁交互設(shè)計原理和框架設(shè)計基本類型有了一定的了解和掌握。希望同學(xué)們課后繼續(xù)對你所接觸到的相關(guān)作品，用專業(yè)的眼光，分析交互產(chǎn)品的交互設(shè)計法則和交互界面設(shè)計基本原則，這樣有助于你們對知