順風(fēng)車(chē)項目初期

產(chǎn)品GM反復和我們強調業(yè)務(wù)使命，私家車(chē)出行在滴滴體系中的角色，私家車(chē)市場(chǎng)規模，業(yè)務(wù)模式概述，業(yè)務(wù)模式關(guān)鍵詞，目標體系.

使得我們很快明確了順風(fēng)車(chē)的產(chǎn)品定義，目標用戶(hù)，主要功能，產(chǎn)品場(chǎng)景，產(chǎn)品特色和競品的差異化以及未來(lái)順風(fēng)車(chē)的產(chǎn)品走向. 未來(lái)它將是一個(gè)每天改變千萬(wàn)人次出行的產(chǎn)品，它能讓共享私家車(chē)成為一種連接人與人的生活方式.

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

研究思考競品的主要功能，業(yè)務(wù)流程和信息布局，以及網(wǎng)上和現實(shí)中車(chē)主乘客對順風(fēng)出行的一些痛點(diǎn)，從用戶(hù)意見(jiàn)中提煉用戶(hù)最本質(zhì)的需求，需要改善的地方.

設計階段初期

因為沒(méi)有數據和用戶(hù)反饋做依靠，我們在和PM做需求分析的時(shí)候追求本心，理解用戶(hù)核心問(wèn)題和解決方案，勇敢做.腦暴大膽嘗試了很多種業(yè)務(wù)方案.

項目初期在和產(chǎn)品討論如果沒(méi)有一套整體的流程圖是很難和產(chǎn)品以及技術(shù)溝通進(jìn)展的，于是我們花了1天時(shí)間的討論，把主要功能及業(yè)務(wù)流程快速梳理了一遍，搭建了一套順風(fēng)車(chē)業(yè)務(wù)流程圖.

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

在項目前期沒(méi)有交互，這時(shí)候產(chǎn)品設計就要充當交互的職責，緊跟產(chǎn)品，關(guān)于產(chǎn)品討論的會(huì )議都要去參加，積極的去參與，腦暴，在過(guò)程中，展現自己的專(zhuān)業(yè)度，獲得產(chǎn)品的信任，過(guò)程中得到產(chǎn)品等同事的認可，有利于方案的執行。多數人已經(jīng)認可的方案，少數人在否定方案時(shí)會(huì )非常慎重。和產(chǎn)品在項目前期在目標上達成一致，避免在設計方案上發(fā)散性討論.由于前期的產(chǎn)品討論，每天產(chǎn)出的流程圖都會(huì )有變化，低保真流程圖不需要出到特別細致的階段，只要把產(chǎn)品思路表達正確即可.

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

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

拿首頁(yè)為例，當用戶(hù)第一次進(jìn)入順風(fēng)車(chē)最先進(jìn)入的就是首頁(yè)，主要功能會(huì )在首頁(yè)展示，所以這里考慮的比較多,我們在首頁(yè)的嘗試飛機稿不下10張，經(jīng)過(guò)謹慎的考慮，我們采用了現在端上的效果.

制作高保真效果圖的時(shí)候這里會(huì )思考以下幾點(diǎn):

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

2 一個(gè)頁(yè)面一個(gè)核心功能，信息層級，強弱關(guān)系的處理.

3 輕便，適當的留白，易于操作

4 視覺(jué)規范的統一性與一致性.

5 各個(gè)分辨率的適配問(wèn)題，小尺寸要做單獨的處理.

6 Android和iOS的差異性思考.

7 不做跳度特大的頁(yè)面，整體保持平穩.讓用戶(hù)好理解.

設計的預期：

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

2 保持視覺(jué)交互平穩，使用過(guò)程中輕松流暢并且高效.

當我們把所有頁(yè)面高保真都做完之后，我的習慣還是拼成視覺(jué)流程圖.

有幾點(diǎn)好處:

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

2 查看有沒(méi)有視覺(jué)該統一的地方?jīng)]有統一，比如:文字大小，顏色，按鈕大小，間距都需要整體review.

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

4 順風(fēng)車(chē)的控件樣式在頁(yè)面可以復用的標記.

