教你用動效闡釋APP運作機制

 

　　編者按：動效設計可以說是目前UI設計圈當中最火的趨勢了，這次設計師Eugene Rudyy在Medium分享了他參與設計新版Yep!的經歷，這次他講的不是怎麼設計才好看，而是怎樣用動效來替代語言來告訴用戶APP的運作機制。脫去華麗的外衣，動效原來還能如此精彩!

　　Yep!是什麼

　　一年前開始，我開始通Yep!的創始人Roman與Alexander一同工作，他們試圖讓Yep!改變大家的生活。這是一款幫助人們相遇和聯系的APP，他們希望Yep!所提供的服務能夠讓大家更輕松的約會碰頭，更愉悅高效地做自己喜歡的事情。

　　比如當你打算同某個有相同愛好的人一起和咖啡，那麼你可以借助Yep!來查看這個時段內周圍有沒有相同需求的人。之後你可以借助Yep!和他商討細節，約定地點，然後朋友，享受接下來愉悅的時光。

　　為了完成這款APP，我和兩位創始人在見面後接下來的幾個月當中，要測試大量的新功能和特性，其中很多想法是前所未有的，這也是這款APP所獨特的所在。現在Yep!可以在蘋果的AppStore中免費下載。

　　意義非凡的動效

　　在iOS剛剛問世的時候，那些精致而有意義的動效給我留下了極為深刻的印象。動效的存在，溝通著不同的界面和功能，在交互上起到了重要的承接作用，最重要的是，它會潛移默化地為用戶傳遞信息，構建模式，淡化硬件設備無機的一面。這些動效無需復雜的文字說明，就能告訴用戶接下來要做什麼。當你刪除文件的時候，文件投入垃圾桶的動效就傳遞給用戶“刪除”的含義。這些，就是機器的“人性”所在。

　　隨著UI設計扁平化的風潮，蘋果早期所主導的“蘋果式擬物化”(Skeuomorphism)正逐漸消失在大家的視野裡，當時那些精致而直觀的動效也被扁平化的動效設計所替代。相比早期的設計，偏平化的語境性下動效有了更多的可能性。

　　在設計之初，我們開始構建Yep!的線框圖和原型的時候就清醒地意識到，Yep!必須和其他普通的社交APP不一樣，它需要簡約的視覺設計，並且通過交互和動效來告訴用戶它的運作機制。這樣的設定有兩個優勢：1、動效可以更為生動地告訴用戶發生了什麼;2、動效可以更加生動，更有益於情感的傳遞和程序的使用。當然，這樣的設計也就意味著開發成本會更加高昂，但是最終我們還是認為這些投入是值得的。

　　在Yep!中，用戶操作的基本流程是這樣的：選擇活動->發出請求->等待搜索結果->查看結果(尋找匹配)。發出請求之後，在之後的一個小時內，系統會持續尋找匹配的其他用戶。各個階段有不同的界面，但是借助動效的銜接，用戶會感覺這是一個界面在不停地轉變，非常自然。這樣的設計在iOS平台上可以非常輕松的實現，也符合它的設計規范。

　　選擇活動

　　在yep!的活動選擇界面中，帶著圓形邊界的圖標錯落地分布在界面上，不同的活動有著不同的色彩。

　　當程序啟動的時候，活動圖標會依照順時針的順序出現在屏幕上，而Sport和Events還有二級菜單，而二級菜單的出現方式與主菜單完全一致。整個APP的配色使用的是糖果色，配上活潑的動效，可以讓用戶感覺更加愉悅。

　　配置請求

　　在這裡出現了第一次界面切換，我們設計的動效會讓用戶感覺到流暢，並且讓他們明白到底發生了什麼。

　　下面就是動效所要呈現的流程：

　　1、在界面中選擇活動

　　2、查看請求的內容並准備發布，添加地點和額外說明

　　3、發布請求

　　4、Yep!開始搜尋50公裡內的區域是否有相似請求

　　5、得到結果(在下一個動畫中呈現)

　　在上面的動畫中，用戶選擇了吃飯，圖標上移在地圖上化作地標，這個動畫非常明確的告訴用戶這一活動的類型(吃飯)以及是在什麼地方。當你點擊OK之後，地圖標記化作雷達，掃描周圍50km內的用戶，非常直觀，不多一句話。沒有多余的按鈕、請求和大大小小的按鈕和框圖，用戶只需要看著動效，就明白發生了什麼。

　　用戶體驗的提升與錯誤

　　在上一版的設計中，我們的設計並非如同現在一樣。當用戶選擇活動類型之後的第二屏，顯示的是用戶的名字和照片等信息，當你查看周圍匹配用戶的時候，也會打開相似的界面，當然你的信息也可以被他人看到。

　　這樣的設計讓第二屏有67%的通過率。但是，這樣的設計機制運行起來並不好。許多用戶在第二屏出現這個階段就不願意進行下去了，許多用戶因此而流失，因為公開個人信息本就不符合這些用戶的需求，這個環節本就是失敗的。因此，我們將這些影響用戶的信息和環節都清理得干干淨淨。

　　修改之後，新版的第二屏的通過率本身就達到了83%，用戶只需要確定需求和地點，額外的選擇就是添加地點和說明，隨後我們只會增加一個分享按鈕。從67%到83%，這是一個明顯的提升。我們試圖通過流程優化，將這個數字再提高一點。

　　發送請求

　　配置好請求之後，獲取到匹配的用戶，每個用戶的底部就會有一個Yep!按鈕，點擊按鈕之後，就會向用戶發出約會請求。如同用戶接受了你的請求，那麼就可以發起會話聊天了。當然，請求是相互的，用戶可以發出也可以接收。

　　在這個環節，我決定設計一個動效。當用戶點擊Yep!按鈕之後，按鈕會從底部向上，這一動作就非常簡單的闡釋了“發送”的含義。氣泡運動到屏幕中間，並且告知用戶請求已經發出，同時你可以點擊這個位置，取消發送，非常簡單。

　　收獲需求

　　當你收到Yep!需求之後，就可以看到類似Facebook的聊天界面，右上方有頭像和提示，用戶可以點擊這個地方來浏覽信息，也可以左右滑動查看，符合習慣也迎合需求。

　　開發和設計工作仍然在繼續，今年的夏季和秋季我們會持續改進這一APP，會發布Andorid的版本，我們會在設計和用戶體驗上繼續提升改進。如果你也喜歡動效，不妨來看看。