追求卓越一諾千金

藍藍設計_|_十女九丝,2011年成立-|黑鸭子图片,主創清華團隊|淘一站,專注軟件和互聯網ui設計開發---注册领28彩金。擅長企業信息化管理-|现货白银模拟大赛、監控--|305彩票、大數據軟件UIUE谘詢和設計開發服務-|-168开奖网APP。立足UI-__智行飞机票出票靠谱吗,好好學習|-248彩票网站,天天進步|-2019新版跑狗图+今天!


通過動效助力業務拿結果

2019-6-12 分享達人 行業趨勢


如果您想訂閱本博客內容|-|荣成民心网,每天自動發到您的郵箱中-李天一受害教师照片, 請點這裏

2018年10月-滴滴國際化乘客側項目-__魔兽世界星雅,曆經2個版本迭代--快乐大本营落跑甜心剧组,已於19年1月全量海外

有問題請及時告知|_|易付宝app官方下载,請不要討論除設計之外的產品問題



寫在前麵


什麼時候該使用動效--|上海蹦极事故,什麼時候該保持應有的克製_-长春客运站订票电话,什麼樣的動效是好的動效我在之前寫過一遍文章优惠券打印机,感興趣都盆友可以了解下_-_众赢彩APP,標題《動效/動畫在直播類應用中都運用和落地》__染衣培训,本篇文章應該可以算是上篇文章的下半場


接下來要說的這個案例||_通宝巴士,它可能和我們平常所見的動效體驗原則是“背道而馳”的,因為它終究是一個等待運力調度的場景(簡單的說就是等待司機接駕的過程)每天成百上千萬訂單的背後有著一套非常複雜的算法去支撐|-256cp彩票,這就造成了這個場景它本身不會像動效指導原則那樣順利||pdf7 0专业版,平滑_|赫依伦,愉悅-_双城市政府,但是既然是做設計-|-北京十二中游泳馆,核心是去解決問題_-|轴承大世界,所以繞不開這個場景本身||锦绣庄民间艺术园。通過數據去解讀用戶的想法和行為|_易发彩票可不可以提现,將設計與業務進行更緊密的結合_|朝吹,從而達到更好的效果


對用戶 “等待應答“這個場景的動效改進--试卖网,以拉美地區最終AB測試數據為結論||360彩票购彩大厅,使我更加確信動效能做的不僅僅是體驗上的提高-八马赛珍珠5800价格,在特殊場景下完全可以解決視覺感知層麵無法解決的痛點||兽性之血,為業務方拿結果


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



項目背景


滴滴出行在拉美地區飛速發展,單量持續增高的同時|-|无为教师进修学校,用戶對產品本身的期望也越來越大--盈彩在线是合法的吗,我們一如既往的重視用戶體驗-|如何在淘宝注册开店。無論嚴寒酷暑-__众乐彩登录链接,早晚高峰___锦州人流,我們和我們的用戶都不希望等待接駕變成一件漫長|_qq游戏马、無預期_|-亿客隆彩票平台、盲目的行為



數據分析


* 乘客等待時長主要分布在A時段左右_|重庆方言电视剧下载,多數乘客會選擇在此時間段內取消訂單_||铁木真炒锅,而消訂單的乘客並不會停止叫車服務-|五月色桃色激情婷婷,而是進行二次發單-_3374开奖结果,重新進入等待隊列-_|众发娱乐代理犯法吗,這就造成了因個人因素延長了等待應答的總時長


等待應答B分鍾左右_-|脉灵康多功能治疗仪,是較容易叫車階段_-曾海潮李悦陈霁江陵肃,數據顯示用戶處於這個時間段內容易被接單


*延長乘客等待預期,調節願等時長閾值的操作空間||注册彩票网址送体验金,乘客願等時長的具有較大彈性_-|芭蕾雨 悦都,如在打車較為容易的時段為 xx 秒-||八桂宽频,在打車較難時段為 xxx 秒


結論--|5iwwe:用戶對於排隊規則的並不理解_--注册领28元彩票彩金,使得用戶在最容易叫到車的時間段之前會選擇二次發單_|中科彩票是合法的吗,取消訂單會導致重新排入隊列_-360足球彩票,進行排序


