交互設(shè)計(jì)決定了產(chǎn)品功能性的細(xì)節(jié)，而閉環(huán)體驗(yàn)則是交互設(shè)計(jì)中的細(xì)節(jié)。

交互閉環(huán)體驗(yàn)的定義

交互設(shè)計(jì)的閉環(huán)體驗(yàn)體現(xiàn)在產(chǎn)品的每個(gè)功能的細(xì)節(jié)上，產(chǎn)品可以看作是一整套交互的集合。一般只涉及一種使用場(chǎng)景的交互，只體現(xiàn)為一種功能，且只完成一件事。比如：修改設(shè)置、上傳文件、設(shè)定鬧鐘、更改密碼、打開家用電器、登錄、設(shè)置狀態(tài)消息、收藏等。

交互設(shè)計(jì)的閉環(huán)體驗(yàn)主要由4方面構(gòu)成：

• 觸發(fā)控件：交互閉環(huán)的起始點(diǎn)
• 設(shè)計(jì)規(guī)則：交互閉環(huán)所遵循的交互方式
• 信息反饋：用戶與產(chǎn)品的互動(dòng)過程
• 關(guān)閉（循環(huán)）模式：交互閉環(huán)過程的結(jié)束（循環(huán)）模式

交互閉環(huán)體驗(yàn)的設(shè)計(jì)

觸發(fā)控件

觸發(fā)控件是一系列用戶交互過程的最初步驟，設(shè)計(jì)觸發(fā)控件時(shí)應(yīng)遵循的準(zhǔn)則是：

• 必須讓用戶在使用情境下認(rèn)出來它是可交互的控件。例如，按鈕看上去是可點(diǎn)擊的、滑塊看上去是可以拖動(dòng)的等。
• 保證觸發(fā)控件每次都觸發(fā)相同的動(dòng)作。這樣可以保證用戶形成準(zhǔn)確的心智模型。
• 有必要提前展示數(shù)據(jù)。比如，消息通知圖標(biāo)在收到消息時(shí)紅點(diǎn)提示用戶、郵件收件箱展示未讀郵件數(shù)量等。

交互過程中至少要有一個(gè)觸發(fā)控件，至于選擇什么樣的控件，取決于你想給出多少個(gè)控件：

• 對(duì)于單一動(dòng)作的交互，一個(gè)按鈕或簡(jiǎn)單手勢(shì)足矣。這里的“按鈕”可以是圖標(biāo)或菜單項(xiàng)，而手勢(shì)可以是輕擊、滑動(dòng)或搖動(dòng)。
• 對(duì)于有兩個(gè)狀態(tài)動(dòng)作的交互（例如“開”或“關(guān)”），一個(gè)開關(guān)足矣?；蛘呤鞘褂贸Ｒ?guī)按鈕，按一下改變狀態(tài)。如果要使用這種方法，那應(yīng)該保證按鈕狀態(tài)絕對(duì)清楚。
• 對(duì)于有多個(gè)狀態(tài)動(dòng)作的交互，可以使用一組按鈕，每個(gè)按鈕代表一個(gè)選項(xiàng)。
• 對(duì)于在一定范圍內(nèi)連續(xù)進(jìn)行動(dòng)作的交互（例如調(diào)整音量），使用滑動(dòng)條最佳選擇。另外，特別是在沒有一定范圍的情況下，可以使用兩個(gè)按鈕來改變值的大小或高低，例如switch控件。
• 有些交互過程由多個(gè)控件或表單字段（單選按鈕、復(fù)選框、文本輸入字段）組成。 比如，登錄的交互過程就需要文本框輸入字段來填寫用戶名和密碼信息。

當(dāng)前的觸摸屏用戶界面隱藏著很多的不可見控件， 沒有可見的使用情境表明各種多點(diǎn)觸摸手勢(shì)的存在，可以通過自定義的操作來觸發(fā)，比如：APP中截屏后出現(xiàn)選擇“分享”“反饋”的彈窗提示。

在選擇好了觸發(fā)控件后，在設(shè)計(jì)過程中就要考慮一下控件的全部交互狀態(tài)。

PC端：

