• 1.0到4.0 

從1.0開始,，滴滴以一個接地氣的老北京出租車形象出道,，服務了第一批用戶；從看起來并不是那么專業(yè)的互聯(lián)網(wǎng)產(chǎn)品到2.0的形象升級,，滴滴的產(chǎn)品與設計的專業(yè)性越來越強,，漸漸的為用戶和行業(yè)認可，也歷經(jīng)著名的“快的大戰(zhàn)”成為國內(nèi)出行類產(chǎn)品的老大,；致力于實現(xiàn)“讓出行更美好的愿景”,，3.0后我們新增了價格親民的快車和高端舒適的專車，產(chǎn)品也適應新業(yè)務的增加更具有包容性,、擴展性,；4.0后公司業(yè)務快速發(fā)展,，用戶飛速增漲，乘客端幾乎同時新增了包含順風車,、巴士,、代價、試駕等在內(nèi)的多條業(yè)務線,，隨之,，產(chǎn)品架構和頁面布局在4.0有了重大的調(diào)整，統(tǒng)一是基本原則,。

• 4.0到5.0

產(chǎn)品服務于業(yè)務,，公司業(yè)務飛速擴展。不得不說的是,，4.0的實現(xiàn)是有遺憾的,，“統(tǒng)一”的有些牽強，但為保證業(yè)務的快速發(fā)展,，產(chǎn)品也需要快速迭代跟進,，有時的不盡完美也不可避免。

從設計服務于產(chǎn)品和業(yè)務的角度,，5.0改版,，我們要解決一些顯而易見的已知問題，乘客端安裝包的體量過大,，已然領跑app store和各大安卓應用商店,，這不符合工具類產(chǎn)品應有的“輕薄”的氣質(zhì)：如各業(yè)務線功能、操作各異,，體驗不統(tǒng)一,，平臺運營頁和業(yè)務運營頁不能和平共處、頻頻沖突,；從讓用戶的出行體驗更美好的角度出發(fā),，我們通過結合線上數(shù)據(jù)及用戶反饋,，將問題歸類分析,，而產(chǎn)出用戶體驗研究報告，在乘客體驗出行的每一個節(jié)點發(fā)現(xiàn)潛在問題,，并給予設計優(yōu)化建議及方案,。

例如：下圖就是通過收集之前版本的信息數(shù)據(jù)繪制出的用戶體驗地圖。體驗地圖讓我們可視化的觀察到在用戶出行的過程中,，在哪些節(jié)點存在體驗斷層,，可以從哪些方面去優(yōu)化體驗問題。例如：乘客接受怎樣的價格梯度,，他們是否能理解動態(tài)調(diào)價背后的原理,，如何減少司乘雙方的等待時間xxxx

用戶體驗地圖

基于5.0前的積累與準備,，我們的團隊試圖從設計的角度去推動5.0的全新改版，我們?yōu)?.0定了三個關鍵詞：輕量化,、體驗統(tǒng)一,、高效。

1.輕量化

目標是從App Store和安卓應用市場的最大包排行榜上走下來,，節(jié)能減排,、輕量化設計是5.0重中之重；

2.體驗統(tǒng)一

各個業(yè)務功能與操作各異,、體驗不統(tǒng)一,，思考如何為不同的業(yè)務形態(tài)提供一套統(tǒng)一的設計規(guī)則；

3.高效

再次分析用戶在乘車服務中的信息獲取和行為操作,，重新梳理的信息層級,，優(yōu)化用戶與產(chǎn)品的信息連結點。

如今,，圍繞著“出行”二字，滴滴為用戶提供了多樣化的業(yè)務服務,，如此豐富的服務類型都各有特點,，每一個業(yè)務服務也都在為了追求更極致的用戶體驗不斷的進行功能迭代。如何在讓新的設計框架可以同時接納包容這么多業(yè)務類型,，保證體驗統(tǒng)一,，又盡量不去磨平業(yè)務的特點，給予業(yè)務一定的發(fā)揮空間,，助力產(chǎn)品的快速更新與迭代,；面對用戶，什么樣的設計語言可以既高效的傳遞信息,，又能給予用戶在使用過程中的良好體驗,，讓操作流程更輕量化。

