滴滴試駕1.0－交互篇

從0開始－－試駕的資源匹配

什么是試駕

試駕能夠讓乘客在車主的陪同下駕駛車輛，與車主交談，了解這款車的性能。

它是一個全新的領(lǐng)域，不同于滴滴體系中傳統(tǒng)的司乘關(guān)系，僅僅在司機(jī)和乘客之間做即時或預(yù)約的匹配。試駕增加了車的角色，讓車成為整個業(yè)務(wù)的核心，車主和乘客基于某款車建立了較強(qiáng)的聯(lián)系。

需求收集

通過市場調(diào)研和用戶調(diào)研，跟蹤新車銷售流程，我們很清楚地看到廠商、經(jīng)銷商和用戶的需求之間，存在很大的縫隙。

這些汽車營銷過程中的現(xiàn)實問題，指明了滴滴試駕基于商業(yè)和用戶雙方的需求點，例如尋找更多車源、發(fā)揮調(diào)度力、減低用戶試駕成本、激發(fā)用戶壓抑需求等。

產(chǎn)品定位

現(xiàn)階段，滴滴試駕定位于創(chuàng)造以體驗為核心的營銷方案，整合平臺車源、調(diào)動車主能力、降低成本，向用戶提供高效高質(zhì)的試駕服務(wù)，提高試駕對消費決策的影響力，打造一個“移動4S店”。

逐漸地，以出行為入口，覆蓋用戶練車、買車、用車、車后、賣車全流程。

未來，綜合線上數(shù)據(jù)、線下行為，提供全面的用戶反饋和場景化精準(zhǔn)營銷方案，為廠商打造產(chǎn)品迭代和推廣銷售的閉環(huán)服務(wù)。

從0到1－－滴滴試駕產(chǎn)品定義

用戶定性研究

我們對使用滴滴出行的部分乘客進(jìn)行了用戶調(diào)研，明確了我們的目標(biāo)用戶。然后對用戶進(jìn)行定性研究，分析他們的行為、態(tài)度、動力等，以便于創(chuàng)建人物角色，研究用戶的真實使用場景，以用戶為中心創(chuàng)建合理的流程和功能。

以乘客端用戶為例：

使用場景

根據(jù)上述研究，我們創(chuàng)建了一個用戶模板以及使用場景，這里簡要說明一下他在進(jìn)行駕駛前的使用場景。

用戶之前通過朋友和網(wǎng)絡(luò)，已經(jīng)大概了解了幾款車的價格和性能等，想要試駕一下，更真實地體驗并對比這幾款車。由于工作繁忙，只能午休或下班時間，在公司或家附近進(jìn)行試駕。于是，在工作空閑時間通過滴滴試駕預(yù)約了一款車，約在了公司樓下，并與車主聯(lián)系確定了出發(fā)的具體時間地點，然后等待試駕。

基本流程

在與產(chǎn)品經(jīng)理共同分析了車主和乘客的典型使用場景后，我們拆解出主要功能，并參考前期的調(diào)研數(shù)據(jù)，構(gòu)成了一套試駕業(yè)務(wù)流程，分為乘客端、車主端和個人中心。

乘客端

車主端

確定了主流程之后，再根據(jù)產(chǎn)品需求，以頁面為單位，對各個流程節(jié)點進(jìn)行細(xì)化，產(chǎn)出以頁面為單位的功能流程圖，并查看各個功能的層級，同時也便于與產(chǎn)品之間的討論。

為什么不要購物車

在產(chǎn)品設(shè)計的前期，我們每天產(chǎn)出的詳細(xì)流程圖都會有變化，也考慮了多種可能性，嘗試了多種方案，舉個例子，購物車流程的簡化。

從商業(yè)的角度出發(fā)，為了提高用戶成單率；從用戶的角度出發(fā)，為了方便用戶下一次發(fā)單，產(chǎn)品考慮了購物車的功能，將乘客所發(fā)單的等待應(yīng)答車輛均加入購物車。

但我們站在真實的場景中去模擬這個流程時，就會發(fā)現(xiàn)問題，在分階段的篩選中，確定了最后的方案：

第一，同時預(yù)約的結(jié)果是不可控的，因為購物車并無先后順序，成單的順序不能符合用戶真正的預(yù)期。

第二，一次性發(fā)單并不是用戶的真正需求，用戶真實的使用流程往往是針對某一款確定車型的試駕。

