交互技能樹09 | 設計流程的三個階段

05-22

交互技能樹09 | 設計流程的三個階段

來自專欄交互進階

本文是在我的微信公眾號「落羽敬齋」（wingstudy）上連載的系列文章，歡迎關注~

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

需求分析
方案設計
設計驗證

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

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

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

我為什麼會把「設計流程」放在「眼界」這一分類下呢？

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

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

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

Why階段：我們為什麼要做這款產品？要做給誰用？我們做有什麼優勢？
How階段：通過上面的分析，我們應該用怎樣的方式來做？
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來給老闆、客戶和開發同學進行展示；

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

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

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

2.設計驗證

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

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