抓手_||母亲节是几月几号2013:知悉乘客取消應答集中時間段和容易打車時間段後前提後-|李白谈爱原文,在不通過增加物理運力/調整算法的前提下|-26岁毒贩获死刑,通過設計的手法去緩解用戶的等待感知||班超之志,從而增加用戶的等待應答時長-韩版棒针毛衣外套,將用戶的等待時長延伸至容易打車時段__特种兵之火凤凰快播,從而促成訂單的完成|-|杀人游戏软件,是這次設計的突破口



了解問題||监察特使,明確挑戰


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


通過對用戶數據進行分析後得出結論009彩票是合法的吗?,篩選出核心問題進行優化_-众赢国际是真是假,讓用戶對等待應答有一個新的認知,是這次的關鍵所在|-银彩G88。我們希望通過這次設計的優化-_-云顶国际彩票,乘客能強感知此刻所處運力調動的狀態|-超级p57怎么吃,並最大程度上弱化時間概念降低人腦對時間的敏感程度|-_天通银招商,減緩用戶的焦慮情緒羽西会员积分兑换,使其相信這是一個可以等待運力到來的排期



麵對的挑戰有-醉美cf单机版1 4:


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

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

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

4.符合品牌調性的場景動畫,讓應答場景融入App保持體驗上的流暢|高中数学排列组合,統一和性能平衡  D1體驗提高

5.涉及到地圖開發/端上研發同學的密切配合-|万兽之国(h)人蛇,高度還原設計文件也將是一個挑戰  D2設計訴求



決策方向||郸城黑社会,設計執行


明確目標之後__青帝中文网,就開始了設計的決策方向和關鍵詞


作為一個單量百萬級的應用_-易点彩票网开机号分析,麵對的用戶群年齡分布也是非常廣泛--中诚快递网点查询,因此動畫的效果一定要適合大眾群體的認知|-永盛线路,不應該為了吸引視覺焦點而有個性化存在-> 波紋效果


運力調度本身是一件等待的過程-__广西平南,長時間的等待消耗用戶的耐心|_台海战争,應該給予更多的可預見的可期待的暗示 ->路徑


俯視視角更適合對周圍環境-__256c彩票官网,路況|大一新生请产假,運力的的觀察和掌控|||女烈专辑,適合打車前對環境的觀察__膏良,而一旦進入等待場景__英皇娱乐时时彩平台,用戶需要做的隻是等待接單||01彩票怎么选,將場景透視化|-娱乐彩票app排名榜,貼近高空觀察事物的視角铁粉吧,更加符合真實世界-> 透視視角


老版本沿用的等待應答場景_采菊苑业主论坛,可以在地圖上進行交互操作_|_阿拉尔租房网,但是無法帶來明確的有效信息|_-142857能预测彩票。新版設計為了增強調度的感知|-_人受杂交,增強了動畫效果||35彩票官方。而動畫效果在地圖上需要一直靠渲染運算生成_||盈彩彩票安全吗,任何的地圖移動都將加大運算量|__花都区教育局,耗電發熱則會大大增加--_魏征进谏图的作者,因此這裏為了保證性能將一個可自由操作的場景|_封丘县政府,變成了一個固定的場景 -> 蒙層




設計執行


明確了方向和關鍵詞之後--_皮肤病图片大全,設計的思路其實就已經非常清晰--cctv10怪兽之谜视频。在框架層考慮清楚信息布局||_361娱乐平台用户登录,整體頁麵交互流程|中央电影网。在表現層吸引用戶視覺_-_小学生蜡笔画作品,加強感知__idealife,降低用戶對時間敏感度即可

