高手的設計流程！滴滴車主端5.0全新升級背后的設計思考

編者按：大公司的設計流程是怎樣的？來看看滴滴設計中心的高手是怎么做滴滴車主端5.0改版的！

前言

“我每天出車8-10個小時”

“一天能接十好幾單呢”

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

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

設計之前

△ ?司機端5.0產品框架

合而為一

隨著業務的快速發展，滴滴從最初的出租車業務快速拓展到快車、專車、順風車、代駕等多項業務，與之相應的我們陸續上線了出租車司機端、專/快車的司機端等，多版司機端同時運營，即是人力物力和效率的消耗，在體驗上也存在風格難以統一，認知不一致等問題。一版體驗統一、統籌且靈活適配各個業務的車主端呼之欲出。

在設計之始我們梳理了每一條業務的功能點及發展訴求，將之重新整理，從中提煉共性，對比差異點，確保后期方案的兼容和擴展性，我們知道司機的服務主流程在各個業務是具有共性的，但對于聽單、支付等部分環節存在業務差異性。因此，合而為一，合而不同是本次設計升級重要命題。

了解用戶

相較于其他的工具類應用，滴滴司機在人群上更趨于集中：男性居多，7成的司機年齡在30-45歲之間，超2成的司機年齡超過45歲，他們在加入滴滴之前，主要從事自由職業

或普通個體戶等門檻相對較低收入不穩定的工作，成為滴滴司機主要為了增加收入、時間自由同時期待被認可；這些人中很大一部分是帶車加入，作為私家車車主，司機端為其提供了接單賺錢的平臺，而車后服務尚沒有很好解決。

△ ?用戶畫像

司機vs車主

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

→ 接單工作

→ 車生活服務

1. 接單工作：基礎（主動）屬性，也是用戶的核心訴求

2. 車生活服務：被動屬性，用戶帶車加入滴滴平臺，除了借平臺之力通過提供自身的資源和服務獲取相應的報酬，作為車主的他們會更加頻繁的產生車后市場及相關的服務訴求，如：加油、車輛保養、維修等。

從“司機”到“車主”的轉變，既是業務上的擴展，更是作為設計者的我們對用戶及產品定義的認知更新。當我們更加立體的去面對用戶，那么一個更加真實的用戶便呈現在設計師的面前。

△ ?用戶身份從“司機”向“車主”轉變

方案設計

結合上文的用戶分析，加之車主端的使用場景多為車內移動環境，不確定性和干擾因素較多，我們定義了本次設計的關鍵詞：簡單、高效、成就感。

△ ?設計關鍵詞

• 簡單：

應用在復雜環境下的信息傳達應盡量明確直白，避免產生歧義，避免多余的思考

• 高效：

體驗驅動效率提升，通過線上明確的信息引導與有效的操作促使高效品質的線下服務

• 成就感：

任務完成、收入進賬、得到獎勵等貫穿全流程的節點細節設計突出用戶成就感，在情感上的觸達用戶

圍繞以上關鍵詞，在整個設計過程我們將時刻秉持：所觀即所需，所觸即所達的理念

連接線上線下的交互行為設計

在交互框架設計過程中，我們梳理出三個需要解決的問題：

1. 多業務融合與保持業務場景獨立性
2. 舊版司機端的用戶到新版車主端的遷移成本以及新用戶的上手成本
3. 如何清晰引導用戶在復雜場景及復雜任務下的無障礙使用

回答以上問題，我們總結了三條設計思路：

1. 穩定的框架流程+靈活可適配業務和場景的組件
2. 適應車內場景的信息展現和信息操作結構（信息分層），以及貫穿流程的結構一致性
3. 以聽為主

設計方向

框架與組件

在前期的分析中我們提到快車、出租車、專車等業務在主任務流程上趨于一致，都可歸納為出車-聽單中-接單-去接乘客-接到乘客-行程中-行程結束這樣的線性流程；僅在部分流程節點上存在業務差異，如：接單環節快車存在搶單、指派、極速訂單多個類型，而專車則對訂單服務要求有特殊需求；再如行程結束后的專車快車是線上支付，而出租車則是既可線上支付也可現金支付。因此，我們定義頁面框架時強調線性流程的一致性，對于流程節點的差異性則通過不同的組件來滿足。

△ ?組件與框架

