今天為大家帶來滴滴代駕APP司機端UI設計過程總結，這篇文章很不錯，對于學習設計的朋友很有幫助，推薦過來，一起來學習吧！

萬事開頭難，做設計也是如此。

今年3月，在大家的共同期待下，滴滴快的代駕業務正式啟動。半年時間，產品經歷了從0到1的跨越，從1到1.1的蛻變，并在不斷打磨中前進，努力為代駕司機創造出更優質的體驗。

在無數次的加班改稿后，終于有時間做一些沉淀和總結，希望這些分享可以幫助同樣需要經歷從0開始的設計師們。

一,   前期準備

1，項目介紹

滴滴代駕司機端是一款針對平臺代駕司機的app，主要用于幫助他們完成接單、搶單、接送乘客的日常工作流程，并輔以訂單記錄，費用明細，乘客評價等其他功能。

2，競品分析

在國內市場，代駕絕非新品。早在滴滴代駕之前，就已經出現了一批較為成熟的代駕產品，如e代駕，愛代駕，安師傅等。對他們的界面分析必不可少。

通過分析我們發現，國內大部分代駕產品將主要精力放在乘客端設計上，司機端界面設計較為粗放。而滴滴快的作為國內最大的出行平臺，如果想在代駕市場中占據一席之地，不僅需要爭取更多的乘客資源，同時也應該更好的體現對司機群體的關愛。

3， 了解用戶

唐.諾曼說過，如果在用戶界面設計和人機交互領域中有任何神圣的原則，那必然是"了解你的用戶"。

設計前期，我們根據調研結果制作了一系列的用戶畫像，以便更好的根據用戶實際需求找到適合他們的設計語言。

通過這些用戶畫像我們總結出代駕司機的幾個特點：

a, 工作時間晚；

b, 接單地點環境嘈雜；

c, 追求高效，快速的工作效率；

基于以上特點，我們最終提煉出如下設計關鍵詞：

二，定義色彩

色彩在視覺界面中扮演著非常重要的角色，通過定義色彩，可使界面主次分明，節奏感強烈；不僅如此，主色輔色的合理搭配，還能用來提升產品氛圍，增強產品情感化。

1，主色

由于代駕為快的旗下產品，項目初期，我們決定以快的品牌色－綠色為基礎進行延展。

考慮到代駕司機實際使用場景為夜間，而快的原有品牌色較鮮亮（左），容易在夜間對眼睛造成刺激，我們在原有品牌綠的基礎上進行了明度的減法，得出了代駕司機端的主色（右）：

2，輔助色及點綴色

除主色，還需要一系列輔色來表示產品中需要強調、警示的部分，該部分內容需要與主色形成強烈對比，以便用戶識別。基于該點考慮，我們在定義輔助色的時候，選取了與主色在色環角度相差較大的顏色（經常有人問我配色的方法，這里再次推薦下kuler）。

最后，在不影響品牌主色的基礎上，又另外選取了一系列明度，飽和度相似的其他顏色作為點綴色，必要時用于圖標，文字等。

三，定義結構

對界面信息的合理劃分，是確保用戶操作準確舒適的第一步。

1，整體結構

依據產品經理給出的原型圖，我們將代駕司機端歸納為如下三種主要布局模式：

A,  頂部導航＋內容區＋底部操作按鈕

B, 內容區＋底部操作按鈕

C, 頂部導航＋內容區

其中A,B兩種結構主要用于司機主任務流程，C結構主要用于其他輔助功能及相關信息展示。

對司機用戶而言，存在如下兩種app使用情況：

a, 工作狀態。 接單／搶單－前往乘客－送達目的地－完成訂單的主任務流程；

b，非工作狀態。可以是在任何時候，任何場景下對費用明細，過往訂單詳情等個人信息的查看。

當用戶處于主任務流程下時，我們希望用一種適度的表達方式去提醒司機尚未結束工作；而當用戶處于非工作狀態下時，我們希望將視覺重點放在任務相關的button上，引導用戶點擊后開始工作。

經過討論，我們決定在工作狀態下，通過強化界面頂部導航欄的視覺比重去提示司機繼續完成工作（左）；而在非工作狀態下，則通過將視覺焦點放在底部按鈕，去觸發用戶點擊（右）。

2，細節處理

大部分代駕司機為30歲以上男性，經常需要在移動的情況下（行走、使用代步工具等）操作軟件。

基于用戶群體的這兩大特征，我們采用了略大的控件尺寸及字體規格，并將頁面左右邊距定義為較小的20px以便為底部按鈕預留更大可點擊范圍。

四，界面設計

在完成界面色彩及界面結構的定義后，接下來需要開始對每個界面進行逐一設計。

在界面視覺設計的時候，需要注意以下幾點：

a， 依據原型，但不照搬原型。找到每個界面的優先級，通過色彩，字體及留白等設計手段強調核心功能；

b, 遵循規范，但不死守規范。整體界面在色彩，結構上盡量保持一致，但遇到特殊界面，需根據界面實際作用進行考量；

c,  追求美感，但不過分強調。在界面設計上，始終保持功能第一的態度，避免過于強調視覺表現力。

1，依據原型但不照搬原型

司機任務系統是整個app中非常重要的一部分，通過任務獎勵的機制，可以鼓勵司機完成更多單量并獲得額外報酬。

我的任務界面包含以下幾個功能點：

