項(xiàng)目6 移動(dòng)端“茶物語(yǔ)”App產(chǎn)品交互設(shè)計(jì)開發(fā)-備課筆記

項(xiàng)目六：移動(dòng)端“茶物語(yǔ)”App產(chǎn)品交互設(shè)計(jì)開發(fā)一、課程說明與要求1.課程性質(zhì)與考核方式說明教師首先自我介紹。然后說明本課為考查課，平時(shí)成績(jī)和期末成績(jī)各占總成績(jī)的50%，平時(shí)成績(jī)主要通過平時(shí)作業(yè)（作品）的形式評(píng)定，還要兼顧考核出勤、學(xué)習(xí)態(tài)度、課堂表現(xiàn)等因素；期末考試是在課程的最后兩次課采取限時(shí)命題創(chuàng)作的形式，全面考核課程知識(shí)的綜合運(yùn)用。2.課程說明《數(shù)字媒體交互設(shè)計(jì)》共分為網(wǎng)頁(yè)交互設(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)容；簡(jiǎn)要介紹人機(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)入本項(xiàng)目主要通過移動(dòng)端“茶物語(yǔ)”產(chǎn)品交互設(shè)計(jì)開發(fā)講解，了解使用原型設(shè)計(jì)工具AdobeXD軟件來進(jìn)行移動(dòng)端“茶物語(yǔ)”產(chǎn)品交互設(shè)計(jì)開發(fā)的流程與方法，通過本項(xiàng)目的學(xué)習(xí)，讀者可以掌握使用AdobeXD進(jìn)行原型交互設(shè)計(jì)時(shí)AdobeXD軟件中基本工具的使用方法，通過認(rèn)真學(xué)習(xí)本項(xiàng)目讀者可以達(dá)到使用AdobeXD進(jìn)行原型交互設(shè)計(jì)的能力，滿足使用AdobeXD原型交互設(shè)計(jì)的基本素質(zhì)要求，繼而在工作中體現(xiàn)自己的社會(huì)價(jià)值。三、理論知識(shí)講解（一）移動(dòng)端“教學(xué)助手”App產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目背景分析茶飲行業(yè)是一個(gè)利益比較高的行業(yè)，當(dāng)代年輕人無論在上班、逛街、或者出去玩時(shí)，都鐘愛喝一杯奶茶來放松自己。如今奶茶店在很多一線城市里面也是遍地開花，開發(fā)一款奶茶App也能夠讓茶飲店鋪在市場(chǎng)中出類拔萃。（二）移動(dòng)端“茶物語(yǔ)”App產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目需求分析App移動(dòng)端“茶物語(yǔ)”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目主要從目標(biāo)用戶、產(chǎn)品特點(diǎn)、功能需求等方面進(jìn)行需求分析。1.目標(biāo)用戶適用廣大奶茶愛好者。2.運(yùn)行環(huán)境：安卓移動(dòng)端。3.App移動(dòng)端“茶物語(yǔ)”軟件產(chǎn)品特點(diǎn)更方便：消費(fèi)者可以通過在軟件上面選擇自己心儀的奶茶下單，相比傳統(tǒng)行業(yè)需要到店消費(fèi)的方式，提供了更多的便利性。增加回頭率：奶茶App可以通過各種折扣滿減或者限時(shí)促銷活動(dòng)，提高用戶的回頭率。更加靈活：如果商家有多家奶茶門店，那奶茶App可以幫助您同步各個(gè)門店的用戶信息，更加靈活。4.App移動(dòng)端“茶物語(yǔ)”需求分析奶茶推薦：無論是新品上架，還是用戶習(xí)慣，App都能夠在第一時(shí)間為用戶進(jìn)行推薦。奶茶分類：為用戶提供專門的在線分類功能，將不同類型的奶茶進(jìn)行分類，以便用戶更好的進(jìn)行獲取自己想要的奶茶，提高奶茶獲取便捷性。奶茶評(píng)價(jià)：當(dāng)用戶對(duì)指定奶茶品嘗之后，便可以對(duì)該奶茶進(jìn)行相應(yīng)的評(píng)價(jià)，每一個(gè)評(píng)價(jià)都能夠成為其它用戶判斷選擇的標(biāo)準(zhǔn)。促銷活動(dòng)：商家可以定期舉辦各種促銷活動(dòng)，設(shè)置哪些爆款奶茶可以參與秒殺，不僅可以制定營(yíng)銷策略，也可以清理庫(kù)存商品。優(yōu)惠券：商家可以發(fā)出折扣或者滿減的優(yōu)惠券，并設(shè)置優(yōu)惠券僅限的奶茶品種，吸引消費(fèi)者來?yè)寖?yōu)惠券的同時(shí)也能提高下單率。掃碼點(diǎn)餐：有些新用戶不知道可以線上點(diǎn)餐的時(shí)候會(huì)到線下購(gòu)買，我們可以提供掃碼點(diǎn)餐的服務(wù)，也能減少更多的人力成本。訂單配送：只要在線下單之后，系統(tǒng)就會(huì)自動(dòng)生成相應(yīng)的訂單，讓用戶能夠?qū)崟r(shí)關(guān)注配送情況。會(huì)員功能：與傳統(tǒng)會(huì)員服務(wù)不同的是，線上會(huì)員能夠提供更加全面、更加精準(zhǔn)的會(huì)員服務(wù)。個(gè)人中心：消費(fèi)者在個(gè)人中心中可以查看自己的消費(fèi)記錄和消費(fèi)積分，也可以查看自己的優(yōu)惠券信息。（三）AdobeXD概述1.AdobeXD的基礎(chǔ)操作當(dāng)啟動(dòng)這個(gè)應(yīng)用時(shí)，歡迎頁(yè)面提供不同標(biāo)準(zhǔn)屏幕尺寸模板以及添加你自己設(shè)定的文件尺寸。而且歡迎頁(yè)面還包含很多資源可以訪問，通過這些資源可以進(jìn)一步學(xué)習(xí)AdobeXD工具的操作。打開AdobeXD的彈出菜單，選擇“新建”選項(xiàng)，即可新建一個(gè)AdobeXD文檔。再選擇“保存”選項(xiàng)，即可保存一個(gè)AdobeXD文檔選擇“打開”選項(xiàng)，即可打開一個(gè)AdobeXD文檔?；蛘唠p擊AdobeXD文件的圖標(biāo)，也可打開當(dāng)前的AdobeXD文件。在“主頁(yè)”屏幕中選擇一個(gè)預(yù)設(shè)尺寸，進(jìn)入工作界面即是創(chuàng)建好的新文檔?；蛘咦远x文檔的大小，然后按住【enter】鍵完成新建文檔。在工作界面頂端中間，可以看到文件名稱和三角形圖標(biāo)單擊三角形圖標(biāo)，彈出“重命名文檔”對(duì)話框，，在此對(duì)話框中重新為文檔命名。2.AdobeXD的基本工具（1）選擇工具“選擇”工具是AdobeXD工具欄中的第1個(gè)工具，在大多數(shù)情況下默認(rèn)選中“選擇”工具，可以通過單擊工具欄中的指針圖標(biāo)，或者直接按鍵盤上的V鍵激活。激活“選擇”工具，用鼠標(biāo)左鍵直接在畫布上單擊任意元素即可選中該元素，可對(duì)選中的元素進(jìn)行拖拽、縮放和旋轉(zhuǎn)等操作。按住鍵盤上的【Shift】鍵，可以選擇多個(gè)圖層。（2）矩形工具“矩形”工具是AdobeXD工具欄中的第2個(gè)工具，可以通過單擊工具欄中的矩形工具圖標(biāo)，或者直接按鍵盤上的R鍵激活。激活“矩形”工具后，在畫板上單擊鼠標(biāo)左鍵并拖拽，即可繪制一個(gè)矩形，按住鍵盤上的【Shift】鍵，同時(shí)拖拽鼠標(biāo)即可繪制正方形，在AdobeXD中默認(rèn)的填充色為純白色。3.使用AdobeXD完成原型在AdobeXD中完成UI界面的設(shè)計(jì)工作后，可以直接在軟件中把這些界面快速鏈接起來，生成一個(gè)可交互的原型文檔，并且能簡(jiǎn)單設(shè)置一些跳轉(zhuǎn)效果。（1）鏈接頁(yè)面AdobeXD可以創(chuàng)建交互式原型，直觀地展示如何在屏幕或線框之間進(jìn)行連接。也可以預(yù)覽交互，這樣可以驗(yàn)證用戶體驗(yàn)并對(duì)設(shè)計(jì)進(jìn)行迭代，從而節(jié)省開發(fā)事件。制作好頁(yè)面元素后，就可以點(diǎn)擊原型按鈕，進(jìn)入原型交互設(shè)計(jì)頁(yè)面，制作交互效果頁(yè)面至少需要兩個(gè)畫板，當(dāng)頁(yè)面中只有一個(gè)畫板的時(shí)候呢我們是無法制作交互效果。①設(shè)置“主頁(yè)”“主頁(yè)”屏幕是應(yīng)用程序或網(wǎng)站的第一個(gè)屏幕。瀏覽者會(huì)從“主頁(yè)”屏幕開始應(yīng)用程序或網(wǎng)站的瀏覽。切換到“原型”模式，單擊要設(shè)置為“主頁(yè)”的畫板。左上角會(huì)出現(xiàn)一個(gè)灰色的主頁(yè)圖標(biāo)。單擊“主頁(yè)”圖標(biāo)，它會(huì)變成藍(lán)色，提示該畫板或屏幕已被成功設(shè)置為“主頁(yè)”屏幕。②將交互式元素鏈接到目標(biāo)屏幕在開始鏈接畫板或屏幕之前，要適當(dāng)?shù)貫楫嫲迕?，這樣做有助于設(shè)計(jì)師能夠分辨清楚畫板之間的鏈接。切換到“原型”模式，單擊要鏈接的對(duì)象或畫板。對(duì)象或畫板上將會(huì)出現(xiàn)帶箭頭的連接手柄。將鼠標(biāo)懸停

