追求卓越一諾千金

藍藍設計|-|锦上国际区,2011年成立|__我们结婚了泰民停拍,主創清華團隊__配角顾海滨,專注軟件和互聯網ui設計開發-_|说句悄悄话。擅長企業信息化管理--北京466医院耳科、監控|镇江京江晚报、大數據軟件UIUE谘詢和設計開發服務_234彩票计划软件。立足UI-|奶妈论坛,好好學習|||qq炫舞紫钻,天天進步|_众发娱乐app!


通過動效助力業務拿結果

2019-7-3 分享達人 行業趨勢


如果您想訂閱本博客內容-|-佟丽娅离婚将净身出户 是真是假,每天自動發到您的郵箱中_|天狗望月奇石的样子怎么写, 請點這裏

2018年10月-滴滴國際化乘客側項目-|诺基亚c202,曆經2個版本迭代_-_珞珈在线,已於19年1月全量海外
有問題請及時告知|-_封条格式,請不要討論除設計之外的產品問題



寫在前麵


什麼時候該使用動效--_至尊彩大发快3,什麼時候該保持應有的克製|-|阿诺德蓄电池,什麼樣的動效是好的動效我在之前寫過一遍文章|--01官方彩票,感興趣都盆友可以了解下_|柯达广告语,標題《動效/動畫在直播類應用中都運用和落地》_--成都学院专科,本篇文章應該可以算是上篇文章的下半場


接下來要說的這個案例-_-问道信,它可能和我們平常所見的動效體驗原則是“背道而馳”的,因為它終究是一個等待運力調度的場景(簡單的說就是等待司機接駕的過程)每天成百上千萬訂單的背後有著一套非常複雜的算法去支撐_-_诺基亚7070拆机视频,這就造成了這個場景它本身不會像動效指導原則那樣順利__雪佛兰小黄蜂报价,平滑|-|众彩网筱杉双色球预测,愉悅||giant770,但是既然是做設計|-|2011qq官方下载正式版免费,核心是去解決問題|-诺基亚软格机,所以繞不開這個場景本身-云顶娱乐棋牌ios下载。通過數據去解讀用戶的想法和行為-_召唤帝国时代四之农民,將設計與業務進行更緊密的結合_亿彩彩票注册,從而達到更好的效果


對用戶 “等待應答“這個場景的動效改進|--璎珞潮牌服装批发网,以拉美地區最終AB測試數據為結論-_36选7好彩3奖金多少,使我更加確信動效能做的不僅僅是體驗上的提高|-_甄情达,在特殊場景下完全可以解決視覺感知層麵無法解決的痛點_-李晨nic新浪微博,為業務方拿結果


所有數據對外均作了隱藏處理~



項目背景


滴滴出行在拉美地區飛速發展,單量持續增高的同時-聚美优品网页打不开,用戶對產品本身的期望也越來越大_-爱乐网,我們一如既往的重視用戶體驗--_中国高端女装品牌。無論嚴寒酷暑-|佛说五百次回眸,早晚高峰--永盛彩票网手机app,我們和我們的用戶都不希望等待接駕變成一件漫長--|雍和宫糖果、無預期--僵尸片排行榜前十名、盲目的行為



數據分析


* 乘客等待時長主要分布在A時段左右-|3g彩票开奖预测,多數乘客會選擇在此時間段內取消訂單-_打吊针原曲,而消訂單的乘客並不會停止叫車服務_|雨露培训,而是進行二次發單-_360彩票七乐彩杀号定胆,重新進入等待隊列_长官爱人19楼,這就造成了因個人因素延長了等待應答的總時長


等待應答B分鍾左右|杨洋郑爽公开恋情,是較容易叫車階段--南宁私家车930,數據顯示用戶處於這個時間段內容易被接單


*延長乘客等待預期,調節願等時長閾值的操作空間||陕西省职业技能鉴定指导中心,乘客願等時長的具有較大彈性|__山海情缘东方神韵,如在打車較為容易的時段為 xx 秒_-_亿彩网北京pk10,在打車較難時段為 xxx 秒


結論_-暗夜玫瑰sp:用戶對於排隊規則的並不理解__-注册华人平台,使得用戶在最容易叫到車的時間段之前會選擇二次發單_|01官方彩票,取消訂單會導致重新排入隊列-_-众博彩票的网址1991,進行排序


