今天為大家?guī)?lái)滴滴代駕APP司機(jī)端UI設(shè)計(jì)過(guò)程總結(jié)，這篇文章很不錯(cuò)，對(duì)于學(xué)習(xí)設(shè)計(jì)的朋友很有幫助，推薦過(guò)來(lái)，一起來(lái)學(xué)習(xí)吧！

萬(wàn)事開(kāi)頭難，做設(shè)計(jì)也是如此。

今年3月，在大家的共同期待下，滴滴快的代駕業(yè)務(wù)正式啟動(dòng)。半年時(shí)間，產(chǎn)品經(jīng)歷了從0到1的跨越，從1到1.1的蛻變，并在不斷打磨中前進(jìn)，努力為代駕司機(jī)創(chuàng)造出更優(yōu)質(zhì)的體驗(yàn)。

在無(wú)數(shù)次的加班改稿后，終于有時(shí)間做一些沉淀和總結(jié)，希望這些分享可以幫助同樣需要經(jīng)歷從0開(kāi)始的設(shè)計(jì)師們。

一,   前期準(zhǔn)備

1，項(xiàng)目介紹

滴滴代駕司機(jī)端是一款針對(duì)平臺(tái)代駕司機(jī)的app，主要用于幫助他們完成接單、搶單、接送乘客的日常工作流程，并輔以訂單記錄，費(fèi)用明細(xì)，乘客評(píng)價(jià)等其他功能。

2，競(jìng)品分析

在國(guó)內(nèi)市場(chǎng)，代駕絕非新品。早在滴滴代駕之前，就已經(jīng)出現(xiàn)了一批較為成熟的代駕產(chǎn)品，如e代駕，愛(ài)代駕，安師傅等。對(duì)他們的界面分析必不可少。

通過(guò)分析我們發(fā)現(xiàn)，國(guó)內(nèi)大部分代駕產(chǎn)品將主要精力放在乘客端設(shè)計(jì)上，司機(jī)端界面設(shè)計(jì)較為粗放。而滴滴快的作為國(guó)內(nèi)最大的出行平臺(tái)，如果想在代駕市場(chǎng)中占據(jù)一席之地，不僅需要爭(zhēng)取更多的乘客資源，同時(shí)也應(yīng)該更好的體現(xiàn)對(duì)司機(jī)群體的關(guān)愛(ài)。

3， 了解用戶

唐.諾曼說(shuō)過(guò)，如果在用戶界面設(shè)計(jì)和人機(jī)交互領(lǐng)域中有任何神圣的原則，那必然是"了解你的用戶"。

設(shè)計(jì)前期，我們根據(jù)調(diào)研結(jié)果制作了一系列的用戶畫像，以便更好的根據(jù)用戶實(shí)際需求找到適合他們的設(shè)計(jì)語(yǔ)言。

通過(guò)這些用戶畫像我們總結(jié)出代駕司機(jī)的幾個(gè)特點(diǎn)：

a, 工作時(shí)間晚；

b, 接單地點(diǎn)環(huán)境嘈雜；

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

基于以上特點(diǎn)，我們最終提煉出如下設(shè)計(jì)關(guān)鍵詞：

二，定義色彩

色彩在視覺(jué)界面中扮演著非常重要的角色，通過(guò)定義色彩，可使界面主次分明，節(jié)奏感強(qiáng)烈；不僅如此，主色輔色的合理搭配，還能用來(lái)提升產(chǎn)品氛圍，增強(qiáng)產(chǎn)品情感化。

1，主色

由于代駕為快的旗下產(chǎn)品，項(xiàng)目初期，我們決定以快的品牌色－綠色為基礎(chǔ)進(jìn)行延展。

考慮到代駕司機(jī)實(shí)際使用場(chǎng)景為夜間，而快的原有品牌色較鮮亮（左），容易在夜間對(duì)眼睛造成刺激，我們?cè)谠衅放凭G的基礎(chǔ)上進(jìn)行了明度的減法，得出了代駕司機(jī)端的主色（右）：

2，輔助色及點(diǎn)綴色

除主色，還需要一系列輔色來(lái)表示產(chǎn)品中需要強(qiáng)調(diào)、警示的部分，該部分內(nèi)容需要與主色形成強(qiáng)烈對(duì)比，以便用戶識(shí)別。基于該點(diǎn)考慮，我們?cè)诙x輔助色的時(shí)候，選取了與主色在色環(huán)角度相差較大的顏色（經(jīng)常有人問(wèn)我配色的方法，這里再次推薦下kuler）。

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

三，定義結(jié)構(gòu)

對(duì)界面信息的合理劃分，是確保用戶操作準(zhǔn)確舒適的第一步。

1，整體結(jié)構(gòu)

依據(jù)產(chǎn)品經(jīng)理給出的原型圖，我們將代駕司機(jī)端歸納為如下三種主要布局模式：

A,  頂部導(dǎo)航＋內(nèi)容區(qū)＋底部操作按鈕

