最近實(shí)習(xí)的時(shí)候，交互同事小哥哥問了我一個(gè)問題：如果你面試的時(shí)候，面試官讓你設(shè)計(jì)一個(gè)游泳池，你會怎么做？

仔細(xì)想想，其實(shí)這個(gè)問題并不是真的讓你去設(shè)計(jì)一個(gè)游泳池，而是在考驗(yàn)?zāi)愕脑O(shè)計(jì)思路與方法。我一直很喜歡目標(biāo)導(dǎo)向設(shè)計(jì)這套理論，因?yàn)樗鼜那捌谘芯康浇⑷宋锬Ｐ停俚教崛≡O(shè)計(jì)需求，到今天想分享的定義交互框架，這一套流程都讓我對設(shè)計(jì)互聯(lián)網(wǎng)產(chǎn)品有了更新的認(rèn)識。

其實(shí)設(shè)計(jì)框架會包含很多，比如交互設(shè)計(jì)框架，視覺設(shè)計(jì)框架，工業(yè)設(shè)計(jì)框架，服務(wù)設(shè)計(jì)框架等，從這些框架再往下進(jìn)行細(xì)節(jié)上的考量，那么我們設(shè)計(jì)基本可以成型。

定義交互設(shè)計(jì)框架的一些步驟：

一、定義平臺 、姿態(tài)、輸入方法

我們在進(jìn)行設(shè)計(jì)前，要先確定好，我們設(shè)計(jì)的產(chǎn)品是基于什么平臺而設(shè)計(jì)的。

比如：是隨時(shí)使用，易受光線、網(wǎng)絡(luò)影響的移動手機(jī)？還是場景固定，涉及到響應(yīng)式設(shè)計(jì)的web？或者是在嘈雜的商場，街區(qū)里面，絕大部分用戶都是新手的電子指示屏？不同的平臺限制條件特別多，比如自然環(huán)境，社會環(huán)境等。

然后我們還要確定用戶對這個(gè)產(chǎn)品投入的注意力時(shí)間，Cooper把這個(gè)概念稱為姿態(tài)。

比如：有的產(chǎn)品，用戶在其中投入時(shí)間很短，只要進(jìn)來完成目標(biāo)就會走了，完成目標(biāo)的整個(gè)過程可能只需要1分鐘不到，比如支付寶付款，這可以稱為暫時(shí)姿態(tài)；

而有的產(chǎn)品，用戶會長時(shí)間專注在這個(gè)產(chǎn)品上，可以以小時(shí)為單位計(jì)量，比如一些視頻類、教育類的app，這就可以稱為獨(dú)占姿態(tài)。

接著我們還要確定，用戶與產(chǎn)品的交互方式，或者說是輸入方式。

是鍵盤還是鼠標(biāo)還是觸屏？比如移動端，通過觸摸手勢以及物理按鍵、還有語音、指紋、人臉識別等操作與產(chǎn)品進(jìn)行交互，Material Design里面關(guān)于手勢這一節(jié)有提到Touch Mechanics（觸發(fā)動作）如touch，drag，pinch open等，還有Touch Activities（觸發(fā)行為）如expand、zoom in，zoom out等。

二、定義功能、數(shù)據(jù)元素

我們之前在定義設(shè)計(jì)需求的時(shí)候，定義了數(shù)據(jù)需求以及功能需求，而在進(jìn)行設(shè)計(jì)框架的時(shí)候，我們需要把數(shù)據(jù)需求以及功能需求轉(zhuǎn)化為數(shù)據(jù)元素與功能元素，也就是說這些需求以什么樣的形式展示給用戶 。

數(shù)據(jù)元素是數(shù)據(jù)的基本單位，由數(shù)據(jù)項(xiàng)組成。舉個(gè)例子，通話記錄里的一條通話記錄為一個(gè)數(shù)據(jù)元素，而一條通話記錄里的每一項(xiàng)就是數(shù)據(jù)項(xiàng)，比如聯(lián)系人號碼、時(shí)間、地址。

而功能元素的話，我覺得功能元素是對數(shù)據(jù)元素的一些行為操作，用戶利用這些功能元素來完成任務(wù)。比如說打電話這個(gè)功能需求，它的功能元素有：輸入號碼、撥打電話、掛斷電話等。

我們可以根據(jù)人物模型列出這些信息元素，可能包括多種方案，而我們在做方案選擇的時(shí)候，可以從哪些方面選擇呢？

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

