PMCAFF（www.pmcaff.com）：互聯(lián)網(wǎng)產(chǎn)品社區(qū)，是百度，騰訊，阿里等產(chǎn)品經(jīng)理的學(xué)習(xí)交流平臺(tái)。定期出品深度產(chǎn)品觀察，互聯(lián)產(chǎn)品研究首選。

外包大師（www.waibaodashi.com）：要外包，找大師。PMCAFF旗下高質(zhì)量互聯(lián)網(wǎng)外包解決方案提供商。外包大師服務(wù)號(hào)：waibaodashi365

作者：滴滴出行CDX團(tuán)隊(duì) 微信號(hào)：diditaxiued

編者按：

滴滴在競(jìng)爭(zhēng)激烈的中國網(wǎng)約車市場(chǎng)取得勝利之后業(yè)務(wù)發(fā)展的十分迅速，從出租車業(yè)務(wù)已經(jīng)拓展到了快車、專車、順風(fēng)車、代駕等多項(xiàng)業(yè)務(wù)，駕車司機(jī)作為供需關(guān)系中重要的一端一直是滴滴的重點(diǎn)服務(wù)對(duì)象，產(chǎn)品上滴滴陸續(xù)上線了出租車司機(jī)端、專車/快車的司機(jī)端等多版司機(jī)端，不同客戶端的同時(shí)運(yùn)營也給產(chǎn)品的設(shè)計(jì)帶來了不小的挑戰(zhàn)。

如何統(tǒng)一產(chǎn)品的風(fēng)格體驗(yàn)、用戶認(rèn)知以及靈活適配各個(gè)業(yè)務(wù)的車主端是滴滴設(shè)計(jì)團(tuán)隊(duì)一直在探索的。本文是在滴滴車主端5.0大版本更新之后其設(shè)計(jì)團(tuán)隊(duì)對(duì)「工具與情懷」的再一次探討，如果你也想一同了解如何讓用戶通過產(chǎn)品更簡(jiǎn)單更直觀的觸達(dá)服務(wù)，本文值得一讀。

設(shè)計(jì)之前

司機(jī)端5.0框架

合而為一????

隨著業(yè)務(wù)的快速發(fā)展，滴滴從最初的出租車業(yè)務(wù)快速拓展到快車、專車、順風(fēng)車、代駕等多項(xiàng)業(yè)務(wù)，與之相應(yīng)的我們陸續(xù)上線了出租車司機(jī)端、專/快車的司機(jī)端等。

多版司機(jī)端同時(shí)運(yùn)營，即是人力物力和效率的消耗，在體驗(yàn)上也存在風(fēng)格難以統(tǒng)一，認(rèn)知不一致等問題。一版體驗(yàn)統(tǒng)一、統(tǒng)籌且靈活適配各個(gè)業(yè)務(wù)的車主端呼之欲出。

在設(shè)計(jì)之始我們梳理了每一條業(yè)務(wù)的功能點(diǎn)及發(fā)展訴求，將之重新整理，從中提煉共性，對(duì)比差異點(diǎn)，確保后期方案的兼容和擴(kuò)展性，我們知道司機(jī)的服務(wù)主流程在各個(gè)業(yè)務(wù)是具有共性的，但對(duì)于聽單、支付等部分環(huán)節(jié)存在業(yè)務(wù)差異性。

因此，我們把「合而為一，合而不同」作為本次設(shè)計(jì)升級(jí)重要命題。

了解用戶??

相較于其他的工具類應(yīng)用，滴滴司機(jī)在人群上更趨于集中：男性居多，7成的司機(jī)年齡在30-45歲之間，超過兩成的司機(jī)年齡超過45歲；

他們?cè)诩尤氲蔚沃?#xff0c;主要從事自由職業(yè)或普通個(gè)體戶等門檻相對(duì)較低收入不穩(wěn)定的工作，成為滴滴司機(jī)主要為了增加收入、時(shí)間自由同時(shí)期待被認(rèn)可；

這些人當(dāng)中有很大一部分是帶車加入，作為私家車車主，司機(jī)端為其提供了接單賺錢的平臺(tái)，而車后服務(wù)尚沒有很好解決。

用戶畫像

司機(jī) VS 車主

基于以上的分析，我們迫切需要思考跳出現(xiàn)有產(chǎn)品之外的用戶所具有的多重屬性：

• 接單工作

• 車生活服務(wù)

