寫在前面

什么時候該使用動效，什么時候該保持應(yīng)有的克制，什么樣的動效是好的動效我在之前寫過一遍文章，感興趣都盆友可以了解下，標(biāo)題《動效/動畫在直播類應(yīng)用中都運(yùn)用和落地》，本篇文章應(yīng)該可以算是上篇文章的下半場

接下來要說的這個案例，它可能和我們平常所見的動效體驗(yàn)原則是“背道而馳”的,因?yàn)樗K究是一個等待運(yùn)力調(diào)度的場景（簡單的說就是等待司機(jī)接駕的過程）每天成百上千萬訂單的背后有著一套非常復(fù)雜的算法去支撐，這就造成了這個場景它本身不會像動效指導(dǎo)原則那樣順利，平滑，愉悅，但是既然是做設(shè)計(jì)，核心是去解決問題，所以繞不開這個場景本身。通過數(shù)據(jù)去解讀用戶的想法和行為，將設(shè)計(jì)與業(yè)務(wù)進(jìn)行更緊密的結(jié)合，從而達(dá)到更好的效果

對用戶 “等待應(yīng)答“這個場景的動效改進(jìn)，以拉美地區(qū)最終AB測試數(shù)據(jù)為結(jié)論，使我更加確信動效能做的不僅僅是體驗(yàn)上的提高，在特殊場景下完全可以解決視覺感知層面無法解決的痛點(diǎn)，為業(yè)務(wù)方拿結(jié)果

所有數(shù)據(jù)對外均作了隱藏處理~

項(xiàng)目背景

滴滴出行在拉美地區(qū)飛速發(fā)展,單量持續(xù)增高的同時，用戶對產(chǎn)品本身的期望也越來越大，我們一如既往的重視用戶體驗(yàn)。無論嚴(yán)寒酷暑，早晚高峰，我們和我們的用戶都不希望等待接駕變成一件漫長、無預(yù)期、盲目的行為

數(shù)據(jù)分析

* 乘客等待時長主要分布在A時段左右，多數(shù)乘客會選擇在此時間段內(nèi)取消訂單，而消訂單的乘客并不會停止叫車服務(wù)，而是進(jìn)行二次發(fā)單，重新進(jìn)入等待隊(duì)列，這就造成了因個人因素延長了等待應(yīng)答的總時長

* 等待應(yīng)答B(yǎng)分鐘左右，是較容易叫車階段，數(shù)據(jù)顯示用戶處于這個時間段內(nèi)容易被接單

*延長乘客等待預(yù)期,調(diào)節(jié)愿等時長閾值的操作空間，乘客愿等時長的具有較大彈性，如在打車較為容易的時段為 xx 秒，在打車較難時段為 xxx 秒

結(jié)論：用戶對于排隊(duì)規(guī)則的并不理解，使得用戶在最容易叫到車的時間段之前會選擇二次發(fā)單，取消訂單會導(dǎo)致重新排入隊(duì)列，進(jìn)行排序

抓手：知悉乘客取消應(yīng)答集中時間段和容易打車時間段后前提后，在不通過增加物理運(yùn)力/調(diào)整算法的前提下，通過設(shè)計(jì)的手法去緩解用戶的等待感知，從而增加用戶的等待應(yīng)答時長，將用戶的等待時長延伸至容易打車時段，從而促成訂單的完成，是這次設(shè)計(jì)的突破口

了解問題，明確挑戰(zhàn)

對用戶的調(diào)研我們發(fā)現(xiàn)用戶對等待應(yīng)答動畫存在以下感知

通過對用戶數(shù)據(jù)進(jìn)行分析后得出結(jié)論，篩選出核心問題進(jìn)行優(yōu)化，讓用戶對等待應(yīng)答有一個新的認(rèn)知,是這次的關(guān)鍵所在。我們希望通過這次設(shè)計(jì)的優(yōu)化，乘客能強(qiáng)感知此刻所處運(yùn)力調(diào)動的狀態(tài)，并上弱化時間概念降低人腦對時間的敏感程度，減緩用戶的焦慮情緒，使其相信這是一個可以等待運(yùn)力到來的排期

面對的挑戰(zhàn)有：

1.增強(qiáng)播單動畫感知,讓用戶明確自己所處狀態(tài),從而減少應(yīng)答前的取消率  P0助力業(yè)務(wù)

2.通過設(shè)計(jì)吸引視覺弱化時間概念,降低人腦對時間的敏感,從而增長應(yīng)答前平均取消時長  P0助力業(yè)務(wù)

3.符合用戶打車預(yù)期的前提下,盡可能讓動畫用起來連貫,順暢,可預(yù)期,讓用戶感到愉悅,用戶體驗(yàn)提高  D1體驗(yàn)提高

4.符合品牌調(diào)性的場景動畫,讓應(yīng)答場景融入App保持體驗(yàn)上的流暢，統(tǒng)一和性能平衡  D1體驗(yàn)提高

5.涉及到地圖開發(fā)/端上研發(fā)同學(xué)的密切配合，高度還原設(shè)計(jì)文件也將是一個挑戰(zhàn)  D2設(shè)計(jì)訴求