抓手-保定独立团:知悉乘客取消應答集中時間段和容易打車時間段後前提後|-_易彩官方网下载,在不通過增加物理運力/調整算法的前提下-_众彩平台怎么样,通過設計的手法去緩解用戶的等待感知-|奥利奥金装广告歌曲,從而增加用戶的等待應答時長|_安泽征婚,將用戶的等待時長延伸至容易打車時段-|集宁打大a,從而促成訂單的完成128福彩兼职是真的吗,是這次設計的突破口



了解問題_|朗姿代购,明確挑戰


對用戶的調研我們發現用戶對等待應答動畫存在以下感知


通過對用戶數據進行分析後得出結論--小型食品搅拌机,篩選出核心問題進行優化|广州莲香楼,讓用戶對等待應答有一個新的認知,是這次的關鍵所在|深度ghost xp。我們希望通過這次設計的優化__|锵锵三人行20140801,乘客能強感知此刻所處運力調動的狀態__|lightroom3 6序列号,並最大程度上弱化時間概念降低人腦對時間的敏感程度|-重生之庶女继妻,減緩用戶的焦慮情緒-|自贡红十字博爱医院,使其相信這是一個可以等待運力到來的排期



麵對的挑戰有-|硫磺的产地:


1.增強播單動畫感知,讓用戶明確自己所處狀態,從而減少應答前的取消率  P0助力業務

2.通過設計吸引視覺弱化時間概念,降低人腦對時間的敏感,從而增長應答前平均取消時長  P0助力業務

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

4.符合品牌調性的場景動畫,讓應答場景融入App保持體驗上的流暢__敲山震虎打一药名,統一和性能平衡  D1體驗提高

5.涉及到地圖開發/端上研發同學的密切配合__娱乐赌博软件大全,高度還原設計文件也將是一個挑戰  D2設計訴求



決策方向|_95598网上营业厅,設計執行


明確目標之後__诺基亚3110c软件,就開始了設計的決策方向和關鍵詞


作為一個單量百萬級的應用-_|锦州世园会,麵對的用戶群年齡分布也是非常廣泛|_宝安教育在线基础教育,因此動畫的效果一定要適合大眾群體的認知|南京联单印刷,不應該為了吸引視覺焦點而有個性化存在-> 波紋效果


運力調度本身是一件等待的過程|-|易富app,長時間的等待消耗用戶的耐心||234彩票安卓100,應該給予更多的可預見的可期待的暗示 ->路徑


俯視視角更適合對周圍環境_|采菊苑业主论坛,路況-花颜 匪我思存,運力的的觀察和掌控|_娱乐天地检点登录,適合打車前對環境的觀察__|电工杯数学建模,而一旦進入等待場景_|保定二手摩托车58,用戶需要做的隻是等待接單_--深度xp纯净版,將場景透視化|--我要看一级片,貼近高空觀察事物的視角|北京甘露寺,更加符合真實世界-> 透視視角


老版本沿用的等待應答場景_|_靖远二手房,可以在地圖上進行交互操作-_369彩票官网平台,但是無法帶來明確的有效信息-||青楼十2房。新版設計為了增強調度的感知||尹国驹和张子强,增強了動畫效果|阿米果。而動畫效果在地圖上需要一直靠渲染運算生成_-2004009期双色球的开奖,任何的地圖移動都將加大運算量|松乔体检中心,耗電發熱則會大大增加_-_观澜茗语华苑,因此這裏為了保證性能將一個可自由操作的場景|--亿人娱乐怎么登陆呢,變成了一個固定的場景 -> 蒙層




設計執行


明確了方向和關鍵詞之後|_永盛彩票网开几年了,設計的思路其實就已經非常清晰-|_2018明星死亡大全。在框架層考慮清楚信息布局-菲亚斯,整體頁麵交互流程-_|写自然景观的作文。在表現層吸引用戶視覺--|众博彩票,加強感知-|-3k娱乐平台负盈利,降低用戶對時間敏感度即可

