設計流程的三個階段：需求分析、方案設計、設計驗證，前兩個階段每個團隊都會做，而第三個階段往往會被忽略。本文作者根據其騰訊電腦管家小火箭改版的案例，來為你解析設計流程的三個階段。

每個設計團隊都會有自己的設計流程，根據面向對象和平臺的不同，可能會有些差別，但是大體上都會分為以下三大階段：

1. 需求分析
2. 方案設計
3. 設計驗證

前兩個階段，我想不會有任何設計團隊會不做吧？只有做得好與壞的分別，這也是最考驗領導層戰略眼光和執行力的地方。我們平時說的設計流程，其實更多地都是在看前兩者有什么可改進之處，但是第三個階段卻極容易被忽略。

現在的頂級的互聯網設計團隊，都越來越多地認識到設計驗證的重要性，所以都會投很大力氣去看用戶數據、產品數據以及做用戶調查，或做A/B Test，或快速修正設計方案，或重新調整產品方向。沒人能保證自己憑經驗和直覺一定就能做出令市場滿意的產品，所以這一步相當于檢查射出的箭是否正中靶心，或者離靶心有多遠，然后再去針對性地做調整，此謂“有的放矢”。

再由對設計驗證的重視，倒推而來，我們對前期的需求分析也不會馬虎，特別是做創新產品的時候，都會先做好足夠的市場分析和用戶調查，才會出手，力求一出手就能迅速地抓住用戶痛點，引爆產品。

我為什么會把“設計流程”放在“眼界”這一分類下呢？

因為互聯網環境變化地非?？?，今天還是在為PC平臺做設計，明天就出了移動互聯網，接著又來了VR、AR，各種新技術、新平臺層出不窮，同時還有大量新興的獨角獸創業公司，他們的流程可能和傳統的有很大區別，到底怎樣的流程才是最好的？

這并沒有絕對的定數，所以我們一定要保持開放的心態，時刻學習和借鑒更優秀的流程，因此它應該屬于眼界的范疇。

根據我們DNA設計團隊（騰訊MIG電腦管家設計團隊）平時做設計的方法，我把設計流程總結為三個階段：

1. Why階段：我們為什么要做這款產品？要做給誰用？我們做有什么優勢？
2. How階段：通過上面的分析，我們應該用怎樣的方式來做？
3. What階段：我們具體應該做成什么樣？這里包含設計輸出和設計驗證。

我在產品思維部分其實有講過，這就是西蒙·斯內克的“黃金圈法則”。

只講流程可能不太好理解，咱們繼續發揮“落羽敬齋”的優良傳統，用一個項目的案例來講吧，這次選擇的還是我做騰訊電腦管家小火箭改版的案例，它是我之前投入過很大精力的產品，最終給出的成績也確實令人滿意。

由于這是一個產品升級改版的設計項目，我把這套設計流程類比成圍棋對弈，需要知彼（競品、用戶）、知己（發現問題），先防守好地盤（繼承和發揚之前的優勢），再圖進攻（創新和突破），最后在細棋階段也不能放松，完成收官（細節和驗證）。

一、Why階段

這個階段的關鍵是要想清楚：我們為什么要做這款產品？要做給誰用？我們做有什么優勢？

1.產品目標

在設計之前，需要先弄清楚產品要達成什么目標？是要占領新的市場，還是鞏固舊有的用戶？是要提升產品DAU或UV，還是提升商業轉化率？

電腦管家的加速小火箭之前其實已經獲得了很大的成功，有極高的用戶開啟率，人均日使用次數也很多，還被各類競品爭相模仿。但是我們從后臺的數據、用戶訪談和自己的體驗中發現，現在已經到了一個平臺期，現有的產品形態已經滿足不了用戶的需求了，需要更新設計，再次提升用戶的使用率和產品粘性。

對于這個日使用次數上億的產品要如何改好，我和視覺設計師 Nefish 都感到責任重大。

2.用戶需求

我們通過數據和問卷收集了現在小火箭的用戶人口屬性，發現主要的使用人群是80后和90后，這兩個群體都有自己鮮明的用戶特征。

