交互設計的閉環體驗

6 評論 19870 瀏覽 224 收藏 12 分鐘

交互設計決定了產品功能性的細節,而閉環體驗則是交互設計中的細節。

交互閉環體驗的定義

交互設計的閉環體驗體現在產品的每個功能的細節上,產品可以看作是一整套交互的集合。一般只涉及一種使用場景的交互,只體現為一種功能,且只完成一件事。比如:修改設置、上傳文件、設定鬧鐘、更改密碼、打開家用電器、登錄、設置狀態消息、收藏等。

交互設計的閉環體驗主要由4方面構成:

  • 觸發控件:交互閉環的起始點
  • 設計規則:交互閉環所遵循的交互方式
  • 信息反饋:用戶與產品的互動過程
  • 關閉(循環)模式:交互閉環過程的結束(循環)模式

交互閉環體驗的設計

觸發控件

觸發控件是一系列用戶交互過程的最初步驟,設計觸發控件時應遵循的準則是:

  • 必須讓用戶在使用情境下認出來它是可交互的控件。例如,按鈕看上去是可點擊的、滑塊看上去是可以拖動的等。
  • 保證觸發控件每次都觸發相同的動作。這樣可以保證用戶形成準確的心智模型。
  • 有必要提前展示數據。比如,消息通知圖標在收到消息時紅點提示用戶、郵件收件箱展示未讀郵件數量等。

交互過程中至少要有一個觸發控件,至于選擇什么樣的控件,取決于你想給出多少個控件:

  • 對于單一動作的交互,一個按鈕或簡單手勢足矣。這里的“按鈕”可以是圖標或菜單項,而手勢可以是輕擊、滑動或搖動。
  • 對于有兩個狀態動作的交互(例如“開”或“關”),一個開關足矣?;蛘呤鞘褂贸R幇粹o,按一下改變狀態。如果要使用這種方法,那應該保證按鈕狀態絕對清楚。
  • 對于有多個狀態動作的交互,可以使用一組按鈕,每個按鈕代表一個選項。
  • 對于在一定范圍內連續進行動作的交互(例如調整音量),使用滑動條最佳選擇。另外,特別是在沒有一定范圍的情況下,可以使用兩個按鈕來改變值的大小或高低,例如switch控件。
  • 有些交互過程由多個控件或表單字段(單選按鈕、復選框、文本輸入字段)組成。 比如,登錄的交互過程就需要文本框輸入字段來填寫用戶名和密碼信息。

當前的觸摸屏用戶界面隱藏著很多的不可見控件, 沒有可見的使用情境表明各種多點觸摸手勢的存在,可以通過自定義的操作來觸發,比如:APP中截屏后出現選擇“分享”“反饋”的彈窗提示。

在選擇好了觸發控件后,在設計過程中就要考慮一下控件的全部交互狀態。

PC端:

  1. 正常狀態:可以點擊且沒有進行任何動作的狀態
  2. 鼠標懸停時狀態:鼠標停留在按鈕時的狀態
  3. 鼠標按下時狀態:鼠標按下的時候
  4. 鼠標按下后彈起狀態:鼠標按下去后會松開鼠標時狀態(此效果可以不做,因為松開后還是鼠標停留按鈕時的效果,已經區分開了)
  5. 不可點擊狀態:一般為灰色,鼠標停留時鼠標是禁止狀態,不可點擊

移動端:

  1. 正常狀態:可以點擊且沒有進行任何動作的狀態
  2. 焦點狀態:獲取焦點的狀態
  3. 按下狀態:手指按下后的狀態
  4. 選中狀態:選中后的狀態
  5. 不可點擊狀態:一般灰色,點擊無反應

設計規則

設計規則是交互閉環體驗的核心,設計規則決定了一個交互過程到底如何去用。 設計規則前,需要確定一個最簡單、最明確的說法,即交互過程到底是怎樣的。最好的目標應該是容易理解(用戶知道為什么要做這件事),而且能夠完成的(用戶知道他可以做到這件事)。

設計交互規則時,我們要考慮到:

  • 如何響應被激活的控件。比如,用戶單擊圖標時會發生什么?
  • 交互過程中用戶可以進行什么操作。比如,用戶可以取消此次交互過程嗎、用戶可以在本次交互過程中接聽電話嗎?等。
  • 確定動作發生的順序。比如,只有在輸入文本信息后,“搜索”按鈕才會被激活。
  • 確定數據以及數據源。此次交互過程是否依賴數據?數據的來源是哪里?
  • 什么時候提供什么反饋。?在本次交互過程中,反饋出現在什么時候。
  • 確定交互過程的模式。此次交互過程是否需要循環或重復?
  • 確定交互結束時會發生什么。

