新用戶登錄后自動(dòng)創(chuàng)建賬號(hào)
登錄使得我們很快明確了順風(fēng)車的產(chǎn)品定義,目標(biāo)用戶,主要功能,產(chǎn)品場(chǎng)景,產(chǎn)品特色和競(jìng)品的差異化以及未來(lái)順風(fēng)車的產(chǎn)品走向. 未來(lái)它將是一個(gè)每天改變千萬(wàn)人次出行的產(chǎn)品,它能讓共享私家車成為一種連接人與人的生活方式.
我在網(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),從用戶意見中提煉用戶最本質(zhì)的需求,需要改善的地方.
設(shè)計(jì)階段初期
因?yàn)闆]有數(shù)據(jù)和用戶反饋?zhàn)鲆揽?,我們?cè)诤蚉M做需求分析的時(shí)候追求本心,理解用戶核心問(wèn)題和解決方案,勇敢做.腦暴大膽嘗試了很多種業(yè)務(wù)方案.
項(xiàng)目初期在和產(chǎn)品討論如果沒有一套整體的流程圖是很難和產(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)目前期沒有交互,這時(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ù)牧舭?,易于操?/span>
4 視覺規(guī)范的統(tǒng)一性與一致性.
5 各個(gè)分辨率的適配問(wèn)題,小尺寸要做單獨(dú)的處理.
6 Android和iOS的差異性思考.
7 不做跳度特大的頁(yè)面,整體保持平穩(wěn).讓用戶好理解.
設(shè)計(jì)的預(yù)期:
1 車主使用順風(fēng)車,能夠清楚的找到乘客和車主在哪里切換.
2 保持視覺交互平穩(wěn),使用過(guò)程中輕松流暢并且高效.
當(dāng)我們把所有頁(yè)面高保真都做完之后,我的習(xí)慣還是拼成視覺流程圖.
有幾點(diǎn)好處:
1 查看有沒有遺漏的頁(yè)面.比如:異常狀態(tài),浮層提醒一類.
2 查看有沒有視覺該統(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ù)上線,大版本更新以及新功能流程使用.
畢竟小版本的一些視覺改動(dòng),如果一期迭代是10天,每個(gè)版本都出一份視覺流程圖并保證是最新的太浪費(fèi)成本了.
大小版本的改動(dòng)只做視覺規(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ā)沒有直接溝通,把產(chǎn)出交給開發(fā)之后就不管了
3 最后開發(fā)完成沒有進(jìn)行視覺走查.
說(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é)的,一人一塊,如果沒有足夠充分的溝通,很容易二次或者多次開發(fā)相同的控件,耽誤開發(fā)時(shí)間而且視覺走查的時(shí)候也會(huì)費(fèi)時(shí)費(fèi)力,那時(shí)候再想讓開發(fā)統(tǒng)一就不那么容易了,因?yàn)橄嗤目丶煌拈_發(fā)寫法可能也會(huì)不一樣.導(dǎo)致一個(gè)控件視覺聯(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)注切圖確保沒有問(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)不及修改.
如果是純視覺優(yōu)化,那還好,只需將需要更改的切圖或者文字大小,顏色之類的同步到開發(fā)即可.
整理順風(fēng)車視覺規(guī)范,小版本迭代的時(shí)候隨期更新
開發(fā)完成就會(huì)進(jìn)行到視覺聯(lián)調(diào)和測(cè)試解BUG階段,由于項(xiàng)目周期有限并且緊張.所以視覺聯(lián)調(diào)一定要快速進(jìn)入,因?yàn)楹笃贐UG的測(cè)出,開發(fā)沒有足夠多的時(shí)間與你進(jìn)行視覺聯(lián)調(diào).
在這里我一般是先調(diào)iOS的,因?yàn)榘沧堪l(fā)布審核比較快,所以時(shí)間會(huì)比iOS寬裕一些.
視覺聯(lián)調(diào)主要調(diào)整的是,視覺,狀態(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)必須要保證視覺的頁(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)視覺聯(lián)調(diào)完成之后我趁熱打鐵梳理了一遍順風(fēng)車的相關(guān)頁(yè)面,把平臺(tái)及順風(fēng)車相關(guān)的控件抽取出來(lái)制作出了順風(fēng)車視覺規(guī)范文檔.
制作視覺規(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)化改善的地方一目了然
端上視覺規(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)檫@里還沒涉及到設(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í)覺得很有成就感,可在工作當(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)題.
找回密碼
注冊(cè)賬號(hào)