這里的方法主要是通過用研的方式調查和統計，有后臺數據當然更好。

他們的共同關鍵字是游戲、娛樂和個性，我們對這三點進行腦暴和進一步展開，得出了和用戶喜好相關的、更具有設計指導意義關鍵字。

3.競品分析

我們詳細體驗了一輪競品，分析它們做得好的和不好的地方，以及我們自身的特點在哪里。這一步其實大家都會做，但有一點需要注意：就是競品可以不是你本行業內的競品，完全可以是表現形式上類似的產品，比如你要做一個Web后臺的表單系統，你一樣可以參考京東的商品列表、下單流程等。

特別是國外的優秀案例，更值得我們去仔細分析，他們有著和我們不一樣的思考習慣以及設計思路，多看看有助于開闊視野，不用和國內競品在一個圈子里打滾。

還有一點要特別注意：在分析的時候切記直接人云亦云地照抄，你要知道他們的用戶群體是什么，和你的有什么差別，想清楚他們為什么這么設計，既不小看對手，也不把對方奉為圭(gui)臬(nie)。

4.自身分析

我們還對使用小火箭的用戶、使用一段時間后不用的用戶、以及長時間不用的用戶做了問卷調查，分析他們為什么喜歡使用和不喜歡使用的原因，最終得出上面五個可改進點。

如果是做迭代改進式項目可以只分析問題，但如果是做創新型項目，就需要再加上一個維度：我們團隊做這個產品有什么優勢？

• 我們找到了別人沒解決的用戶痛點？
• 我們的技術能解決別人無法解決的難題？
• 我們設計上的創新能起到很大的推動作用？
• 我們有比別人更強的商務合作與推廣的渠道能力？

等等這些，如果你分析了半天，自己做這個產品并沒有什么優勢，那就得拉上團隊的人好好想想，你為什么要做這個東西了，別浪費時間和金錢。

二、How階段

這個階段是很容易被設計團隊忽略的，大家很喜歡研究完了用戶和競品，直接就開始設計了。但是想做一個優秀的產品，還是需要從產品的維度繼續進行思考，得出了用戶關鍵字、競品特征以及自身優缺點，要怎么指導設計？

1.設計關鍵字

小火箭從設計之初，就有三個設計關鍵詞：有用、有趣和輕量。我們要想繼承之前版本做得好的地方，首先就要明白這三個詞代表的是什么。

• 有用：作為一款在用戶電腦桌面上的加速控件，小火箭必須能起到加速的作用，這是它的立足點；
• 有趣：競品的桌面控件僅僅滿足了有用，在趣味上不足，而小火箭這個形態本身就是希望用一個游戲化的形態讓用戶覺得好玩；
• 輕量：因為常駐桌面，所以小火箭必須很輕、很簡單，絕不能騷擾用戶，否則用戶會毫不猶豫地退出和卸載。

這三點首先滿足的是用戶價值，只有用戶愿意用、喜歡用，小火箭才有可能給我們帶來更多的商業價值。

這種基于核心關鍵字的設計思想，也適用于創新型產品，而這幾個關鍵字，正應該由前面的Why階段的分析得出的。我們在改版前重新思考后，覺得和原先的關鍵字并不沖突，所以繼續沿用了下來。

2.關鍵路徑

基于小火箭的核心關鍵字，我們繼續擴展出了現在是如何做、之后該如何改的思路。

僅僅是繼承和優化原先的優點是不行的，我們基于這次改版的核心產品目標——使用率，詳細分析了為什么用戶會喜歡用或者不想用的原因，逐個給出解決辦法。

這些細致的解決辦法是怎么得出的？

當然不是拍腦袋就能想出來的，其實全部和前面Why階段的分析有關：比如要強化能力感知是分析自身問題得出的；比如前面小火箭要旋轉、要燃燒等這些酷炫的效果，是因為我們的用戶群體關鍵字是游戲、娛樂和個性；比如加速智能提醒，是因為競品這點做得更好，等等……