如果說定義場景提供了一種從整體到細(xì)節(jié)的交互設(shè)計(jì)方法，那么可以說，設(shè)計(jì)原則提供了一種從細(xì)節(jié)到整體的交互設(shè)計(jì)方法，兩者結(jié)合起來，可以平衡整個(gè)設(shè)計(jì)過程。

關(guān)于設(shè)計(jì)原則，我很喜歡Alan Cooper的一句話「除非你有更好的設(shè)計(jì)方案，否則就遵從設(shè)計(jì)原則」。

因?yàn)橛脩舻暮芏嗖僮鞣绞狡鋵?shí)都已形成了一個(gè)習(xí)慣，如果我們背離他的操作習(xí)慣，用戶就要從零開始學(xué)習(xí)，花費(fèi)更多的時(shí)間成本。而很多設(shè)計(jì)原則是前人總結(jié)下來的經(jīng)驗(yàn)，有效地借鑒這些原則也能避免我們走進(jìn)一些誤區(qū)。

三、確定功能組、層級

因?yàn)閿?shù)據(jù)元素和功能元素存在的目的是為了讓用戶完成目標(biāo)，不同的數(shù)據(jù)元素和功能元素要完成不同的任務(wù)，所以把數(shù)據(jù)元素和功能元素進(jìn)行分組很重要。

最近實(shí)習(xí)在優(yōu)化公司平臺一個(gè)產(chǎn)品的交互流程和交互細(xì)節(jié)，而在優(yōu)化的時(shí)候就深刻地感受到了對這些元素分組與確定層級的重要性。

我們可以根據(jù)邏輯關(guān)系將這些元素進(jìn)行分組，在分組的時(shí)候，可以考慮這些問題：

• 哪些元素需要捆綁使用，哪些不是？
• 相關(guān)聯(lián)的元素使用順序如何？
• 哪些元素之間具有包含關(guān)系？
• 哪些元素需要占大片的區(qū)域面積？
• App如何組織這些元素才能優(yōu)化工作流？
• 哪些元素有助于人物模型做決定？
• 哪些元素需要獲取視覺焦點(diǎn)？
• 采用什么樣的交互模式和原則？

舉個(gè)例子：

比如支付寶的提現(xiàn)功能，為什么提現(xiàn)金額這個(gè)功能元素與可用余額這個(gè)數(shù)據(jù)元素會捆綁在一起呢？是因?yàn)榭捎糜囝~會影響用戶對提現(xiàn)金額多少的決策，所以這兩個(gè)元素關(guān)聯(lián)度會比較大。

站在人物模型的角度，在這一個(gè)頁面，信息層級的優(yōu)先級是提現(xiàn)金額大小>可用余額，并且可用余額只是影響用戶對提現(xiàn)金額的決策，并不是決定用戶的提現(xiàn)金額大小。

我們知道在提現(xiàn)之前，該頁面的視覺焦點(diǎn)是提現(xiàn)金額多少（見上圖），而在輸入完提現(xiàn)金額的時(shí)候，視覺焦點(diǎn)變成了「確認(rèn)提現(xiàn)」的button這個(gè)功能元素（見下圖）。所以這里對這些信息元素進(jìn)行分組與確定優(yōu)先級也能幫助我們后面設(shè)計(jì)交互框架的時(shí)候確定視覺焦點(diǎn)。

四、勾畫交互框架

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

用草圖的形式，關(guān)鍵是注意設(shè)計(jì)整體，而非細(xì)節(jié)，另外不僅僅是畫單個(gè)頁面，應(yīng)該把頁面與頁面間的關(guān)系標(biāo)注出來，也就是頁面流程以及注釋。等流程趨于穩(wěn)定，就可以用電腦繪制圖了。

五、構(gòu)建關(guān)鍵路徑場景劇本

關(guān)鍵路徑場景是指人物模型與產(chǎn)品交互框架進(jìn)行交互的過程細(xì)節(jié)，并且是人物模型最頻繁使用界面的主要路徑。

它跟情景場景不一樣，關(guān)鍵路徑場景關(guān)注細(xì)節(jié)，在細(xì)節(jié)上嚴(yán)謹(jǐn)?shù)孛枋雒總€(gè)交互的精確行為，以任務(wù)為導(dǎo)向（但是并不意味著我們可以忽視目標(biāo)，因?yàn)槟繕?biāo)是我們在產(chǎn)品設(shè)計(jì)中一直要關(guān)注的點(diǎn)）。

舉個(gè)例子：

