滴滴車(chē)主端5.0全新升級(jí)設(shè)計(jì)思考

 

為每一位，行駛在路上的你

 

前言

      “我每天出車(chē)8-10個(gè)小時(shí)”

       “一天能接十好幾單呢”

       “幫了別人還賺了錢(qián)，這活兒很自由”

         …

         作為滴滴的設(shè)計(jì)師打車(chē)的時(shí)候總習(xí)慣和司機(jī)聊上了兩句，他們背景不同，性格迥異，出于各式各樣的理由選擇了這份職業(yè)，一輛車(chē)，一部手機(jī)，一天10個(gè)小時(shí)，如此周而復(fù)始地他們?yōu)榈蔚螖?shù)億級(jí)乘客提供服務(wù)，而我們所做的則是為他們提供幫助。滴滴車(chē)主端所承載的不僅是車(chē)主用戶(hù)的接單工具，更是漫漫長(zhǎng)路上的一種陪伴，面對(duì)統(tǒng)一車(chē)主端的升級(jí)，我們將再次探討“工具與情懷”二者相輔相成，相與為一的關(guān)系，希望統(tǒng)一車(chē)主端能成為好用的工具，貼心的陪伴。

        

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

 

司機(jī)端5.0產(chǎn)品框架

 

·合而為一

        隨著業(yè)務(wù)的快速發(fā)展，滴滴從最初的出租車(chē)業(yè)務(wù)快速拓展到快車(chē)、專(zhuān)車(chē)、順風(fēng)車(chē)、代駕等多項(xiàng)業(yè)務(wù)，與之相應(yīng)的我們陸續(xù)上線了出租車(chē)司機(jī)端、專(zhuān)/快車(chē)的司機(jī)端等，多版司機(jī)端同時(shí)運(yùn)營(yíng)，即是人力物力和效率的消耗，在體驗(yàn)上也存在風(fēng)格難以統(tǒng)一，認(rèn)知不一致等問(wèn)題。一版體驗(yàn)統(tǒng)一、統(tǒng)籌且靈活適配各個(gè)業(yè)務(wù)的車(chē)主端呼之欲出。

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

 

·了解用戶(hù)

        相較于其他的工具類(lèi)應(yīng)用，滴滴司機(jī)在人群上更趨于集中：男性居多，7成的司機(jī)年齡在30-45歲之間，超2成的司機(jī)年齡超過(guò)45歲，他們?cè)诩尤氲蔚沃埃饕獜氖伦杂陕殬I(yè)

或普通個(gè)體戶(hù)等門(mén)檻相對(duì)較低收入不穩(wěn)定的工作，成為滴滴司機(jī)主要為了增加收入、時(shí)間自由同時(shí)期待被認(rèn)可；這些人中很大一部分是帶車(chē)加入，作為私家車(chē)車(chē)主，司機(jī)端為其提供了接單賺錢(qián)的平臺(tái)，而車(chē)后服務(wù)尚沒(méi)有很好解決。

 

 

用戶(hù)畫(huà)像

 

·司機(jī)vs車(chē)主

 

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

 

        →接單工作

        →車(chē)生活服務(wù)

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

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

        從“司機(jī)”到“車(chē)主”的轉(zhuǎn)變，既是業(yè)務(wù)上的擴(kuò)展，更是作為設(shè)計(jì)者的我們對(duì)用戶(hù)及產(chǎn)品定義的認(rèn)知更新。當(dāng)我們更加立體的去面對(duì)用戶(hù)，那么一個(gè)更加真實(shí)的用戶(hù)便呈現(xiàn)在設(shè)計(jì)師的面前。

 

 

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

 

 

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

 

        結(jié)合上文的用戶(hù)分析，加之車(chē)主端的使用場(chǎng)景多為車(chē)內(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)效率提升，通過(guò)線上明確的信息引導(dǎo)與有效的操作促使高效品質(zhì)的線下服務(wù)

        ·成就感：

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

        圍繞以上關(guān)鍵詞，在整個(gè)設(shè)計(jì)過(guò)程我們將時(shí)刻秉持：所觀即所需，所觸即所達(dá)的理念

 

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

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

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

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

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

 

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

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

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

        ·以聽(tīng)為主

 

 

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

 

一、框架與組件

 

       在前期的分析中我們提到快車(chē)、出租車(chē)、專(zhuān)車(chē)等業(yè)務(wù)在主任務(wù)流程上趨于一致，都可歸納為出車(chē)-聽(tīng)單中-接單-去接乘客-接到乘客-行程中-行程結(jié)束這樣的線性流程；僅在部分流程節(jié)點(diǎn)上存在業(yè)務(wù)差異，如：接單環(huán)節(jié)快車(chē)存在搶單、指派、極速訂單多個(gè)類(lèi)型，而專(zhuān)車(chē)則對(duì)訂單服務(wù)要求有特殊需求；再如行程結(jié)束后的專(zhuān)車(chē)快車(chē)是線上支付，而出租車(chē)則是既可線上支付也可現(xiàn)金支付。因此，我們定義頁(yè)面框架時(shí)強(qiáng)調(diào)線性流程的一致性，對(duì)于流程節(jié)點(diǎn)的差異性則通過(guò)不同的組件來(lái)滿(mǎn)足。

 

 

