如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

滴滴設(shè)計中心：參與整個商業(yè)B端app的產(chǎn)品設(shè)計，最大的感受除了產(chǎn)品本身界面設(shè)計的打磨和探索之外，更多的是與各角色的合作與溝通，并對時間與視覺做出平衡，在有限的時間里產(chǎn)出更好的設(shè)計。

界面設(shè)計師：李昱翰、張麗麗 、劉悅、劉蕓
交互設(shè)計：黃雅琪

交互篇

什么是滴滴試駕商業(yè)B端平臺App

商業(yè)B端平臺app是滴滴出行旗下試駕針對廠商內(nèi)部開發(fā)的一款app，通過進入試駕B端，廠商能夠快速的獲取相關(guān)數(shù)據(jù)。app內(nèi)有滴滴試駕在c端的基本數(shù)據(jù)和畫像分析。合作廠商還可以查詢具體與試駕合作項目的基本情況、畫像分析、車輛情況等數(shù)據(jù)。

簡單的來說就是從滴滴試駕c端提取數(shù)據(jù)到B端以供廠商查尋。

需求收集

跟試駕合作的廠商越來越多，我們需要開發(fā)一款app方便廠商每天可以查閱合作進度，能夠詳細的看到我們在合作期間都具體做了哪些運營活動以及合作進度。

產(chǎn)品定位

先說下滴滴試駕的產(chǎn)品定位，滴滴試駕定位于創(chuàng)造以體驗為核心的營銷方案，整合平臺車源、調(diào)動車主能力、降低成本，向用戶提供高質(zhì)的試駕服務(wù)，提高試駕對消費決策的影響力，打造一個“移動4S店”。

逐漸地，以出行為入口，覆蓋用戶練車、買車、用車、車后、賣車全流程。

未來，綜合線上數(shù)據(jù)、線下行為，提供全面的用戶反饋和場景化精準營銷方案，為廠商打造產(chǎn)品迭代和推廣銷售的閉環(huán)服務(wù)。

試駕B端商業(yè)app是根據(jù)廠商需求評估去挖掘客戶需求，并制定專業(yè)方案，精品化運營執(zhí)行，合作進度數(shù)據(jù)化報告給廠商。

滴滴試駕B端商業(yè)App 產(chǎn)品定義

目標用戶

合作廠商用戶、 內(nèi)部運營 、銷售 、BD

產(chǎn)品目標

為合作廠商了解項目合作進度以及過程數(shù)據(jù)提供便捷的查看平臺。

用戶定性研究

我們明確了目標用戶，并對目標用戶進行定性研究，以便創(chuàng)建人物角色，研究用戶的真實使用場景，以用戶為中心創(chuàng)建合理的流程和功能。

以合作廠商用戶為例

使用場景（典型）

1. 查看項目進度

場景一：合作廠商用戶通過平臺查看項目合作進度，核心指標以及真實用戶對車型的評價數(shù)據(jù)
需求點（痛點）：直觀的項目進度數(shù)據(jù)呈現(xiàn)，連貫完整的查看體驗

2. 查看最關(guān)心的數(shù)據(jù)

場景二：不同用戶關(guān)心的數(shù)據(jù)有些不同，在功能層級度的情況下每次都要進來查找
需求點（痛點）：在下鉆層級多的情況下經(jīng)常去二，三級找關(guān)心的數(shù)據(jù)

考慮點

根據(jù)上述場景分析，此平臺設(shè)計中應(yīng)該考慮以下三點：

1. 數(shù)據(jù)直觀
2. 查看流程完整
3. 常用功能外露

基本流程

與產(chǎn)品經(jīng)理共同分析了典型使用場景之后，我們拆分出主要功能，并參考前期的調(diào)研數(shù)據(jù)，構(gòu)成了B端商業(yè)app業(yè)務(wù)流程。分為：試駕、項目和個人中心。