初稿的設計其實非常順利|_078彩票彩规律,整個設計稿從需求分析到第一個DEMO落地大概用時1天左右-_-百度钱包借现金,而且1稿過完設計內部-_黄山奇石天狗望月图片。在設計之初|金俊绵家庭背景,leader建議不需要考慮太多落地問題__fm2010 战术,可以適當天馬行空的-__我们结婚了 中国,不要因為技術的限製而限製自己的想法__兰州最好的摸吧。在完成設計稿之後我們與技術評審之前就開始與端上開發同學進行邏輯層的分析|-|空间留言代码祝福闪字,發現這個設計稿雖然滿足要求|_苏州金鸡湖景区,但是在細節位置需要分情況考慮__重庆城投集团,造成研發成本的大額增加__-注册送彩金的彩票大全,開啟漫 漫 改 圖 路 (細節就略過了)~


最終效果以這個動效為基礎進行研發|--长治日报电子版,中間涉及到了地圖視角的偏移/定位點跟蹤/X-panel規則/最佳view調整等複雜邏輯的調整



設計改進的細節


優化進入等待應答頁的動效-|meyeeka,優化頁麵布局

設計進場動效不僅僅是為了視覺上有強感知和更好的體驗|-众盈彩票是真的么,核心是防止用戶多次取消-_-奶油话梅糖,多次叫單的行為發生


當長時間打不到車時||和绳媲美,乘客會選擇取消訂單讓係統重新派單|_小县城里的故事,認為這樣有可能會更快有司機接單|||掌上彩票客户端。而真實情況則很像排隊買票-|英才会所,前麵的走不完買票流程後麵的人則無法前進|--霍启仁antonia,所以當乘客選擇取消-_-电视剧军刺,離開排隊隊列-_|金陀,隻能重新回到對尾-||优选彩票APP,重新排隊


下方的等待應答信息卡片包含了等待時長和取消功能-_娱乐天地官网下载,規則是展示3s之後隱藏取消按鈕,如果乘客要取消_-维多利亚科鲁兹,需要上滑拉起卡片點擊取消


通過調整視角和擴大蒙層動畫範圍_-|测公司名字好坏,用戶的視覺將會集中在屏幕的上方避免地圖上的無效信息幹擾|||赢彩彩票怎么注销账户,視覺持續注意力集中在3-6s左右|_1980平台登录,從而很好的為隱藏取消做了掩護


當用戶的視覺從上方移動到其他位置的時候運力調度已經開始了6s+_|游彩网登录网址,無形中給用戶時間感知的緩衝時間_-景伯宁,使得平均等待時長延長_评选优秀员工方案,等待時長閾值向易接單時間段靠攏


後期通過數據分驗證現乘客拉起卡片的幾率相比之前剛發布時候已大幅下降|_|亿乐彩下载app,也從正麵說明乘客已經適應了這種收起的策略



優化頁麵樣式

舊版的等待應答|-_365人工彩票计划,地圖外露供乘客拖動地圖觀看周圍情況_阳光工资。但是用戶在等待接駕的情況下||_仙缘 云朵朵之家,是沒有辦法看到周圍運力這條非常有用的信息-陈丽华简历,而地圖上卻外透了街道/店鋪的信息_|娱乐天地平台苹果app,會使這個頁麵看起來非常沉重卻沒有很大的意義-||1分快3怎么玩,且會弱化波紋擴散的感知


新版的等待應答|_-09彩票,會在地圖上方蓋住一個80%透明度的的蒙層_|-132彩票网,同時會讓地圖視角整體抬高|_虹口区小学排名。讓用戶感覺到的是更大範圍的運力調度|--注册彩票网站违法吗,並且隨著地圖視角的抬高--|注册送29彩金平台,街道/店鋪的名稱會得到隱藏---锚杆垫板,減少無意義信息的透傳--093彩票手机版客服。通過對地圖的縮放_-|355彩票软件,自動減少了街道信息外透_-|雷霆扫毒谁是黑警,無需通過代碼層麵的修改__-盈彩在线平台是什么,減少了rd的工作量的同時讓界麵整體看起來更加清爽--雪域藏王散,拉美在發單前會有定位點的二次確認定位點|_孙陈奕铭,也保證用戶正確感知到自己在空間上所處位置


舊版本的波紋|_原来辛夷坞,速度緩慢並且不夠明顯-|038com彩票安全吗,很難給人一種強感知|__国世平本人新浪博客,不像是一個等待運力調度的場景

新版本的波紋|_青岛开发区十中,會增強波紋的速度|_中兴v880官方刷机包,調整波紋的速率|-苏州故事广播,讓用戶有一種強感知|无忧代理器,此刻正在進行最大範圍的進行運力調度的搜索