千萬不要小看Why和How這兩個階段的分析，做還是沒做，做得好還是不好，真正有經驗的設計師從你的最終設計呈現上一眼就能看出來，你前期的思考偷懶了，那就用后面的設計工作量來補吧。

磨刀不誤砍柴工，俗話說得確實好。

三、What階段

這一階段包含兩個部分：第一部分是設計師們最熟悉的設計輸出；第二部分是需要意識、勇氣和能力建設的設計驗證。

1.設計輸出

我把這個部分需要輸出的內容做了個簡單的整理：

（1）主流程圖：

在畫交互框架前，建議新人交互設計師（無論是新入行還是新加入一個領域）都先畫一下主流程圖，可以避免犯一些低級的流程錯誤；

（2）交互框架：

這是交互稿的主要呈現形式，在騰訊內部，交互稿主要是用一整張靜態圖呈現的，里面包含產品目標、設計目標的說明，以及所有界面的黑白稿和交互說明；

• 主流程交互：對應主流程圖，把這塊的交互先畫出來，評審之后再畫下一步；
• 新裝流程：如果是軟件，那新安裝這一步的流程必不可少；
• 新手引導：這一步雖然不是必須的，但如果功能比較復雜或是新版功能改動多，那還是要考慮；
• 分支流程：除了上面三種流程之外，剩下的分支流程界面；
• 異常狀態：空狀態、網絡異常、網頁404等，一定要有一個異常狀態檢查表，不要遺漏這類界面；
• 動畫原則：如果有界面動畫，那在做交互的時候就要考慮到，提前和視覺同學溝通好，在稿件中做簡單的描述或展示。

（3）視覺界面：

這是視覺稿的主要呈現，同樣是用一張大的PSD把所有界面、界面名稱陳列出來：

• 主風格定義：這是第一步，視覺設計師會和交互設計師溝通好，選擇幾個主要的界面來設計主風格，評審之后再畫下一步；
• 主圖形：界面中有時需要一些大的主圖形，如啟動閃屏、首頁大圖等，需要重點設計，一般會和第一步一起做出風格；
• 主要界面：前兩步確定后，設計師會根據交互稿繼續補充主要的視覺界面；
• 次要界面：這一步需要注意，不是所有的界面都需要設計，有些重復性的、控件可復用的界面可以讓開發根據交互稿進行拼湊組合，但是視覺設計師得給出完整的標注規范；
• 控件狀態：按鈕狀態、下拉、進度條等等都需要視覺定義；
• LOGO設計：LOGO的設計時間會比較長，一般在項目前期就會啟動命名和設計流程，這里還會影響到主圖形的設計。

（4）高保真Demo：

我在開發思維那篇中提過，只有交互稿和視覺稿是不夠的，要想保證重要產品能夠完整呈現你的設計，最好有高保真Demo來給老板、客戶和開發同學進行展示：

1）動畫Demo：用AE或Flash這類動畫軟件做演示，一般不是可交互的；

2）高保真原型：用Principle、Framer、Axure或者Proto.io做的交互原型，一般會用視覺稿進行切圖制作，可交互，幾可亂真；

3）動畫說明書：我在開發思維那篇中有提到，這是寫給開發同學看的詳細動畫分解，有助于他們 1:1 還原你的動畫設計。

2.設計驗證

這一部分的重要性我在文章開頭已經強調過了，它關系到設計的還原以及設計是否有效，值得每一位有志于提高自己設計水平的設計師認真對待，設計不是搞藝術，只有經得起市場檢驗的設計才是真正好的設計。

