滴滴順風車產(chǎn)品設計 - AricZhou - 博客頻道 - CSDN.NET?

順風車項目初期王凑，產(chǎn)品GM反復和我們強調業(yè)務使命兰绣，私家車出行在滴滴體系中的角色世分，私家車市場規(guī)模，業(yè)務模式概述缀辩，業(yè)務模式關鍵詞臭埋，目標體系.

使得我們很快明確了順風車的產(chǎn)品定義，目標用戶臀玄，主要功能瓢阴，產(chǎn)品場景，產(chǎn)品特色和競品的差異化以及未來順風車的產(chǎn)品走向.

未來它將是一個每天改變千萬人次出行的產(chǎn)品镐牺，它能讓共享私家車成為一種連接人與人的生活方式.

我在網(wǎng)上收集資料炫掐，對順風車已經(jīng)有了一定的了解，當時國內的拼車APP已經(jīng)有一些但還不成熟睬涧，我下了一些競品軟件募胃，把每個產(chǎn)品的頁面截圖拼湊成流程圖，觀察總結它們的核心功能及業(yè)務流程畦浓，體驗好和不好的地方都記錄在筆記上.收集問題之后痹束，對問題進行分析，最終聚焦在核心的問題讶请，并將分析的結果展示給團隊.

研究思考競品的主要功能祷嘶，業(yè)務流程和信息布局，以及網(wǎng)上和現(xiàn)實中車主乘客對順風出行的一些痛點夺溢，從用戶意見中提煉用戶最本質的需求论巍，需要改善的地方.

設計階段初期，因為沒有數(shù)據(jù)和用戶反饋做依靠风响，我們在和PM做需求分析的時候追求本心嘉汰，理解用戶核心問題和解決方案，勇敢做.腦暴大膽嘗試了很多種業(yè)務方案.

項目初期在和產(chǎn)品討論如果沒有一套整體的流程圖是很難和產(chǎn)品以及技術溝通進展的状勤，于是我們花了1天時間的討論鞋怀，把主要功能及業(yè)務流程快速梳理了一遍双泪，搭建了一套順風車業(yè)務流程圖.

流程圖分為3個部分，1 乘客流程（乘客發(fā)單－呼叫等待－車主接單－支付評價）密似，2 車主流程（車主選單－車主搶單－送達乘客－等待支付－評價乘客）焙矛，3 公共部分（個人主頁，個人余額残腌，實名認證村斟，車主認證，接單設置等）废累，這樣我們在討論的時候就方便很多.前期隨著每天的討論增加刪減功能都要確保每天的流程圖更新一遍邓梅，讓大家的信息能夠及時同步，看著挺麻煩邑滨，其實當中大部分時間都花在產(chǎn)品討論上了日缨，白天產(chǎn)品和設計一起討論，晚上修改更新郵件.

在項目前期沒有交互掖看，這時候產(chǎn)品設計就要充當交互的職責匣距，緊跟產(chǎn)品，關于產(chǎn)品討論的會議都要去參加哎壳，積極的去參與毅待，腦暴，在過程中归榕，展現(xiàn)自己的專業(yè)度尸红，獲得產(chǎn)品的信任，過程中得到產(chǎn)品等同事的認可刹泄，有利于方案的執(zhí)行外里。多數(shù)人已經(jīng)認可的方案，少數(shù)人在否定方案時會非常慎重特石。和產(chǎn)品在項目前期在目標上達成一致盅蝗，避免在設計方案上發(fā)散性討論.由于前期的產(chǎn)品討論，每天產(chǎn)出的流程圖都會有變化姆蘸，低保真流程圖不需要出到特別細致的階段墩莫，只要把產(chǎn)品思路表達正確即可.

注意流程圖不要覆蓋，按time line保存逞敷，這樣方便之后的升級改版review之前的想法及功能點.

當我們把整個的產(chǎn)品流程都梳理完成狂秦，產(chǎn)品確定之后.就要開始細化頁面了，我們要保證的是順風車上線產(chǎn)出高質量的設計推捐，重要的頁面要著重去想去設計故痊，多做嘗試，讓用戶體驗做到最優(yōu),同時要和滴滴打車平臺的設計風格保持一致，GUI保持一致.本次開發(fā)周期非常短愕秫，細化所有端上效果圖的時間僅有一周的時間，雖然時間很短焰络，但是前期鋪墊時間很長戴甩，我們對這個產(chǎn)品流程已經(jīng)非常熟悉，一切還算順利.