第三，提高成單率的根本在于車主的需求匹配乘客的需求，而不是單一的體量。

因此，購物車這個需求在一次次的迭代中，最終被舍棄。而它所代表的真實的用戶需求，則被分散到了更簡潔的各個核心功能中。

核心功能

明確了功能流程后，我們對整個流程的節(jié)點進(jìn)行細(xì)致的剖析，使用了很多方法，比如用戶體驗地圖，找到了試駕服務(wù)的幾個核心觸點，例如選車、叫車、等待接駕。

在接下來的設(shè)計中，我們對這些觸點做了更加細(xì)致的分析，在符合商業(yè)目標(biāo)的基礎(chǔ)上，以用戶為中心，設(shè)計合理的操作步驟，信息架構(gòu)，以及頁面布局等。

產(chǎn)出相應(yīng)的設(shè)計方案，畫出原型圖表達(dá)清楚產(chǎn)品的思路，在快速確認(rèn)需求后，確保產(chǎn)品與設(shè)計的溝通一致。

怎樣的1－－滴滴試駕產(chǎn)品設(shè)計

原型圖表達(dá)產(chǎn)品思路，便于溝通

我們與產(chǎn)品確認(rèn)了需求后，同視覺設(shè)計師一起協(xié)同工作，以原型圖的形式產(chǎn)出了關(guān)鍵的功能性頁面，確定基本功能點。原型圖用來進(jìn)行詳細(xì)設(shè)計和開發(fā)的評審，同時細(xì)化功能，每天迭代更新。

以乘客端選車功能為例，用戶選車在多種使用場景下出現(xiàn)，有不同深度的層級：

根據(jù)核心功能，我們在乘客端首頁給予選車最高優(yōu)先級，把用戶需求拆解并歸納，劃分為搜索、品牌直達(dá)、附近車型、專題介紹幾個功能。每一個入口都是對用戶所選車型不同粒度的展現(xiàn)，并且可以快速發(fā)單。

高保真原型走查全流程，查缺補(bǔ)漏

將所有的功能點拼接起來，繪制高保真原型。在此階段的產(chǎn)出，著重于各個功能點是否可以走通，有沒有功能的遺漏，操作邏輯是否合理，操作反饋等，并且在原型完成后召集了設(shè)計師們進(jìn)行測評。

迭代優(yōu)化

試駕業(yè)務(wù)的發(fā)單組件不同于通用業(yè)務(wù)，需要在選定車型的基礎(chǔ)上，選擇出發(fā)地點和出發(fā)時間。

有意思的是，站在試駕乘客的角度上，我們發(fā)現(xiàn)選擇自動/手動車型的必要性；站在試駕車主的角度上，我們明白了出發(fā)時間可變通的理解難度，所以著重在這兩點上進(jìn)行了優(yōu)化。另外，由于試駕業(yè)務(wù)的特殊性，提醒用戶攜帶駕照也是一個重要的需求。

設(shè)計差異化和一致性

設(shè)計過程中，要讓用戶體驗做到最優(yōu)，保持我們自己獨特的功能和使用感受；同時又要和滴滴出行平臺的設(shè)計風(fēng)格保持一致。

以首頁為例，前文已經(jīng)說明了從產(chǎn)品角度的規(guī)劃，設(shè)計師們按照需求的優(yōu)先級，定義了首頁的信息架構(gòu)和排版。除此之外，我們還在一些細(xì)節(jié)上進(jìn)行了求同存異的設(shè)計，以突出試駕本身的需求，例如評價的多維度設(shè)計，司機(jī)卡片的信息結(jié)構(gòu)，以及運營消息區(qū)的操作和新手引導(dǎo)。

從1到幾？－－總結(jié)

參與完整個滴滴試駕的產(chǎn)品設(shè)計，最大的感受除了產(chǎn)品本身的打磨和探索以外，更多的是對于自身職責(zé)的定位，與各個角色的合作，以及更大的預(yù)期。

在產(chǎn)品設(shè)計的前半段，交互設(shè)計師就是半個產(chǎn)品經(jīng)理，參與產(chǎn)品需求的討論，研究競品，提煉功能。

在確定了需求和相關(guān)流程之后，接下來的設(shè)計階段，設(shè)計師加入了理性的用戶體驗分析，并站在公共規(guī)范的立場上，去審視一些新的功能。