決策方向，設(shè)計(jì)執(zhí)行

明確目標(biāo)之后，就開始了設(shè)計(jì)的決策方向和關(guān)鍵詞

作為一個單量百萬級的應(yīng)用，面對的用戶群年齡分布也是非常廣泛，因此動畫的效果一定要適合大眾群體的認(rèn)知，不應(yīng)該為了吸引視覺焦點(diǎn)而有個性化存在-> 波紋效果

運(yùn)力調(diào)度本身是一件等待的過程，長時間的等待消耗用戶的耐心，應(yīng)該給予更多的可預(yù)見的可期待的暗示 ->路徑

俯視視角更適合對周圍環(huán)境，路況，運(yùn)力的的觀察和掌控，適合打車前對環(huán)境的觀察，而一旦進(jìn)入等待場景，用戶需要做的只是等待接單，將場景透視化，貼近高空觀察事物的視角，更加符合真實(shí)世界-> 透視視角

老版本沿用的等待應(yīng)答場景，可以在地圖上進(jìn)行交互操作，但是無法帶來明確的有效信息。新版設(shè)計(jì)為了增強(qiáng)調(diào)度的感知，增強(qiáng)了動畫效果。而動畫效果在地圖上需要一直靠渲染運(yùn)算生成，任何的地圖移動都將加大運(yùn)算量，耗電發(fā)熱則會大大增加，因此這里為了保證性能將一個可自由操作的場景，變成了一個固定的場景 -> 蒙層

設(shè)計(jì)執(zhí)行

明確了方向和關(guān)鍵詞之后，設(shè)計(jì)的思路其實(shí)就已經(jīng)非常清晰。在框架層考慮清楚信息布局，整體頁面交互流程。在表現(xiàn)層吸引用戶視覺，加強(qiáng)感知，降低用戶對時間敏感度即可

初稿的設(shè)計(jì)其實(shí)非常順利，整個設(shè)計(jì)稿從需求分析到第一個DEMO落地大概用時1天左右，而且1稿過完設(shè)計(jì)內(nèi)部。在設(shè)計(jì)之初，leader建議不需要考慮太多落地問題，可以適當(dāng)天馬行空的，不要因?yàn)榧夹g(shù)的限制而限制自己的想法。在完成設(shè)計(jì)稿之后我們與技術(shù)評審之前就開始與端上開發(fā)同學(xué)進(jìn)行邏輯層的分析，發(fā)現(xiàn)這個設(shè)計(jì)稿雖然滿足要求，但是在細(xì)節(jié)位置需要分情況考慮，造成研發(fā)成本的大額增加，開啟漫 漫 改 圖 路 （細(xì)節(jié)就略過了）~

最終效果以這個動效為基礎(chǔ)進(jìn)行研發(fā)，中間涉及到了地圖視角的偏移/定位點(diǎn)跟蹤/X-panel規(guī)則/最佳view調(diào)整等復(fù)雜邏輯的調(diào)整

設(shè)計(jì)改進(jìn)的細(xì)節(jié)

優(yōu)化進(jìn)入等待應(yīng)答頁的動效，優(yōu)化頁面布局

設(shè)計(jì)進(jìn)場動效不僅僅是為了視覺上有強(qiáng)感知和更好的體驗(yàn)，核心是防止用戶多次取消，多次叫單的行為發(fā)生

當(dāng)長時間打不到車時，乘客會選擇取消訂單讓系統(tǒng)重新派單，認(rèn)為這樣有可能會更快有司機(jī)接單。而真實(shí)情況則很像排隊(duì)買票，前面的走不完買票流程后面的人則無法前進(jìn)，所以當(dāng)乘客選擇取消，離開排隊(duì)隊(duì)列，只能重新回到對尾，重新排隊(duì)

下方的等待應(yīng)答信息卡片包含了等待時長和取消功能，規(guī)則是展示3s之后隱藏取消按鈕,如果乘客要取消，需要上滑拉起卡片點(diǎn)擊取消

通過調(diào)整視角和擴(kuò)大蒙層動畫范圍，用戶的視覺將會集中在屏幕的上方避免地圖上的無效信息干擾，視覺持續(xù)注意力集中在3-6s左右，從而很好的為隱藏取消做了掩護(hù)

當(dāng)用戶的視覺從上方移動到其他位置的時候運(yùn)力調(diào)度已經(jīng)開始了6s+，無形中給用戶時間感知的緩沖時間，使得平均等待時長延長，等待時長閾值向易接單時間段靠攏

后期通過數(shù)據(jù)分驗(yàn)證現(xiàn)乘客拉起卡片的幾率相比之前剛發(fā)布時候已大幅下降，也從正面說明乘客已經(jīng)適應(yīng)了這種收起的策略

優(yōu)化頁面樣式

舊版的等待應(yīng)答，地圖外露供乘客拖動地圖觀看周圍情況。但是用戶在等待接駕的情況下，是沒有辦法看到周圍運(yùn)力這條非常有用的信息，而地圖上卻外透了街道/店鋪的信息，會使這個頁面看起來非常沉重卻沒有很大的意義，且會弱化波紋擴(kuò)散的感知