設計交互過程的規則,包括以下內容:

  1. 記錄交互流程的主要動作,梳理邏輯關系,生成初步規則。
  2. 定義觸發控件的特征和狀態。 以一個簡單的下拉菜單為例,它有兩個狀態:打開和關閉。打開時,菜單選項會顯示出來,這些選項就是菜單的特征。除了選項,菜單還可以有其他特征,比如最多顯示的選項個數和每個選項標簽的最大長度。菜單還可以有其他狀態,比如懸停打開和懸停于選項上時顯示工具提示條。
  3. 為規則中的每一步都設計出相應的UI。交互過程中的每一步都會有相應的控件的狀態,且每一步都會有不同的頁面元素。
  4. 設計出約束條件。包括: 可用的輸入和輸出方法。 輸入內容的類型和范圍。用戶需要付出何種代價。可用的數據有哪些以及相關數據源。
  5. 合理設計復雜性。要找出最核心的復雜性在什么地方,確定用戶掌握著哪一部分以及何時需要介入。如果用戶介入絕對必要,則適時將控制權交給用戶。
  6. 制定防錯原則。 在設計交互流程時,就要考慮根本不讓用戶出錯。

信息反饋

在交互過程中設計信息反饋目的是幫助用戶理解交互的規則。 如果用戶按下一個按鈕,至少會有兩件
事發生:按鈕被按下了以及按鈕被按下后導致什么結果。

交互過程信息反饋的第一條原則是:別讓反饋給用戶造成壓力。反饋應該由需求驅動:用戶需要知道什么,什么時候知道(多長時間一次)?至于反饋的形式,則取決于我們的想法,視覺、聽覺、觸
覺或它們的組合。

交互過程中的反饋一般出現在以下情況:

  • 啟動觸發控件之后/期間。 所有用戶發起的運作都應該伴隨有一個系統的確認。按下按鈕時必須表明確實有事發生。
  • 交互的狀態由于啟動觸發控件而發生顯著變化時。比如, 郵件客戶端檢查新郵件,不一定每次檢查新郵件都需要通知用戶,但檢查到新郵件時一定要通知用戶。
  • 用戶突破了規則時。 比如用戶輸入了錯誤的值(比如密碼不對),或者已經滾動到了列表底部,再沒有什么可以顯示了。
  • 產品不能執行命令時。比如,多次連接網絡連接不上。
  • 在需要花較長時間的操作中顯示進度。

在設計信息反饋時,通常需要提供給用戶的反饋包括:

  • 什么事情已經開始了
  • 用戶剛剛做了什么事
  • 哪些過程已經開始了
  • 哪些過程已經結束了
  • 哪些過程正在進行中
  • 用戶不能干什么

關于信息反饋的方式,可參考本人的另一篇文章案例分析:產品的信息反饋設計。

關閉(循環)模式

模式是交互過程規則的一個分支。每一個交互過程都會有一個關閉(循環)模式表示完成此次過程的結束(再次觸發)。

我們通常在制定交互過程的規則時就會把整個交互過程的關閉模式制定好。比如,登錄功能交互流程的關閉模式是登錄成功或登錄失敗、在商城購買商品交互流程的關閉模式就是成功生成訂單等。

循環模式則是對于一個交互流程的持續時間的設定,比如,在網絡信號不佳的前提下,頁面不肯能一直持續加載,經過一個時長最終會顯示出頁面內容或加載失敗的提示(或者給出重新加載的按鈕,用戶再一次進入到該交互流程中)。

總結

交互閉環體驗的設計流程:

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

交互過程中的閉環體驗絕對會是讓產品受用戶歡迎的重要設計要素之一,它能增進用戶的參與度與愉悅感。雖然設計與開發優秀的交互閉環體驗也許會增加許多時間,但卻能讓你的產品成為用戶生活中的一部分。

 

作者:流年,互聯網產品設計師,4年互聯網產品設計經驗。

本文由 @流年 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖由作者提供

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 不錯的總結

    回復
  2. 沒聯合實際,有些空泛

    回復
  3. 微交互

    回復
  4. mark

    回復
  5. 來自廣東 回復