在設(shè)計的后期，是參與人員最多的階段，從產(chǎn)品經(jīng)理到設(shè)計師，再到開發(fā)，同一件事，不同的人往往有不同的角度去看待，吸收不同人員的看法，并站在自己專業(yè)的角度去分析和解決問題，是合作的最優(yōu)結(jié)果。

到了開發(fā)階段，由于需求的不斷優(yōu)化和開發(fā)中遇到的一些困難，設(shè)計師需要評估不同的方案，選取最適合當(dāng)前排期和目標(biāo)的解決辦法，并協(xié)調(diào)相關(guān)人員，跟進(jìn)各個開發(fā)環(huán)節(jié)，確保產(chǎn)品能夠高質(zhì)量的上線。

最后，對于產(chǎn)品和自己的預(yù)期，我希望是沒有邊界的，設(shè)計是為了解決問題，更多的專業(yè)積累和更高效的工作方式，會在試駕接下來的道路上帶來更好的產(chǎn)品體驗。

滴滴試駕1.0－界面篇

用戶需求背景

前?:做試駕項目之前，7月份，朋友看中一款車，買車之前需要前往4s店看真?、試?，但是需要預(yù)約、到店成本高、試駕時間短、獲取信息有限等諸多不好的體驗一直存在。 朋友這樣的一個經(jīng)歷，讓我們切?了用戶痛點，感受到了市場需求的強(qiáng)烈。

產(chǎn)品目標(biāo)定位

滴滴試駕可以為廠商和用戶解決這些問題，打造一個“移動4S店” ，未來的滴滴試駕將會以出?為?口，覆蓋用戶練?、買?、??、 車后、賣車全流程。

產(chǎn)品設(shè)計初期

設(shè)計師拿到交互稿應(yīng)該把?己的想法加進(jìn)產(chǎn)品設(shè)計中。那怎么培養(yǎng)想法？怎么體現(xiàn)設(shè)計師的價值？籠統(tǒng)的說，交互的?作重點表現(xiàn)在前期制定產(chǎn)品大框架的布局及功能模塊的復(fù)?和擴(kuò)展。相比交互，設(shè)計師更需要用視覺語言去表現(xiàn)一個?面的重點，信息的層級和整體風(fēng)格。而產(chǎn)?所有設(shè)計想法的來源有三點前提:

對產(chǎn)品和交互方案有足夠的了解。

肯花時間不斷打磨設(shè)計。

大量設(shè)計案例的積累。（如圖）

當(dāng)交互輸出了低保真原型圖后，可以從整體到細(xì)節(jié)仔細(xì)的審查。

整體，指哪些模塊或者信息和按鈕是復(fù)用的，在設(shè)計過程中就要保持他們的統(tǒng)一性。

細(xì)節(jié)，指每一個模塊的信息都要做到足夠清楚的了解，包括文字限定的字?jǐn)?shù)等。

高保真設(shè)計

高保真設(shè)計過程要點:

1.以iphone6尺寸做設(shè)計，設(shè)計過程中需要考慮低分辨率的適配情況，設(shè)計稿盡量展現(xiàn)極端數(shù)據(jù)情況。如果開發(fā)時間充?可以根據(jù)頁面的重要程度單獨開發(fā)小屏幕適配。

2.文字顏?/文字?小/按鈕等元素是否統(tǒng)一，規(guī)范中已有的是否復(fù)用，頁面的左右留白是否統(tǒng)一。

3.信息提煉與整合。做到一個頁面只表達(dá)一個重點。(如下圖)

案例分析：1)迭代中:把信息按?主和車兩個緯度進(jìn)行細(xì)分用卡?的樣式展現(xiàn)。缺點:卡?樣式占?過多的屏幕高度，并且?的信息和訂單的信息不應(yīng)該放在一個卡片中。 最終效果:車主和車的信息左右排列，重要級別相同清晰易操作。訂單信息單獨放在下面，不同情況訂單信息消失也不影響整體布局。

4.??的層級表達(dá)是否明確。(如下圖)

5.然后做減法，去掉一切不必要的分割線或?面。?用間距把空間關(guān)系表現(xiàn)出來。

6.中間迭代的版本做好備份，以備后期思路回顧。

視覺高速出前，整理成一個整張的流程頁面，審查視覺元素是否同意。并且方便后續(xù)溝通。

然后是輸出的過程:

1.輸出效果圖的切圖及標(biāo)注之前，需要找開發(fā)同學(xué)確認(rèn)復(fù)雜?面的實現(xiàn)方式。標(biāo)注與切圖的正確輸出形式。

