項目6 移動端“茶物語”App產(chǎn)品交互設(shè)計開發(fā)-備課筆記

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

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