組件與框架

 

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

 

 

頁(yè)面層級(jí)

 

 

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

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

 

 

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

 

        車(chē)主端的另一個(gè)特色是強(qiáng)管控強(qiáng)調(diào)度，因此信息會(huì)不斷的貫穿始末的下發(fā)給車(chē)主，其中包括來(lái)自系統(tǒng)推送的信息、當(dāng)前的任務(wù)/管控信息、大區(qū)等渠道的運(yùn)營(yíng)信息等，這些信息來(lái)源多樣，類(lèi)別紛雜；全盤(pán)呈現(xiàn)必會(huì)導(dǎo)致用戶(hù)接受信息超載而不知所措，基于這樣的現(xiàn)狀，設(shè)計(jì)師對(duì)現(xiàn)有信息進(jìn)行打散歸類(lèi)重新整合，將信息按重要度劃分為三個(gè)等級(jí)，以三種形式的任務(wù)卡片承載司機(jī)端全部信息：模態(tài)任務(wù)卡片、非模態(tài)任務(wù)卡片、普通信息卡片

 

 

三種任務(wù)卡片

 

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

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

·非模態(tài)任務(wù)卡片：

        高優(yōu)但不緊急，需要用戶(hù)第一時(shí)間注意到但可在當(dāng)下跳過(guò)的信息類(lèi)別

·普通信息卡片：

        非高優(yōu)且不緊急，用戶(hù)關(guān)注時(shí)可見(jiàn)

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

 

三、以聽(tīng)為主

        我們常說(shuō)信息流，“滑動(dòng)”瀏覽是這類(lèi)應(yīng)用里用戶(hù)常常進(jìn)行的交互行為，對(duì)于車(chē)主端而言，通常的使用場(chǎng)景便是在行車(chē)過(guò)程中，因此“聽(tīng)”便成為車(chē)主們“瀏覽”信息的一種慣用交互行為。如何設(shè)計(jì)“聽(tīng)”是設(shè)計(jì)師們必修的一課。

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

    

 

 

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

 

       明確了語(yǔ)音節(jié)點(diǎn)后，梳理全部信息并為其歸類(lèi)劃分，如：反饋、指引、消息；

       根據(jù)信息特性定義表達(dá)形式，如：擬聲、播報(bào)；

       所有語(yǔ)音信息都需滿(mǎn)足可識(shí)別性強(qiáng)、表意清晰的原則，對(duì)聲音的設(shè)計(jì)也是連接應(yīng)用與用戶(hù)情感的紐帶。

 

 

行駛中使用聽(tīng)的情況

 

        相較于主動(dòng)去“看”，“聽(tīng)”是一種默認(rèn)的被動(dòng)的行為，可以輕松的讓用戶(hù)的耳朵聽(tīng)到信息，卻難以保證用戶(hù)的大腦是否聽(tīng)到了，因此，問(wèn)題便進(jìn)一步聚焦到如何讓用戶(hù)“聽(tīng)到”。心理學(xué)中關(guān)于引發(fā)意識(shí)需要誘因刺激，因此在重要播報(bào)前增加“誘因”音的設(shè)計(jì)可有效保障信息被獲取。

 

行駛中使用聽(tīng)的情況

 

·視覺(jué)呈現(xiàn)

一、品牌延續(xù)

       在整個(gè)滴滴大的品牌基調(diào)下，滴滴車(chē)主端5.0視覺(jué)設(shè)計(jì)延續(xù)滴滴品牌整體的設(shè)計(jì)氣質(zhì)，以親和、易用、科技為主要設(shè)計(jì)方向。車(chē)主端整體界面設(shè)計(jì)，基于滴滴品牌規(guī)范以及車(chē)主端用戶(hù)的特殊屬性，最終以滴滴品牌色為色彩推導(dǎo)基礎(chǔ)，匹配具有統(tǒng)一色彩傾向的深灰色為輔助，構(gòu)建起整體的界面設(shè)計(jì)色彩系統(tǒng)。車(chē)主端在保證與主品牌氣質(zhì)統(tǒng)一的前提下，也保持了自己設(shè)計(jì)的獨(dú)立性，這樣即保證了橫向主品牌對(duì)外展現(xiàn)的一致性，同時(shí)也保證了縱向產(chǎn)品線視覺(jué)展現(xiàn)的差異化，從而使車(chē)主端能夠更好地服務(wù)于公司主品牌以及自己獨(dú)立的目標(biāo)用戶(hù)群體，成為滴滴產(chǎn)品線中即獨(dú)立又統(tǒng)一的一部分。

 

 