2.切圖：OS的750的設(shè)計稿倒出@2x的圖片。6+的分辨率用@3x的圖片，但是在切圖時應(yīng)該注意的是軟件直接倒出的3x圖有的地方從1px變成了1.5px，這個時候應(yīng)該不依賴軟件，手動放?到3x的尺寸，以保證每一個像素都是正常不被模糊的。(如圖-示例圖1)

3.切圖的整理?式(如圖-示例圖2) 可以參考把所有需要切的圖放在一個psd文件，方便之后的查找和更改。

4.標(biāo)注：這個部分很重要也是很容易被忽略的部分。直接影響到上線前跟進(jìn)連調(diào)。開發(fā)效果與實際圖相差太大？除了標(biāo)注前與開發(fā)溝通，可以參考以下兩個用的點:

(標(biāo)注-左邊示例圖1)不以文字視覺的邊距做標(biāo)注，因為文字自帶間距，實際效果會比視覺圖大。以文字的大小做一個同樣高度的框，再細(xì)化框與框之間的間距。例如?字是36px，那就做?個36px?度的框，如圖中的粉色矩形。

(標(biāo)注-右邊?例圖2)需要居中的情況單獨注明，不需要標(biāo)上下的間距。如圖中標(biāo)大框的高寬750x268px后，隨后給開發(fā)寫明要求居中就可以。

文件整理

1.視覺流程圖文件夾，方便預(yù)覽整體概況。

2.按ios/android/h5分類，每一文件夾里面又單分jpg和psd文件夾。

3.單獨把所有的標(biāo)注和切圖分為一類。在后期跟進(jìn)的時候很方便的找到需要修改的標(biāo)注和切圖。

4.頻繁使?的單獨提出，例如圖中運營專題文件夾。

文件夾的整理，不僅能夠在工作中給自己提高效率，也讓之后接手的人不至于抓狂。如下圖。

規(guī)范的整理

第一類，試駕業(yè)務(wù)線規(guī)范。建立在端內(nèi)統(tǒng)一性的基礎(chǔ)上，并補(bǔ)充差異性設(shè)計。包括相同信息的排列/按鈕/分割線/icon/背景色/?字號。

第二類，輸出給商家看的規(guī)范。要做到符合需求并且實用。1)嚴(yán)格控制實物所占圖?區(qū)域比例，并給出詳細(xì)的比例規(guī)范。2)給出示例圖與原文件。3)規(guī)定好最終產(chǎn)出圖的尺?/數(shù)量/文件命名/?小的kb數(shù)。輸出之前需要與開發(fā)溝通確定無誤。(如圖-規(guī)范)

UI跟進(jìn)與推動

后期跟進(jìn)我們總結(jié)出3個步驟進(jìn)行,當(dāng)然這些方法也都有不完美的地方,等待我們?nèi)ネ晟啤?/p>

第?個階段，開發(fā)大神們在初期把設(shè)計稿寫進(jìn)代碼完成后，放出來的第一個安裝包我們進(jìn)行驗收，這個時候?家坐在一起包括rd、pm、qa。測試同學(xué)紀(jì)錄并了解問題，明確需要修改的問題，約定下一個包的走查時間，然后等第二個更全面的包的出爐。

第二個階段，這個階段問題應(yīng)該要少了很多，沿?用第一階段的模式，測試同學(xué)繼續(xù)記錄，明確rd需要修改的ui問題。這個階段ui、rd和qa更緊密的配合，需要溝通，溝通，還是溝通...必要時坐在一起當(dāng)面解決，這樣能更效率些。

第三個階段，也就是上線前，pm需要提供一個整塊兒的時間大家坐在小黑屋改ui bug。

產(chǎn)品展示-線上效果(產(chǎn)品動態(tài)展示-gif圖)

歷經(jīng)3個?，產(chǎn)品上線前，無論產(chǎn)品還是在視覺上都經(jīng)歷了多次迭代。在這個過程中，設(shè)計師不能只停留在視覺執(zhí)行層面，需要在產(chǎn)品，交互，表現(xiàn)技法，開發(fā)跟進(jìn)，項目推動上都有一個大的跨步，經(jīng)過實戰(zhàn)才能積累大量經(jīng)驗。

上線只是個開始，后面任重而道遠(yuǎn)。

滴滴試駕1.0－運營篇