將應用比作一個四維空間：每一個頁面是一個層級清晰的三維結構，步驟流則是第四維度：

△ ?頁面層級

結構穩定、信息分層

車主端主流程具有主線性少分支的特點，因此在每一個節點都可提取出核心操作，以穩定的結構劃分向用戶傳達統一的界面語言和交互感知。

△ ?主流程頁面歸納為統一穩定的結構

車主端的另一個特色是強管控強調度，因此信息會不斷的貫穿始末的下發給車主，其中包括來自系統推送的信息、當前的任務/管控信息、大區等渠道的運營信息等，這些信息來源多樣，類別紛雜；全盤呈現必會導致用戶接受信息超載而不知所措，基于這樣的現狀，設計師對現有信息進行打散歸類重新整合，將信息按重要度劃分為三個等級，以三種形式的任務卡片承載司機端全部信息：模態任務卡片、非模態任務卡片、普通信息卡片

△ ?三種任務卡片

• 模態全屏卡片：

最高優且不可跳過信息任務，此類信息要求車主完成當下任務后繼續其他操作

• 非模態任務卡片：

高優但不緊急，需要用戶第一時間注意到但可在當下跳過的信息類別

• 普通信息卡片：

非高優且不緊急，用戶關注時可見

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

以聽為主

我們常說信息流，“滑動”瀏覽是這類應用里用戶常常進行的交互行為，對于車主端而言，通常的使用場景便是在行車過程中，因此“聽”便成為車主們“瀏覽”信息的一種慣用交互行為。如何設計“聽”是設計師們必修的一課。

我們做的第一步是對全流程信息進行梳理，并對需要“聽”的節點做出標記。

△ ?以聽為主的場景

明確了語音節點后，梳理全部信息并為其歸類劃分，如：反饋、指引、消息；

根據信息特性定義表達形式，如：擬聲、播報；

所有語音信息都需滿足可識別性強、表意清晰的原則，對聲音的設計也是連接應用與用戶情感的紐帶。

△ ?行駛中使用聽的情況

相較于主動去“看”，“聽”是一種默認的被動的行為，可以輕松的讓用戶的耳朵聽到信息，卻難以保證用戶的大腦是否聽到了，因此，問題便進一步聚焦到如何讓用戶“聽到”。心理學中關于引發意識需要誘因刺激，因此在重要播報前增加“誘因”音的設計可有效保障信息被獲取。

△ ?行駛中使用聽的情況

視覺呈現

品牌延續

在整個滴滴大的品牌基調下，滴滴車主端5.0視覺設計延續滴滴品牌整體的設計氣質，以親和、易用、科技為主要設計方向。車主端整體界面設計，基于滴滴品牌規范以及車主端用戶的特殊屬性，最終以滴滴品牌色為色彩推導基礎，匹配具有統一色彩傾向的深灰色為輔助，構建起整體的界面設計色彩系統。車主端在保證與主品牌氣質統一的前提下，也保持了自己設計的獨立性，這樣既保證了橫向主品牌對外展現的一致性，同時也保證了縱向產品線視覺展現的差異化，從而使車主端能夠更好地服務于公司主品牌以及自己獨立的目標用戶群體，成為滴滴產品線中既獨立又統一的一部分。

△ ?車主端5.0開屏引導圖

設計推演

界面構成

通過前期車主端用戶調研和真實的場景路測，我們發現車主在使用APP期間，往往處于一種不穩定且復雜多變的使用場景下，所以針對這種典型的使用場景，車主端的界面構成主要從兩個方面去解決這個問題。

第一，拉開功能模塊之間的視覺關系

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

第二，加強關鍵操作和主要信息的展示面積

新的車主端加大了整個主流程中所有的操作按鈕的視覺面積，保證車主在任何場景下都可以準確快速的做出操作，同時針對每個關鍵節點的信息重要性在視覺上做出區分，減少用戶的閱讀負擔，提高用戶的閱讀效率。

△ ?車主端5.0頁面構成

顏色·字體

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

字體基于整體司機端用戶群體的特殊性，整體字號較大，字號基于4的整數倍進行推導，再根據文字的信息展示屬性進行字號區間分類，最終構建起字體規范系統。

△ ?車主端5.0色彩規范

圖標構成