1. 正常狀態(tài)：可以點(diǎn)擊且沒有進(jìn)行任何動(dòng)作的狀態(tài)
2. 鼠標(biāo)懸停時(shí)狀態(tài)：鼠標(biāo)停留在按鈕時(shí)的狀態(tài)
3. 鼠標(biāo)按下時(shí)狀態(tài)：鼠標(biāo)按下的時(shí)候
4. 鼠標(biāo)按下后彈起狀態(tài)：鼠標(biāo)按下去后會(huì)松開鼠標(biāo)時(shí)狀態(tài)(此效果可以不做，因?yàn)樗砷_后還是鼠標(biāo)停留按鈕時(shí)的效果，已經(jīng)區(qū)分開了）
5. 不可點(diǎn)擊狀態(tài)：一般為灰色，鼠標(biāo)停留時(shí)鼠標(biāo)是禁止?fàn)顟B(tài)，不可點(diǎn)擊

移動(dòng)端：

1. 正常狀態(tài)：可以點(diǎn)擊且沒有進(jìn)行任何動(dòng)作的狀態(tài)
2. 焦點(diǎn)狀態(tài)：獲取焦點(diǎn)的狀態(tài)
3. 按下狀態(tài)：手指按下后的狀態(tài)
4. 選中狀態(tài)：選中后的狀態(tài)
5. 不可點(diǎn)擊狀態(tài)：一般灰色，點(diǎn)擊無反應(yīng)

設(shè)計(jì)規(guī)則

設(shè)計(jì)規(guī)則是交互閉環(huán)體驗(yàn)的核心，設(shè)計(jì)規(guī)則決定了一個(gè)交互過程到底如何去用。 設(shè)計(jì)規(guī)則前，需要確定一個(gè)最簡(jiǎn)單、最明確的說法，即交互過程到底是怎樣的。最好的目標(biāo)應(yīng)該是容易理解（用戶知道為什么要做這件事），而且能夠完成的（用戶知道他可以做到這件事）。

設(shè)計(jì)交互規(guī)則時(shí)，我們要考慮到：

• 如何響應(yīng)被激活的控件。比如，用戶單擊圖標(biāo)時(shí)會(huì)發(fā)生什么？
• 交互過程中用戶可以進(jìn)行什么操作。比如，用戶可以取消此次交互過程嗎、用戶可以在本次交互過程中接聽電話嗎？等。
• 確定動(dòng)作發(fā)生的順序。比如，只有在輸入文本信息后，“搜索”按鈕才會(huì)被激活。
• 確定數(shù)據(jù)以及數(shù)據(jù)源。此次交互過程是否依賴數(shù)據(jù)？數(shù)據(jù)的來源是哪里？
• 什么時(shí)候提供什么反饋。?在本次交互過程中，反饋出現(xiàn)在什么時(shí)候。
• 確定交互過程的模式。此次交互過程是否需要循環(huán)或重復(fù)？
• 確定交互結(jié)束時(shí)會(huì)發(fā)生什么。

設(shè)計(jì)交互過程的規(guī)則，包括以下內(nèi)容：

1. 記錄交互流程的主要?jiǎng)幼鳎崂磉壿嬯P(guān)系，生成初步規(guī)則。
2. 定義觸發(fā)控件的特征和狀態(tài)。 以一個(gè)簡(jiǎn)單的下拉菜單為例，它有兩個(gè)狀態(tài)：打開和關(guān)閉。打開時(shí)，菜單選項(xiàng)會(huì)顯示出來，這些選項(xiàng)就是菜單的特征。除了選項(xiàng)，菜單還可以有其他特征，比如最多顯示的選項(xiàng)個(gè)數(shù)和每個(gè)選項(xiàng)標(biāo)簽的最大長度。菜單還可以有其他狀態(tài)，比如懸停打開和懸停于選項(xiàng)上時(shí)顯示工具提示條。
3. 為規(guī)則中的每一步都設(shè)計(jì)出相應(yīng)的UI。交互過程中的每一步都會(huì)有相應(yīng)的控件的狀態(tài)，且每一步都會(huì)有不同的頁面元素。
4. 設(shè)計(jì)出約束條件。包括： 可用的輸入和輸出方法。 輸入內(nèi)容的類型和范圍。用戶需要付出何種代價(jià)?？捎玫臄?shù)據(jù)有哪些以及相關(guān)數(shù)據(jù)源。
5. 合理設(shè)計(jì)復(fù)雜性。要找出最核心的復(fù)雜性在什么地方，確定用戶掌握著哪一部分以及何時(shí)需要介入。如果用戶介入絕對(duì)必要，則適時(shí)將控制權(quán)交給用戶。
6. 制定防錯(cuò)原則。 在設(shè)計(jì)交互流程時(shí)，就要考慮根本不讓用戶出錯(cuò)。