1、接單工作：基礎(chǔ)（主動(dòng)）屬性，也是用戶的核心訴求

2、車生活服務(wù)：被動(dòng)屬性，用戶帶車加入滴滴平臺(tái)，除了借平臺(tái)之力通過提供自身的資源和服務(wù)獲取相應(yīng)的報(bào)酬，作為車主的他們會(huì)更加頻繁的產(chǎn)生車后市場(chǎng)及相關(guān)的服務(wù)訴求，如：加油、車輛保養(yǎng)、維修等。

從”司機(jī)”到“車主”的轉(zhuǎn)變，既是業(yè)務(wù)上的擴(kuò)展，更是設(shè)計(jì)者對(duì)用戶及產(chǎn)品定義的認(rèn)知更新。

當(dāng)我們更加立體的去面對(duì)用戶，那么一個(gè)更加真實(shí)的用戶便呈現(xiàn)在設(shè)計(jì)師的面前。

用戶身份從“司機(jī)”向“車主”轉(zhuǎn)變

方案設(shè)計(jì)

結(jié)合上文的用戶分析，加之車主端的使用場(chǎng)景多為車內(nèi)移動(dòng)環(huán)境，不確定性和干擾因素較多，我們定義了本次設(shè)計(jì)的關(guān)鍵詞：簡(jiǎn)單、高效、成就感。

設(shè)計(jì)關(guān)鍵詞

簡(jiǎn)單：應(yīng)用在復(fù)雜環(huán)境下的信息傳達(dá)應(yīng)盡量明確直白，避免產(chǎn)生歧義，避免多余的思考

高效：體驗(yàn)驅(qū)動(dòng)效率提升，通過線上明確的信息引導(dǎo)與有效的操作促使高效品質(zhì)的線下服務(wù)

成就感：任務(wù)完成、收入進(jìn)賬、得到獎(jiǎng)勵(lì)等貫穿全流程的節(jié)點(diǎn)細(xì)節(jié)設(shè)計(jì)突出用戶成就感，在情感上的觸達(dá)用戶

圍繞以上關(guān)鍵詞，在整個(gè)設(shè)計(jì)過程我們一直會(huì)堅(jiān)持「所觀即所需，所觸即所達(dá)」的理念。

連接線上線下的交互行為設(shè)計(jì)

在交互框架設(shè)計(jì)過程中，我們梳理出三個(gè)需要解決的問題：

• 多業(yè)務(wù)融合與保持業(yè)務(wù)場(chǎng)景獨(dú)立性

• 舊版司機(jī)端的用戶到新版車主端的遷移成本以及新用戶的上手成本

• 如何清晰引導(dǎo)用戶在復(fù)雜場(chǎng)景及復(fù)雜任務(wù)下的無障礙使用

回答以上問題，我們總結(jié)出了三條設(shè)計(jì)思路：

• 穩(wěn)定的框架流程+靈活可適配業(yè)務(wù)和場(chǎng)景的組件??

• 適應(yīng)車內(nèi)場(chǎng)景的信息展現(xiàn)和信息操作結(jié)構(gòu)（信息分層），以及貫穿流程的結(jié)構(gòu)一致性

• 以聽為主

設(shè)計(jì)方向

一、框架與組件

在前期的分析中我們提到快車、出租車、專車等業(yè)務(wù)在主任務(wù)流程上趨于一致，都可歸納為出車——聽單中——接單——去接乘客——接到乘客——行程中——行程結(jié)束這樣的線性流程。

僅在部分流程節(jié)點(diǎn)上存在業(yè)務(wù)差異，如：接單環(huán)節(jié)快車存在搶單、指派、極速訂單多個(gè)類型，而專車則對(duì)訂單服務(wù)要求有特殊需求；再如行程結(jié)束后的專車快車是線上支付，而出租車則是既可線上支付也可現(xiàn)金支付。

因此，我們定義頁面框架時(shí)強(qiáng)調(diào)線性流程的一致性，對(duì)于流程節(jié)點(diǎn)的差異性則通過不同的組件來滿足。

組件與框架

將應(yīng)用比作一個(gè)四維空間：每一個(gè)頁面是一個(gè)層級(jí)清晰的三維結(jié)構(gòu)，步驟流則是第四維度。

頁面層級(jí)

二、結(jié)構(gòu)穩(wěn)定、信息分層

車主端主流程具有主線性少分支的特點(diǎn)，因此在每一個(gè)節(jié)點(diǎn)都可提取出核心操作，以穩(wěn)定的結(jié)構(gòu)劃分向用戶傳達(dá)統(tǒng)一的界面語言和交互感知。

