酷友觀點/經驗：滴滴順風車設計總結（轉載）

公司一直很忙，如今終於有時間把我這幾個月的工做作一個沉澱和總結了，僅爲我的觀點，不表明滴滴官方.感謝各位酷友支持,謝謝各位.

 

 

 

順風車項目初期，產品GM反覆和咱們強調業務使命，私家車出行在滴滴體系中的角色，私家車市場規模，業務模式概述，業務模式關鍵詞，目標體系.

 

使得咱們很快明確了順風車的產品定義，目標用戶，主要功能，產品場景，產品特點和競品的差別化以及將來順風車的產品走向.  

將來它將是一個天天改變千萬人次出行的產品，它能讓共享私家車成爲一種鏈接人與人的生活方式.

我在網上收集資料，對順風車已經有了必定的瞭解，當時國內的拼車APP已經有一些但還不成熟，我下了一些競品軟件，把每一個產品的頁面截圖拼湊成流程圖，觀察總結它們的核心功能及業務流程，體驗好和很差的地方都記錄在筆記上.收集問題以後，對問題進行分析，最終聚焦在覈心的問題，並將分析的結果展現給團隊.

 

研究思考競品的主要功能，業務流程和信息佈局，以及網上和現實中車主乘客對順風出行的一些痛點，從用戶意見中提煉用戶最本質的需求，須要改善的地方.

 

設計階段初期，由於沒有數據和用戶反饋作依靠，咱們在和PM作需求分析的時候追求本心，理解用戶核心問題和解決方案，勇敢作.腦暴大膽嘗試了不少種業務方案.

 

項目初期在和產品討論若是沒有一套總體的流程圖是很難和產品以及技術溝通進展的，因而咱們花了1天時間的討論，把主要功能及業務流程快速梳理了一遍，搭建了一套順風車業務流程圖.

 

流程圖分爲3個部分，1 乘客流程（乘客發單－呼叫等待－車主接單－支付評價），2 車主流程（車主選單－車主搶單－送達乘客－等待支付－評價乘客），3 公共部分（我的主頁，我的餘額，實名認證，車主認證，接單設置等），這樣咱們在討論的時候就方便不少.前期隨着天天的討論增長刪減功能都要確保天天的流程圖更新一遍，讓你們的信息可以及時同步，看着挺麻煩，其實當中大部分時間都花在產品討論上了，白天產品和設計一塊兒討論，晚上修改更新郵件.

 

在項目前期沒有交互，這時候產品設計就要充當交互的職責，緊跟產品，關於產品討論的會議都要去參加，積極的去參與，腦暴，在過程當中，展示本身的專業度，得到產品的信任，過程當中獲得產品等同事的承認，有利於方案的執行。多數人已經承認的方案，少數人在否認方案時會很是慎重。和產品在項目前期在目標上達成一致，避免在設計方案上發散性討論.因爲前期的產品討論，天天產出的流程圖都會有變化，低保真流程圖不須要出到特別細緻的階段，只要把產品思路表達正確便可.

 

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

 

當咱們把整個的產品流程都梳理完成，產品肯定以後.就要開始細化頁面了，咱們要保證的是順風車上線產出高質量的設計，重要的頁面要着重去想去設計，多作嘗試，讓用戶體驗作到最優,同時要和滴滴打車平臺的設計風格保持一致，GUI保持一致.本次開發週期很是短，細化全部端上效果圖的時間僅有一週的時間，雖然時間很短，可是前期鋪墊時間很長，咱們對這個產品流程已經很是熟悉，一切還算順利.

 

拿首頁爲例，當用戶第一次進入順風車最早進入的就是首頁，主要功能會在首頁展現，因此這裏考慮的比較多,咱們在首頁的嘗試飛機稿不下10張，通過謹慎的考慮，咱們採用瞭如今端上的效果.

 

製做高保真效果圖的時候這裏會思考如下幾點:

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

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

3 輕便，適當的留白，易於操做

4 視覺規範的統一性與一致性.

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

6 Android和iOS的差別性思考.

7 不作跳度特大的頁面，總體保持平穩.讓用戶好理解.

 

設計的預期：

1 車主使用順風車，可以清楚的找到乘客和車主在哪裏切換.