確定了主流程之后，再根據(jù)產(chǎn)品需求，以頁面為單位，對各個流程節(jié)點進行細化，產(chǎn)出以頁面為單位的功能流程圖，并查看各個功能的層級，同時也便于與產(chǎn)品之間的討論。

滴滴試駕B端商業(yè)App產(chǎn)品設(shè)計

原型圖表達產(chǎn)品思路，便于溝通

我們與產(chǎn)品確認了需求后，同視覺設(shè)計師一起協(xié)同工作，以原型圖的形式產(chǎn)出了關(guān)鍵的功能性頁面，確定基本功能點。原型圖用來進行詳細設(shè)計和開發(fā)的評審，同時細化功能，每天迭代更新。

高保真原型走查全流程，查缺補漏

將所有的功能點拼接起來，繪制高保真原型。在此階段的產(chǎn)出，著重于各個功能點是否可以走通，有沒有功能的遺漏，操作邏輯是否合理，操作反饋等，并且在原型完成后召集了設(shè)計師們進行測評。

設(shè)計差異化和一致性

設(shè)計過程中，要讓用戶體驗做到最優(yōu)，保持我們自己獨特的功能和使用感受；同時又要和滴滴出行平臺的設(shè)計風(fēng)格保持一致。

以首頁為例，前文已經(jīng)說明了從產(chǎn)品角度的規(guī)劃，設(shè)計師們按照需求的優(yōu)先級，定義了首頁的信息架構(gòu)和排版。除此之外，我們還在一些細節(jié)上進行了求同存異的設(shè)計，以突出B端商業(yè)本身的需求，例如體驗的多維度設(shè)計，卡片的信息結(jié)構(gòu)，以及項目查看數(shù)據(jù)的使用等

總結(jié)

參與整個商業(yè)B端app的產(chǎn)品設(shè)計，最大的感受除了產(chǎn)品本身界面設(shè)計的打磨和探索之外，更多的是與各角色的合作與溝通，對時間與視覺效果做出平衡，在有限的時間里產(chǎn)出更好的設(shè)計。

在產(chǎn)品設(shè)計的前半段，交互設(shè)計師就是半個產(chǎn)品經(jīng)理，參與產(chǎn)品需求的討論，研究競品，提煉功能。

在確定了需求和相關(guān)流程之后，接下來的設(shè)計階段，設(shè)計師加入了理性的用戶體驗分析，并站在公共規(guī)范的立場上，去審視一些新的功能。

在設(shè)計的后期，是參與人員最多的階段，從產(chǎn)品經(jīng)理到設(shè)計師，再到開發(fā)，同一件事，不同的人往往有不同的角度去看待，吸收不同人員的看法，并站在自己專業(yè)的角度去分析和解決問題，是合作的最優(yōu)結(jié)果。

到了開發(fā)階段，由于需求的不斷優(yōu)化和開發(fā)中遇到的一些困難，設(shè)計師需要評估不同的方案，選取最適合當前排期和目標的解決辦法，并協(xié)調(diào)相關(guān)人員，跟進各個開發(fā)環(huán)節(jié)，確保產(chǎn)品能夠高質(zhì)量的上線。

界面篇

設(shè)計一款app，第一步就是定主色調(diào)。

到底如何來選擇APP的主色調(diào)？

• 從目標用戶的角度選取
• 從公司或品牌企業(yè)文化的角度選取
• 從產(chǎn)品特有屬性來選取

依照以上三條我們定下了#6480d3為app的主色調(diào)，藍色系代表著商務(wù)，冷靜，莊重，專業(yè)，服務(wù)等。

界面設(shè)計初期

設(shè)計師拿到交互稿應(yīng)該把?己的想法加入產(chǎn)品設(shè)計中。那怎么加入想法？怎么體現(xiàn)設(shè)計師的價值？籠統(tǒng)的說，交互的?作重點表現(xiàn)在前期制定產(chǎn)品大框架的布局及功能模塊的復(fù)?和擴展。相比交互，設(shè)計師更需要用視覺語言去表現(xiàn)一個?面的重點，信息的層級和整體風(fēng)格。設(shè)計師產(chǎn)?所有設(shè)計想法的來源有三點:

