滴滴打車交互設計詳細分析

一,   前期準備


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設計絕非易事。


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


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

下面是和UI設計培訓相關的文章--APP專業視覺設計基礎標準要求

天天對本身多一點點的UI設計培訓，天天就增長多一點點的經驗。
更多的UI設計培訓在趣達；交互設計培訓，網頁設計培訓，平面設計培訓等等着你。

 

原文來自：站酷

  免費UI設計公開課