2 保持視覺交互平穩，使用過程當中輕鬆流暢而且高效.

 

 

當咱們把全部頁面高保真都作完以後，個人習慣仍是拼成視覺流程圖.

有幾點好處:

1 查看有沒有遺漏的頁面.好比:異常狀態，浮層提醒一類.

2 查看有沒有視覺該統一的地方沒有統一，好比:文字大小，顏色，按鈕大小，間距都須要總體review.

3 平臺的控件開發能夠複用的標記.

4 順風車的控件樣式在頁面能夠複用的標記.

5 開發和測試看起來一目瞭然，溝通起來節省成本.

6 製做順風車規範的時候方便查看.

 

固然這個方法只適合在新產品業務上線，大版本更新以及新功能流程使用.

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

大小版本的改動只作視覺規範的更新就好.

 

 

開發環節我認爲在產品設計裏算是最關鍵的一部了，用戶不可能直接拿着你製做的設計稿去進行使用，你的設計是須要通過開發實現以後纔會到達用戶手中，因此設計和開發的對接，溝通尤其關鍵.這個時候的設計要跟進開發環節，保證產出物和設計一致，交互邏輯及動畫展現保持一致.

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

問題出在哪裏？

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

2 和開發沒有直接溝通，把產出交給開發以後就無論了

3 最後開發完成沒有進行視覺走查.

 

說一下我對順風車一期和開發的一個產出流程和溝通

1 首先本身要對這款產品足夠的熟悉，頁面邏輯跳轉，哪裏展現什麼，有哪些種狀態要充分了解，否則和開發溝通，人家問什麼全都解釋不清楚，還要去找產品確認，耽誤時間

 

2 把全部本期相關的開發拉在一塊兒開個會，相同的控件抽離出來，記錄下來，和開發溝通的時候避免二次開發，由於一個產品多是好幾個開發人員負責的，一人一塊，若是沒有足夠充分的溝通，很容易二次或者屢次開發相同的控件，耽誤開發時間並且視覺走查的時候也會費時費力，那時候再想讓開發統一就不那麼容易了，由於相同的控件不一樣的開發寫法可能也會不同.致使一個控件視覺聯調要調整屢次，會吐血的.

 

3 全部頁面標註切圖須要怎麼給到開發要過一遍，記錄下特殊的地方，由於有的頁面須要特殊的動畫處理，或者時間成本有限，切圖須要特殊處理，若是這個時候不溝通明確了，按照本身的意思切圖標註了，開發用不了，還會反過頭來再找你，浪費你們時間.

 

4 這個時候就能夠按照以前和開發溝通以後進行標註切圖了，這裏我會產出幾項給開發.

1) 全部本期相關頁面效果圖

2) 本期效果流程圖

3) 相關頁面標註，頁面樣式重複的就不須要再標註了，這裏主要標註(文字大小，顏色，按鈕大小，按下效果，長寬，動畫說明，若是有服務器下發的尺寸的要作說明，最多顯示的字數)

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

5) 發送郵件給到開發並抄送相關產品負責人，再當面和開發溝通確認下標註切圖確保沒有問題.

 

設計我是以iPhone6尺寸進行設計的，大屏手機愈來愈主流，因此個人標註圖就是6爲基準，6的切圖爲iOS@2x圖，當@2x圖製做完成以後，我會等比放大150%,生成@3x圖，這裏須要注意一下，3x圖可能會有半像素，因此要手動都調整下 .

iOS這塊完成以後我會產出安卓的，以iphone6爲基準，向上放大144，產出安卓1080的進行標註，切圖只出1080的，向下等比進行適配.

設計在程序開發階段，否則就是和產品準備下期需求，否則就是繼續優化可優化的頁面，若是是優化頁面，這個需求不管是設計仍是產品提出來的，必定要儘早的告知開發，不要耽誤時間，否則時間有限，極可能優化的地方來不及修改.

若是是純視覺優化，那還好，只需將須要更改的切圖或者文字大小，顏色之類的同步到開發便可.

整理順風車視覺規範，小版本迭代的時候隨期更新

 

開發完成就會進行到視覺聯調和測試解BUG階段，因爲項目週期有限而且緊張.因此視覺聯調必定要快速進入，由於後期BUG的測出，開發沒有足夠多的時間與你進行視覺聯調.