• 橫：抽離與布局－頁面元素組件化

我們從4.0發(fā)現(xiàn),，用戶的整個乘車流程,，都基本上可以被視為一個線性行為操作流，貫穿著服務篩選（一級業(yè)務刪選,、二級場景篩選）,；確認發(fā)單前的表單需求表達；等待匹配,、等待服務,、服務中的訂單操作，如取消訂單,、一鍵報警,、分享行程,；以及全流程的地圖操作及信息獲取，運營消息及系統(tǒng)消息獲取,；然后是行程結束的支付行為,；評價行為…

下圖是嘗試著表達，貫穿于線性的操作流程中,，用戶與產(chǎn)品發(fā)生連結（信息傳遞與行為操作）的概念圖,。

梳理用戶與產(chǎn)品的連結點，從中抽離出四大組件

一級導航和二級導航在不同業(yè)務標簽下,，位置不一致,；表單的交互操作和使用體驗不統(tǒng)一；給予用戶的操作項樣式各異,、位置隨機,；運營消息、系統(tǒng)消息,、司乘溝通消息分別有各自的傳遞入口;支付與評價頁內(nèi)容冗余…我們嘗試著把之前想復雜的問題簡單化,，從用戶使用app的真實場景出發(fā)，剝離到最本質(zhì),，將所有的元素分解再重組,，用戶與產(chǎn)品交流與反饋的“連結點”用四大組件承載：

A.篩選組件-對應用戶的服務選擇需求；

B.卡片組件-對應全流程的訂單操作及訂單信息獲取需求,；

C.地圖組件-對應全流程的地圖信息獲取及操作需求,；

D.消息組件-對應所有系統(tǒng)消息、運營消息,、即時消息獲取及傳遞需求,；

1.篩選組件-（靈活、拓展,、流程打通）

篩選組件主要承載了一級業(yè)務導航和二級場景導航,，以便于用戶選擇合適的出行服務。我們在分析研究的過程中一直思考如何減少用戶理解業(yè)務,、選擇業(yè)務的成本,，將用戶的行為模型簡化至直接表達“我要去哪兒”的出行需求為起始點，弱化業(yè)務選擇或者更智能的判斷用戶需要的服務類別,。所以我們希望篩選組件做的更靈活,、更具有拓展性，在未來甚至可以打通頁面流程,，在用戶感知用戶需要時適時出現(xiàn)。

5.0版本的一級導航還是沿用了4.0的設計思路,，置頂于首頁,。而二級場景導航貼近表單卡片,。設計的考慮在于用戶，對單一業(yè)務的忠誠度是較高的,，將用戶對業(yè)務的篩選作為導航放至頂部位置,，而用戶對某一業(yè)務下的使用場景呈現(xiàn)一定范圍的波動，于是將業(yè)務導航與場景導航分開放置,，場景導航則更靠近于用戶的需求表達卡片,，便于用戶操作。

2.卡片組件-（包容,、統(tǒng)一,、輕薄）

將信息流與操作通過卡片化的交互方式展現(xiàn)與流轉(zhuǎn),?？梢宰層脩舨幻撾x行程地圖獲取信息的同時，又能進行各種行程操作,?？ㄆ脑O計可以降低UI和不同交互的學習成本，便于擴展與維護,，通過卡片的流轉(zhuǎn)動畫也可以達到推進整個服務流程的統(tǒng)一效果,。

卡片組件：卡片貫穿于乘客流程的每一個連結片段

3.地圖組件-（沉浸感、歸屬感,、直觀）

整個服務過程需通過地圖傳達很多路線位置的相關信息,，使用地圖本身是最直觀立體的表達方式，使得用戶有沉浸感,。

5.0 地圖組件中的元素陣列

4.消息組件－（對話,、通用包容、即時性）

