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

 

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

 

前言

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

       “一天能接十好幾單呢”

       “幫了別人還賺了錢，這活兒很自由”

         …

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

        

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

 

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

 

·合而為一

        隨著業(yè)務(wù)的快速發(fā)展，滴滴從最初的出租車業(yè)務(wù)快速拓展到快車、專車、順風(fēng)車、代駕等多項(xiàng)業(yè)務(wù)，與之相應(yīng)的我們陸續(xù)上線了出租車司機(jī)端、專/快車的司機(jī)端等，多版司機(jī)端同時(shí)運(yùn)營(yíng)，即是人力物力和效率的消耗，在體驗(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歲之間，超2成的司機(jī)年齡超過45歲，他們?cè)诩尤氲蔚沃?，主要從事自由職業(yè)

或普通個(gè)體戶等門檻相對(duì)較低收入不穩(wěn)定的工作，成為滴滴司機(jī)主要為了增加收入、時(shí)間自由同時(shí)期待被認(rèn)可；這些人中很大一部分是帶車加入，作為私家車車主，司機(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ì)過程我們將時(shí)刻秉持：所觀即所需，所觸即所達(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)營(yíng)信息等，這些信息來源多樣，類別紛雜；全盤呈現(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ù)迭代方案。

 

 

結(jié)語 · 在路上

 

        這次的改版是我們一直想做的一次設(shè)計(jì)，司機(jī)的群體是一群在路上的群體，披星而出，戴月而歸；對(duì)于大多數(shù)?？焖緳C(jī)來說，滴滴已經(jīng)是他們謀生的手段，我們見過很多司機(jī)師傅在惡略天氣城市運(yùn)力嚴(yán)重下降的情況下依然出車，再偏遠(yuǎn)的單子也要送乘客安全到達(dá)，拼車乘客遲到也要繼續(xù)等到乘客，怎么讓這份工作更有尊嚴(yán)，更體面，是我們接下來要做的事情，更人性化的線下服務(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)決策上有更大的話語權(quán)，本次司機(jī)端的改版讓我們?cè)诋a(chǎn)品全案設(shè)計(jì)上邁出了第一步。

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

 

 

文章來源：http://www.zcool.com.cn/article/ZNTEwMDQ0.html