車主端5.0圖標的設計理念是：“讓圖標像馬路標識一樣引導司機操作”在圖標前期的設計探索中我們發現，很多車主本身對陌生的圖標設計語言識別是有困難的，但是對馬路上的公共交通標識卻十分熟息，所以我們將馬路標識中：簡潔、直白、硬朗的設計特點抽離出來，融入到我們新的圖標設計當中，讓新的圖標設計給司機一種親切熟息的感覺，減少車主的認知學習成本，提高圖標的辨識效率，使車主快速的過渡到新的圖標系統上來。

△ ?車主端5.0ICON規范

動效構成

合適恰當的動效可以幫助用戶更好的理解產品邏輯提高操作使用效率，反之就會傷害整體用戶的操作體驗。因此，整體的車主端5.0動效都是圍繞以下四項基本原則展開，以此來保證整體動效的準確統一。

第一：具有相同產品或交互邏輯的功能界面動效統一（保證全局動效的一致性）；

第二：功能信息需要有節奏有層次的展示（提高信息的識別效率和識別準確性）；

第三：動效如何發生就如何結束（保證用戶操作使用時對產品邏輯關系的清晰）；

第四：每個界面不使用超過兩種及以上的動效（控制并且減少動效帶來的不必要的信息負擔）

在對動效進行約束的同時，我們也對動效進行了性質上的劃分，從而更好地歸納總結出組件與組件，界面與界面之間的動效關系，方便大家理解運用。

△ ?車主端5.0動效規范

導航構成

地圖導航對于車主來說就是車主的眼睛，對車主駕駛有極大的輔助作用。這次我們也針對司機端的地圖導航做了整體的視覺的優化和升級。局部上優化了車道線視覺以及重繪了指向性引導圖標的視覺，使整體的導航體驗更加準確流暢。整體上優化了地圖日間效果，提高了地圖在日光下的信息展示通用性，并且新版本還增加了地圖導航的夜間模式，方便司機在夜間更加沉浸式的體驗導航服務。

△ ?車主端5.0地圖導航

方案測試

設計過程中及時融入方案測試可以有效的幫助設計師發現問題并調整方案。

車內環境測試：將設計demo帶入車內環境，在車內場景下自測設計可行性，如白天光照強烈要求界面顯性化且低反光，而夜間昏暗環境下界面對比清晰不刺眼。反復的將設計界面拿到車內測試得出最優方案。

△ ?場景測試

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

△ ?可用性測試

統一車主端即將上線，后續設計師會持續跟蹤上線后的數據反饋，用定性的數據結合定量驗證結構，小步快速持續迭代方案。

結語 · 在路上

這次的改版是我們一直想做的一次設計，司機的群體是一群在路上的群體，披星而出，戴月而歸；對于大多數?？焖緳C來說，滴滴已經是他們謀生的手段，我們見過很多司機師傅在惡劣天氣城市運力嚴重下降的情況下依然出車，再偏遠的單子也要送乘客安全到達，拼車乘客遲到也要繼續等到乘客，怎么讓這份工作更有尊嚴，更體面，是我們接下來要做的事情，更人性化的線下服務，更平等的規則，不僅僅讓每一位乘客安全到家，更需要保證在路上的每一位司機師傅平安到家。

滴滴CDX創意設計團隊一直秉承讓設計產生價值，向前一步的設計理念，在出行行業五年的深耕，讓我們不僅僅只是設計支撐，在體驗閉環甚至體驗決策上有更大的話語權，本次司機端的改版讓我們在產品全案設計上邁出了第一步。

我們一直認為設計師最初是讓這個世界來讀懂自己，再往后就需要引導你的用戶去理解這個世界。如何讓用戶通過我們的產品更簡單更直觀的觸達服務，是做為產品人不懈的追求。

「干貨超足的5個改版實戰經驗總結」

1. LOGO 改版：《揭秘LOGO設計流程！超詳細的騰訊云LOGO 改版記錄全過程》
2. 官網改版：《QQ官網全新蛻變！IM QQ 改版（第一期）設計總結》
3. Pinterest 改版：《改版實戰！聊聊PINTEREST官網再設計過程的經驗思考》
4. QQ 新版表情：《騰訊ISUX丨揭秘QQ 新版表情背后的設計故事》
5. 提升數據：《騰訊ISUX丨通過優化，我們將QQ會員付費用戶數提高了5倍！》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com