將即時信息卡片作為承載與用戶進行臨時對話的功能,，可被隨時調(diào)用在任何一個流程之內(nèi),，增強靈活性。

四大組件布局

• 縱：拆分服務流程－精細化體驗提升

通過梳理用戶的一次乘車行為,，將每次行程服務拆分為如下幾個階段：首頁－發(fā)單－等待匹配－等待服務－服務中－服務結束（支付評價）框架確定完畢后,，拆分出可被細化設計及開發(fā)的相應組件。不同設計師可以分工合作,，在框架范圍內(nèi)對不同組件的具體需求進行細化設計,。

5.0乘車主流程頁面串聯(lián)

通過用戶模型，產(chǎn)品需求以及交互研究等手段收集數(shù)據(jù)與信息,，重新整理用戶在每一流程節(jié)點中的需求點,，將用戶所可能觸及到的信息與操作進行層級劃分，再通過顯隱形操作進行收斂。組合至不同的組件中,，這樣使得流程里每一個節(jié)點的信息表達都能使用統(tǒng)一的交互方式,，并做到最簡。

對行程中各流程節(jié)點需求進行優(yōu)先級排序

依據(jù)如,，用戶模型,；用戶行程中評價內(nèi)容；產(chǎn)品需求等

“服務中”的信息層級優(yōu)先級梳理

“表單”“服務卡片”“支付評價”的輕量化卡片

同樣通過需求優(yōu)先級分析,，可以將其他流程的需求進行細化梳理并歸類找到合適的內(nèi)容載體,，例如在確認發(fā)單時，突出預估價格的顯示,，用戶的輔助需求會默認收起,，更快速的完成用戶的發(fā)單需求；在等待接駕,、行程中,，服務卡片為的表達訂單信息及引導用戶乘車行為的主要媒介，簡化卡片信息,，分析在不同節(jié)點用戶需求的優(yōu)先級,，適當收起與展開服務卡片，保證卡片的輕量化,；在服務結束后的支付頁面,，突出價格金額的確認以及支付操作的引導，將支付方式弱化至下一信息層級,；在評價頁面,，為了獲得更有效的評價內(nèi)容，根據(jù)用戶的評價意愿強化評星操作,，分別處理引導標簽選擇和內(nèi)容輸入等操作,。

產(chǎn)品層面 

依托于新的產(chǎn)品架構,，構建頁面清晰的層級關系,；運用卡片、單元化的設計,，塑造組件的靈活性,；類專車業(yè)務的收攏

1.色、形,、態(tài)

色－重新定義易用于產(chǎn)品的顏色

問題：信息層級不清晰,，可用顏色少

解決：便于表達信息和操作，加入重色輔助色,。區(qū)別選中態(tài),、重點操作,、信息展示、重點信息的關系,。

頁面配色從活潑到穩(wěn)定,，傳達滴滴出行的品質(zhì)感并通過重色的加入構建清晰的頁面層級關系,。

形 - 讓底圖更易用美觀

問題：地圖信息干擾操作

解決：對地圖的顏色和展示信息進行相應的調(diào)整,，使信息層級更清晰。

態(tài) - 表意明確更有質(zhì)感

問題：吸附路面的信息較平

解決：對小車進行設計,，加入更多細節(jié)和質(zhì)感,。給用戶更真實感受。修改起終點樣式和顏色,，凸顯品牌,。

2.服務于框架 —— 統(tǒng)一、輕量化,、高效的實現(xiàn)

卡片“空”的包容

統(tǒng)一

卡片的靈活性

問題：流程中全頁面的切換不夠靈活

解決：卡片之間的切換,，提高效率和流暢性。組件化規(guī)范化降低開發(fā)成本,。

高效

讓信息組織更清晰有序

問題：信息牌不不嚴謹,，堆砌感較強。

解決：利用點線面在頁面中的關系,，保持更多的留白,、合理的信息分組，讓信息更清晰地展示,、操作使用更舒適,。

輕

低頻功能的隱藏，減少用戶的閱讀時間

