項目背景：
? ? ? ?店加是一個便利店老板采購進貨的平臺。在分類列表頁面，用戶會進行批量加購操作。購買N個相同的商品，用戶有兩種方式：一種是先找到要買的商品添加到購物車，再到購物車列表中調整每個商品的數量N；另一種是找到每個商品后，加購N次。
? ? ? ? 現有的加購界面反饋是Toast提示，當用戶快速加購商品或者是網絡狀況不好時，反饋不是很明確，特別是第二種操作喜光的用戶難以感知點擊過“加購”按鈕的商品是否已經成功加購到購物車中。新的動效目的就是傳達給用戶更加明確的操作結果。
動效意義：
? ? ? ?動效設計有兩個主要的意義，一個是凸顯產品的主要內容，引導用戶的注意力；一個是幫助用戶理解界面，降低認知門檻。本次的動效設計主要意義是降低用戶的認知門檻，經過分析和調研，我們歸納了三個設計方向：
1.????區分加購成功和失敗的界面反饋形式，用差異化的方式強化用戶感知
2.????體現前端和服務器的數據交互過程，并盡力表現出系統的快速響應能力和流暢性；在極端情況下能很好的補位，減輕系統卡頓和等待的感覺。
3.????合理借鑒成熟平臺已有的反饋效果，比如淘寶網站上商品飛入購物車的效果。
設計思路：
根據上述梳理的三個要點，進一步深化分析，我們討論出了以下方案：
1.????現有的加購成功和失敗的反饋方式都是toast，存在進一步優化的空間。加購成功時，使用界面動效；加購失敗時，細化為明確原因的失敗和系統原因的失敗。對于明確原因的失敗，比如操作每個用戶限定的購買數量使用彈窗的形式；對于系統原因比如服務器超時未響應，則使用toast提示。
2.????對于用戶與前端的交互，界面可以表現出點擊效果，比如按鈕顏色或者大小的變化。對于前端于后臺的交互，界面可以變現出“進度”的效果，比如環形的進度條或條形的進度條。進度條又可以分為兩種，一種是可以計算出當前進度的。比如下載，可以根據當前的下載速度和文件大小實時顯示出當前進度。另一種是不知道何時結束的，比如網絡的連接和數據的加載，只能使用循環的動畫表明系統正在處理中。
3.????購物車位于底部標簽欄中，商品從列表中按鈕位置飛入購物車，可以模擬現實中物體墜落的過程。商品沿著拋物線從按鈕位置加速移動到購物車，使整個動效更為自然。
原型實現：
? ? ? ? 為了直觀地把設計思路傳達給項目組人員，我們需要進一步制作動效原型并反復調試出滿意的效果。動效原型的軟件有很多種，各有特點，選擇一款適合自己和當前項目且可以表達出設計思路的就可以了。我先使用Origami Studio制作出了一小段的視頻便于動效的展示。后使用Axture制作出可交互的高保真原型，便于動效的拆解和描述，把相關參數和實現思路提供給前端開發參考，最終能更好的在產品上實現。
? ? ? ? ?制作動效的主線思路有四個步驟：觸發事件、影響對象、影響屬性、動效結果。以本次加購動效為例可以拆分為兩個動效，“加載”和“飛入”動效。
? ? ? ? ?“加載”動效的觸發事件為用戶點擊加購按鈕，影響對象是購物車按鈕和加載圖片，影響的屬性有購物車按鈕的大小和加載圖片的透明度和旋轉角度，動效的結果是購物車放大1.2倍且顯示加載圖片循環旋轉。
? ? ? ? “飛入”動效觸發事件是服務器成功響應事件，影響對象是商品縮略圖，影響屬性是商品縮略圖的透明度和位置。動效的結果是商品縮略圖顯示后從按鈕位置沿拋物線移動到購物車位置后隱藏。
值得注意的是，“加載”動效有一個對應的“停止加載”動效。它的觸發對象是服務器響應或服務器超時未響應，其他三個步驟與“加載”相反。
? ? ? ? ? 除了這四個步驟之外，動效的另一個要點就是緩動曲線的選擇和時間的控制，緩動曲線可以概括為三種EaseIn(加速曲線)、EaseOut(減速曲線)、EaseInOut(先加速后減速)。當然這三種類型有很多其他的變化，且在不同的前端實現上有不同的描述，但都可以參考貝塞爾曲線，有興趣的同學可以自行搜索相關內容。時間的控制上，以毫秒為單位，一般運動距離大或動效復雜的在四五百毫秒左右，距離短或簡單的動效在兩百毫秒左右。具體的數值需要反復根據實際效果調整。
為了詳細地向開發傳達這一過程，我繪制了流程圖：
界面元素的層級關系，可以給開發一些靈感：
? ? ? ? 整個過程比較遺憾的是由于原型工具的局限性（或是我沒有完全掌握？），沒有實現商品沿拋物線運動的效果，而以直線代替。歡迎大家有更好的想法可以一起交流探討。按照拋物線的方程：y=ax2+bx+c ,確定了兩個點：加購按鈕的位置（0，y1）,購物車的位置（x1,0）的位置是可以計算出商品縮略圖的運動軌跡的，給定特定的時間和緩動曲線（EaseIn），理論上可以很好地模擬物體受重力影響的運動效果。各位懂前端技術的朋友們可以交流下具體的實現邏輯。
最后附上Origami原文件和Axture原文件、預覽文件，大家一起學習交流。預覽原型/Axture源文件/Origami源文件