B, 內(nèi)容區(qū)＋底部操作按鈕

C, 頂部導(dǎo)航＋內(nèi)容區(qū)

其中A,B兩種結(jié)構(gòu)主要用于司機(jī)主任務(wù)流程，C結(jié)構(gòu)主要用于其他輔助功能及相關(guān)信息展示。

對(duì)司機(jī)用戶而言，存在如下兩種app使用情況：

a, 工作狀態(tài)。 接單／搶單－前往乘客－送達(dá)目的地－完成訂單的主任務(wù)流程；

b，非工作狀態(tài)。可以是在任何時(shí)候，任何場(chǎng)景下對(duì)費(fèi)用明細(xì)，過(guò)往訂單詳情等個(gè)人信息的查看。

當(dāng)用戶處于主任務(wù)流程下時(shí)，我們希望用一種適度的表達(dá)方式去提醒司機(jī)尚未結(jié)束工作；而當(dāng)用戶處于非工作狀態(tài)下時(shí)，我們希望將視覺(jué)重點(diǎn)放在任務(wù)相關(guān)的button上，引導(dǎo)用戶點(diǎn)擊后開(kāi)始工作。

經(jīng)過(guò)討論，我們決定在工作狀態(tài)下，通過(guò)強(qiáng)化界面頂部導(dǎo)航欄的視覺(jué)比重去提示司機(jī)繼續(xù)完成工作（左）；而在非工作狀態(tài)下，則通過(guò)將視覺(jué)焦點(diǎn)放在底部按鈕，去觸發(fā)用戶點(diǎn)擊（右）。

2，細(xì)節(jié)處理

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

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

四，界面設(shè)計(jì)

在完成界面色彩及界面結(jié)構(gòu)的定義后，接下來(lái)需要開(kāi)始對(duì)每個(gè)界面進(jìn)行逐一設(shè)計(jì)。

在界面視覺(jué)設(shè)計(jì)的時(shí)候，需要注意以下幾點(diǎn)：

a， 依據(jù)原型，但不照搬原型。找到每個(gè)界面的優(yōu)先級(jí)，通過(guò)色彩，字體及留白等設(shè)計(jì)手段強(qiáng)調(diào)核心功能；

b, 遵循規(guī)范，但不死守規(guī)范。整體界面在色彩，結(jié)構(gòu)上盡量保持一致，但遇到特殊界面，需根據(jù)界面實(shí)際作用進(jìn)行考量；

c,  追求美感，但不過(guò)分強(qiáng)調(diào)。在界面設(shè)計(jì)上，始終保持功能第一的態(tài)度，避免過(guò)于強(qiáng)調(diào)視覺(jué)表現(xiàn)力。

1，依據(jù)原型但不照搬原型

司機(jī)任務(wù)系統(tǒng)是整個(gè)app中非常重要的一部分，通過(guò)任務(wù)獎(jiǎng)勵(lì)的機(jī)制，可以鼓勵(lì)司機(jī)完成更多單量并獲得額外報(bào)酬。

我的任務(wù)界面包含以下幾個(gè)功能點(diǎn)：

a, 任務(wù)名

b, 獎(jiǎng)勵(lì)規(guī)則

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

任務(wù)機(jī)制讓我們聯(lián)想到游戲中完成任務(wù)、解鎖關(guān)卡的情景。我們希望對(duì)該部分內(nèi)容進(jìn)行有趣的可視化設(shè)計(jì)，一是讓司機(jī)對(duì)任務(wù)進(jìn)行狀況一目了然；二是希望通過(guò)有趣的設(shè)計(jì)促使司機(jī)完成更多任務(wù)。

為了檢驗(yàn)預(yù)想方案是否可行，我們決定測(cè)試文字主導(dǎo)及圖形主導(dǎo)這兩種形式在司機(jī)中的接受度。我們隨機(jī)調(diào)研了5名代駕司機(jī)，讓其在沒(méi)有任何引導(dǎo)及提示的前提下說(shuō)出新舊兩組不同界面的功能點(diǎn)及圖標(biāo)所含意義（右上及左下）：

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

2，遵循規(guī)范，但不死守規(guī)范

接單／搶單是每個(gè)代駕司機(jī)工作的第一步。乘客發(fā)出訂單經(jīng)過(guò)后臺(tái)判斷，到達(dá)司機(jī)處將以獨(dú)享訂單及共享訂單的方式展現(xiàn)出來(lái)。 獨(dú)享訂單只有看到該界面的司機(jī)可以接單，但獨(dú)享訂單的展示時(shí)間非常短，時(shí)間過(guò)后，所有附近的司機(jī)都可參與該次搶單。

為了在獨(dú)享單界面制造出一種緊迫感，讓司機(jī)看到后快速響應(yīng)并點(diǎn)擊接單按鈕，我們?cè)谠O(shè)計(jì)的時(shí)候并沒(méi)有使用綠色作為該界面的主色，而是反之使用了原先定義為輔色的橙色作為該界面的主色，以營(yíng)造出一種緊迫的氛圍。