不再支持用戶操作手機地圖--易悠彩票是真能赚钱吗?,查看周圍信息--106在线彩票安卓。減少波紋因地圖位移而產生的實時渲染-_-焦作世纪星快捷酒店,減少不必要的耗電行為發生



保證應答前後體驗連貫性


在重新設計等待應答這個場景時-|_色啦啦,我不希望它是一個很重的loading的感覺


不希望像loading的原因在於loading處於數據調取狀態诺基亚ovi套件,而數據調取一旦完成-_灵异森林,會立刻跳轉進入下個場景_手机qq2010java通用版,會讓整個體驗被割裂_|腹黑师父吃掉呆徒弟H,不流暢|__为啥人们啪啪后会感到悲伤。而這裏通過設計手法的表達我覺得可以做到體驗上前後的一致,從而打通設計上的從發單->接單->送駕 這一小閉環


在得到了數據請求後_xong出没熊出没之年货,我們會將View_3D視角返回到正常2D的俯視視角|--一见钟情简谱,而車作為最終的載體則會自然而然的出現-_256彩票注册,同時會根據最佳視角算法自動調整到-|冰雪皇后优惠券,人和車同時出現在屏幕正中(距離越遠地圖View縮放越大|_|嘉兴口碑网,人車始終出現在屏幕當中)


接著-|邯郸晚报电子版,真實的車載路線會以路徑生長的方式呈現於用戶的手機當中-|亿赢彩票官网,會根據距離的遠近來控製路徑生長速度的快慢-_-金明智,同時司機卡片同時加載出來~


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



推動落地_-|美国vivid,保證還原


完成了設計稿/產品/技術評審過後我們便開始與開發同學進行詳細的對接

因為此次設計相對複雜_|_云顶娱乐下载官网100,涉及到了端上和地圖上的rd同學_|132彩票,所以非常考驗研發的效果還原能力|||云顶至尊娱乐游戏官网,既要把動效實現原理拆分的非常明確又要保證聯調的時候前後一致性



這裏就不多贅述|||瓯江影院,貼個輸出圖好了 (開發動效邏輯拆分圖by zhoulu)

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


結論~Rd同學非常OK的完成了最終的效果DEMO|_云谷彩票手机版登录,還原度90%+


非常感謝rd (鞠躬)



數據驗證


在拉美地區上線__-新民歌,進行了的AB測試|诸葛亮挥泪斩马谡是因为什么一事,核心評估指標收益顯著_|李武荣,整體數據遠超當初的預期~



總結


成長方麵|-|1号彩票线路:這是我來國際化團隊的參與的第一個項目||_浙江教师培训管理平台,也是設計內部帶頭發起的一個項目_陈俊文,現在回頭來看還有些地方能做到更好---广州烟草网上订货,可能那多一點的“更好”能讓我在產出的時候更加細致|qq下载2011正式版官方免费下载,和研發對接思考的更加的完整|||肝病康复网,對業務的提升也許會更好


在說點題外的-|-阜新路25号,現在的大環境講究“全鏈”||-闽侯一中,賦予了設計師更多的權利_||王梁微博,對於設計來說絕對是利大於弊-|-媚行深宫 菏泽天下,這點深有體會-2019注册有彩金送的彩票网站,更多的上遊思考||十女九丝,更前一步對業務的理解|-南滨是哪个省的,把業務的場景想的明白_-淘宝开店步骤,把數據看懂__常熟杀人案,站在全局的高度看問題|_车险法,站在產品的角度去設計||-亿彩彩票怎样能多赚钱,設計賦能_|沧州蜜宝团,通過設計去助力業務去拿結果


藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司|钻石夜总会主持人,為期望卓越的國內外企業提供卓越的UI界麵設計__勇者斗恶龙怪兽篇joker2金手指、BS界麵設計 _|邢台二手货车百姓网、 cs界麵設計 _|长发速递、 ipad界麵設計 --六六宝贝txt下载、 包裝設計 |_今日股市行情查询、 圖標定製 ||珞珈在线、 用戶體驗 -_铁道兵家园网、交互設計_-|256手机彩票网、網站建設 -_-至诚证券、平麵設計服務_|保定保洁公司信誉安全。

標簽: 動效 « 數據可視化大屏設計經驗分享 | 設計的法則【交互篇】»


訂閱Rss