主流程頁面歸納為統(tǒng)一穩(wěn)定的結(jié)構(gòu)

車主端的另一個(gè)特色是強(qiáng)管控強(qiáng)調(diào)度，因此信息會(huì)不斷的貫穿始末的下發(fā)給車主，其中包括來自系統(tǒng)推送的信息、當(dāng)前的任務(wù)/管控信息、大區(qū)等渠道的運(yùn)營信息等，這些信來源多樣，類別紛雜；全盤呈現(xiàn)必會(huì)導(dǎo)致用戶接受信息超載而不知所措。

基于這樣的現(xiàn)狀，設(shè)計(jì)師對(duì)現(xiàn)有信息進(jìn)行打散-歸類重新整合，將信息按重要度劃分為三個(gè)等級(jí)，以三種形式的任務(wù)卡片承載司機(jī)端全部信息：模態(tài)任務(wù)卡片、非模態(tài)任務(wù)卡片、普通信息卡片。

三種任務(wù)卡片

模態(tài)全屏卡片：

最高優(yōu)且不可跳過信息任務(wù)，此類信息要求車主完成當(dāng)下任務(wù)后繼續(xù)其他操作。

非模態(tài)任務(wù)卡片：高優(yōu)但不緊急，需要用戶第一時(shí)間注意到但可在當(dāng)下跳過的信息類別。

普通信息卡片：非高優(yōu)且不緊急，用戶關(guān)注時(shí)可見。

通過以上三種形式的設(shè)計(jì)可實(shí)現(xiàn)多來源/大信息量下的高效信息管理，但每類信息卡片依然需兼容多類型信息要求，對(duì)于這樣的單個(gè)信息組件，我們通過提煉共性、結(jié)構(gòu)化處理的方式來兼容差異。

三、以聽為主

我們常說信息流，“滑動(dòng)”瀏覽是這類應(yīng)用里用戶常常進(jìn)行的交互行為，對(duì)于車主端而言，通常的使用場(chǎng)景便是在行車過程中，因此“聽”便成為車主們“瀏覽”信息的一種慣用交互行為。

如何設(shè)計(jì)“聽”是設(shè)計(jì)師們必修的一課。

我們做的第一步是對(duì)全流程信息進(jìn)行梳理，并對(duì)需要“聽”的節(jié)點(diǎn)做出標(biāo)記：

以聽為主的場(chǎng)景

明確了語音節(jié)點(diǎn)后，梳理全部信息并為其歸類劃分，如：反饋、指引、消息；根據(jù)信息特性定義表達(dá)形式，如：擬聲、播報(bào)；所有語音信息都需滿足可識(shí)別性強(qiáng)、表意清晰的原則，對(duì)聲音的設(shè)計(jì)也是連接應(yīng)用與用戶情感的紐帶。

行駛中使用聽的情況

相較于主動(dòng)去“看”，“聽”是一種默認(rèn)的被動(dòng)的行為，可以輕松的讓用戶的耳朵聽到信息，卻難以保證用戶的大腦是否聽到了，因此，問題便進(jìn)一步聚焦到如何讓用戶“聽到”。

心理學(xué)中關(guān)于引發(fā)意識(shí)需要誘因刺激，因此在重要播報(bào)前增加“誘因”音的設(shè)計(jì)可有效保障信息被獲取。

行駛中使用聽的情況

視覺呈現(xiàn)

一、品牌延續(xù)

在整個(gè)滴滴大的品牌基調(diào)下，滴滴車主端5.0視覺設(shè)計(jì)延續(xù)滴滴品牌整體的設(shè)計(jì)氣質(zhì)，以親和、易用、科技為主要設(shè)計(jì)方向。

車主端整體界面設(shè)計(jì)，基于滴滴品牌規(guī)范以及車主端用戶的特殊屬性，最終以滴滴品牌色為色彩推導(dǎo)基礎(chǔ)，匹配具有統(tǒng)一色彩傾向的深灰色為輔助，構(gòu)建起整體的界面設(shè)計(jì)色彩系統(tǒng)。

