第六章App移動(dòng)端“茶物語”產(chǎn)品交互設(shè)計(jì)開發(fā)

App移動(dòng)端“茶物語”產(chǎn)品交互設(shè)計(jì)開發(fā)數(shù)字媒體交互設(shè)計(jì)知識(shí)要點(diǎn)App移動(dòng)端“茶物語”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目背景分析App移動(dòng)端“茶物語”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目需求分析AdobeXD工具介紹項(xiàng)目實(shí)施-App移動(dòng)端“茶物語”產(chǎn)品交互設(shè)計(jì)開發(fā)App移動(dòng)端“茶物語”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目背景分析重點(diǎn)掌握：第一部分次要掌握：√App移動(dòng)端“茶物語”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目背景分析adobeXD茶飲行業(yè)是一個(gè)利益比較高的行業(yè)，當(dāng)代年輕人無論在上班、逛街、或者出去玩時(shí)，都鐘愛喝一杯奶茶來放松自己。如今奶茶店在很多一線城市里面也是遍地開花，開發(fā)一款奶茶App也能夠讓茶飲店鋪在市場中出類拔萃。App移動(dòng)端“茶物語”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目需求分析重點(diǎn)掌握：第二部分次要掌握：√App移動(dòng)端“茶物語”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目需求分析App移動(dòng)端“茶物語”產(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)端“茶物語”軟件產(chǎn)品特點(diǎn)更方便：消費(fèi)者可以通過在軟件上面選擇自己心儀的奶茶下單，相比傳統(tǒng)行業(yè)需要到店消費(fèi)的方式，提供了更多的便利性。增加回頭率：奶茶App可以通過各種折扣滿減或者限時(shí)促銷活動(dòng)，提高用戶的回頭率。更加靈活：如果商家有多家奶茶門店，那奶茶App可以幫助您同步各個(gè)門店的用戶信息，更加靈活。4.App移動(dòng)端“茶物語”需求分析奶茶推薦：無論是新品上架，還是用戶習(xí)慣，App都能夠在第一時(shí)間為用戶進(jìn)行推薦。奶茶分類：為用戶提供專門的在線分類功能，將不同類型的奶茶進(jìn)行分類，以便用戶更好的進(jìn)行獲取自己想要的奶茶，提高奶茶獲取便捷性。奶茶評價(jià)：當(dāng)用戶對指定奶茶品嘗之后，便可以對該奶茶進(jìn)行相應(yīng)的評價(jià)，每一個(gè)評價(jià)都能夠成為其它用戶判斷選擇的標(biāo)準(zhǔn)。促銷活動(dòng)：商家可以定期舉辦各種促銷活動(dòng)，設(shè)置哪些爆款奶茶可以參與秒殺，不僅可以制定營銷策略，也可以清理庫存商品。優(yōu)惠券：商家可以發(fā)出折扣或者滿減的優(yōu)惠券，并設(shè)置優(yōu)惠券僅限的奶茶品種，吸引消費(fèi)者來搶優(yōu)惠券的同時(shí)也能提高下單率。掃碼點(diǎn)餐：有些新用戶不知道可以線上點(diǎn)餐的時(shí)候會(huì)到線下購買，我們可以提供掃碼點(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工具介紹重點(diǎn)掌握：√第三部分次要掌握：選擇工具選擇另一種方法“選擇”工具是AdobeXD工具欄中的第1個(gè)工具，也是絕大多數(shù)情況下默認(rèn)選中的工具，可以通過單擊工具欄中的指針圖標(biāo)，或者直接按鍵盤上的V鍵激活。激活“選擇”工具，用鼠標(biāo)左鍵直接在畫布上單擊任意元素即可選中該元素，可對選中的元素進(jìn)行拖曳、縮放和旋轉(zhuǎn)等操作，如圖所示。另一種方法是按住鍵盤上的command鍵（macOS）或Ctrl鍵（Windows），然后用鼠標(biāo)左鍵單擊該圖層，即可直接選中，如圖所示。選擇工具注意事項(xiàng)選擇圖層組中的圖層時(shí)需要注意以下兩點(diǎn):第1點(diǎn)：按住鍵盤上的command鍵（macOS）或者Ctrl鍵（Windows）直接選中單個(gè)圖層是在畫布上進(jìn)行選擇，并不是在圖層面板中進(jìn)行選擇。第2點(diǎn)：無論是采用雙擊的方法還是采用按住鍵盤上command鍵（macOS）或者Ctrl鍵（Windows）的方法進(jìn)入圖層組以后，都可以直接單擊鼠標(biāo)左鍵選擇需要的圖層。補(bǔ)充如果需要選中多個(gè)圖層，可以按住鍵盤上的Shift鍵，然后選擇需要選中的多個(gè)圖層，如圖所示。選擇工具注意事項(xiàng)名稱選擇如果需要選中整個(gè)畫板，可以直接單擊畫布上面的畫板名稱，如圖所示。被選中的畫板名稱變成藍(lán)色，且畫板四周出現(xiàn)選中框。消隱選擇如果一個(gè)圖層既沒有填充又沒有描邊，該圖層在畫布上是不可見的，此時(shí)需要把鼠標(biāo)移動(dòng)到該圖層所在的位置，當(dāng)畫布上出現(xiàn)該圖層的輪廓線時(shí)單擊鼠標(biāo)左鍵，即可選中該圖層，如圖所示。選擇工具快捷鍵矩形工具工具的位置“矩形”工具是AdobeXD工具欄中的第2個(gè)工具，可以通過單擊工具欄中的矩形工具圖標(biāo)，或者直接按鍵盤上的R鍵激活。激活“矩形”工具后，在畫板上單擊鼠標(biāo)左鍵并拖曳，即可繪制一個(gè)矩形，如圖所示。因?yàn)樵贏dobeXD中默認(rèn)的填充色為純白色，所以大家在畫板上看到的是一個(gè)白色矩形，而非只是一個(gè)輪廓。補(bǔ)充激活“矩形”工具后，按住鍵盤上的Shift鍵，同時(shí)拖曳鼠標(biāo)即可繪制正方形，如圖所示。圓角矩形工具的位置繪制矩形后四個(gè)角上分別會(huì)出現(xiàn)一個(gè)圓點(diǎn)符號(hào)，可以通過拖曳任意一個(gè)角的圓點(diǎn)符號(hào)，設(shè)置矩形的圓角半徑，如圖所示補(bǔ)充如果只想改變其中一個(gè)角的圓角半徑，可以按住option鍵（macOS系統(tǒng)）或者Alt鍵（Windows系統(tǒng)）并拖曳與該角對應(yīng)的圓點(diǎn)符號(hào)。矩形圖層的屬性檢查器工具的位置該部分能設(shè)置圖層的對齊屬性，從左到右一共有8種對齊方式，分別是“頂對齊”“居中對齊（垂直）”“底對齊”“水平分布對齊”“左對齊”“居中對齊（水平）”“右對齊”和“垂直分布對齊”，如圖所示。！注意，圖中的“水平分布對齊”和“垂直分布對齊”的圖標(biāo)是未激活狀態(tài)，這是因?yàn)樾枰x中3個(gè)或3個(gè)以上的圖層才可以執(zhí)行分布對齊的操作。如果只選中一個(gè)圖層，那么該圖層對齊的參考為畫板本身。補(bǔ)充繪制好矩形后，可以通過屬性檢查器設(shè)置其屬性，如圖所示。屬性檢查器通過橫線分成4部分。橢圓工具橢圓“橢圓”工具是AdobeXD工具欄中的第3個(gè)工具，可以通過直接單擊工具欄中的橢圓工具圖標(biāo)，或者直接按鍵盤上的E鍵激活?！皺E圓”工具是AdobeXD中的第2種繪圖工具，用于繪制圓形。激活“橢圓”工具后，在畫布上單擊鼠標(biāo)左鍵并拖曳鼠標(biāo)，即可繪制橢圓，如圖所示。如果在繪制橢圓之前，按住鍵盤上的Shift鍵，則可以繪制一個(gè)圓。繪制完橢圓后，可以在右側(cè)的屬性檢查器中設(shè)置橢圓的屬性，因橢圓圖層的屬性檢查器與矩形圖層的屬性檢查器完全相同，所以在此不作重復(fù)說明。直線工具直線“直線”工具是AdobeXD工具欄中的第4個(gè)工具，可以用來繪制直線。要使用該工具，只需單擊工具欄上的直線工具圖標(biāo)，或者直接按鍵盤上的L鍵將其激活。使用“直線”工具繪制直線時(shí)，首先在畫布上單擊鼠標(biāo)確定直線的起點(diǎn)，然后按住并拖曳鼠標(biāo)，再在終點(diǎn)處釋放鼠標(biāo)，即可繪制出一條直線如果在繪制直線的同時(shí)按住Shift鍵，則可以以固定的角度繪制直線；如果鼠標(biāo)從左往右拖曳，則在水平方向繪制；如果是上下拖曳，則繪制出一條垂直線；如果是往左上、右上、左下、右下等方向拖曳，則會(huì)以45°角的方向繪制直線鋼筆工具工具位置“鋼筆”工具是AdobeXD工具欄中的第5個(gè)工具，可以用該工具繪制各種路徑。要使用該工具，只需單擊工具欄上的鋼筆工具圖標(biāo)，或者直接按鍵盤上的P鍵將其激活。用“鋼筆”工具繪制直線路徑的方法非常簡單。首先激活“鋼筆”工具，在畫板上單擊鼠標(biāo)左鍵，創(chuàng)建一個(gè)錨點(diǎn)，然后將鼠標(biāo)移動(dòng)到另一個(gè)位置并單擊鼠標(biāo)左鍵，創(chuàng)建另一個(gè)錨點(diǎn)，這時(shí)兩個(gè)錨點(diǎn)之間會(huì)自動(dòng)出現(xiàn)一條直線路徑。此時(shí)可以再移動(dòng)鼠標(biāo)添加第3個(gè)錨點(diǎn)，則第3個(gè)錨點(diǎn)和第2個(gè)錨點(diǎn)之間也會(huì)出現(xiàn)一條直線路徑，如圖所示。鋼筆工具錨點(diǎn)在一個(gè)路徑上可以添加無數(shù)個(gè)錨點(diǎn)。如果要結(jié)束路徑的繪制，可以按下鍵盤上的Esc鍵，此時(shí)，鼠標(biāo)便會(huì)被釋放，并且默認(rèn)選中第一個(gè)錨點(diǎn)，工具會(huì)自動(dòng)變?yōu)椤斑x擇”工具，如圖所示。補(bǔ)充如果繼續(xù)選擇“鋼筆”工具，然后單擊上述路徑兩端的任意錨點(diǎn)，則可以繼續(xù)在該路徑上繪制線條。如果用“鋼筆”工具把兩個(gè)端點(diǎn)連接起來，形成一個(gè)閉合圖形后，會(huì)自動(dòng)退出路徑的繪制，工具也自動(dòng)變?yōu)椤斑x擇”工具鋼筆工具曲柄選擇“選擇”工具，用鼠標(biāo)左鍵雙擊路徑上的錨點(diǎn)，可以把直線路徑變?yōu)榍€路徑，如圖所示，路徑左右會(huì)出現(xiàn)曲柄，拖曳曲柄可以對曲線進(jìn)行調(diào)整。如果再次雙擊錨點(diǎn)，則會(huì)變?yōu)橹本€路徑。補(bǔ)充激活“鋼筆”工具后，在起點(diǎn)處單擊鼠標(biāo)左鍵，然后將鼠標(biāo)移動(dòng)至需要的位置，再單擊鼠標(biāo)左鍵并拖曳，即可繪制兩個(gè)錨點(diǎn)之間的曲線；如果再次單擊鼠標(biāo)左鍵時(shí)不拖曳，則會(huì)繪制出一條直線。文本工具文本選擇“文本”工具，再畫板中點(diǎn)擊即可創(chuàng)建文本，默認(rèn)情況下是單行文本，不會(huì)換行。如果想強(qiáng)制換行需要按回車健進(jìn)行強(qiáng)制換行。補(bǔ)充創(chuàng)建區(qū)域文本需要再選擇文本工具后按住鼠標(biāo)拖動(dòng)創(chuàng)建一個(gè)文本區(qū)域框，這時(shí)當(dāng)文本達(dá)到了區(qū)域框的寬度后會(huì)自動(dòng)換行。按住esc鍵退出文本編輯。畫板工具畫板工具在新建頁面中可以創(chuàng)建包含一個(gè)畫板的xd文件，進(jìn)入xd項(xiàng)目之后單擊左側(cè)面板的畫板工具，或者單機(jī)快捷鍵A切換到畫板工具，補(bǔ)充可以創(chuàng)建多個(gè)畫板，同時(shí)可以修改畫板名稱以及尺寸。在畫板邊緣拖動(dòng)即可調(diào)整畫板的尺寸。圖層面板圖層面板單機(jī)左下角的圖層按鈕，可以查看所有的圖層面板。補(bǔ)充點(diǎn)擊任意畫板中的對象，會(huì)顯示所選畫板中所有元素的圖層。圖層的顯示順序時(shí)從上到下排列的，可以通過鼠標(biāo)拖拽更改元素的圖層順序。資源面板資源面板單機(jī)左下角的庫，可以展示文件中的所有資源。包括顏色，字符樣式和組件，在資源面板的各個(gè)資源可以在文件各個(gè)位置進(jìn)行使用。大大提高設(shè)計(jì)效率。補(bǔ)充點(diǎn)擊任意畫板中的對象，然后再左側(cè)資源面板中，點(diǎn)擊資源分類中的加號(hào)按鈕，即可把畫板中對應(yīng)的資源屬性添加到資源面板中。刪除資源需要右鍵需要?jiǎng)h除的資源然后選擇刪除即可把該資源刪除。使用AdobeXD完成原型鏈接頁面AdobeXD可以創(chuàng)建交互式原型，直觀地展示如何在屏幕或線框之間進(jìn)行連接。也可以預(yù)覽交互，這樣可以驗(yàn)證用戶體驗(yàn)并對設(shè)計(jì)進(jìn)行迭代，從而節(jié)省開發(fā)事件。制作好頁面元素后，就可以點(diǎn)擊原型按鈕，進(jìn)入原型交互設(shè)計(jì)頁面，制作交互效果頁面至少需要兩個(gè)畫板，當(dāng)頁面中只有一個(gè)畫板的時(shí)候呢我們是無法制作交互效果。（1）設(shè)置“主頁”“主頁”屏幕是應(yīng)用程序或網(wǎng)站的第一個(gè)屏幕。瀏覽者會(huì)從“主頁”屏幕開始應(yīng)用程序或網(wǎng)站的瀏覽。切換到“原型”模式，單擊要設(shè)置為“主頁”的畫板。左上角會(huì)出現(xiàn)一個(gè)灰色的主頁圖標(biāo)。單擊“主頁”圖標(biāo)，它會(huì)變成藍(lán)色，提示該畫板或屏幕已被成功設(shè)置為“主頁”屏幕，如圖使用AdobeXD完成原型鏈接頁面（2）將交互式元素鏈接到目標(biāo)屏幕在開始鏈接畫板或屏幕之前，要適當(dāng)?shù)貫楫嫲迕?，這樣做有助于設(shè)計(jì)師能夠分辨清楚畫板之間的鏈接。切換到“原型”模式，單擊要鏈接的對象或畫板。對象或畫板上將會(huì)出現(xiàn)帶箭頭的連接手柄。將鼠標(biāo)懸停在手柄上，光標(biāo)會(huì)變?yōu)榫€條連接器，將光標(biāo)移動(dòng)到需要被鏈接的畫板或?qū)ο笊?，如圖使用AdobeXD完成原型鏈接頁面2.設(shè)置原型首屏內(nèi)容當(dāng)設(shè)計(jì)的內(nèi)容超出既定的屏幕顯示時(shí)，可以設(shè)置屏幕的顯示范圍為頁面首屏，將超出的內(nèi)容進(jìn)行滾動(dòng)顯示。（1）制作可滾動(dòng)畫板使用預(yù)設(shè)的尺寸創(chuàng)建畫板，如果內(nèi)容繼續(xù)超出畫板的指定長度，可將畫板底部拖動(dòng)到所需要的長度并繼續(xù)設(shè)計(jì)。畫板上的虛線表示可滾動(dòng)內(nèi)容的其實(shí)位置，如圖所示。虛線上方為頁面首屏尺寸。（2）固定對象位置當(dāng)在為某個(gè)原型頁面設(shè)置滾動(dòng)畫板時(shí)，頁面中的一個(gè)或一組對象可能需要將其固定在頁面的頂部或底部，保持UI界面的完整性。在“設(shè)計(jì)”模式下，選中一個(gè)或一組對象，將其擺放在需要顯示的固定位置上，然后再“屬性”面板中勾選“滾動(dòng)時(shí)固定位置”選項(xiàng)前面的復(fù)選框，如圖所示。勾選完成后，此對象在頁面預(yù)覽時(shí)，就會(huì)固定在某個(gè)位置。使用AdobeXD完成原型鏈接頁面3.觸發(fā)的幾種操作在“原型”模式下，為對象添加交互鏈接時(shí)，在右側(cè)交互設(shè)計(jì)面板中，觸發(fā)默認(rèn)是點(diǎn)擊，選項(xiàng)框可以看到畫板有拖移、時(shí)間、按鍵和游戲手柄、以及語音。而元素的觸發(fā)操作類型沒有時(shí)間。如圖使用AdobeXD完成原型鏈接頁面4.操作動(dòng)作在xd預(yù)覽原型界面中根據(jù)設(shè)置的觸發(fā)操作不同，而執(zhí)行的反應(yīng)效果不同。在畫板的交互設(shè)置面板中“操作”的類型有過渡、自動(dòng)制作動(dòng)畫、疊加、滾動(dòng)至、上一個(gè)畫板、音頻播放和語音播放。而畫板中元素中多了一個(gè)“滾動(dòng)至”的操作。如圖使用AdobeXD成果輸出導(dǎo)出文檔導(dǎo)出文檔，單擊“彈出”菜單，選擇“導(dǎo)出”選項(xiàng)，彈出“導(dǎo)出”選項(xiàng)。選擇任意一個(gè)選項(xiàng)后，進(jìn)入“導(dǎo)入資源”對話框，如圖所示。在對話框中設(shè)置所需要的參數(shù)，單擊“導(dǎo)出”所有畫板按鈕即可導(dǎo)出資源。導(dǎo)出資源或畫板時(shí)注意事項(xiàng)想要導(dǎo)出所有畫板時(shí)，需要確保沒有選擇畫板或資源。導(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í)施-App移動(dòng)端“茶物語”產(chǎn)品交互設(shè)計(jì)開發(fā)重點(diǎn)掌握：√第四部分次要掌握：項(xiàng)目實(shí)施-App移動(dòng)端“茶物語”產(chǎn)品交互設(shè)計(jì)開發(fā)“茶物語”Loading動(dòng)畫效果案例效果是制作一個(gè)在加載元素時(shí)，一個(gè)等待的效果。制作步驟1.元件基礎(chǔ)樣式設(shè)置首先使用“橢圓”工具在畫布中創(chuàng)建一個(gè)圓形，在圓形屬性面板中，設(shè)置圓形的邊界，首先使用周長公式計(jì)算出四分之間距的數(shù)值2πR/4，本案例中的間隙設(shè)置為130，之后在畫板上看到的有四個(gè)點(diǎn)的樣式。具體設(shè)置如圖項(xiàng)目實(shí)施-App移動(dòng)端“茶物語”產(chǎn)品交互設(shè)計(jì)開發(fā)“茶物語”Loading動(dòng)畫效果復(fù)制畫板1，然后修改復(fù)制出來畫板2中圓形邊界的樣式，讓它有一個(gè)在近似圓形的外觀。如圖再次復(fù)制畫板1，然后修改畫板3中的圓形旋轉(zhuǎn)角度為旋轉(zhuǎn)180°這樣在運(yùn)行時(shí)顯示效果會(huì)更好，具體設(shè)置如圖項(xiàng)目實(shí)施-App移動(dòng)端“茶物語”產(chǎn)品交互設(shè)計(jì)開發(fā)“茶物語”Loading動(dòng)畫效果2.元件交互效果設(shè)置元素樣式設(shè)置完成后，進(jìn)入原型頁面，為三個(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è)置。如圖所示項(xiàng)目實(shí)施-App移動(dòng)端“茶物語”產(chǎn)品交互設(shè)計(jì)開發(fā)“茶物語”Loading動(dòng)畫效果設(shè)置完成后點(diǎn)擊右上角運(yùn)行按鈕查看運(yùn)行效果。如圖所示項(xiàng)目實(shí)施-App移動(dòng)端“茶物語”產(chǎn)品交互設(shè)計(jì)開發(fā)“茶物語”左右滑動(dòng)的交互效果本案例效果是設(shè)計(jì)制作一個(gè)左右滑動(dòng)元素的效果。左右滑動(dòng)的效果如圖項(xiàng)目實(shí)施-App移動(dòng)端“茶物語”產(chǎn)品交互設(shè)計(jì)開發(fā)“茶物語”左右滑動(dòng)的交互效果制作步驟：1.元件基礎(chǔ)樣式設(shè)置在AdobeXD畫布界面中，搭建好需要的元件樣式。2.元件交互效果設(shè)置實(shí)現(xiàn)左右滑動(dòng)的效果，需要全部選中需要滾動(dòng)的元素，，然后再右側(cè)屬性面板變換中找到設(shè)置，水平滾動(dòng)和垂直以及水平和垂直同時(shí)滾動(dòng)的按鈕，，然