如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

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

交互篇

什么是滴滴試駕商業B端平臺App

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

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

需求收集

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

產品定位

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

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

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

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

滴滴試駕B端商業App 產品定義

目標用戶

合作廠商用戶、 內部運營 、銷售 、BD

產品目標

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

用戶定性研究

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

以合作廠商用戶為例

使用場景（典型）

1. 查看項目進度

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

2. 查看最關心的數據

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

考慮點

根據上述場景分析，此平臺設計中應該考慮以下三點：

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

基本流程

與產品經理共同分析了典型使用場景之后，我們拆分出主要功能，并參考前期的調研數據，構成了B端商業app業務流程。分為：試駕、項目和個人中心。

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

滴滴試駕B端商業App產品設計

原型圖表達產品思路，便于溝通

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

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

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

設計差異化和一致性

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

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

總結

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

在產品設計的前半段，交互設計師就是半個產品經理，參與產品需求的討論，研究競品，提煉功能。

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

在設計的后期，是參與人員最多的階段，從產品經理到設計師，再到開發，同一件事，不同的人往往有不同的角度去看待，吸收不同人員的看法，并站在自己專業的角度去分析和解決問題，是合作的最優結果。

到了開發階段，由于需求的不斷優化和開發中遇到的一些困難，設計師需要評估不同的方案，選取最適合當前排期和目標的解決辦法，并協調相關人員，跟進各個開發環節，確保產品能夠高質量的上線。

界面篇

設計一款app，第一步就是定主色調。

到底如何來選擇APP的主色調？

• 從目標用戶的角度選取
• 從公司或品牌企業文化的角度選取
• 從產品特有屬性來選取

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

界面設計初期

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

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

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

整體，指哪些模塊或者信息和按鈕是復用的，在設計過程中就要保持他們的統一性。

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

高保真設計設計產出

以iPhone6尺寸做設計。

直觀數據可視化。

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

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

輸出的過程:

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

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

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

UI 跟進與推動

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

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

上線前，需要時間參與項目的所有人坐在一起來優化和調整。

最后上線。

小結：

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

數據直觀是最大的挑戰，設計的美觀度和開發時間成本做均衡，做完這款app之后也總結下數據可視化有哪些特征？

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

在此次設計中，最大的收獲是與各角色的合作與溝通，以及協調資源，并提升了對項目的預判能力。

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