初稿的設計其實非常順利||-基督教赞美诗歌曲,整個設計稿從需求分析到第一個DEMO落地大概用時1天左右-_扬州八怪画竹子,而且1稿過完設計內部--|鹿喜微七天断食。在設計之初-|诺氟沙星副作用,leader建議不需要考慮太多落地問題__淮钢吧,可以適當天馬行空的|-155是移动的吗,不要因為技術的限製而限製自己的想法_-陈蓉图片。在完成設計稿之後我們與技術評審之前就開始與端上開發同學進行邏輯層的分析_--ZOOSKOOIStay大狗,發現這個設計稿雖然滿足要求|_-三星w2017,但是在細節位置需要分情況考慮|盈彩骗局,造成研發成本的大額增加|苏州监狱,開啟漫 漫 改 圖 路 (細節就略過了)~


最終效果以這個動效為基礎進行研發|终结洪荒演义,中間涉及到了地圖視角的偏移/定位點跟蹤/X-panel規則/最佳view調整等複雜邏輯的調整



設計改進的細節


優化進入等待應答頁的動效_-sky浪翻云博客,優化頁麵布局

設計進場動效不僅僅是為了視覺上有強感知和更好的體驗_-|雳剑电视剧 全集36,核心是防止用戶多次取消|__掌上彩票下载,多次叫單的行為發生


當長時間打不到車時|赢彩彩票,乘客會選擇取消訂單讓係統重新派單__-聚会去哪里,認為這樣有可能會更快有司機接單_|亿博彩票是真的吗。而真實情況則很像排隊買票-|-阿提查 春那侬,前麵的走不完買票流程後麵的人則無法前進_|长沙广益中学,所以當乘客選擇取消-1990的彩票台子,離開排隊隊列-__闽侯一中,隻能重新回到對尾|_掌信彩网站,重新排隊


下方的等待應答信息卡片包含了等待時長和取消功能--阜平大枣,規則是展示3s之後隱藏取消按鈕,如果乘客要取消-__赢天下什么时候上映,需要上滑拉起卡片點擊取消


通過調整視角和擴大蒙層動畫範圍-_队长模式,用戶的視覺將會集中在屏幕的上方避免地圖上的無效信息幹擾|-|俞威,視覺持續注意力集中在3-6s左右_-_诺基亚ovi,從而很好的為隱藏取消做了掩護


當用戶的視覺從上方移動到其他位置的時候運力調度已經開始了6s+|_-众盈彩票怎么猜,無形中給用戶時間感知的緩衝時間|我要身份证号码,使得平均等待時長延長|周润发艺术人生,等待時長閾值向易接單時間段靠攏


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



優化頁麵樣式

舊版的等待應答|通辽刘大鹏,地圖外露供乘客拖動地圖觀看周圍情況|银彩。但是用戶在等待接駕的情況下|_|金五星百货城,是沒有辦法看到周圍運力這條非常有用的信息_-高地杂鱼群,而地圖上卻外透了街道/店鋪的信息|_仓井空,會使這個頁麵看起來非常沉重卻沒有很大的意義--_芒草扫把,且會弱化波紋擴散的感知


新版的等待應答计一彪,會在地圖上方蓋住一個80%透明度的的蒙層||_开通gprs5元套餐,同時會讓地圖視角整體抬高|||计提职工福利费分录。讓用戶感覺到的是更大範圍的運力調度||-血呷,並且隨著地圖視角的抬高||徐娇个人资料,街道/店鋪的名稱會得到隱藏|-|习水教育科技网,減少無意義信息的透傳|-尹国驹。通過對地圖的縮放|-|国际航班实时查询,自動減少了街道信息外透--_意彩怎么注册账号,無需通過代碼層麵的修改_|1分快3计划,減少了rd的工作量的同時讓界麵整體看起來更加清爽|-网游之幸运魔剑士,拉美在發單前會有定位點的二次確認定位點|__1000彩票,也保證用戶正確感知到自己在空間上所處位置


舊版本的波紋_至尊争霸怎样充值,速度緩慢並且不夠明顯--|众发娱乐跑路了吗,很難給人一種強感知||祝愿猫,不像是一個等待運力調度的場景

新版本的波紋|-_卓易彩票计划软件,會增強波紋的速度--|188彩票官方网址,調整波紋的速率--|陕西今日点击,讓用戶有一種強感知__阮加根,此刻正在進行最大範圍的進行運力調度的搜索


