互動基礎小課堂！目標導向設計之「定義互動設計框架」

最近實習的時候，互動同事小哥哥問了我一個問題：如果你面試的時候，面試官讓你設計一個游泳池，你會怎麼做？

仔細想想，其實這個問題並不是真的讓你去設計一個游泳池，而是在考驗你的設計思路與方法。我一直很喜歡目標導向設計這套理論，因為它從前期研究到建立人物模型，再到提取設計需求，到今天想分享的定義互動框架，這一套流程都讓我對設計網際網路產品有了更新的認識。

其實設計框架會包含很多，比如互動設計框架，視覺設計框架，工業設計框架，服務設計框架等，從這些框架再往下進行細節上的考量，那麼我們設計基本可以成型。

定義互動設計框架的一些步驟：

一、定義平臺 、姿態、輸入方法

我們在進行設計前，要先確定好，我們設計的產品是基於什麼平臺而設計的。

比如：是隨時使用，易受光線、網路影響的移動手機？還是場景固定，涉及到響應式設計的web？或者是在嘈雜的商場，街區裏面，絕大部分使用者都是新手的電子指示屏？不同的平臺限制條件特別多，比如自然環境，社會環境等。

然後我們還要確定使用者對這個產品投入的注意力時間，Cooper把這個概念稱為姿態。

比如：有的產品，使用者在其中投入時間很短，只要進來完成目標就會走了，完成目標的整個過程可能只需要1分鐘不到，比如支付寶付款，這可以稱為暫時姿態；

而有的產品，使用者會長時間專注在這個產品上，可以以小時為單位計量，比如一些視訊類、教育類的app，這就可以稱為獨佔姿態。

接著我們還要確定，使用者與產品的互動方式，或者說是輸入方式。

是鍵盤還是滑鼠還是觸屏？比如移動端，通過觸控手勢以及物理按鍵、還有語音、指紋、人臉識別等操作與產品進行互動，Material Design裏面關於手勢這一節有提到Touch Mechanics（觸發動作）如touch，drag，pinch open等，還有Touch Activities（觸發行為）如expand、zoom in，zoom out等。

二、定義功能、資料元素

我們之前在定義設計需求的時候，定義了資料需求以及功能需求，而在進行設計框架的時候，我們需要把資料需求以及功能需求轉化為資料元素與功能元素，也就是說這些需求以什麼樣的形式展示給使用者 。

資料元素是資料的基本單位，由資料項組成。舉個例子，通話記錄裡的一條通話記錄爲一個數據元素，而一條通話記錄裡的每一項就是資料項，比如聯絡人號碼、時間、地址。

而功能元素的話，我覺得功能元素是對資料元素的一些行為操作，使用者利用這些功能元素來完成任務。比如說打電話這個功能需求，它的功能元素有：輸入號碼、撥打電話、結束通話電話等。

我們可以根據人物模型列出這些資訊元素，可能包括多種方案，而我們在做方案選擇的時候，可以從哪些方面選擇呢？

小小地整理一下，如下圖：

如果說定義場景提供了一種從整體到細節的互動設計方法，那麼可以說，設計原則提供了一種從細節到整體的互動設計方法，兩者結合起來，可以平衡整個設計過程。

關於設計原則，我很喜歡Alan Cooper的一句話「除非你有更好的設計方案，否則就遵從設計原則」。

因為使用者的很多操作方式其實都已形成了一個習慣，如果我們背離他的操作習慣，使用者就要從零開始學習，花費更多的時間成本。而很多設計原則是前人總結下來的經驗，有效地借鑑這些原則也能避免我們走進一些誤區。

三、確定功能組、層級

因為資料元素和功能元素存在的目的是爲了讓使用者完成目標，不同的資料元素和功能元素要完成不同的任務，所以把資料元素和功能元素進行分組很重要。

最近實習在優化公司平臺一個產品的互動流程和互動細節，而在優化的時候就深刻地感受到了對這些元素分組與確定層級的重要性。

我們可以根據邏輯關係將這些元素進行分組，在分組的時候，可以考慮這些問題：

• 哪些元素需要捆綁使用，哪些不是？
• 相關聯的元素使用順序如何？
• 哪些元素之間具有包含關係？
• 哪些元素需要佔大片的區域面積？
• App如何組織這些元素才能優化工作流？
• 哪些元素有助於人物模型做決定？
• 哪些元素需要獲取視覺焦點？
• 採用什麼樣的互動模式和原則？

舉個例子：

比如支付寶的提現功能，為什麼提現金額這個功能元素與可用餘額這個資料元素會捆綁在一起呢？是因為可用餘額會影響使用者對提現金額多少的決策，所以這兩個元素關聯度會比較大。

站在人物模型的角度，在這一個頁面，資訊層級的優先順序是提現金額大小>可用餘額，並且可用餘額只是影響使用者對提現金額的決策，並不是決定使用者的提現金額大小。