信息反饋

在交互過程中設(shè)計(jì)信息反饋目的是幫助用戶理解交互的規(guī)則。 如果用戶按下一個(gè)按鈕，至少會(huì)有兩件
事發(fā)生：按鈕被按下了以及按鈕被按下后導(dǎo)致什么結(jié)果。

交互過程信息反饋的第一條原則是：別讓反饋給用戶造成壓力。反饋應(yīng)該由需求驅(qū)動(dòng)：用戶需要知道什么，什么時(shí)候知道（多長時(shí)間一次）？至于反饋的形式，則取決于我們的想法，視覺、聽覺、觸
覺或它們的組合。

交互過程中的反饋一般出現(xiàn)在以下情況：

• 啟動(dòng)觸發(fā)控件之后/期間。 所有用戶發(fā)起的運(yùn)作都應(yīng)該伴隨有一個(gè)系統(tǒng)的確認(rèn)。按下按鈕時(shí)必須表明確實(shí)有事發(fā)生。
• 交互的狀態(tài)由于啟動(dòng)觸發(fā)控件而發(fā)生顯著變化時(shí)。比如， 郵件客戶端檢查新郵件，不一定每次檢查新郵件都需要通知用戶，但檢查到新郵件時(shí)一定要通知用戶。
• 用戶突破了規(guī)則時(shí)。 比如用戶輸入了錯(cuò)誤的值（比如密碼不對(duì)），或者已經(jīng)滾動(dòng)到了列表底部，再?zèng)]有什么可以顯示了。
• 產(chǎn)品不能執(zhí)行命令時(shí)。比如，多次連接網(wǎng)絡(luò)連接不上。
• 在需要花較長時(shí)間的操作中顯示進(jìn)度。

在設(shè)計(jì)信息反饋時(shí)，通常需要提供給用戶的反饋包括：

• 什么事情已經(jīng)開始了
• 用戶剛剛做了什么事
• 哪些過程已經(jīng)開始了
• 哪些過程已經(jīng)結(jié)束了
• 哪些過程正在進(jìn)行中
• 用戶不能干什么

關(guān)于信息反饋的方式，可參考本人的另一篇文章案例分析：產(chǎn)品的信息反饋設(shè)計(jì)。

關(guān)閉（循環(huán)）模式

模式是交互過程規(guī)則的一個(gè)分支。每一個(gè)交互過程都會(huì)有一個(gè)關(guān)閉（循環(huán)）模式表示完成此次過程的結(jié)束（再次觸發(fā)）。

我們通常在制定交互過程的規(guī)則時(shí)就會(huì)把整個(gè)交互過程的關(guān)閉模式制定好。比如，登錄功能交互流程的關(guān)閉模式是登錄成功或登錄失敗、在商城購買商品交互流程的關(guān)閉模式就是成功生成訂單等。

循環(huán)模式則是對(duì)于一個(gè)交互流程的持續(xù)時(shí)間的設(shè)定，比如，在網(wǎng)絡(luò)信號(hào)不佳的前提下，頁面不肯能一直持續(xù)加載，經(jīng)過一個(gè)時(shí)長最終會(huì)顯示出頁面內(nèi)容或加載失敗的提示（或者給出重新加載的按鈕，用戶再一次進(jìn)入到該交互流程中）。

總結(jié)

交互閉環(huán)體驗(yàn)的設(shè)計(jì)流程：

觸發(fā)控件（用戶通過控件開啟交互過程）——設(shè)計(jì)規(guī)則（規(guī)則決定了交互過程中的方式）——信息反饋（用戶與產(chǎn)品互動(dòng)后得到的及時(shí)反饋）——關(guān)閉（循環(huán)）模式（完成交互過程的明確標(biāo)識(shí)）

交互過程中的閉環(huán)體驗(yàn)絕對(duì)會(huì)是讓產(chǎn)品受用戶歡迎的重要設(shè)計(jì)要素之一，它能增進(jìn)用戶的參與度與愉悅感。雖然設(shè)計(jì)與開發(fā)優(yōu)秀的交互閉環(huán)體驗(yàn)也許會(huì)增加許多時(shí)間，但卻能讓你的產(chǎn)品成為用戶生活中的一部分。

作者：流年，互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)師，4年互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)。

本文由 @流年 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖由作者提供