項(xiàng)目背景：
? ? ? ?店加是一個(gè)便利店老板采購(gòu)進(jìn)貨的平臺(tái)。在分類列表頁(yè)面，用戶會(huì)進(jìn)行批量加購(gòu)操作瓮钥。購(gòu)買N個(gè)相同的商品狱意，用戶有兩種方式：一種是先找到要買的商品添加到購(gòu)物車湖苞，再到購(gòu)物車列表中調(diào)整每個(gè)商品的數(shù)量N；另一種是找到每個(gè)商品后详囤，加購(gòu)N次财骨。
? ? ? ? 現(xiàn)有的加購(gòu)界面反饋是Toast提示，當(dāng)用戶快速加購(gòu)商品或者是網(wǎng)絡(luò)狀況不好時(shí)藏姐，反饋不是很明確隆箩，特別是第二種操作喜光的用戶難以感知點(diǎn)擊過(guò)“加購(gòu)”按鈕的商品是否已經(jīng)成功加購(gòu)到購(gòu)物車中。新的動(dòng)效目的就是傳達(dá)給用戶更加明確的操作結(jié)果羔杨。
動(dòng)效意義：
? ? ? ?動(dòng)效設(shè)計(jì)有兩個(gè)主要的意義捌臊，一個(gè)是凸顯產(chǎn)品的主要內(nèi)容，引導(dǎo)用戶的注意力问畅；一個(gè)是幫助用戶理解界面娃属，降低認(rèn)知門檻六荒。本次的動(dòng)效設(shè)計(jì)主要意義是降低用戶的認(rèn)知門檻，經(jīng)過(guò)分析和調(diào)研矾端，我們歸納了三個(gè)設(shè)計(jì)方向：
1.????區(qū)分加購(gòu)成功和失敗的界面反饋形式掏击，用差異化的方式強(qiáng)化用戶感知
2.????體現(xiàn)前端和服務(wù)器的數(shù)據(jù)交互過(guò)程，并盡力表現(xiàn)出系統(tǒng)的快速響應(yīng)能力和流暢性秩铆；在極端情況下能很好的補(bǔ)位砚亭，減輕系統(tǒng)卡頓和等待的感覺(jué)。
3.????合理借鑒成熟平臺(tái)已有的反饋效果殴玛，比如淘寶網(wǎng)站上商品飛入購(gòu)物車的效果捅膘。
設(shè)計(jì)思路：
根據(jù)上述梳理的三個(gè)要點(diǎn)，進(jìn)一步深化分析滚粟，我們討論出了以下方案：
1.????現(xiàn)有的加購(gòu)成功和失敗的反饋方式都是toast寻仗，存在進(jìn)一步優(yōu)化的空間。加購(gòu)成功時(shí)凡壤，使用界面動(dòng)效署尤；加購(gòu)失敗時(shí)，細(xì)化為明確原因的失敗和系統(tǒng)原因的失敗亚侠。對(duì)于明確原因的失敗曹体，比如操作每個(gè)用戶限定的購(gòu)買數(shù)量使用彈窗的形式；對(duì)于系統(tǒng)原因比如服務(wù)器超時(shí)未響應(yīng)硝烂，則使用toast提示箕别。
2.????對(duì)于用戶與前端的交互，界面可以表現(xiàn)出點(diǎn)擊效果滞谢，比如按鈕顏色或者大小的變化串稀。對(duì)于前端于后臺(tái)的交互，界面可以變現(xiàn)出“進(jìn)度”的效果狮杨，比如環(huán)形的進(jìn)度條或條形的進(jìn)度條厨诸。進(jìn)度條又可以分為兩種，一種是可以計(jì)算出當(dāng)前進(jìn)度的禾酱。比如下載微酬，可以根據(jù)當(dāng)前的下載速度和文件大小實(shí)時(shí)顯示出當(dāng)前進(jìn)度。另一種是不知道何時(shí)結(jié)束的颤陶，比如網(wǎng)絡(luò)的連接和數(shù)據(jù)的加載颗管，只能使用循環(huán)的動(dòng)畫表明系統(tǒng)正在處理中。
3.????購(gòu)物車位于底部標(biāo)簽欄中滓走，商品從列表中按鈕位置飛入購(gòu)物車垦江，可以模擬現(xiàn)實(shí)中物體墜落的過(guò)程。商品沿著拋物線從按鈕位置加速移動(dòng)到購(gòu)物車搅方，使整個(gè)動(dòng)效更為自然比吭。
原型實(shí)現(xiàn)：
? ? ? ? 為了直觀地把設(shè)計(jì)思路傳達(dá)給項(xiàng)目組人員绽族，我們需要進(jìn)一步制作動(dòng)效原型并反復(fù)調(diào)試出滿意的效果。動(dòng)效原型的軟件有很多種衩藤，各有特點(diǎn)吧慢，選擇一款適合自己和當(dāng)前項(xiàng)目且可以表達(dá)出設(shè)計(jì)思路的就可以了。我先使用Origami Studio制作出了一小段的視頻便于動(dòng)效的展示赏表。后使用Axture制作出可交互的高保真原型检诗，便于動(dòng)效的拆解和描述，把相關(guān)參數(shù)和實(shí)現(xiàn)思路提供給前端開(kāi)發(fā)參考瓢剿，最終能更好的在產(chǎn)品上實(shí)現(xiàn)逢慌。
? ? ? ? ?制作動(dòng)效的主線思路有四個(gè)步驟：觸發(fā)事件、影響對(duì)象间狂、影響屬性攻泼、動(dòng)效結(jié)果。以本次加購(gòu)動(dòng)效為例可以拆分為兩個(gè)動(dòng)效鉴象，“加載”和“飛入”動(dòng)效坠韩。
? ? ? ? ?“加載”動(dòng)效的觸發(fā)事件為用戶點(diǎn)擊加購(gòu)按鈕，影響對(duì)象是購(gòu)物車按鈕和加載圖片炼列，影響的屬性有購(gòu)物車按鈕的大小和加載圖片的透明度和旋轉(zhuǎn)角度，動(dòng)效的結(jié)果是購(gòu)物車放大1.2倍且顯示加載圖片循環(huán)旋轉(zhuǎn)音比。
? ? ? ? “飛入”動(dòng)效觸發(fā)事件是服務(wù)器成功響應(yīng)事件俭尖，影響對(duì)象是商品縮略圖，影響屬性是商品縮略圖的透明度和位置洞翩。動(dòng)效的結(jié)果是商品縮略圖顯示后從按鈕位置沿拋物線移動(dòng)到購(gòu)物車位置后隱藏稽犁。
值得注意的是，“加載”動(dòng)效有一個(gè)對(duì)應(yīng)的“停止加載”動(dòng)效骚亿。它的觸發(fā)對(duì)象是服務(wù)器響應(yīng)或服務(wù)器超時(shí)未響應(yīng)已亥，其他三個(gè)步驟與“加載”相反。
? ? ? ? ? 除了這四個(gè)步驟之外来屠，動(dòng)效的另一個(gè)要點(diǎn)就是緩動(dòng)曲線的選擇和時(shí)間的控制虑椎，緩動(dòng)曲線可以概括為三種EaseIn(加速曲線)、EaseOut(減速曲線)俱笛、EaseInOut(先加速后減速)捆姜。當(dāng)然這三種類型有很多其他的變化，且在不同的前端實(shí)現(xiàn)上有不同的描述迎膜，但都可以參考貝塞爾曲線泥技，有興趣的同學(xué)可以自行搜索相關(guān)內(nèi)容。時(shí)間的控制上磕仅，以毫秒為單位珊豹，一般運(yùn)動(dòng)距離大或動(dòng)效復(fù)雜的在四五百毫秒左右簸呈，距離短或簡(jiǎn)單的動(dòng)效在兩百毫秒左右。具體的數(shù)值需要反復(fù)根據(jù)實(shí)際效果調(diào)整店茶。
為了詳細(xì)地向開(kāi)發(fā)傳達(dá)這一過(guò)程蜕便，我繪制了流程圖：
界面元素的層級(jí)關(guān)系，可以給開(kāi)發(fā)一些靈感：
? ? ? ? 整個(gè)過(guò)程比較遺憾的是由于原型工具的局限性（或是我沒(méi)有完全掌握忽妒？）玩裙，沒(méi)有實(shí)現(xiàn)商品沿拋物線運(yùn)動(dòng)的效果，而以直線代替段直。歡迎大家有更好的想法可以一起交流探討吃溅。按照拋物線的方程：y=ax2+bx+c ,確定了兩個(gè)點(diǎn)：加購(gòu)按鈕的位置（0，y1）,購(gòu)物車的位置（x1,0）的位置是可以計(jì)算出商品縮略圖的運(yùn)動(dòng)軌跡的鸯檬，給定特定的時(shí)間和緩動(dòng)曲線（EaseIn）决侈，理論上可以很好地模擬物體受重力影響的運(yùn)動(dòng)效果。各位懂前端技術(shù)的朋友們可以交流下具體的實(shí)現(xiàn)邏輯喧务。
最后附上Origami原文件和Axture原文件赖歌、預(yù)覽文件，大家一起學(xué)習(xí)交流功茴。預(yù)覽原型/Axture源文件/Origami源文件