• 對產(chǎn)品和交互方案有足夠的了解。
• 花時間不斷打磨設(shè)計。
• 大量設(shè)計案例的積累。

交互輸出低保真原型圖后，界面設(shè)計師需要從整體到細節(jié)仔細的分析。

整體，指哪些模塊或者信息和按鈕是復(fù)用的，在設(shè)計過程中就要保持他們的統(tǒng)一性。

細節(jié)，指每一個模塊的信息都要做到足夠清楚的了解，包括文字限定的字數(shù)，最好以限定內(nèi)最多文字進行排版。

高保真設(shè)計設(shè)計產(chǎn)出

以iPhone6尺寸做設(shè)計。

直觀數(shù)據(jù)可視化。

界面設(shè)計中含有很多數(shù)據(jù)可視化的圖例設(shè)計，整個項目開發(fā)時間特別短，所以界面設(shè)計師需要平衡開發(fā)成本和視覺效果，所以設(shè)計的圖例都以簡約為主。

整理成一個整張的流程頁面，審查視覺元素是否同意。并且方便后續(xù)溝通。

輸出的過程:

• 輸出效果圖的切圖及標注之前，需要找開發(fā)同學(xué)確認復(fù)雜?面的實現(xiàn)方式。標注與切圖的正確輸出形式。
• 切圖：OS的750的設(shè)計稿倒出@2x、@3x的圖片，在750 x 1334的設(shè)計稿上標注即可。
• 細心整理輸出設(shè)計文件的文件夾（如圖），提高工作效率的同時也方便之后的查找和更改。

• 標注：這個部分是很容易被忽略的部分，但標注做的好不好關(guān)系到上線前連調(diào)的成本。同時標注細致而明確也會提高開發(fā)的工作效率。

例如：關(guān)于文字間距的標注，以文字的大小做一個同樣高度的框，再細化框與框之間的間距。例如?字是36px，那就做?個36px?度的框，如圖中的粉色矩形。

UI 跟進與推動

開發(fā)在初期把設(shè)計稿寫進代碼完成后，放出來的第一個安裝包我們進行驗收，這個時候?家坐在一起包括rd、pm、qa。測試同學(xué)紀錄并了解問題，明確需要修改的問題，約定下一個包的走查時間。

第二個安裝包問題應(yīng)該要少了很多，沿用第一階段的模式，測試同學(xué)繼續(xù)記錄，明確rd需要修改的ui問題。這個階段ui、rd和qa更緊密的配合，這時坐在一起更效率些。

上線前，需要時間參與項目的所有人坐在一起來優(yōu)化和調(diào)整。

最后上線。

小結(jié)：

2016年七月中旬，整個app的界面設(shè)計，我們四個人用了一周時間完成，這里面包括切圖和標注，現(xiàn)在想來那段時間還是記憶猶新，在有限的時間內(nèi)，我們快速響應(yīng)設(shè)計。

數(shù)據(jù)直觀是最大的挑戰(zhàn)，設(shè)計的美觀度和開發(fā)時間成本做均衡，做完這款app之后也總結(jié)下數(shù)據(jù)可視化有哪些特征？

• 數(shù)據(jù)直觀：提高數(shù)據(jù)可讀性，加強用戶對數(shù)據(jù)的感知能力。
• 交互性：允許用戶對感興趣的內(nèi)容進行點擊查看，更好的促進用戶與數(shù)據(jù)之間的互動。
• 實時：網(wǎng)絡(luò)和大數(shù)據(jù)背景，數(shù)據(jù)的實效性尤為重要。

在此次設(shè)計中，最大的收獲是與各角色的合作與溝通，以及協(xié)調(diào)資源，并提升了對項目的預(yù)判能力。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)