3，追求美感，但不過(guò)分強(qiáng)調(diào)

追求美感是設(shè)計(jì)師的職責(zé)，但是作為一名UI設(shè)計(jì)師，切記不能過(guò)分追求美感，而應(yīng)該始終謹(jǐn)記功能主導(dǎo)的原則。

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

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

五，App icon設(shè)計(jì)

之所以把a(bǔ)pp icon放在整個(gè)設(shè)計(jì)的最后一步，是因?yàn)橛X(jué)得app icon也是屬于app的一部分，在色調(diào)，氣質(zhì)上應(yīng)該與整個(gè)app保持一致。

提到代駕司機(jī)，人們腦子中很容易浮現(xiàn)出穿工服開(kāi)車的司機(jī)形象。我們對(duì)這一形象進(jìn)行抽象，得出以下幾個(gè)關(guān)鍵詞：

a, 司機(jī)

b, 工作服

c, 工牌

d, 方向盤

e, 小車

對(duì)這幾個(gè)元素進(jìn)行重組，聯(lián)想后，我們畫了一系列app icon的草圖。

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

六，開(kāi)發(fā)

與開(kāi)發(fā)的溝通協(xié)作是整個(gè)設(shè)計(jì)中非常重要的一個(gè)環(huán)節(jié)，需要設(shè)計(jì)人員和開(kāi)發(fā)人員一起制定出關(guān)于標(biāo)注及圖標(biāo)命名的一系列規(guī)則。

1，標(biāo)注

該項(xiàng)目主要以iPhone6為準(zhǔn)進(jìn)行標(biāo)注。在頁(yè)面標(biāo)注的時(shí)候，對(duì)于頁(yè)面邊距，底部按鈕，列表高度等部分將不再進(jìn)行重復(fù)標(biāo)注，僅針對(duì)每個(gè)界面的特殊部分及對(duì)應(yīng)的圖標(biāo)命名進(jìn)行注釋。因此開(kāi)發(fā)拿到的標(biāo)注文件主要由以下兩個(gè)部分組成：

a，通用標(biāo)注部分（左邊）

b，單個(gè)界面標(biāo)注部分（右邊）

2，命名

為了便于后期版本迭代的時(shí)圖標(biāo)的替換，圖標(biāo)文件的干凈整齊十分必要。經(jīng)過(guò)跟android及ios開(kāi)發(fā)團(tuán)隊(duì)的溝通，我們決定采用以下命名規(guī)范：

a, 通用圖標(biāo)：common_ic_圖標(biāo)名

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

c, 特殊圖標(biāo)：ic_頁(yè)面名_圖標(biāo)名

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

3,  界面捉蟲(chóng)

在開(kāi)發(fā)的過(guò)程中難免出現(xiàn)實(shí)現(xiàn)圖和效果圖不一致的情況，這時(shí)候需要ui設(shè)計(jì)師進(jìn)行界面捉蟲(chóng)。我們的做法是對(duì)每個(gè)實(shí)現(xiàn)界面逐一排查，對(duì)于出入較大的界面進(jìn)行截圖，并做效果圖比對(duì)，標(biāo)出有差別的部分并給到開(kāi)發(fā)進(jìn)行調(diào)整。對(duì)于小屏手機(jī)出現(xiàn)的異常情況，需要另外針對(duì)屏幕大小重新設(shè)計(jì)標(biāo)注后給到開(kāi)發(fā)。

以上便是對(duì)滴滴代駕司機(jī)端1.1的總結(jié)了。

概括的說(shuō)，當(dāng)新開(kāi)始一個(gè)app項(xiàng)目的時(shí)候，我們可以從以下幾個(gè)步驟入手進(jìn)行設(shè)計(jì)：

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

我很幸運(yùn)可以加入滴滴代駕項(xiàng)目組，并完整的參與到整個(gè)產(chǎn)品從無(wú)到有的過(guò)程，這個(gè)過(guò)程不僅提升了我的設(shè)計(jì)能力，同時(shí)鍛煉了我全方位的思考能力以及跨部門的溝通能力。

最后，我想感謝小白，靜靜在設(shè)計(jì)中給我那么多的幫助，感謝優(yōu)秀的產(chǎn)品團(tuán)隊(duì)和開(kāi)發(fā)團(tuán)隊(duì)。作為代駕市場(chǎng)的后起之秀，我們一直在努力尋求新的突破，后續(xù)我們會(huì)不斷打磨各種細(xì)節(jié)，一起努力把滴滴代駕司機(jī)端打造成業(yè)內(nèi)最好的產(chǎn)品之一！

以上就是滴滴代駕APP司機(jī)端UI設(shè)計(jì)過(guò)程總結(jié)，大家學(xué)會(huì)了嗎？希望大家看完這篇文章能有所啟發(fā)！