5 開(kāi)發(fā)和測試看起來(lái)一目了然，溝通起來(lái)節省成本.

6 制作順風(fēng)車(chē)規范的時(shí)候方便查看.

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

畢竟小版本的一些視覺(jué)改動(dòng)，如果一期迭代是10天，每個(gè)版本都出一份視覺(jué)流程圖并保證是最新的太浪費成本了.

大小版本的改動(dòng)只做視覺(jué)規范的更新就好.

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

好多設計師抱怨明明設計的很好，可實(shí)際線(xiàn)上效果卻不理想，相差太大.

問(wèn)題出在哪里？

1 標注圖及切圖質(zhì)量不達標

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

3 最后開(kāi)發(fā)完成沒(méi)有進(jìn)行視覺(jué)走查.

說(shuō)一下我對順風(fēng)車(chē)一期和開(kāi)發(fā)的一個(gè)產(chǎn)出流程和溝通

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

2 把所有本期相關(guān)的開(kāi)發(fā)拉在一起開(kāi)個(gè)會(huì )，相同的控件抽離出來(lái)，記錄下來(lái)，和開(kāi)發(fā)溝通的時(shí)候避免二次開(kāi)發(fā)，因為一個(gè)產(chǎn)品可能是好幾個(gè)開(kāi)發(fā)人員負責的，一人一塊，如果沒(méi)有足夠充分的溝通，很容易二次或者多次開(kāi)發(fā)相同的控件，耽誤開(kāi)發(fā)時(shí)間而且視覺(jué)走查的時(shí)候也會(huì )費時(shí)費力，那時(shí)候再想讓開(kāi)發(fā)統一就不那么容易了，因為相同的控件不同的開(kāi)發(fā)寫(xiě)法可能也會(huì )不一樣.導致一個(gè)控件視覺(jué)聯(lián)調要調整多次，會(huì )吐血的.

3 所有頁(yè)面標注切圖需要怎么給到開(kāi)發(fā)要過(guò)一遍，記錄下特殊的地方，因為有的頁(yè)面需要特殊的動(dòng)畫(huà)處理，或者時(shí)間成本有限，切圖需要特殊處理，如果這個(gè)時(shí)候不溝通明確了，按照自己的意思切圖標注了，開(kāi)發(fā)用不了，還會(huì )反過(guò)頭來(lái)再找你，浪費大家時(shí)間.

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

1) 所有本期相關(guān)頁(yè)面效果圖

2) 本期效果流程圖

3) 相關(guān)頁(yè)面標注，頁(yè)面樣式重復的就不需要再標注了，這里主要標注(文字大小，顏色，按鈕大小，按下效果，長(cháng)寬，動(dòng)畫(huà)說(shuō)明，如果有服務(wù)器下發(fā)的尺寸的要做說(shuō)明，最多顯示的字數)

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

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

設計我是以iPhone6尺寸進(jìn)行設計的，大屏手機越來(lái)越主流，所以我的標注圖就是6為基準，6的切圖為iOS@2x圖，當@2x圖制作完成之后，我會(huì )等比放大150%,生成@3x圖，這里需要注意一下，3x圖可能會(huì )有半像素，所以要手動(dòng)都調整下 .

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

設計在程序開(kāi)發(fā)階段

不然就是和產(chǎn)品準備下期需求，不然就是繼續優(yōu)化可優(yōu)化的頁(yè)面，如果是優(yōu)化頁(yè)面，這個(gè)需求無(wú)論是設計還是產(chǎn)品提出來(lái)的，一定要盡早的告知開(kāi)發(fā)，不要耽誤時(shí)間，不然時(shí)間有限，很可能優(yōu)化的地方來(lái)不及修改.

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

整理順風(fēng)車(chē)視覺(jué)規范，小版本迭代的時(shí)候隨期更新

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

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

視覺(jué)聯(lián)調主要調整的是，視覺(jué)，狀態(tài)的展示（下拉刷新，點(diǎn)擊加載，異常情況），各尺寸分辨率適配和交互動(dòng)畫(huà).