拿首頁為例闪彼，當用戶第一次進入順風車最先進入的就是首頁甜孤，主要功能會在首頁展示，所以這里考慮的比較多,我們在首頁的嘗試飛機稿不下10張畏腕，經(jīng)過謹慎的考慮缴川，我們采用了現(xiàn)在端上的效果.

制作高保真效果圖的時候這里會思考以下幾點:

1 與滴滴打車平臺整體設計氣質保持一致.相同的功能控件沿用平臺.

2 一個頁面一個核心功能，信息層級描馅，強弱關系的處理.

3 輕便把夸，適當?shù)牧舭祝子诓僮?/p>

4 視覺規(guī)范的統(tǒng)一性與一致性.

5 各個分辨率的適配問題铭污，小尺寸要做單獨的處理.

6 Android和iOS的差異性思考.

7 不做跳度特大的頁面恋日，整體保持平穩(wěn).讓用戶好理解.

設計的預期：

1 車主使用順風車，能夠清楚的找到乘客和車主在哪里切換.

2 保持視覺交互平穩(wěn)嘹狞，使用過程中輕松流暢并且高效.

當我們把所有頁面高保真都做完之后岂膳，我的習慣還是拼成視覺流程圖.

有幾點好處:

1 查看有沒有遺漏的頁面.比如:異常狀態(tài)，浮層提醒一類.

2 查看有沒有視覺該統(tǒng)一的地方?jīng)]有統(tǒng)一磅网，比如:文字大小谈截，顏色，按鈕大小涧偷，間距都需要整體review.

3 平臺的控件開發(fā)可以復用的標記.

4 順風車的控件樣式在頁面可以復用的標記.

5 開發(fā)和測試看起來一目了然簸喂，溝通起來節(jié)省成本.

6 制作順風車規(guī)范的時候方便查看.

當然這個方法只適合在新產(chǎn)品業(yè)務上線，大版本更新以及新功能流程使用.

畢竟小版本的一些視覺改動嫂丙，如果一期迭代是10天娘赴，每個版本都出一份視覺流程圖并保證是最新的太浪費成本了.

大小版本的改動只做視覺規(guī)范的更新就好.

開發(fā)環(huán)節(jié)我認為在產(chǎn)品設計里算是最關鍵的一部了，用戶不可能直接拿著你制作的設計稿去進行使用跟啤，你的設計是需要經(jīng)過開發(fā)實現(xiàn)之后才會到達用戶手中诽表，所以設計和開發(fā)的對接，溝通尤為關鍵.這個時候的設計要跟進開發(fā)環(huán)節(jié)隅肥，保證產(chǎn)出物和設計一致竿奏，交互邏輯及動畫展示保持一致.

好多設計師抱怨明明設計的很好，可實際線上效果卻不理想腥放，相差太大.

問題出在哪里泛啸？

1 標注圖及切圖質量不達標

2 和開發(fā)沒有直接溝通，把產(chǎn)出交給開發(fā)之后就不管了

3 最后開發(fā)完成沒有進行視覺走查.

說一下我對順風車一期和開發(fā)的一個產(chǎn)出流程和溝通

1 首先自己要對這款產(chǎn)品足夠的熟悉秃症，頁面邏輯跳轉候址，哪里展示什么吕粹，有哪些種狀態(tài)要充分了解，不然和開發(fā)溝通岗仑，人家問什么全都解釋不清楚匹耕，還要去找產(chǎn)品確認，耽誤時間

2 把所有本期相關的開發(fā)拉在一起開個會荠雕，相同的控件抽離出來稳其，記錄下來，和開發(fā)溝通的時候避免二次開發(fā)炸卑，因為一個產(chǎn)品可能是好幾個開發(fā)人員負責的既鞠，一人一塊，如果沒有足夠充分的溝通盖文，很容易二次或者多次開發(fā)相同的控件嘱蛋，耽誤開發(fā)時間而且視覺走查的時候也會費時費力，那時候再想讓開發(fā)統(tǒng)一就不那么容易了椅寺，因為相同的控件不同的開發(fā)寫法可能也會不一樣.導致一個控件視覺聯(lián)調要調整多次浑槽，會吐血的.

3 所有頁面標注切圖需要怎么給到開發(fā)要過一遍，記錄下特殊的地方返帕，因為有的頁面需要特殊的動畫處理桐玻，或者時間成本有限，切圖需要特殊處理荆萤，如果這個時候不溝通明確了镊靴，按照自己的意思切圖標注了，開發(fā)用不了链韭，還會反過頭來再找你偏竟，浪費大家時間.