在手柄上，光標(biāo)會(huì)變?yōu)榫€條連接器，將光標(biāo)移動(dòng)到需要被鏈接的畫板或?qū)ο笊显趚d預(yù)覽原型界面中根據(jù)設(shè)置的觸發(fā)操作不同，而執(zhí)行的反應(yīng)效果不同。在畫板的交互設(shè)置面板中“操作”的類型有過渡、自動(dòng)制作動(dòng)畫、疊加、滾動(dòng)至、上一個(gè)畫板、音頻播放和語(yǔ)音播放，而畫板中元素中多了一個(gè)“滾動(dòng)至”的操作。過渡效果，選擇過渡之后交互面板上會(huì)有一個(gè)保留滾動(dòng)位置的選項(xiàng)。如果勾選這個(gè)選項(xiàng)后，在預(yù)覽窗口中我們滾動(dòng)時(shí)就會(huì)記錄我們滾動(dòng)的位置，即使再跳轉(zhuǎn)頁(yè)面時(shí)也會(huì)保留到相應(yīng)的位置，而不用再次滾動(dòng)到相應(yīng)的位置。自動(dòng)制作動(dòng)畫：AdobeXD自動(dòng)制作動(dòng)畫要求第二個(gè)畫板由第一個(gè)畫板復(fù)制，第二個(gè)畫板中的內(nèi)容發(fā)生變化，可以完成自動(dòng)補(bǔ)充；借助自動(dòng)制作動(dòng)畫功能，用戶可以創(chuàng)建沉浸式過渡，以便呈現(xiàn)內(nèi)容在畫板之間的移動(dòng)。疊加，在預(yù)覽窗口中點(diǎn)擊交互元素后他不會(huì)進(jìn)行頁(yè)面跳轉(zhuǎn)，而是把頁(yè)面直接疊加在這個(gè)原有的頁(yè)面上，疊加操作之后在原頁(yè)面上會(huì)有一個(gè)綠色的方框，表示疊加頁(yè)面的區(qū)域，如果疊加畫板區(qū)域超出了畫板實(shí)際尺寸那么就只能顯示這一部分的頁(yè)面，而當(dāng)疊加的畫板尺寸小于畫板的區(qū)域那么就可以點(diǎn)擊中間的加號(hào)進(jìn)行調(diào)整位置，之后再預(yù)覽時(shí)點(diǎn)擊交互元素疊加的頁(yè)面就只再綠色方框中顯示。如圖6-80所示。“滾動(dòng)至...”，表示如果頁(yè)面超過了正常顯示的頁(yè)面后，比如滾動(dòng)到最下方后，想快速定位到某個(gè)元素的位置，那么就可以在對(duì)象框中選擇這個(gè)元素，之后再預(yù)覽窗口中點(diǎn)擊相應(yīng)的交互，就會(huì)快速滾動(dòng)到這個(gè)元素的位置。返回上一面板，當(dāng)有多個(gè)界面都能點(diǎn)擊跳轉(zhuǎn)到這個(gè)界面時(shí)，當(dāng)需要返回時(shí)就可以設(shè)置操作為上一個(gè)面板。即跳轉(zhuǎn)回到上一個(gè)畫板。音頻播放時(shí)需要選擇一個(gè)本地的音頻然后再預(yù)覽時(shí)點(diǎn)擊就會(huì)播放一個(gè)音頻文件。語(yǔ)音播放時(shí)需要自定義一段文字內(nèi)容，之后再預(yù)覽時(shí)即可播放設(shè)置的語(yǔ)音內(nèi)容。交互設(shè)置面板中動(dòng)畫分為，無、溶解、左滑右滑、上滑下滑以及向左推出、向右推出、向上推出和向下推出。溶解效果就是當(dāng)前畫板在設(shè)置時(shí)間內(nèi)勻速消失，跳轉(zhuǎn)畫板勻速顯示?；瑒?dòng)效果就是根據(jù)設(shè)置的方向進(jìn)行滑動(dòng)顯示直到新畫板完全顯示，推出效果，就是把當(dāng)前的畫板和跳轉(zhuǎn)的畫板同時(shí)按照設(shè)置進(jìn)行推動(dòng)直至新的畫板顯示出來。4.使用AdobeXD成果輸出導(dǎo)出文檔，單擊“彈出”菜單，選擇“導(dǎo)出”選項(xiàng)，彈出“導(dǎo)出”選項(xiàng)，如圖6-83所示。選擇任意一個(gè)選項(xiàng)后，進(jìn)入“導(dǎo)入資源”對(duì)話框，在對(duì)話框中設(shè)置所需要的參數(shù)，單擊“導(dǎo)出”所有畫板按鈕即可導(dǎo)出資源。導(dǎo)出資源或畫板時(shí)注意事項(xiàng)想要導(dǎo)出所有畫板時(shí)，需要確保沒有選擇畫板或資源?？梢詥螕粽迟N板取消選擇的對(duì)象或畫板，這樣可以確保沒有選擇任何畫板或資源。導(dǎo)出特定資源或畫板時(shí)，必須選中需要導(dǎo)出的特定資源或畫板才行?？梢詷?biāo)記稍后要導(dǎo)出的資源或畫板，然后將它們批量導(dǎo)出即可。選擇目標(biāo)平臺(tái)和文件格式，目標(biāo)平臺(tái)包括Web、iOS或Android選項(xiàng)，文件格式則包括PNG、SVG、PDF和JPG。指定目錄即可保存輸出文件。項(xiàng)目實(shí)施——移動(dòng)端移動(dòng)端“茶物語(yǔ)”App產(chǎn)品交互設(shè)計(jì)開發(fā)通過AdobeXD基礎(chǔ)功能完成屏幕設(shè)計(jì)后，AdobeXD創(chuàng)建交的互式原型，直觀地展示如何在屏幕或線框之間導(dǎo)航。通過預(yù)覽交互，驗(yàn)證用戶體驗(yàn)并對(duì)設(shè)計(jì)進(jìn)行迭代，從而節(jié)省開發(fā)時(shí)間。以下就是對(duì)App移動(dòng)端“茶物語(yǔ)”App原型設(shè)計(jì)開發(fā)中，一些簡(jiǎn)單的交互效果的制作。1.“茶物語(yǔ)”Loading動(dòng)畫效果元素樣式設(shè)置完成后，進(jìn)入原型頁(yè)面，為三個(gè)畫板添加交互效果，添加的交互順序?yàn)?，畫?跳轉(zhuǎn)到畫板2，畫板2跳轉(zhuǎn)到畫板3，之后畫板3再次跳轉(zhuǎn)到畫板1如此實(shí)現(xiàn)loading動(dòng)畫效果循環(huán)演示，設(shè)置交互為“時(shí)間”，操作類型為“自動(dòng)制作動(dòng)畫”，動(dòng)畫效果為“漸入漸出”，持續(xù)時(shí)間為0.6秒，同樣把其他兩個(gè)畫板也如此設(shè)置。設(shè)置完成后點(diǎn)擊右上角運(yùn)行按鈕查看運(yùn)行效果。2.“茶物語(yǔ)”左右滑動(dòng)效果實(shí)現(xiàn)左右滑動(dòng)的效果，需要全部選中需要滾動(dòng)的元素，然后再右側(cè)屬性面板變換中找到設(shè)置，水平滾動(dòng)和垂直以及水平和垂直同時(shí)滾動(dòng)的按鈕，然后再設(shè)置需要再滾動(dòng)過程中展示的區(qū)域大小即可實(shí)現(xiàn)滾動(dòng)效果，以水平效果為例設(shè)置圖形再水平方向滾動(dòng)展示的效果制作完成后點(diǎn)擊右上角預(yù)覽左右滑動(dòng)顯示的效果。3.“茶物語(yǔ)”輪播圖演示效果本案例設(shè)計(jì)制作輪播圖的演示效果，圖片在根據(jù)鼠標(biāo)拖動(dòng)時(shí)不停的循環(huán)切換圖片四、實(shí)踐技能訓(xùn)練（一）布置訓(xùn)練任務(wù)設(shè)計(jì)并制作“茶物語(yǔ)”產(chǎn)品交互設(shè)計(jì)項(xiàng)目五、課堂總結(jié)本章介紹了關(guān)于AdobeXD的相關(guān)基礎(chǔ)知識(shí)，包括軟件的簡(jiǎn)介、基本操作、工具的使用、原型的設(shè)計(jì)和導(dǎo)出文檔等內(nèi)容。工具的使用以及原型的設(shè)計(jì)等功能是整個(gè)軟件中非常重要的部分，可以幫助讀者制作很多交互效果，因此需要熟練掌握AdobeXD軟件的用法才行。六、課后思考本項(xiàng)目介紹了AdobeXD工具基礎(chǔ)操作以及AdobeXD軟件中交互鏈接的操作，通過幾個(gè)小的項(xiàng)目對(duì)AdobeXD工具基礎(chǔ)操作和交互進(jìn)行詳細(xì)說明，同學(xué)們通過對(duì)項(xiàng)目實(shí)施中各