車主端在保證與主品牌氣質(zhì)統(tǒng)一的前提下，也保持了自己設(shè)計(jì)的獨(dú)立性，這樣既保證了橫向主品牌對(duì)外展現(xiàn)的一致性，同時(shí)也保證了縱向產(chǎn)品線視覺展現(xiàn)的差異化，從而使車主端能夠更好地服務(wù)于公司主品牌以及自己獨(dú)立的目標(biāo)用戶群體，成為滴滴產(chǎn)品線中即獨(dú)立又統(tǒng)一的一部分。

車主端5.0開屏引導(dǎo)圖

二、設(shè)計(jì)推演

1、界面構(gòu)成

通過前期車主端用戶調(diào)研和真實(shí)的場(chǎng)景路測(cè)，我們發(fā)現(xiàn)車主在使用App期間，往往處于一種不穩(wěn)定且復(fù)雜多變的使用場(chǎng)景下，所以針對(duì)這種典型的使用場(chǎng)景，車主端的界面構(gòu)成主要從兩個(gè)方面去解決這個(gè)問題。

拉開功能模塊之間的視覺關(guān)系

新的車主端加強(qiáng)了視覺上模塊化的功能展示，讓用戶可以更快更高效的區(qū)分界面中的功能區(qū)域。同時(shí)界面也更多的使用深色背景對(duì)重要的數(shù)據(jù)信息和關(guān)鍵操作進(jìn)行展示，加強(qiáng)信息與信息之間的視覺對(duì)比度，進(jìn)而提高數(shù)據(jù)的識(shí)別性和界面在復(fù)雜環(huán)境下的通用性。

加強(qiáng)關(guān)鍵操作和主要信息的展示面積

新的車主端加大了整個(gè)主流程中所有的操作按鈕的視覺面積，保證車主在任何場(chǎng)景下都可以準(zhǔn)確快速的做出操作，同時(shí)針對(duì)每個(gè)關(guān)鍵節(jié)點(diǎn)的信息重要性在視覺上做出區(qū)分，減少用戶的閱讀負(fù)擔(dān)，提高用戶的閱讀效率。

車主端5.0頁面構(gòu)成

2、顏色·字體

車主端5.0整體的配色方案選擇HSB色彩模式進(jìn)行色彩推演。除主品牌色以外，所有輔助色及字體配色均保持相同的色彩傾向，H(hues色相)上保持絕對(duì)統(tǒng)一。再根據(jù)具體的界面和應(yīng)用場(chǎng)景，梳理出相對(duì)應(yīng)的S(saturation飽和度) B(brightness明度) 的推演區(qū)間和推演規(guī)則，最終產(chǎn)出完整的色彩系統(tǒng)。

字體基于整體司機(jī)端用戶群體的特殊性，整體字號(hào)較大，字號(hào)基于4的整數(shù)倍進(jìn)行推導(dǎo)，再根據(jù)文字的信息展示屬性進(jìn)行字號(hào)區(qū)間分類，最終構(gòu)建起字體規(guī)范系統(tǒng)。

車主端5.0色彩規(guī)范

3、圖標(biāo)構(gòu)成

車主端5.0圖標(biāo)的設(shè)計(jì)理念是：“讓圖標(biāo)像馬路標(biāo)識(shí)一樣引導(dǎo)司機(jī)操作”在圖標(biāo)前期的設(shè)計(jì)探索中我們發(fā)現(xiàn)，很多車主本身對(duì)陌生的圖標(biāo)設(shè)計(jì)語言識(shí)別是有困難的，但是對(duì)馬路上的公共交通標(biāo)識(shí)卻十分熟息，所以我們將馬路標(biāo)識(shí)中：簡(jiǎn)潔、直白、硬朗的設(shè)計(jì)特點(diǎn)抽離出來，融入到我們新的圖標(biāo)設(shè)計(jì)當(dāng)中。

讓新的圖標(biāo)設(shè)計(jì)給司機(jī)一種親切熟悉的感覺，減少車主的認(rèn)知學(xué)習(xí)成本，提高圖標(biāo)的辨識(shí)效率，使車主快速地過渡到新的圖標(biāo)系統(tǒng)上來。

車主端5.0ICON規(guī)范

4、動(dòng)效構(gòu)成

合適恰當(dāng)?shù)膭?dòng)效可以幫助用戶更好的理解產(chǎn)品邏輯提高操作使用效率，反之就會(huì)傷害整體用戶的操作體驗(yàn)。因此，整體的車主端5.0動(dòng)效都是圍繞以下四項(xiàng)基本原則展開，以此來保證整體動(dòng)效的準(zhǔn)確統(tǒng)一。

