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

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

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

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

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

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

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

比如：是隨時使用，易受光線、網路影響的移動手機？還是場景固定，涉及到響應式設計的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。

本文轉自：https://www.uisdc.com/int?eraction-design-framework