新版的等待應(yīng)答，會在地圖上方蓋住一個80%透明度的的蒙層，同時會讓地圖視角整體抬高。讓用戶感覺到的是更大范圍的運(yùn)力調(diào)度，并且隨著地圖視角的抬高，街道/店鋪的名稱會得到隱藏，減少無意義信息的透傳。通過對地圖的縮放，自動減少了街道信息外透，無需通過代碼層面的修改，減少了rd的工作量的同時讓界面整體看起來更加清爽，拉美在發(fā)單前會有定位點(diǎn)的二次確認(rèn)定位點(diǎn)，也保證用戶正確感知到自己在空間上所處位置

舊版本的波紋，速度緩慢并且不夠明顯，很難給人一種強(qiáng)感知，不像是一個等待運(yùn)力調(diào)度的場景

新版本的波紋，會增強(qiáng)波紋的速度，調(diào)整波紋的速率，讓用戶有一種強(qiáng)感知，此刻正在進(jìn)行最大范圍的進(jìn)行運(yùn)力調(diào)度的搜索

不再支持用戶操作手機(jī)地圖，查看周圍信息。減少波紋因地圖位移而產(chǎn)生的實(shí)時渲染，減少不必要的耗電行為發(fā)生

保證應(yīng)答前后體驗(yàn)連貫性

在重新設(shè)計(jì)等待應(yīng)答這個場景時，我不希望它是一個很重的loading的感覺

不希望像loading的原因在于loading處于數(shù)據(jù)調(diào)取狀態(tài)，而數(shù)據(jù)調(diào)取一旦完成，會立刻跳轉(zhuǎn)進(jìn)入下個場景，會讓整個體驗(yàn)被割裂，不流暢。而這里通過設(shè)計(jì)手法的表達(dá)我覺得可以做到體驗(yàn)上前后的一致,從而打通設(shè)計(jì)上的從發(fā)單->接單->送駕 這一小閉環(huán)

在得到了數(shù)據(jù)請求后，我們會將View_3D視角返回到正常2D的俯視視角，而車作為最終的載體則會自然而然的出現(xiàn)，同時會根據(jù)最佳視角算法自動調(diào)整到，人和車同時出現(xiàn)在屏幕正中（距離越遠(yuǎn)地圖View縮放越大，人車始終出現(xiàn)在屏幕當(dāng)中）

接著，真實(shí)的車載路線會以路徑生長的方式呈現(xiàn)于用戶的手機(jī)當(dāng)中，會根據(jù)距離的遠(yuǎn)近來控制路徑生長速度的快慢，同時司機(jī)卡片同時加載出來~

等待應(yīng)答的收尾過程不會像競品那樣直接進(jìn)行頁面跳幀而是一種 合理的 有意義的（2D->3D->2D）完完整整的過程

推動落地，保證還原

完成了設(shè)計(jì)稿/產(chǎn)品/技術(shù)評審過后我們便開始與開發(fā)同學(xué)進(jìn)行詳細(xì)的對接

因?yàn)榇舜卧O(shè)計(jì)相對復(fù)雜，涉及到了端上和地圖上的rd同學(xué)，所以非?？简?yàn)研發(fā)的效果還原能力，既要把動效實(shí)現(xiàn)原理拆分的非常明確又要保證聯(lián)調(diào)的時候前后一致性

這里就不多贅述，貼個輸出圖好了 （開發(fā)動效邏輯拆分圖by zhoulu）

其中有用到lottie輸出（感興趣的可以翻看我之前的文章）-》《動效/動畫在直播類應(yīng)用中都運(yùn)用和落地》

結(jié)論~Rd同學(xué)非常OK的完成了最終的效果DEMO，還原度90%+

非常感謝rd （鞠躬）

數(shù)據(jù)驗(yàn)證

在拉美地區(qū)上線，進(jìn)行了的AB測試，核心評估指標(biāo)收益顯著，整體數(shù)據(jù)遠(yuǎn)超當(dāng)初的預(yù)期~

總結(jié)

成長方面：這是我來國際化團(tuán)隊(duì)的參與的第一個項(xiàng)目，也是設(shè)計(jì)內(nèi)部帶頭發(fā)起的一個項(xiàng)目，現(xiàn)在回頭來看還有些地方能做到更好，可能那多一點(diǎn)的“更好”能讓我在產(chǎn)出的時候更加細(xì)致，和研發(fā)對接思考的更加的完整，對業(yè)務(wù)的提升也許會更好

在說點(diǎn)題外的，現(xiàn)在的大環(huán)境講究“全鏈”，賦予了設(shè)計(jì)師更多的權(quán)利，對于設(shè)計(jì)來說絕對是利大于弊，這點(diǎn)深有體會，更多的上游思考，更前一步對業(yè)務(wù)的理解，把業(yè)務(wù)的場景想的明白，把數(shù)據(jù)看懂，站在全局的高度看問題，站在產(chǎn)品的角度去設(shè)計(jì)，設(shè)計(jì)賦能，通過設(shè)計(jì)去助力業(yè)務(wù)去拿結(jié)果

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。