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

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

交互篇

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

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

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

需求收集

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

產(chǎn)品定位

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

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

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

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

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

目標(biāo)用戶

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

產(chǎn)品目標(biāo)

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

用戶定性研究

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

以合作廠商用戶為例

使用場景（典型）

1. 查看項目進(jìn)度

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

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

場景二：不同用戶關(guān)心的數(shù)據(jù)有些不同，在功能層級度的情況下每次都要進(jìn)來查找
需求點（痛點）：在下鉆層級多的情況下經(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é)點進(jìn)行細(xì)化，產(chǎn)出以頁面為單位的功能流程圖，并查看各個功能的層級，同時也便于與產(chǎn)品之間的討論。

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

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

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

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

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

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

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

以首頁為例，前文已經(jīng)說明了從產(chǎn)品角度的規(guī)劃，設(shè)計師們按照需求的優(yōu)先級，定義了首頁的信息架構(gòu)和排版。除此之外，我們還在一些細(xì)節(jié)上進(jìn)行了求同存異的設(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è)計師需要評估不同的方案，選取最適合當(dāng)前排期和目標(biāo)的解決辦法，并協(xié)調(diào)相關(guān)人員，跟進(jìn)各個開發(fā)環(huán)節(jié)，確保產(chǎn)品能夠高質(zhì)量的上線。

界面篇

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

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

• 從目標(biāo)用戶的角度選取

• 從公司或品牌企業(yè)文化的角度選取

• 從產(chǎn)品特有屬性來選取

依照以上三條我們定下了#6480d3為app的主色調(diào)，藍(lán)色系代表著商務(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è)計師需要從整體到細(xì)節(jié)仔細(xì)的分析。

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

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

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

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

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

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

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

輸出的過程:

• 輸出效果圖的切圖及標(biāo)注之前，需要找開發(fā)同學(xué)確認(rèn)復(fù)雜?面的實現(xiàn)方式。標(biāo)注與切圖的正確輸出形式。

• 切圖：OS的750的設(shè)計稿倒出@2x、@3x的圖片，在750 x 1334的設(shè)計稿上標(biāo)注即可。

• 細(xì)心整理輸出設(shè)計文件的文件夾（如圖），提高工作效率的同時也方便之后的查找和更改。

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

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

UI 跟進(jìn)與推動

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

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

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

最后上線。

小結(jié)：

2016年七月中旬，整個app的界面設(shè)計，我們四個人用了一周時間完成，這里面包括切圖和標(biāo)注，現(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)容進(jìn)行點擊查看，更好的促進(jìn)用戶與數(shù)據(jù)之間的互動。

• 實時：網(wǎng)絡(luò)和大數(shù)據(jù)背景，數(shù)據(jù)的實效性尤為重要。

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

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