1. 設計走查：從開發同學根據設計稿和Demo做出第一版成品之后，交互和視覺同學就要開始檢查開發的還原程度，把不對的地方整理后列成一份圖文并茂的設計走查文檔，將開發效果和設計稿進行對比說明，并且給出修改的優先級；
2. 可用性測試：這個步驟可能會在原型設計階段就做，也可以放在開發出測試版之后做，取決于這款產品的重要程度；
3. 專家測試：讓設計專家、產品專家和資深用戶來體驗產品，提出改進意見。產品較小或者資源有限的時候，會用這個步驟替代可用性測試；
4. 用戶內測：在產品正式上線前，可以用開發版給熱心用戶或公司內部用戶進行小規模測試，收集穩定性Bug和設計問題；
5. 用戶訪談：常和可用性測試一起做，除了讓用戶體驗產品問題，還可以進行深入訪談，了解目標用戶的使用場景、使用習慣以及對產品的觀感；
6. 灰度上線數據驗證：產品剛上線時，可以使用灰度下發或者少量放號的方式，讓部分用戶先開始測試，并且收集他們的啟動量、使用率等指標的變化，如果出現大規模異常，就要及時停止上線并檢查問題；
7. 上線數據跟進：產品上線后，產品經理和設計師還需要定期觀察數據，一個是上線數據需要一定時間之后幾個指標才會穩定，另一個是防止出現一些Bug和設計問題，在影響擴大之前應該快速解決；
8. 滿意度調查：產品上線后（迭代型的產品在上線前也要），需進行問卷式的滿意度調查，收集用戶對于產品的評價。

我們的小火箭改版設計，在上線前就做了小范圍的用戶測試，并收集了他們對新版設計的評價。

可以看出，他們對于如此多的設計改動點并沒有不適應，對新版的設計非常認可，我們也就能夠非常放心地將產品正式上線了。

后來的數據也非常好，用戶的啟動率和使用次數都有大幅提升，再次驗證了這次改版設計的有效性。

對這塊設計呈現感興趣的同學，可以參看之前的視覺思維部分的文章：

交互設計師應具備的技能樹（4） ：交互設計師的視覺思維

三、設計流程庫

上面介紹的主要是我們團隊在使用的設計流程，僅供參考，相信你們也有自己的一套系統的設計流程。除此之外，我們平時還要多注意收集一些設計流程，有更好的地方我們可以及時地進行迭代和改進，這就是我說的眼界。

典型的流程當然不止下面三個，從BAT等各大互聯網公司的設計團隊中你還可以找到更多。

1.目標導向的設計過程

在《About Face 4：交互設計精髓》中，艾倫·庫伯（Alan Cooper）首次提出了目標導向的設計過程，對用戶體驗設計領域造成了重大影響。我認為，就算到如今，這個流程里也依然有很多值得我們學習和借鑒的地方。

2.五層結構的思考維度

加瑞特（Garrett, J.J）在《用戶體驗的要素》中提出的用戶體驗五要素，除了可以被用來理解在整個設計過程中幾位角色的分工和思考維度的不同，同樣也可以作為設計流程的指導。

知乎@尤文文 在《國內知名 UED 團隊的設計流程是怎樣的？》問題下的回答很有啟發性，這五層結構其實就是一套完整的設計流程。

https://www.zhihu.com/question/20952073/answer/30922866

3.用戶體驗地圖

我在用戶思維那篇文章中已經介紹過用戶體驗地圖這種方法，它其實是可以作為一套設計流程來使用的，你可以參考更詳細的介紹。

1.《用戶調研必修課：用戶體驗地圖完全繪制手冊》

譯者：特贊（Tezign）

https://www.uisdc.com/user-research-ux-map

2.《以干貨開場，如何有效地做用戶體驗地圖》

作者：星玫

https://zhuanlan.zhihu.com/p/19740500

相關閱讀

交互設計師應具備的技能樹（1）：產品思維

交互設計師應具備的技能樹（2）：設計師的用戶思維

交互設計師應具備的技能樹（3）：設計師的邏輯思維

交互設計師應具備的技能樹（4） ：交互設計師的視覺思維

交互設計師應具備的技能樹（5）：交互設計師的開發思維

交互設計師應具備的技能樹（6）| 如何積累交互模型？

交互設計師應具備的技能樹（7）| 設計師要懂用戶心理

交互設計師應具備的技能樹（8） | 平臺規范有什么用？

作者：WingST（微信公眾號：落羽敬齋），騰訊MIG高級交互設計師，9年從業經驗的資深互聯網人。

本文由 @WingST 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Pexels，基于 CC0 協議