比如說點(diǎn)xx外賣這個(gè)任務(wù)，關(guān)鍵路徑場景就要具體到用戶從哪里進(jìn)入app，以及進(jìn)入app后直到完成任務(wù)前，看到的每一個(gè)頁面，數(shù)據(jù)元素以及功能元素，以及用戶怎么根據(jù)這些元素進(jìn)行決策，判斷，以及用戶點(diǎn)擊了哪些按鈕，接下來進(jìn)入哪一個(gè)頁面，都要詳細(xì)描述。

我覺得在構(gòu)建關(guān)鍵路徑場景這一步和勾畫交互框架這一步，其實(shí)是一個(gè)可循環(huán)的步驟，直到最后確定方案。

六、運(yùn)用驗(yàn)證場景完善設(shè)計(jì)

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

舉個(gè)例子：

比如當(dāng)我們設(shè)計(jì)用戶點(diǎn)外賣這個(gè)場景的時(shí)候，可能的流程是：進(jìn)入首頁——查看分類——選擇店鋪——選擇美食——支付成功，但也有一種用戶他是有很明確的目的知道自己想要吃什么，那他的流程可能是：進(jìn)入首頁——搜索美食——選擇店鋪——選擇美食——支付成功，還有一種用戶就是會從自己歷史訂單里面選擇，那他的流程就是：進(jìn)入首頁——進(jìn)入訂單頁——選擇訂單——再來一單——支付成功。

而用戶的目標(biāo)都是點(diǎn)外賣，但是在關(guān)鍵路徑里面會出現(xiàn)分叉點(diǎn)，那么我們可以把分叉后的場景描述成為替代場景。

驗(yàn)證場景還有一種情況就是一些不經(jīng)常使用的功能，但是一定會用得到的功能，比如一些app的清除數(shù)據(jù)功能。我們可以把這種場景稱之為必須使用的場景。

還有一種就是不經(jīng)常使用，也不一定用得到，但是產(chǎn)品必須要考慮的情景，比如手機(jī)通訊錄，如果用戶添加的新聯(lián)系人和歷史聯(lián)系人重名，那系統(tǒng)該怎設(shè)置與反饋呢？我們可以把這種場景成為邊緣場景。

這些驗(yàn)證場景的情況都能影響我們產(chǎn)品的用戶體驗(yàn)，所以有效地考慮到這些場景也很重要hhh……

總結(jié)

那…總結(jié)一下定義交互框架的步驟：

• 定義平臺、輸入方法
• 定義功能、數(shù)據(jù)元素
• 確定功能組、層級
• 勾畫交互框架
• 構(gòu)建關(guān)鍵路徑場景
• 運(yùn)用驗(yàn)證場景完善設(shè)計(jì)

其實(shí)在定義完交互設(shè)計(jì)框架后，還沒有結(jié)束，還需要和其他設(shè)計(jì)師協(xié)調(diào)配合：

比如和視覺設(shè)計(jì)師配合，配合視覺設(shè)計(jì)師完善外觀和視覺風(fēng)格；

比如和工業(yè)設(shè)計(jì)師配合，有一句話很好的概括的他們之間的配合，「形式服從功能」，交互設(shè)計(jì)的需求指導(dǎo)著工業(yè)設(shè)計(jì)，但工業(yè)設(shè)計(jì)制造成本因素反過來又影響著交互設(shè)計(jì)的各種可能性。

比如和服務(wù)設(shè)計(jì)師配合，但是服務(wù)設(shè)計(jì)通常會影響整個(gè)架構(gòu)的商業(yè)模式，比如服務(wù)藍(lán)圖這些，所以一般優(yōu)先構(gòu)建服務(wù)設(shè)計(jì)框架。

最后，回到一開始的問題：如果面試的時(shí)候，考官讓你設(shè)計(jì)一個(gè)游泳池，你該怎么辦？

如果你看完了我前面寫的關(guān)于交互設(shè)計(jì)的幾點(diǎn)思考的文章，與總結(jié)的目標(biāo)導(dǎo)向設(shè)計(jì)的所有文章，那么一定不難回答這個(gè)問題了hhh。

往期回顧：

• 《交互基礎(chǔ)小課堂！目標(biāo)導(dǎo)向設(shè)計(jì)之“用戶目標(biāo)”與“心智模型”》
• 《交互基礎(chǔ)小課堂！目標(biāo)導(dǎo)向設(shè)計(jì)之“設(shè)計(jì)研究”》
• 《基礎(chǔ)知識科普！目標(biāo)導(dǎo)向設(shè)計(jì)之“情景場景”與“設(shè)計(jì)需求”》

歡迎關(guān)注作者的微信公眾號：「UED設(shè)計(jì)筆記」

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

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com