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

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

交互設(shè)計的閉環(huán)體驗反映在產(chǎn)品的每個功能的細節(jié)中，產(chǎn)品可以看作是交互的集合。一般來說，它僅涉及使用場景的交互，該場景僅體現(xiàn)為一個功能，并且只完成一件事。例如：修改設(shè)置，上傳文件，設(shè)置警報，更改密碼，打開家用電器，登錄，設(shè)置狀態(tài)消息，收藏夾等。

交互設(shè)計的閉環(huán)體驗主要包括四個方面：

觸發(fā)控制：交互式閉環(huán)的起點

設(shè)計規(guī)則：交互閉環(huán)的交互方式

反饋：用戶與產(chǎn)品的互動

關(guān)閉（循環(huán)）模式：交互式閉環(huán)過程的結(jié)束（循環(huán)）模式

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

　　觸發(fā)控件

觸發(fā)控件是一系列用戶交互過程的第一步。設(shè)計觸發(fā)控件時應(yīng)遵循的準則是：

必須在用作交互式控件的上下文中識別用戶。例如，按鈕似乎是可點擊的，滑塊似乎是可拖動的，依此類推。

確保觸發(fā)器控件每次都觸發(fā)相同的操作。這可確保用戶形成準確的心理模型。

有必要提前提供數(shù)據(jù)。例如，消息通知圖標在收到消息時提示用戶，并且在郵件收件箱中顯示未讀消息的數(shù)量。

交互過程中必須至少有一個觸發(fā)控件。至于選擇何種控件，取決于您想要提供多少控件：

對于單個動作交互，按鈕或簡單手勢就足夠了。 “按鈕”指的是“按鈕”。這里可以是圖標或菜單項，手勢可以是點擊，滑動或搖動。

對于與兩個狀態(tài)操作（例如“打開”或“關(guān)閉”）的交互，一個開關(guān)就足夠了?；蚴褂贸Ｒ?guī)按鈕并按以更改狀態(tài)。如果要使用此方法，則應(yīng)確保按鈕狀態(tài)絕對清晰。

對于與多個狀態(tài)動作的交互，可以使用一組按鈕，每個按鈕代表一個選項。

對于在一定范圍內(nèi)連續(xù)移動的交互（例如調(diào)整音量），請使用滑塊進行最佳選擇。此外，特別是在沒有一定范圍的情況下，您可以使用兩個按鈕來更改值的大小或級別，例如開關(guān)控制。

某些交互由多個控件或表單字段組成（單選按鈕，復(fù)選框，文本輸入字段）。例如，登錄交互過程需要文本框輸入字段來填寫用戶名和密碼信息。

當前的觸摸屏用戶界面隱藏了許多不可見的控件，并且沒有可見的使用場景表明存在各種多點觸摸手勢，這可以通過自定義操作觸發(fā)，例如：在APP中的屏幕截圖之后，選擇< ;;分享”的“反饋”的彈出提示。

選擇觸發(fā)控件后，您應(yīng)該在設(shè)計過程中考慮控件的完全交互狀態(tài)。

PC端：

正常狀態(tài)：可以單擊而無需任何操作的狀態(tài)

鼠標懸停狀態(tài)：鼠標懸停在按鈕上的狀態(tài)

按下鼠標時：按下鼠標時

按下鼠標后鼠標的狀態(tài)：鼠標將在按下鼠標時釋放狀態(tài)（此效果可以省略，因為釋放鼠標后釋放按鈕時的效果已被區(qū)分）

不可點擊狀態(tài)：通常為灰色，鼠標結(jié)束時禁止鼠標，不可點擊

移動：

正常狀態(tài)：可以單擊而無需任何操作的狀態(tài)

焦點狀態(tài)：獲得焦點狀態(tài)

按狀態(tài)：手指按下后的狀態(tài)

選定狀態(tài)：選定狀態(tài)

不可點擊狀態(tài)：通常為灰色，單擊無響應(yīng)

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

設(shè)計規(guī)則是交互式閉環(huán)體驗的核心，設(shè)計規(guī)則決定了交互過程的工作方式。在設(shè)計規(guī)則之前，您需要確定最簡單和最明確的語句，即交互過程是什么。最好的目標應(yīng)該是易于理解（用戶知道為什么要這樣做）并且可以做到（用戶知道他可以做到）。

在設(shè)計交互規(guī)則時，我們必須考慮：

如何響應(yīng)激活的控件。例如，當用戶點擊圖標時會發(fā)生什么？

用戶在交互過程中可以做什么。例如，用戶是否可以取消交互過程，用戶可以在此交互過程中應(yīng)答呼叫嗎？

確定操作發(fā)生的順序。例如，“搜索”。按鈕僅在輸入文本信息后激活。

識別數(shù)據(jù)和數(shù)據(jù)源。交互過程是否依賴于數(shù)據(jù)？數(shù)據(jù)來源在哪里？

什么時候提供反饋？在這次互動中，反饋何時出現(xiàn)？

