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

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

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

設(shè)計(jì)階段初期

因?yàn)闆](méi)有數(shù)據(jù)和用戶反饋?zhàn)鲆揽?，我們?cè)诤蚉M做需求分析的時(shí)候追求本心，理解用戶核心問(wèn)題和解決方案，勇敢做.腦暴大膽嘗試了很多種業(yè)務(wù)方案.

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

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

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

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

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

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

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

1 與滴滴打車平臺(tái)整體設(shè)計(jì)氣質(zhì)保持一致.相同的功能控件沿用平臺(tái).

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

3 輕便，適當(dāng)?shù)牧舭祝子诓僮?/p>

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

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

6 Android和iOS的差異性思考.

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

設(shè)計(jì)的預(yù)期：

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

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

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

有幾點(diǎn)好處:

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

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

3 平臺(tái)的控件開發(fā)可以復(fù)用的標(biāo)記.

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

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

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

當(dāng)然這個(gè)方法只適合在新產(chǎn)品業(yè)務(wù)上線，大版本更新以及新功能流程使用.
畢竟小版本的一些視覺(jué)改動(dòng)，如果一期迭代是10天，每個(gè)版本都出一份視覺(jué)流程圖并保證是最新的太浪費(fèi)成本了.
大小版本的改動(dòng)只做視覺(jué)規(guī)范的更新就好.

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

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

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

1 標(biāo)注圖及切圖質(zhì)量不達(dá)標(biāo)

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

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

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

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

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

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

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

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

2) 本期效果流程圖

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

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

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

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

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

設(shè)計(jì)在程序開發(fā)階段

不然就是和產(chǎn)品準(zhǔn)備下期需求，不然就是繼續(xù)優(yōu)化可優(yōu)化的頁(yè)面，如果是優(yōu)化頁(yè)面，這個(gè)需求無(wú)論是設(shè)計(jì)還是產(chǎn)品提出來(lái)的，一定要盡早的告知開發(fā)，不要耽誤時(shí)間，不然時(shí)間有限，很可能優(yōu)化的地方來(lái)不及修改.
如果是純視覺(jué)優(yōu)化，那還好，只需將需要更改的切圖或者文字大小，顏色之類的同步到開發(fā)即可.
整理順風(fēng)車視覺(jué)規(guī)范，小版本迭代的時(shí)候隨期更新

開發(fā)完成就會(huì)進(jìn)行到視覺(jué)聯(lián)調(diào)和測(cè)試解BUG階段，由于項(xiàng)目周期有限并且緊張.所以視覺(jué)聯(lián)調(diào)一定要快速進(jìn)入，因?yàn)楹笃贐UG的測(cè)出，開發(fā)沒(méi)有足夠多的時(shí)間與你進(jìn)行視覺(jué)聯(lián)調(diào).
在這里我一般是先調(diào)iOS的，因?yàn)榘沧堪l(fā)布審核比較快，所以時(shí)間會(huì)比iOS寬裕一些.
視覺(jué)聯(lián)調(diào)主要調(diào)整的是，視覺(jué)，狀態(tài)的展示（下拉刷新，點(diǎn)擊加載，異常情況），各尺寸分辨率適配和交互動(dòng)畫.

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

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

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

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

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

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

1 提升設(shè)計(jì)效率

2 統(tǒng)一設(shè)計(jì)標(biāo)準(zhǔn)

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

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

端上視覺(jué)規(guī)范：

1 文字字號(hào)控件

2 顏色控件

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

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

5 浮層控件

6 按鈕控件

7 icon控件

在這里順風(fēng)車一期的設(shè)計(jì)相關(guān)的所有流程就寫完了，總結(jié)下設(shè)計(jì)師在這個(gè)產(chǎn)品里各個(gè)時(shí)期擔(dān)當(dāng)?shù)慕巧D(zhuǎn)變.

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

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

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

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

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

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

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

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

來(lái)源：站酷

原文鏈接：http://m.zcool.com.cn/article/ZMTcxOTYw.html