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

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

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