車(chē)主端5.0開(kāi)屏引導(dǎo)圖

 

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

1.界面構(gòu)成

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

       第一，拉開(kāi)功能模塊之間的視覺(jué)關(guān)系

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

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

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

 

 

車(chē)主端5.0頁(yè)面構(gòu)成

 

2.顏色·字體

       車(chē)主端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ù)群體的特殊性，整體字號(hào)較大，字號(hào)基于4的整數(shù)倍進(jìn)行推導(dǎo)，再根據(jù)文字的信息展示屬性進(jìn)行字號(hào)區(qū)間分類(lèi)，最終構(gòu)建起字體規(guī)范系統(tǒng)。

 

 

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

 

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

       車(chē)主端5.0圖標(biāo)的設(shè)計(jì)理念是：“讓圖標(biāo)像馬路標(biāo)識(shí)一樣引導(dǎo)司機(jī)操作”在圖標(biāo)前期的設(shè)計(jì)探索中我們發(fā)現(xiàn)，很多車(chē)主本身對(duì)陌生的圖標(biāo)設(shè)計(jì)語(yǔ)言識(shí)別是有困難的，但是對(duì)馬路上的公共交通標(biāo)識(shí)卻十分熟息，所以我們將馬路標(biāo)識(shí)中：簡(jiǎn)潔、直白、硬朗的設(shè)計(jì)特點(diǎn)抽離出來(lái)，融入到我們新的圖標(biāo)設(shè)計(jì)當(dāng)中，讓新的圖標(biāo)設(shè)計(jì)給司機(jī)一種親切熟息的感覺(jué)，減少車(chē)主的認(rèn)知學(xué)習(xí)成本，提高圖標(biāo)的辨識(shí)效率，使車(chē)主快速的過(guò)渡到新的圖標(biāo)系統(tǒng)上來(lái)。

 

 

車(chē)主端5.0ICON規(guī)范

 

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

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

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

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

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

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

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

 

 

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

 

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

        地圖導(dǎo)航對(duì)于車(chē)主來(lái)說(shuō)就是車(chē)主的眼睛，對(duì)車(chē)主駕駛有極大的輔助作用。這次我們也針對(duì)司機(jī)端的地圖導(dǎo)航做了整體的視覺(jué)的優(yōu)化和升級(jí)。局部上優(yōu)化了車(chē)道線視覺(jué)以及重繪了指向性引導(dǎo)圖標(biāo)的視覺(jué)，使整體的導(dǎo)航體驗(yàn)更加準(zhǔn)確流暢。整體上優(yōu)化了地圖日間效果，提高了地圖在日光下的信息展示通用性，并且新版本還增加了地圖導(dǎo)航的夜間模式，方便司機(jī)在夜間更加沉浸式的體驗(yàn)導(dǎo)航服務(wù)。

 

車(chē)主端5.0地圖導(dǎo)航

 

·方案測(cè)試

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

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

 

 

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

 

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

 

 

可用性測(cè)試

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

 

 

結(jié)語(yǔ) · 在路上

 

        這次的改版是我們一直想做的一次設(shè)計(jì)，司機(jī)的群體是一群在路上的群體，披星而出，戴月而歸；對(duì)于大多數(shù)專(zhuān)快司機(jī)來(lái)說(shuō)，滴滴已經(jīng)是他們謀生的手段，我們見(jiàn)過(guò)很多司機(jī)師傅在惡略天氣城市運(yùn)力嚴(yán)重下降的情況下依然出車(chē)，再偏遠(yuǎn)的單子也要送乘客安全到達(dá)，拼車(chē)乘客遲到也要繼續(xù)等到乘客，怎么讓這份工作更有尊嚴(yán)，更體面，是我們接下來(lái)要做的事情，更人性化的線下服務(wù)，更平等的規(guī)則，不僅僅讓每一位乘客安全到家，更需要保證在路上的每一位司機(jī)師傅平安到家。

        滴滴CDX創(chuàng)意設(shè)計(jì)團(tuán)隊(duì)一直秉承讓設(shè)計(jì)產(chǎn)生價(jià)值，向前一步的設(shè)計(jì)理念，在出行行業(yè)五年的深耕，讓我們不僅僅只是設(shè)計(jì)支撐，在體驗(yàn)閉環(huán)甚至體驗(yàn)決策上有更大的話語(yǔ)權(quán)，本次司機(jī)端的改版讓我們?cè)诋a(chǎn)品全案設(shè)計(jì)上邁出了第一步。

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

 

 

文章來(lái)源：http://www.zcool.com.cn/article/ZNTEwMDQ0.html