在這裏我通常是先調iOS的，由於安卓發佈審覈比較快，因此時間會比iOS寬裕一些.

視覺聯調主要調整的是，視覺，狀態的展現（下拉刷新，點擊加載，異常狀況），各尺寸分辨率適配和交互動畫.

 

通常iOS是能看虛擬界面的，我會讓開發挨個把頁面截圖給我，對照設計稿重疊着看，精確到像素，能當時解決的就當時解決，有的調整須要花時間的我會先記錄下來，和開發商量下時間，好了再次對照下.

 

因爲前期頭開發前的鋪墊，相同的控件只需調整一遍，相對會節省時間.

由於iOS設計稿作的是iPhone6的尺寸，因此開發會以iPhone6爲基準，我聯調的時候也是這樣，先調整iPhone6，6所有調整好了以後會再次調整5和plus的尺寸，由於都是等比的，通常不會出大麻煩，只是4上有的須要單獨處理，由於4的尺寸高度有限，有的頁面不容許有下拉的狀態，這時候就須要單獨處理了，圖片的大小，間隔的修整以及一些展現，好比評論標籤，在5 6 plus上顯示的是4行，在4上只能顯示3行了.

 

因爲iOS聯調只有2天的時間，時間緊迫，這裏基本完成不了全部的頁面調整，我將頁面從頭至尾看了一遍，按照頁面的重點優先級排了順序，將重點必需要保證視覺的頁面用標記標紅.而後找iOS負責人溝通，須要同時和相關RD一塊兒調整，這樣能保證效率，我將他們作的頁面按照姓名，把頁面放到他們相關姓名的文件夾中.

 

安卓是以1080爲基準進行聯調，通常1080調整好了720基本過過就還好，480有的地方也會單獨處理.

 

 

當視覺聯調完成以後我趁熱打鐵梳理了一遍順風車的相關頁面，把平臺及順風車相關的控件抽取出來製做出了順風車視覺規範文檔.

製做視覺規範的目的是：

1 提高設計效率

2 統一設計標準

3 便於後期順風車加設計人員，能夠很方便了解產品，快速着手設計.

4 回顧規範，須要優化改善的地方一目瞭然

 

端上視覺規範：

1 文字字號控件

2 顏色控件

3 導航相關-通用控件

4 順風車通用控件

5 浮層控件

6 按鈕控件

7 icon控件

 

在這裏順風車一期的設計相關的全部流程就寫完了，總結下設計師在這個產品裏各個時期擔當的角色轉變.

1 產品設計初期：設計師主要緊密和產品經理溝通，關於產品討論的會議都要去參加，經過競品分析和用戶反饋採集用戶需求，由於這裏還沒涉及到設計相關，討論的同時站在用戶和產品的角度多去考慮問題，和產品最終達成一致.

2 產品設計中期:  這個時候的產品功能，業務流程基本定型，這裏仍是緊密的配合產品，以解決產品需求，減小用戶理解操做的成本爲目的，設計草圖及低保真流程圖.

3 產品設計後期：這個階段設計偏執行的多一些，主要負責產出高質量的設計，和開發緊密聯繫，跟進各個開發環節，確保產品可以高質量的上線.

 

從2月份開始業務成立，我參與了這個產品從0到1的過程，在這裏我學到了不少東西，忙碌的工做讓我來不及作沉澱，最近終於把這個總結寫好了.

對本身具體分爲三個方向的成長，項目管理，技能管理以及橫向擴展.固然本身也要勤思考.

 

項目管理：任務優先級，時間節點的把控，產品溝通，技術溝通.高質量產出，確保端上效果與設計稿基本一致.

技能管理：有關設計的一切多去看，多去想去思考（包含平面，運營），採集好的設計，勤作練習.專業度的提高.

橫向擴展：產品思惟，運營知識，時間管理.

 

之前我會花大量的時間去作擬物圖標的練習，當時以爲頗有成就感，可在工做當中不多會有那麼長的週期和合適你去作這些東西的一個項目.更多的時間是花在產品上，思考，討論，設計，推進，跟進.如今的成就感更在用設計解決了產品當中的問題.