不再支持用戶操作手機地圖-运盛娱乐app靠谱吗,查看周圍信息-ovi套件下载。減少波紋因地圖位移而產生的實時渲染__|长虹手机客服电话,減少不必要的耗電行為發生



保證應答前後體驗連貫性


在重新設計等待應答這個場景時_英华学校吧,我不希望它是一個很重的loading的感覺


不希望像loading的原因在於loading處於數據調取狀態--银彩会员,而數據調取一旦完成-__空军副班长,會立刻跳轉進入下個場景-|养热带鱼赚钱,會讓整個體驗被割裂|数米基金网,不流暢|_|七年级数学下册期末试卷。而這裏通過設計手法的表達我覺得可以做到體驗上前後的一致,從而打通設計上的從發單->接單->送駕 這一小閉環


在得到了數據請求後-|-天津市武清区黑社会,我們會將View_3D視角返回到正常2D的俯視視角__-陈秋石,而車作為最終的載體則會自然而然的出現__锐志炫装版,同時會根據最佳視角算法自動調整到||娱乐天地代理,人和車同時出現在屏幕正中(距離越遠地圖View縮放越大_|-多多杀人游戏,人車始終出現在屏幕當中)


接著_|-小学生国旗下讲话,真實的車載路線會以路徑生長的方式呈現於用戶的手機當中|小米官网首页抢购红米,會根據距離的遠近來控製路徑生長速度的快慢|-142857和彩票的规律性,同時司機卡片同時加載出來~


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



推動落地||娱乐天地平台app,保證還原


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

因為此次設計相對複雜__-刘一冰,涉及到了端上和地圖上的rd同學许嵩违章动物mv,所以非常考驗研發的效果還原能力-_-易网彩票安装,既要把動效實現原理拆分的非常明確又要保證聯調的時候前後一致性



這裏就不多贅述|-_2018彩票软件排行榜,貼個輸出圖好了 (開發動效邏輯拆分圖by zhoulu)

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


結論~Rd同學非常OK的完成了最終的效果DEMO|||优盈彩票合法吗,還原度90%+


非常感謝rd (鞠躬)



數據驗證


在拉美地區上線-|海伦二中贴吧,進行了的AB測試|-007a私募内线,核心評估指標收益顯著__深圳网吧牌照,整體數據遠超當初的預期~



總結


成長方麵___金宝贝取名软件破解版:這是我來國際化團隊的參與的第一個項目-_|ems几天能到,也是設計內部帶頭發起的一個項目|-_荆门运动人,現在回頭來看還有些地方能做到更好___谢远航,可能那多一點的“更好”能讓我在產出的時候更加細致|_-2014澳网奖金分配,和研發對接思考的更加的完整-|_金华艾克医院院长孙尚见,對業務的提升也許會更好


在說點題外的|美国乒乓球队,現在的大環境講究“全鏈”|铲运机型号,賦予了設計師更多的權利-_永盛国际彩票,對於設計來說絕對是利大於弊-云顶注册送25,這點深有體會_-360重庆老时时开奖结果,更多的上遊思考-福州市华伦中学,更前一步對業務的理解|亿润富彩票,把業務的場景想的明白_花样滑冰鞋,把數據看懂|-金枝玉叶玉琪,站在全局的高度看問題--闻一多的事迹,站在產品的角度去設計__|优衣库百度云,設計賦能|--叶彤倩,通過設計去助力業務去拿結果


藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司_111cc彩票,為期望卓越的國內外企業提供卓越的UI界麵設計注册送彩金、BS界麵設計 __众亿彩票被骗、 cs界麵設計 ||_南华苑路55号、 ipad界麵設計 _-诺基亚7610软件下载、 包裝設計 |_-陈秋艳、 圖標定製 |阜阳卫生局网、 用戶體驗 -金莎巧克力图片、交互設計-||金立gn105怎么样、網站建設 |-_脑出血圈、平麵設計服務-|鞍山铁通影院。

標簽: 動效 « 原型設計中的道與術 | react-router快速入門上手»


訂閱Rss