確定交互過程的模式。是否需要循環(huán)或重復(fù)交互過程？

確定交互結(jié)束時會發(fā)生什么。

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

記錄交互過程的主要操作，梳理邏輯關(guān)系，并生成初步規(guī)則。

定義觸發(fā)控件的特征和狀態(tài)。以一個簡單的下拉菜單為例。它有兩種狀態(tài)：開放和關(guān)閉。打開時，會顯示菜單選項，這些選項是菜單的特征。除了選項之外，菜單還可以具有其他功能，例如顯示的最大選項數(shù)和每個選項標簽的最大長度。菜單還可以具有其他狀態(tài)，例如懸停打開和懸停在選項上時的工具提示欄。

為規(guī)則中的每個步驟設(shè)計UI。交互過程中的每個步驟都將具有相應(yīng)控件的狀態(tài)，并且每個步驟將具有不同的頁面元素。

設(shè)計約束。包括：可用的輸入和輸出方法。輸入內(nèi)容的類型和范圍。用戶需要支付多少價格？可用的數(shù)據(jù)和相關(guān)數(shù)據(jù)源。

合理的設(shè)計復(fù)雜性。找出最核心復(fù)雜性的位置，確定用戶的哪些部分可以控制以及何時進行干預(yù)。如果絕對需要用戶干預(yù)，則在適當?shù)臅r間給予用戶控制。

制定防錯原則。在設(shè)計交互過程時，請考慮不要讓用戶犯錯誤。

　信息反饋

在交互過程中設(shè)計信息反饋的目的是幫助用戶理解交互規(guī)則。如果用戶按下按鈕，則至少有兩個

發(fā)生了什么：按下按鈕并按下按鈕會發(fā)生什么。

反饋互動過程信息的第一個原則是：不要讓反饋給用戶帶來壓力。反饋應(yīng)該由需求驅(qū)動：用戶需要知道什么，他們什么時候知道（多長時間）？至于反饋的形式，它取決于我們的想法，愿景，聽覺和觸覺

感覺或他們的組合。

交互過程中的反饋通常發(fā)生在以下情況中：

觸發(fā)控制開始/周期后。所有用戶發(fā)起的操作都應(yīng)附有系統(tǒng)確認。當您按下按鈕時，您必須指出正在發(fā)生的事情。

由于啟動觸發(fā)控制，交互狀態(tài)發(fā)生顯著變化。例如，郵件客戶端檢查新郵件，并且不一定每次檢查新郵件時都需要通知用戶，但必須在檢查新郵件時通知用戶。

當用戶突破規(guī)則時。例如，如果用戶輸入了錯誤的值（例如密碼錯誤），或者滾動到列表底部，則無法顯示任何內(nèi)容。

當產(chǎn)品無法執(zhí)行命令時。例如，與網(wǎng)絡(luò)的多個連接不可用。

顯示需要很長時間的操作進度。

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

什么已經(jīng)開始

用戶剛剛做了什么

哪些流程已經(jīng)啟動？

哪些流程結(jié)束了？

哪些流程正在進行中

用戶不能做什么

有關(guān)信息反饋的方法，請參閱我自己的文章案例分析：產(chǎn)品反饋設(shè)計。

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

模式是交互過程規(guī)則的一個分支。每個交互過程都有一個閉合（循環(huán)）模式，指示過程結(jié)束（重新觸發(fā)）。

我們通常在制定交互過程的規(guī)則時設(shè)置整個交互過程的結(jié)束模式。例如，登錄功能交互過程的關(guān)閉模式是登錄成功或登錄失敗，并且在商場中購買商品交互過程的關(guān)閉模式是成功生成訂單。

循環(huán)模式是交互過程持續(xù)時間的設(shè)置。例如，如果網(wǎng)絡(luò)信號不好，則頁面將不會被連續(xù)加載，并且在一段時間之后，將顯示頁面內(nèi)容或加載失敗的提示（或者給定重新加載的按鈕，用戶輸入再次互動過程）。

　總結(jié)

交互式閉環(huán)體驗的設(shè)計流程：

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

交互過程中的閉環(huán)體驗絕對是使產(chǎn)品深受用戶歡迎的重要設(shè)計元素之一，可以增強用戶的參與度和愉悅感。雖然設(shè)計和開發(fā)出色的交互式閉環(huán)體驗可能會增加大量時間，但它可以使您的產(chǎn)品成為您生活的一部分。

作者：轉(zhuǎn)瞬即逝，互聯(lián)網(wǎng)產(chǎn)品設(shè)計師，4年互聯(lián)網(wǎng)產(chǎn)品經(jīng)驗。

本文最初由@流年發(fā)表。未經(jīng)許可，禁止復(fù)制。

該地圖由作者提供

« “2018四大錦鯉”是你們中的一員，來到天貓雙11狂歡之夜贏取1111件禮品 | A5啟動網(wǎng)廣播：新款iPhone價格高是iOS12 GM版華為穩(wěn)定了嗎？ »