我們知道在提現之前，該頁面的視覺焦點是提現金額多少（見上圖），而在輸入完提現金額的時候，視覺焦點變成了「確認提現」的button這個功能元素（見下圖）。所以這裏對這些資訊元素進行分組與確定優先順序也能幫助我們後面設計互動框架的時候確定視覺焦點。

四、勾畫互動框架

接著我們就要將這些分組好的元素納入到頁面裏面了。我們可以先草擬出一些草圖，這些會根據我們後期設計的推進不斷改進完善，比如有些人物目標沒有完成或者完成目標的過程比較冗雜的，我們要增加或者刪減一些元素。

用草圖的形式，關鍵是注意設計整體，而非細節，另外不僅僅是畫單個頁面，應該把頁面與頁面間的關係標註出來，也就是頁面流程以及註釋。等流程趨於穩定，就可以用電腦繪製圖了。

五、構建關鍵路徑場景劇本

關鍵路徑場景是指人物模型與產品互動框架進行互動的過程細節，並且是人物模型最頻繁使用介面的主要路徑。

它跟情景場景不一樣，關鍵路徑場景關注細節，在細節上嚴謹地描述每個互動的精確行為，以任務為導向（但是並不意味著我們可以忽視目標，因為目標是我們在產品設計中一直要關注的點）。

舉個例子：

比如說點xx外賣這個任務，關鍵路徑場景就要具體到使用者從哪裏進入app，以及進入app後直到完成任務前，看到的每一個頁面，資料元素以及功能元素，以及使用者怎麼根據這些元素進行決策，判斷，以及使用者點選了哪些按鈕，接下來進入哪一個頁面，都要詳細描述。

我覺得在構建關鍵路徑場景這一步和勾畫互動框架這一步，其實是一個可迴圈的步驟，直到最後確定方案。

六、運用驗證場景完善設計

我們把主要流程主要頁面完善好之後，就可以考慮產品的一些不太頻繁使用的頁面。比如一些分叉點、不經常使用的頁面，不一定用得到的頁面，如下：

舉個例子：

比如當我們設計使用者點外賣這個場景的時候，可能的流程是：進入首頁——檢視分類——選擇店鋪——選擇美食——支付成功，但也有一種使用者他是有很明確的目的知道自己想要吃什麼，那他的流程可能是：進入首頁——搜尋美食——選擇店鋪——選擇美食——支付成功，還有一種使用者就是會從自己歷史訂單裏面選擇，那他的流程就是：進入首頁——進入訂單頁——選擇訂單——再來一單——支付成功。

而使用者的目標都是點外賣，但是在關鍵路徑裏面會出現分叉點，那麼我們可以把分叉後的場景描述成為替代場景。

驗證場景還有一種情況就是一些不經常使用的功能，但是一定會用得到的功能，比如一些app的清除資料功能。我們可以把這種場景稱之為必須使用的場景。

還有一種就是不經常使用，也不一定用得到，但是產品必須要考慮的情景，比如手機通訊錄，如果使用者新增的新聯絡人和歷史聯絡人重名，那系統該怎設定與反饋呢？我們可以把這種場景成為邊緣場景。

這些驗證場景的情況都能影響我們產品的使用者體驗，所以有效地考慮到這些場景也很重要hhh……

總結

那…總結一下定義互動框架的步驟：

• 定義平臺、輸入方法
• 定義功能、資料元素
• 確定功能組、層級
• 勾畫互動框架
• 構建關鍵路徑場景
• 運用驗證場景完善設計

其實在定義完互動設計框架後，還沒有結束，還需要和其他設計師協調配合：

比如和視覺設計師配合，配合視覺設計師完善外觀和視覺風格；

比如和工業設計師配合，有一句話很好的概括的他們之間的配合，「形式服從功能」，互動設計的需求指導著工業設計，但工業設計製造成本因素反過來又影響著互動設計的各種可能性。

比如和服務設計師配合，但是服務設計通常會影響整個架構的商業模式，比如服務藍圖這些，所以一般優先構建服務設計框架。

最後，回到一開始的問題：如果面試的時候，考官讓你設計一個游泳池，你該怎麼辦？

如果你看完了我前面寫的關於互動設計的幾點思考的文章，與總結的目標導向設計的所有文章，那麼一定不難回答這個問題了hhh。

往期回顧：

• 《互動基礎小課堂！目標導向設計之「使用者目標」與「心智模型」》
• 《互動基礎小課堂！目標導向設計之「設計研究」》
• 《基礎知識科普！目標導向設計之「情景場景」與「設計需求」》

歡迎關注作者的微信公眾號：「UED設計筆記」

================ 明星欄目推薦 ================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的 知識樹專欄 。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手並製作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com