4 這個時候就可以按照之前和開發(fā)溝通之后進行標注切圖了，這里我會產(chǎn)出幾項給開發(fā).

1) 所有本期相關頁面效果圖

2) 本期效果流程圖

3) 相關頁面標注敞峭，頁面樣式重復的就不需要再標注了踊谋，這里主要標注(文字大小，顏色旋讹，按鈕大小殖蚕，按下效果，長寬沉迹，動畫說明睦疫，如果有服務器下發(fā)的尺寸的要做說明，最多顯示的字數(shù))

4) iOS（@2x,@3x）Android（1080）切圖

5) 發(fā)送郵件給到開發(fā)并抄送相關產(chǎn)品負責人鞭呕，再當面和開發(fā)溝通確認下標注切圖確保沒有問題.

設計我是以iPhone6尺寸進行設計的蛤育，大屏手機越來越主流，所以我的標注圖就是6為基準，6的切圖為iOS@2x圖瓦糕，當@2x圖制作完成之后底洗，我會等比放大150%,生成@3x圖，這里需要注意一下刻坊，3x圖可能會有半像素枷恕，所以要手動都調整下 .

iOS這塊完成之后我會產(chǎn)出安卓的，以iphone6為基準谭胚，向上放大144，產(chǎn)出安卓1080的進行標注未玻，切圖只出1080的灾而，向下等比進行適配.

設計在程序開發(fā)階段，不然就是和產(chǎn)品準備下期需求扳剿，不然就是繼續(xù)優(yōu)化可優(yōu)化的頁面旁趟，如果是優(yōu)化頁面，這個需求無論是設計還是產(chǎn)品提出來的庇绽，一定要盡早的告知開發(fā)锡搜，不要耽誤時間，不然時間有限瞧掺，很可能優(yōu)化的地方來不及修改.

如果是純視覺優(yōu)化耕餐，那還好，只需將需要更改的切圖或者文字大小辟狈，顏色之類的同步到開發(fā)即可.

整理順風車視覺規(guī)范肠缔，小版本迭代的時候隨期更新

開發(fā)完成就會進行到視覺聯(lián)調和測試解BUG階段，由于項目周期有限并且緊張.所以視覺聯(lián)調一定要快速進入哼转，因為后期BUG的測出明未，開發(fā)沒有足夠多的時間與你進行視覺聯(lián)調.

在這里我一般是先調iOS的，因為安卓發(fā)布審核比較快壹蔓，所以時間會比iOS寬裕一些.

視覺聯(lián)調主要調整的是趟妥，視覺，狀態(tài)的展示（下拉刷新佣蓉，點擊加載披摄，異常情況），各尺寸分辨率適配和交互動畫.

一般iOS是能看虛擬界面的偏螺，我會讓開發(fā)挨個把頁面截圖給我行疏，對照設計稿重疊著看，精確到像素套像，能當時解決的就當時解決酿联，有的調整需要花時間的我會先記錄下來，和開發(fā)商量下時間，好了再次對照下.

由于前期頭開發(fā)前的鋪墊贞让，相同的控件只需調整一遍周崭，相對會節(jié)省時間.

因為iOS設計稿做的是iPhone6的尺寸，所以開發(fā)會以iPhone6為基準喳张，我聯(lián)調的時候也是這樣续镇，先調整iPhone6，6全部調整好了之后會再次調整5和plus的尺寸销部，因為都是等比的摸航，一般不會出大麻煩，只是4上有的需要單獨處理舅桩，因為4的尺寸高度有限酱虎，有的頁面不允許有下拉的狀態(tài)，這時候就需要單獨處理了擂涛，圖片的大小读串，間隔的修整以及一些展示，比如評論標簽撒妈，在5 6 plus上顯示的是4行恢暖，在4上只能顯示3行了.

由于iOS聯(lián)調只有2天的時間，時間緊迫狰右，這里基本完成不了所有的頁面調整杰捂，我將頁面從頭到尾看了一遍，按照頁面的重點優(yōu)先級排了順序挟阻，將重點必須要保證視覺的頁面用標記標紅.然后找iOS負責人溝通琼娘，需要同時和相關RD一起調整，這樣能保證效率附鸽，我將他們做的頁面按照姓名脱拼，把頁面放到他們相關姓名的文件夾中.

安卓是以1080為基準進行聯(lián)調，一般1080調整好了720基本過過就還好坷备，480有的地方也會單獨處理.