• 具有相同產(chǎn)品或交互邏輯的功能界面動(dòng)效統(tǒng)一（保證全局動(dòng)效的一致性）；

• 功能信息需要有節(jié)奏有層次的展示（提高信息的識(shí)別效率和識(shí)別準(zhǔn)確性）；

• 動(dòng)效如何發(fā)生就如何結(jié)束（保證用戶操作使用時(shí)對(duì)產(chǎn)品邏輯關(guān)系的清晰）；

• 每個(gè)界面不使用超過兩種及以上的動(dòng)效（控制并且減少動(dòng)效帶來的不必要的信息負(fù)擔(dān)）。

在對(duì)動(dòng)效進(jìn)行約束的同時(shí)，我們也對(duì)動(dòng)效進(jìn)行了性質(zhì)上的劃分，從而更好地歸納總結(jié)出組件與組件，界面與界面之間的動(dòng)效關(guān)系，方便大家理解運(yùn)用。

車主端5.0動(dòng)效規(guī)范

5、導(dǎo)航構(gòu)成

地圖導(dǎo)航對(duì)于車主來說就是車主的眼睛，對(duì)車主駕駛有極大的輔助作用。這次我們也針對(duì)司機(jī)端的地圖導(dǎo)航做了整體的視覺的優(yōu)化和升級(jí)。

局部上優(yōu)化了車道線視覺以及重繪了指向性引導(dǎo)圖標(biāo)的視覺，使整體的導(dǎo)航體驗(yàn)更加準(zhǔn)確流暢。

整體上優(yōu)化了地圖日間效果，提高了地圖在日光下的信息展示通用性，并且新版本還增加了地圖導(dǎo)航的夜間模式，方便司機(jī)在夜間更加沉浸式的體驗(yàn)導(dǎo)航服務(wù)。

車主端5.0 導(dǎo)航

方案測(cè)試

設(shè)計(jì)過程中及時(shí)融入方案測(cè)試可以有效的幫助設(shè)計(jì)師發(fā)現(xiàn)問題并調(diào)整方案。

車內(nèi)環(huán)境測(cè)試：將設(shè)計(jì)demo帶入車內(nèi)環(huán)境，在車內(nèi)場(chǎng)景下自測(cè)設(shè)計(jì)可行性，如白天光照強(qiáng)烈要求界面顯性化且低反光，而夜間昏暗環(huán)境下界面對(duì)比清晰不刺眼。反復(fù)的將設(shè)計(jì)界面拿到車內(nèi)測(cè)試得出最優(yōu)方案。

場(chǎng)景測(cè)試

可用性測(cè)試：主流程設(shè)計(jì)完成后，我們制作典型業(yè)務(wù)主流程的可交互原型，每個(gè)業(yè)務(wù)挑選6名代表性用戶，用戶涵蓋各年齡層（30~50歲），不同手機(jī)系統(tǒng)（蘋果+安卓），不同使用經(jīng)驗(yàn)（加盟時(shí)間1個(gè)月~4年），制定并觀察他們完成任務(wù)，從中發(fā)現(xiàn)可用性問題并解決這些問題。

可用性測(cè)試

統(tǒng)一車主端即將上線，后續(xù)設(shè)計(jì)師會(huì)持續(xù)跟蹤上線后的數(shù)據(jù)反饋，用定性的數(shù)據(jù)結(jié)合定量驗(yàn)證結(jié)構(gòu)，小步快速持續(xù)迭代方案。

最后，我們一直認(rèn)為設(shè)計(jì)師最初是讓這個(gè)世界來讀懂自己，再往后就需要引導(dǎo)你的用戶去理解這個(gè)世界。如何讓用戶通過我們的產(chǎn)品更簡(jiǎn)單更直觀的觸達(dá)服務(wù)，是做為產(chǎn)品人不懈的追求。

優(yōu)質(zhì)內(nèi)容推薦

▲點(diǎn)擊圖片閱讀

俞軍：為什么多數(shù)產(chǎn)品經(jīng)理都不合格

▲點(diǎn)擊圖片閱讀

3個(gè)提問，500個(gè)回答，“俘獲”俞軍的姿勢(shì)有哪些？

點(diǎn)擊閱讀原文，獲取5000個(gè)成熟解決方案

中高端求職 & 招聘，PMCAFF人才服務(wù)最懂你

=> alice.zhang@pmcaff.com

總結(jié)

以上是生活随笔為你收集整理的滴滴司机端大更新并公布了一份设计方案！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。