問題：全部信息展開,，用戶停留時間長,，不利于快速操作；解決：將功能信息進行分級,，低頻功能進行隱藏,，通過拖拽等手勢展開全部功能。

響應品牌升級,，國際化戰(zhàn)略。頁面風格從親民活潑向品質(zhì)感傾斜,，建立品牌的可擴展性,。一個企業(yè)的品牌形象凝聚著這個企業(yè)的靈魂，可直觀的傳遞給用戶滴滴的價值觀與服務理念,。設計師們做了無數(shù)的創(chuàng)意,，哪些可以被人記憶,？哪些能給人深刻的視覺印象？2016我們依然在不斷的探索,。

1,、品牌標識及色彩

這次改版的核心是提升滴滴品牌的識別度。做個性,、深刻,、高識別度的VI體系。首先,，從品牌標識入手,，去年9月滴滴4.0換標，新標識簡潔有特點便于記憶,，已經(jīng)形成高識別度的用戶認知,，所以，這次,，我們只對標志進行微調(diào)處理,。滴滴標識之前的桔色較為中庸，許多熟知的互聯(lián)網(wǎng)公司都是用的相近的橙色,。經(jīng)過一些列的用戶研究,，最終通過移動橙色色相往紅色偏移來提升色彩個性。降低飽和度,，除去橙色的跳躍,，提升品質(zhì)感。在色彩搭配上加入藍灰色增強科技感,。并建立輔助色體系,，豐富色彩選用并規(guī)范業(yè)務線輔助色彩。

圖標作為產(chǎn)品服務以及品牌傳播的視覺表達,，應該具備高度的一致性,。我們的圖標要具備：保持簡潔、品牌個性,、通用思考,、創(chuàng)造喜悅等特點。這個標識,，有一個缺口,，象征著著滴滴“追求極致”的企業(yè)文化——不滿足，永遠差一點,。

2,、廣告系統(tǒng)及物料應用的圖形識別體系

在滴滴廣告系統(tǒng)及物料應用中加入滴滴DNA體系輔助圖形，強化滴滴品牌認知,。輔助圖形意義重大,，也很有挑戰(zhàn)：1. 直觀感知： 讓用戶不讀文字內(nèi)容就可辨識到滴滴的廣告,，2.可承載品牌理念及品牌的延續(xù)拓展性。3.滿足不同業(yè)務的層級區(qū)分,，專車,、快車、代駕等業(yè)務的用戶人群差異化較大,，輔助圖形滿足不同業(yè)務不同層級的區(qū)分,。4.不能限制畫面的表達，特殊的造型會對畫面的構圖和創(chuàng)意增加了限制,。5.方便好用,，不搶宣傳畫面文案和標志,。

滴滴連接著人和車,、司機與乘客，我們用科技改變?nèi)藗兊某鲂蟹绞?，“讓出行更美好”也同樣承載著滴滴對人們美好生活方式的憧憬,。在技術產(chǎn)品中，我們也將注入更多的人文情懷,，這正是我們要在滴滴VI體系中表達的,。

3、插畫體系
插畫在滴滴的快速運營中應用非常廣泛,，但滴滴插畫風格卻是五花八門 水平參差不齊,。我們建立了一套滴滴的插畫體系，1.高識別度,，在用戶心中建立清晰可識別的滴滴插畫體系,；2.高效運營，建立插畫組件庫和模版庫,，可供快速調(diào)用 3.拉平插畫質(zhì)量,插畫風格要簡潔易于被學習,，初級設計師也可以進行繪制，水平較高的設計師可以不斷的產(chǎn)出新的模版和控件 4.降低成本,，節(jié)約設計師時間并制作插畫生成工具,，進行快速拼合即可上線 5.業(yè)務線統(tǒng)一與差異，通過對場景,、人物著裝,、色彩的調(diào)整適應不同的業(yè)務模式。

• 人力調(diào)配

