2019-6-12 ui設(shè)計(jì)分享達(dá)人
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
2018年10月-滴滴國(guó)際化乘客側(cè)項(xiàng)目,歷經(jīng)2個(gè)版本迭代,已于19年1月全量海外
有問(wèn)題請(qǐng)及時(shí)告知,請(qǐng)不要討論除設(shè)計(jì)之外的產(chǎn)品問(wèn)題
寫(xiě)在前面
什么時(shí)候該使用動(dòng)效,什么時(shí)候該保持應(yīng)有的克制,什么樣的動(dòng)效是好的動(dòng)效我在之前寫(xiě)過(guò)一遍文章,感興趣都盆友可以了解下,標(biāo)題《動(dòng)效/動(dòng)畫(huà)在直播類(lèi)應(yīng)用中都運(yùn)用和落地》,本篇文章應(yīng)該可以算是上篇文章的下半場(chǎng)
接下來(lái)要說(shuō)的這個(gè)案例,它可能和我們平常所見(jiàn)的動(dòng)效體驗(yàn)原則是“背道而馳”的,因?yàn)樗K究是一個(gè)等待運(yùn)力調(diào)度的場(chǎng)景(簡(jiǎn)單的說(shuō)就是等待司機(jī)接駕的過(guò)程)每天成百上千萬(wàn)訂單的背后有著一套非常復(fù)雜的算法去支撐,這就造成了這個(gè)場(chǎng)景它本身不會(huì)像動(dòng)效指導(dǎo)原則那樣順利,平滑,愉悅,但是既然是做設(shè)計(jì),核心是去解決問(wèn)題,所以繞不開(kāi)這個(gè)場(chǎng)景本身。通過(guò)數(shù)據(jù)去解讀用戶的想法和行為,將設(shè)計(jì)與業(yè)務(wù)進(jìn)行更緊密的結(jié)合,從而達(dá)到更好的效果
對(duì)用戶 “等待應(yīng)答“這個(gè)場(chǎng)景的動(dòng)效改進(jìn),以拉美地區(qū)最終AB測(cè)試數(shù)據(jù)為結(jié)論,使我更加確信動(dòng)效能做的不僅僅是體驗(yàn)上的提高,在特殊場(chǎng)景下完全可以解決視覺(jué)感知層面無(wú)法解決的痛點(diǎn),為業(yè)務(wù)方拿結(jié)果
所有數(shù)據(jù)對(duì)外均作了隱藏處理~
項(xiàng)目背景
滴滴出行在拉美地區(qū)飛速發(fā)展,單量持續(xù)增高的同時(shí),用戶對(duì)產(chǎn)品本身的期望也越來(lái)越大,我們一如既往的重視用戶體驗(yàn)。無(wú)論嚴(yán)寒酷暑,早晚高峰,我們和我們的用戶都不希望等待接駕變成一件漫長(zhǎng)、無(wú)預(yù)期、盲目的行為
數(shù)據(jù)分析
* 乘客等待時(shí)長(zhǎng)主要分布在A時(shí)段左右,多數(shù)乘客會(huì)選擇在此時(shí)間段內(nèi)取消訂單,而消訂單的乘客并不會(huì)停止叫車(chē)服務(wù),而是進(jìn)行二次發(fā)單,重新進(jìn)入等待隊(duì)列,這就造成了因個(gè)人因素延長(zhǎng)了等待應(yīng)答的總時(shí)長(zhǎng)
* 等待應(yīng)答B(yǎng)分鐘左右,是較容易叫車(chē)階段,數(shù)據(jù)顯示用戶處于這個(gè)時(shí)間段內(nèi)容易被接單
*延長(zhǎng)乘客等待預(yù)期,調(diào)節(jié)愿等時(shí)長(zhǎng)閾值的操作空間,乘客愿等時(shí)長(zhǎng)的具有較大彈性,如在打車(chē)較為容易的時(shí)段為 xx 秒,在打車(chē)較難時(shí)段為 xxx 秒
結(jié)論:用戶對(duì)于排隊(duì)規(guī)則的并不理解,使得用戶在最容易叫到車(chē)的時(shí)間段之前會(huì)選擇二次發(fā)單,取消訂單會(huì)導(dǎo)致重新排入隊(duì)列,進(jìn)行排序
抓手:知悉乘客取消應(yīng)答集中時(shí)間段和容易打車(chē)時(shí)間段后前提后,在不通過(guò)增加物理運(yùn)力/調(diào)整算法的前提下,通過(guò)設(shè)計(jì)的手法去緩解用戶的等待感知,從而增加用戶的等待應(yīng)答時(shí)長(zhǎng),將用戶的等待時(shí)長(zhǎng)延伸至容易打車(chē)時(shí)段,從而促成訂單的完成,是這次設(shè)計(jì)的突破口
了解問(wèn)題,明確挑戰(zhàn)
對(duì)用戶的調(diào)研我們發(fā)現(xiàn)用戶對(duì)等待應(yīng)答動(dòng)畫(huà)存在以下感知
通過(guò)對(duì)用戶數(shù)據(jù)進(jìn)行分析后得出結(jié)論,篩選出核心問(wèn)題進(jìn)行優(yōu)化,讓用戶對(duì)等待應(yīng)答有一個(gè)新的認(rèn)知,是這次的關(guān)鍵所在。我們希望通過(guò)這次設(shè)計(jì)的優(yōu)化,乘客能強(qiáng)感知此刻所處運(yùn)力調(diào)動(dòng)的狀態(tài),并上弱化時(shí)間概念降低人腦對(duì)時(shí)間的敏感程度,減緩用戶的焦慮情緒,使其相信這是一個(gè)可以等待運(yùn)力到來(lái)的排期
面對(duì)的挑戰(zhàn)有:
1.增強(qiáng)播單動(dòng)畫(huà)感知,讓用戶明確自己所處狀態(tài),從而減少應(yīng)答前的取消率 P0助力業(yè)務(wù)
2.通過(guò)設(shè)計(jì)吸引視覺(jué)弱化時(shí)間概念,降低人腦對(duì)時(shí)間的敏感,從而增長(zhǎng)應(yīng)答前平均取消時(shí)長(zhǎng) P0助力業(yè)務(wù)
3.符合用戶打車(chē)預(yù)期的前提下,盡可能讓動(dòng)畫(huà)用起來(lái)連貫,順暢,可預(yù)期,讓用戶感到愉悅,用戶體驗(yàn)提高 D1體驗(yàn)提高
4.符合品牌調(diào)性的場(chǎng)景動(dòng)畫(huà),讓?xiě)?yīng)答場(chǎng)景融入App保持體驗(yàn)上的流暢,統(tǒng)一和性能平衡 D1體驗(yàn)提高
5.涉及到地圖開(kāi)發(fā)/端上研發(fā)同學(xué)的密切配合,高度還原設(shè)計(jì)文件也將是一個(gè)挑戰(zhàn) D2設(shè)計(jì)訴求
決策方向,設(shè)計(jì)執(zhí)行
明確目標(biāo)之后,就開(kāi)始了設(shè)計(jì)的決策方向和關(guān)鍵詞
作為一個(gè)單量百萬(wàn)級(jí)的應(yīng)用,面對(duì)的用戶群年齡分布也是非常廣泛,因此動(dòng)畫(huà)的效果一定要適合大眾群體的認(rèn)知,不應(yīng)該為了吸引視覺(jué)焦點(diǎn)而有個(gè)性化存在-> 波紋效果
運(yùn)力調(diào)度本身是一件等待的過(guò)程,長(zhǎng)時(shí)間的等待消耗用戶的耐心,應(yīng)該給予更多的可預(yù)見(jiàn)的可期待的暗示 ->路徑
俯視視角更適合對(duì)周?chē)h(huán)境,路況,運(yùn)力的的觀察和掌控,適合打車(chē)前對(duì)環(huán)境的觀察,而一旦進(jìn)入等待場(chǎng)景,用戶需要做的只是等待接單,將場(chǎng)景透視化,貼近高空觀察事物的視角,更加符合真實(shí)世界-> 透視視角
老版本沿用的等待應(yīng)答場(chǎng)景,可以在地圖上進(jìn)行交互操作,但是無(wú)法帶來(lái)明確的有效信息。新版設(shè)計(jì)為了增強(qiáng)調(diào)度的感知,增強(qiáng)了動(dòng)畫(huà)效果。而動(dòng)畫(huà)效果在地圖上需要一直靠渲染運(yùn)算生成,任何的地圖移動(dòng)都將加大運(yùn)算量,耗電發(fā)熱則會(huì)大大增加,因此這里為了保證性能將一個(gè)可自由操作的場(chǎng)景,變成了一個(gè)固定的場(chǎng)景 -> 蒙層
設(shè)計(jì)執(zhí)行
明確了方向和關(guān)鍵詞之后,設(shè)計(jì)的思路其實(shí)就已經(jīng)非常清晰。在框架層考慮清楚信息布局,整體頁(yè)面交互流程。在表現(xiàn)層吸引用戶視覺(jué),加強(qiáng)感知,降低用戶對(duì)時(shí)間敏感度即可
初稿的設(shè)計(jì)其實(shí)非常順利,整個(gè)設(shè)計(jì)稿從需求分析到第一個(gè)DEMO落地大概用時(shí)1天左右,而且1稿過(guò)完設(shè)計(jì)內(nèi)部。在設(shè)計(jì)之初,leader建議不需要考慮太多落地問(wèn)題,可以適當(dāng)天馬行空的,不要因?yàn)榧夹g(shù)的限制而限制自己的想法。在完成設(shè)計(jì)稿之后我們與技術(shù)評(píng)審之前就開(kāi)始與端上開(kāi)發(fā)同學(xué)進(jìn)行邏輯層的分析,發(fā)現(xiàn)這個(gè)設(shè)計(jì)稿雖然滿足要求,但是在細(xì)節(jié)位置需要分情況考慮,造成研發(fā)成本的大額增加,開(kāi)啟漫 漫 改 圖 路 (細(xì)節(jié)就略過(guò)了)~
最終效果以這個(gè)動(dòng)效為基礎(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è)的動(dòng)效,優(yōu)化頁(yè)面布局
設(shè)計(jì)進(jìn)場(chǎng)動(dòng)效不僅僅是為了視覺(jué)上有強(qiáng)感知和更好的體驗(yàn),核心是防止用戶多次取消,多次叫單的行為發(fā)生
當(dāng)長(zhǎng)時(shí)間打不到車(chē)時(shí),乘客會(huì)選擇取消訂單讓系統(tǒng)重新派單,認(rèn)為這樣有可能會(huì)更快有司機(jī)接單。而真實(shí)情況則很像排隊(duì)買(mǎi)票,前面的走不完買(mǎi)票流程后面的人則無(wú)法前進(jìn),所以當(dāng)乘客選擇取消,離開(kāi)排隊(duì)隊(duì)列,只能重新回到對(duì)尾,重新排隊(duì)
下方的等待應(yīng)答信息卡片包含了等待時(shí)長(zhǎng)和取消功能,規(guī)則是展示3s之后隱藏取消按鈕,如果乘客要取消,需要上滑拉起卡片點(diǎn)擊取消
通過(guò)調(diào)整視角和擴(kuò)大蒙層動(dòng)畫(huà)范圍,用戶的視覺(jué)將會(huì)集中在屏幕的上方避免地圖上的無(wú)效信息干擾,視覺(jué)持續(xù)注意力集中在3-6s左右,從而很好的為隱藏取消做了掩護(hù)
當(dāng)用戶的視覺(jué)從上方移動(dòng)到其他位置的時(shí)候運(yùn)力調(diào)度已經(jīng)開(kāi)始了6s+,無(wú)形中給用戶時(shí)間感知的緩沖時(shí)間,使得平均等待時(shí)長(zhǎng)延長(zhǎng),等待時(shí)長(zhǎng)閾值向易接單時(shí)間段靠攏
后期通過(guò)數(shù)據(jù)分驗(yàn)證現(xiàn)乘客拉起卡片的幾率相比之前剛發(fā)布時(shí)候已大幅下降,也從正面說(shuō)明乘客已經(jīng)適應(yīng)了這種收起的策略
優(yōu)化頁(yè)面樣式
舊版的等待應(yīng)答,地圖外露供乘客拖動(dòng)地圖觀看周?chē)闆r。但是用戶在等待接駕的情況下,是沒(méi)有辦法看到周?chē)\(yùn)力這條非常有用的信息,而地圖上卻外透了街道/店鋪的信息,會(huì)使這個(gè)頁(yè)面看起來(lái)非常沉重卻沒(méi)有很大的意義,且會(huì)弱化波紋擴(kuò)散的感知
新版的等待應(yīng)答,會(huì)在地圖上方蓋住一個(gè)80%透明度的的蒙層,同時(shí)會(huì)讓地圖視角整體抬高。讓用戶感覺(jué)到的是更大范圍的運(yùn)力調(diào)度,并且隨著地圖視角的抬高,街道/店鋪的名稱會(huì)得到隱藏,減少無(wú)意義信息的透?jìng)?。通過(guò)對(duì)地圖的縮放,自動(dòng)減少了街道信息外透,無(wú)需通過(guò)代碼層面的修改,減少了rd的工作量的同時(shí)讓界面整體看起來(lái)更加清爽,拉美在發(fā)單前會(huì)有定位點(diǎn)的二次確認(rèn)定位點(diǎn),也保證用戶正確感知到自己在空間上所處位置
舊版本的波紋,速度緩慢并且不夠明顯,很難給人一種強(qiáng)感知,不像是一個(gè)等待運(yùn)力調(diào)度的場(chǎng)景
新版本的波紋,會(huì)增強(qiáng)波紋的速度,調(diào)整波紋的速率,讓用戶有一種強(qiáng)感知,此刻正在進(jìn)行最大范圍的進(jìn)行運(yùn)力調(diào)度的搜索
不再支持用戶操作手機(jī)地圖,查看周?chē)畔?。減少波紋因地圖位移而產(chǎn)生的實(shí)時(shí)渲染,減少不必要的耗電行為發(fā)生
保證應(yīng)答前后體驗(yàn)連貫性
在重新設(shè)計(jì)等待應(yīng)答這個(gè)場(chǎng)景時(shí),我不希望它是一個(gè)很重的loading的感覺(jué)
不希望像loading的原因在于loading處于數(shù)據(jù)調(diào)取狀態(tài),而數(shù)據(jù)調(diào)取一旦完成,會(huì)立刻跳轉(zhuǎn)進(jìn)入下個(gè)場(chǎng)景,會(huì)讓整個(gè)體驗(yàn)被割裂,不流暢。而這里通過(guò)設(shè)計(jì)手法的表達(dá)我覺(jué)得可以做到體驗(yàn)上前后的一致,從而打通設(shè)計(jì)上的從發(fā)單->接單->送駕 這一小閉環(huán)
在得到了數(shù)據(jù)請(qǐng)求后,我們會(huì)將View_3D視角返回到正常2D的俯視視角,而車(chē)作為最終的載體則會(huì)自然而然的出現(xiàn),同時(shí)會(huì)根據(jù)最佳視角算法自動(dòng)調(diào)整到,人和車(chē)同時(shí)出現(xiàn)在屏幕正中(距離越遠(yuǎn)地圖View縮放越大,人車(chē)始終出現(xiàn)在屏幕當(dāng)中)
接著,真實(shí)的車(chē)載路線會(huì)以路徑生長(zhǎng)的方式呈現(xiàn)于用戶的手機(jī)當(dāng)中,會(huì)根據(jù)距離的遠(yuǎn)近來(lái)控制路徑生長(zhǎng)速度的快慢,同時(shí)司機(jī)卡片同時(shí)加載出來(lái)~
等待應(yīng)答的收尾過(guò)程不會(huì)像競(jìng)品那樣直接進(jìn)行頁(yè)面跳幀而是一種 合理的 有意義的(2D->3D->2D)完完整整的過(guò)程
推動(dòng)落地,保證還原
完成了設(shè)計(jì)稿/產(chǎn)品/技術(shù)評(píng)審過(guò)后我們便開(kāi)始與開(kāi)發(fā)同學(xué)進(jìn)行詳細(xì)的對(duì)接
因?yàn)榇舜卧O(shè)計(jì)相對(duì)復(fù)雜,涉及到了端上和地圖上的rd同學(xué),所以非常考驗(yàn)研發(fā)的效果還原能力,既要把動(dòng)效實(shí)現(xiàn)原理拆分的非常明確又要保證聯(lián)調(diào)的時(shí)候前后一致性
這里就不多贅述,貼個(gè)輸出圖好了 (開(kāi)發(fā)動(dòng)效邏輯拆分圖by zhoulu)
其中有用到lottie輸出(感興趣的可以翻看我之前的文章)-》《動(dòng)效/動(dòng)畫(huà)在直播類(lèi)應(yīng)用中都運(yùn)用和落地》
結(jié)論~Rd同學(xué)非常OK的完成了最終的效果DEMO,還原度90%+
非常感謝rd (鞠躬)
數(shù)據(jù)驗(yàn)證
在拉美地區(qū)上線,進(jìn)行了的AB測(cè)試,核心評(píng)估指標(biāo)收益顯著,整體數(shù)據(jù)遠(yuǎn)超當(dāng)初的預(yù)期~
總結(jié)
成長(zhǎng)方面:這是我來(lái)國(guó)際化團(tuán)隊(duì)的參與的第一個(gè)項(xiàng)目,也是設(shè)計(jì)內(nèi)部帶頭發(fā)起的一個(gè)項(xiàng)目,現(xiàn)在回頭來(lái)看還有些地方能做到更好,可能那多一點(diǎn)的“更好”能讓我在產(chǎn)出的時(shí)候更加細(xì)致,和研發(fā)對(duì)接思考的更加的完整,對(duì)業(yè)務(wù)的提升也許會(huì)更好
在說(shuō)點(diǎn)題外的,現(xiàn)在的大環(huán)境講究“全鏈”,賦予了設(shè)計(jì)師更多的權(quán)利,對(duì)于設(shè)計(jì)來(lái)說(shuō)絕對(duì)是利大于弊,這點(diǎn)深有體會(huì),更多的上游思考,更前一步對(duì)業(yè)務(wù)的理解,把業(yè)務(wù)的場(chǎng)景想的明白,把數(shù)據(jù)看懂,站在全局的高度看問(wèn)題,站在產(chǎn)品的角度去設(shè)計(jì),設(shè)計(jì)賦能,通過(guò)設(shè)計(jì)去助力業(yè)務(wù)去拿結(jié)果
藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.820esy.cn