項(xiàng)目1 交互設(shè)計(jì)概述-備課筆記

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