a, 任務名

b, 獎勵規則

下圖中，左邊為最初原型圖，右邊為最終上線效果。

任務機制讓我們聯想到游戲中完成任務、解鎖關卡的情景。我們希望對該部分內容進行有趣的可視化設計，一是讓司機對任務進行狀況一目了然；二是希望通過有趣的設計促使司機完成更多任務。

為了檢驗預想方案是否可行，我們決定測試文字主導及圖形主導這兩種形式在司機中的接受度。我們隨機調研了5名代駕司機，讓其在沒有任何引導及提示的前提下說出新舊兩組不同界面的功能點及圖標所含意義（右上及左下）：

這5名司機中，僅有一名表現出了對圖形理解的困難，其余四名均表示可視化的界面更直觀易理解。最后，在PM的多方協調下，我們控制了最大字段及可出現情況的配置，并最終保留了可視化方案。

2，遵循規范，但不死守規范

接單／搶單是每個代駕司機工作的第一步。乘客發出訂單經過后臺判斷，到達司機處將以獨享訂單及共享訂單的方式展現出來。 獨享訂單只有看到該界面的司機可以接單，但獨享訂單的展示時間非常短，時間過后，所有附近的司機都可參與該次搶單。

為了在獨享單界面制造出一種緊迫感，讓司機看到后快速響應并點擊接單按鈕，我們在設計的時候并沒有使用綠色作為該界面的主色，而是反之使用了原先定義為輔色的橙色作為該界面的主色，以營造出一種緊迫的氛圍。

3，追求美感，但不過分強調

追求美感是設計師的職責，但是作為一名UI設計師，切記不能過分追求美感，而應該始終謹記功能主導的原則。

結伴拼車是代駕司機端推出的特色功能，目的是幫助附近的司機找到彼此，在夜晚結束工作后一起拼車回城。

最初的原型圖如下所示（左一），整個界面中僅有一個文字按鈕，毫無設計感可言。而初稿的設計（右一）則把中間的圖標設計的過大過搶眼，吸引了用戶的大部分注意力，喧賓奪主。最后，通過縮小圖標尺寸及降低圖標明度飽和度的方法，我們得到了最終界面（中間），圖標及文字按鈕搭配妥當，在保留了界面美感的同時，更好的引導了用戶點擊。

五，App icon設計

之所以把app icon放在整個設計的最后一步，是因為覺得app icon也是屬于app的一部分，在色調，氣質上應該與整個app保持一致。

提到代駕司機，人們腦子中很容易浮現出穿工服開車的司機形象。我們對這一形象進行抽象，得出以下幾個關鍵詞：

a, 司機

b, 工作服

c, 工牌

d, 方向盤

e, 小車

對這幾個元素進行重組，聯想后，我們畫了一系列app icon的草圖。

為了更好的與市場同類別產品區分，我們最終選取了司機＋工作服＋方向盤的組合形式作為最后方案，并使用與app整體氣質相符的綠色作為主色進行設計，并得到如下效果圖：

六，開發

與開發的溝通協作是整個設計中非常重要的一個環節，需要設計人員和開發人員一起制定出關于標注及圖標命名的一系列規則。

1，標注

該項目主要以iPhone6為準進行標注。在頁面標注的時候，對于頁面邊距，底部按鈕，列表高度等部分將不再進行重復標注，僅針對每個界面的特殊部分及對應的圖標命名進行注釋。因此開發拿到的標注文件主要由以下兩個部分組成：

a，通用標注部分（左邊）

b，單個界面標注部分（右邊）

2，命名

為了便于后期版本迭代的時圖標的替換，圖標文件的干凈整齊十分必要。經過跟android及ios開發團隊的溝通，我們決定采用以下命名規范：

a, 通用圖標：common_ic_圖標名

b, 通用button: common_btn_按鈕名_normal/pressed

c, 特殊圖標：ic_頁面名_圖標名

d, 特殊button: btn_頁面名_按鈕名_normal/pressed

3,  界面捉蟲

在開發的過程中難免出現實現圖和效果圖不一致的情況，這時候需要ui設計師進行界面捉蟲。我們的做法是對每個實現界面逐一排查，對于出入較大的界面進行截圖，并做效果圖比對，標出有差別的部分并給到開發進行調整。對于小屏手機出現的異常情況，需要另外針對屏幕大小重新設計標注后給到開發。

以上便是對滴滴代駕司機端1.1的總結了。

概括的說，當新開始一個app項目的時候，我們可以從以下幾個步驟入手進行設計：

作為一名ui設計師，在設計的時候，不僅需要考慮到美觀因素，還需要兼顧用戶、功能，甚至在做第一版的時候就考慮到后期版本迭代可能出現的問題。UI設計絕非易事。

我很幸運可以加入滴滴代駕項目組，并完整的參與到整個產品從無到有的過程，這個過程不僅提升了我的設計能力，同時鍛煉了我全方位的思考能力以及跨部門的溝通能力。

最后，我想感謝小白，靜靜在設計中給我那么多的幫助，感謝優秀的產品團隊和開發團隊。作為代駕市場的后起之秀，我們一直在努力尋求新的突破，后續我們會不斷打磨各種細節，一起努力把滴滴代駕司機端打造成業內最好的產品之一！

以上就是滴滴代駕APP司機端UI設計過程總結，大家學會了嗎？希望大家看完這篇文章能有所啟發！