滴滴試駕上線已半個月，在用戶感受便利試車的同時，作為設(shè)計團(tuán)隊，我們也在竭盡所能的讓產(chǎn)品獲得更多用戶的關(guān)注。于是，我們迎來了一波又一波的運營需求，其中最有感觸的就是“猜業(yè)務(wù)”這套線上運營活動。

這是一個一言難盡的過程。初衷是，作為滴滴第七大業(yè)務(wù)，我們想在上線之前給用戶留出懸念，讓他們猜一猜，我們到底會干什么，但又不能讓用戶直接猜出來。

于是在8月份，我們擬定了這樣一個方案，“滴滴邀你猜一猜”

“滴滴飛船”、“滴滴送藥”、“滴滴洗車”、“滴滴大廚”、“滴滴美甲”...等等這類有一定道理可以出現(xiàn)的產(chǎn)品，我們讓用戶去選擇我們會上什么。

然?，我們發(fā)現(xiàn)這樣會low掉...從猜想內(nèi)容選擇上，網(wǎng)絡(luò)上已有大量的營銷鋪墊和類似的產(chǎn)品猜想，我們其實并沒有做到創(chuàng)新。從結(jié)果上，我們很難想象出一個用戶猜了7天全部猜錯然而真相并不在答案?這件事。從視覺表現(xiàn)上，我們覺得并沒有達(dá)到理想的效果，至少還能再嘗試改變。

隨著產(chǎn)品策略迭代和運營需求的增加，8?份，我們嘗試換了一種呈現(xiàn)風(fēng)格。

目的是將試駕的幾類特性以間接的?式展現(xiàn)出來，又不至于一下曝光。因此擬了“前所未見”、“?感最好”、“多不勝選”、“觸碰夢想”、“不當(dāng)乘客”五個關(guān)注點。然而，我們再次遇到了阻礙，模特的服裝、表現(xiàn)和現(xiàn)場的拍攝環(huán)境沒有達(dá)到理想的狀態(tài)，而把這樣的視覺和插圖結(jié)合后，放在app端內(nèi)，依然沒有高級的效果。

這個版本其實代價最高，我們租用了場地和模特、跑車，拍了一整天。于此同時，我們也出了一版純插圖的版本。

在這樣的上線前期，我們嘗試了素材、真人、插圖等多種展示方式，消耗了大量精力時間，目的只有一個，就是讓用戶不僅有一眼驚喜還會對試駕這個產(chǎn)品本身認(rèn)可及產(chǎn)生興趣。

我們陷?了深深思考，總是差了一點，到底問題出在哪？ 其實運營專題之所以能被傳播，最重要的一個點就是深?人心。而深?的方式?非是有趣、有爭議、有深意、或有實際的益處。我們最終選擇了有趣和有益處，在國慶后，正式上線了這樣一個版本：

“倒數(shù)四天，這是個很可能動起手來的計劃”顧名思義，我們放了很多需要動手的工具，用戶摸不著頭腦但會覺得有點意思。

“倒數(shù)三天，這是個可以滿?你所有癖好的計劃”我們加?了大量個?喜好方向的素材、有品質(zhì)的、也有隱晦的。

“倒數(shù)二天，這是個不拿乘客當(dāng)乘客的計劃”乘客自?開車，當(dāng)然不把你當(dāng)乘客!

“倒數(shù)一天，這是個很可能一見鐘情的計劃”也許開著開著，你就真的愛上的這款?型~

歷經(jīng)3個月，無論在創(chuàng)意還是在視覺上經(jīng)歷了多次慘烈顛覆，最終呈現(xiàn)了一套大家都較為接收，用戶反饋也較好的運營活動。

在這個過程中，產(chǎn)品同學(xué)會關(guān)注運營效果對產(chǎn)品的影響，運營同學(xué)會關(guān)注是否能滿?轉(zhuǎn)化，銷售同學(xué)關(guān)注是否滿足合作商的需求，品牌的同學(xué)關(guān)注是否能引起強(qiáng)烈的反響，是一個多?參與pk、多?都有介?決策的事件。我們從中受益匪淺，作為ue，再也不能停留在視覺執(zhí)?的層?，我們要在創(chuàng)意、文案、表現(xiàn)手法、效果預(yù)測上，都積攢大量的實戰(zhàn)經(jīng)驗。這樣我們可以更容易的把多?立場收納進(jìn)ue的視?內(nèi)，形成更為合理的產(chǎn)出。

“要從容地著?去做?件事，但一旦開始，就要堅持到底” －畢阿斯