因為組件化的拆分,，也讓本次從設計到開發(fā)到落地的過程變得更順暢高效,。設計師可以做到專人專項，針對各自的組件進行跟進,。因為人力有限,、時間有限,，設計師即要負責組件的定義，也要跟進需求組合出流程中相應頁面,，并根據(jù)業(yè)務需要匹配枚舉出所有業(yè)務的頁面樣式,。

• 項目管理

在wiki上建立不同組件對應的空間，可以做到查找有序,。

從需求開始,，上游到下游可被更好的串聯(lián)。在Jira上建立產(chǎn)品設計驗收反饋項目跟進面板,。專人專項的跟進,，保證設計實現(xiàn)可以快速被走查審閱，并直接講結果與進度通過工具實時同步與所有項目人員,。

• 高效開發(fā)

通過一個系統(tǒng)化的反饋池,，將發(fā)現(xiàn)的問題不斷匯入，由接口人統(tǒng)一按照組件分配到相應可解決的人員手里,，高質(zhì)高效得解決問題,。值得一提的是，5.0的動效規(guī)范用開發(fā)語言更規(guī)范的保證動畫的高保真開發(fā),。

5.0 動畫規(guī)范——高保真動效&精準開發(fā)語言

• 設計規(guī)范

規(guī)范工具

在開發(fā)進行的同時,，視覺與交互已經(jīng)將本次框架性內(nèi)容進行整合梳理，沉淀出設計規(guī)范,，而工具的統(tǒng)一讓規(guī)范的共建變得更順暢,，通過轉(zhuǎn)換成sketch文件，將所有標準化控件沉淀為控件庫,。

規(guī)范意義

因為有了規(guī)范及控件庫體系,，設計師在接手需求時，可以減少重復設計的成本,，提高效率,，尤其適用于在快速版本迭代的時候，通過大量的標準化組件即可實現(xiàn)縮短設計周期的效果,，同時能保證高質(zhì)量的輸出,。

5.0 sketch規(guī)范

從概念稿到最后的開發(fā)落地，本次的改版過程也收獲了如下一些心得：

1.目標一致的重要性：

一個項目,，需要從上游到下游對目標一致的理解,。每個參與項目的人都清楚的了解到在滴滴發(fā)展如此迅速的時候，去做輕量化包容性更強的設計,，可以為整個平臺帶來收益,。大家對目標的認可是項目順利推進及落地的基礎保障。

2.理解用戶做減法：

業(yè)務的快速發(fā)展容易讓設計者忘記用戶的使用初心,。越來越臃腫的體量雖說帶來了更多差異化的服務,，也讓用戶產(chǎn)生了很多使用的疑惑,。如何能精簡框架，將精力更多得投入到用戶真正在意的體驗細節(jié),，是需要保持克制時刻追問自己的,。

3.系統(tǒng)化設計的高效性：

通過對業(yè)務流程及需求的總體梳理，將設計與開發(fā)同時進行模塊化,，使得整體項目像是拼圖一樣,，可以針對某一區(qū)域進行單獨修改而不影響全局，為配合與實現(xiàn)提供了潤滑劑,。在需求更好的被表達的同時,，也實現(xiàn)了更統(tǒng)一的效果。在規(guī)范被沉淀之后,，工具的統(tǒng)一也使得設計周期可以被縮短,，在短頻快的快速迭代中尤為適用。

滴滴正在快速發(fā)展,，服務的用戶體量越來越大,。這次的版本是滴滴的一小步，但其實也是滴滴設計的一大步,，對我們意義非凡。在滴滴,，設計師希望再“向前一步”,，帶著這個價值觀，我們一直在努力,，這次的VI與5.0設計就是結果,。憑借我們對設計專業(yè)的判斷、負責的推動整體設計的進程,，讓產(chǎn)品界面和品牌VI更強的契合,，讓調(diào)性能更加明確的傳遞給用戶，讓設計落地的效率得到提升,。滴滴在路上,，滴滴CDX也還在路上，更加向前一步,。

特別感謝在此過程中一起戰(zhàn)斗過的設計師～

李翠同學

阿怪同學

CDX創(chuàng)意設計中心