一般iOS是能看虛擬界面的，我會(huì )讓開(kāi)發(fā)挨個(gè)把頁(yè)面截圖給我，對照設計稿重疊著(zhù)看，精確到像素，能當時(shí)解決的就當時(shí)解決，有的調整需要花時(shí)間的我會(huì )先記錄下來(lái)，和開(kāi)發(fā)商量下時(shí)間，好了再次對照下.

由于前期頭開(kāi)發(fā)前的鋪墊，相同的控件只需調整一遍，相對會(huì )節省時(shí)間. 因為iOS設計稿做的是iPhone6的尺寸，所以開(kāi)發(fā)會(huì )以iPhone6為基準，我聯(lián)調的時(shí)候也是這樣，先調整iPhone6，6全部調整好了之后會(huì )再次調整5和plus的尺寸，因為都是等比的，一般不會(huì )出大麻煩，只是4上有的需要單獨處理，因為4的尺寸高度有限，有的頁(yè)面不允許有下拉的狀態(tài)，這時(shí)候就需要單獨處理了，圖片的大小，間隔的修整以及一些展示，比如評論標簽，在5 6 plus上顯示的是4行，在4上只能顯示3行了.

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

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

當視覺(jué)聯(lián)調完成之后我趁熱打鐵梳理了一遍順風(fēng)車(chē)的相關(guān)頁(yè)面，把平臺及順風(fēng)車(chē)相關(guān)的控件抽取出來(lái)制作出了順風(fēng)車(chē)視覺(jué)規范文檔.

制作視覺(jué)規范的目的是：

1 提升設計效率

2 統一設計標準

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

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

端上視覺(jué)規范：

1 文字字號控件

2 顏色控件

3 導航相關(guān)-通用控件

4 順風(fēng)車(chē)通用控件

5 浮層控件

6 按鈕控件

7 icon控件

在這里順風(fēng)車(chē)一期的設計相關(guān)的所有流程就寫(xiě)完了，總結下設計師在這個(gè)產(chǎn)品里各個(gè)時(shí)期擔當的角色轉變.

1 產(chǎn)品設計初期：設計師主要緊密和產(chǎn)品經(jīng)理溝通，關(guān)于產(chǎn)品討論的會(huì )議都要去參加，通過(guò)競品分析和用戶(hù)反饋采集用戶(hù)需求，因為這里還沒(méi)涉及到設計相關(guān)，討論的同時(shí)站在用戶(hù)和產(chǎn)品的角度多去考慮問(wèn)題，和產(chǎn)品最終達成一致.

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

3 產(chǎn)品設計后期：這個(gè)階段設計偏執行的多一些，主要負責產(chǎn)出高質(zhì)量的設計，和開(kāi)發(fā)緊密聯(lián)系，跟進(jìn)各個(gè)開(kāi)發(fā)環(huán)節，確保產(chǎn)品能夠高質(zhì)量的上線(xiàn).

從2月份開(kāi)始業(yè)務(wù)成立，我參與了這個(gè)產(chǎn)品從0到1的過(guò)程，在這里我學(xué)到了很多東西，忙碌的工作讓我來(lái)不及做沉淀，最近終于把這個(gè)總結寫(xiě)好了. 對自己具體分為三個(gè)方向的成長(cháng)，項目管理，技能管理以及橫向擴展.當然自己也要勤思考.

項目管理：任務(wù)優(yōu)先級，時(shí)間節點(diǎn)的把控，產(chǎn)品溝通，技術(shù)溝通.高質(zhì)量產(chǎn)出，確保端上效果與設計稿基本一致.

技能管理：有關(guān)設計的一切多去看，多去想去思考（包含平面，運營(yíng)），采集好的設計，勤做練習.專(zhuān)業(yè)度的提升.

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

以前我會(huì )花大量的時(shí)間去做擬物圖標的練習，當時(shí)覺(jué)得很有成就感，可在工作當中很少會(huì )有那么長(cháng)的周期和合適你去做這些東西的一個(gè)項目.更多的時(shí)間是花在產(chǎn)品上，思考，討論，設計，推動(dòng)，跟進(jìn).現在的成就感更在用設計解決了產(chǎn)品當中的問(wèn)題.