當視覺聯(lián)調完成之后我趁熱打鐵梳理了一遍順風車的相關頁面熄浓，把平臺及順風車相關的控件抽取出來制作出了順風車視覺規(guī)范文檔.

制作視覺規(guī)范的目的是：

1 提升設計效率

2 統(tǒng)一設計標準

3 便于后期順風車加設計人員，可以很方便了解產(chǎn)品省撑，快速著手設計.

4 回顧規(guī)范赌蔑，需要優(yōu)化改善的地方一目了然

端上視覺規(guī)范：

1 文字字號控件

2 顏色控件

3 導航相關-通用控件

4 順風車通用控件

5 浮層控件

6 按鈕控件

7 icon控件

在這里順風車一期的設計相關的所有流程就寫完了，總結下設計師在這個產(chǎn)品里各個時期擔當?shù)慕巧D變.

1 產(chǎn)品設計初期：設計師主要緊密和產(chǎn)品經(jīng)理溝通竟秫，關于產(chǎn)品討論的會議都要去參加娃惯，通過競品分析和用戶反饋采集用戶需求，因為這里還沒涉及到設計相關肥败，討論的同時站在用戶和產(chǎn)品的角度多去考慮問題趾浅，和產(chǎn)品最終達成一致.

2 產(chǎn)品設計中期: ?這個時候的產(chǎn)品功能愕提，業(yè)務流程基本定型，這里還是緊密的配合產(chǎn)品皿哨，以解決產(chǎn)品需求浅侨，減少用戶理解操作的成本為目的，設計草圖及低保真流程圖.

3 產(chǎn)品設計后期：這個階段設計偏執(zhí)行的多一些证膨，主要負責產(chǎn)出高質量的設計如输，和開發(fā)緊密聯(lián)系，跟進各個開發(fā)環(huán)節(jié)央勒，確保產(chǎn)品能夠高質量的上線.

從2月份開始業(yè)務成立不见，我參與了這個產(chǎn)品從0到1的過程，在這里我學到了很多東西崔步，忙碌的工作讓我來不及做沉淀脖祈，最近終于把這個總結寫好了.

對自己具體分為三個方向的成長，項目管理刷晋，技能管理以及橫向擴展.當然自己也要勤思考.

項目管理：任務優(yōu)先級，時間節(jié)點的把控慎陵，產(chǎn)品溝通眼虱，技術溝通.高質量產(chǎn)出，確保端上效果與設計稿基本一致.

技能管理：有關設計的一切多去看席纽，多去想去思考（包含平面捏悬，運營），采集好的設計润梯，勤做練習.專業(yè)度的提升.

橫向擴展：產(chǎn)品思維过牙，運營知識，時間管理.

以前我會花大量的時間去做擬物圖標的練習纺铭，當時覺得很有成就感寇钉，可在工作當中很少會有那么長的周期和合適你去做這些東西的一個項目.更多的時間是花在產(chǎn)品上，思考舶赔，討論扫倡，設計，推動竟纳，跟進.現(xiàn)在的成就感更在用設計解決了產(chǎn)品當中的問題.

歡迎加群討論產(chǎn)品設計和黑魔法撵溃。

想了解更多的創(chuàng)造黑魔法產(chǎn)品的知識和思維框架，建議來2016產(chǎn)品經(jīng)理千人峰會锥累，大會也邀請各領域產(chǎn)品專家將為你指點解讀變革時代的產(chǎn)品設計缘挑。無論您是CEO、產(chǎn)品VP桶略、產(chǎn)品總監(jiān)语淘、產(chǎn)品經(jīng)理诲宇、創(chuàng)業(yè)者、運營專業(yè)人員還是IT工程師，2016產(chǎn)品經(jīng)理千人峰會都會讓您不虛此行葫辐！

僅需一頓飯錢棒呛，參加頂級產(chǎn)品專家一天的分享，做個大變革時代的明白人它掂，學會在變革時代的產(chǎn)品設計和運營方法，讓自己能力快速提升溯泣，公司收入快速提升虐秋。

巴菲特有一句金玉良言：“Invest in yourself”。對于年輕人才說垃沦，提高自己客给，專注于自己的事業(yè)，讓其蒸蒸日上才是最好的投資肢簿！

建議您不要錯過本次投資靶剑。

點擊報名參加（http://event.3188.la/315019104）或掃描圖中的二維碼進入報名頁。目前是8折優(yōu)惠期池充。