長文解析|九類交互狀態的自查與設計

6 評論 7524 瀏覽 162 收藏 21 分鐘

做功能設計時,我們都要求會考慮到產品的各種情況,其實就是交互狀態的各種臨界和極限。這篇文章,作者梳理了九種狀態,細分了38個狀態細節,可以收藏起來備用。

了解用戶在各種場景下可能面對的交互狀態,是UX設計師日常工作中的一項重要任務。

對這些狀態進行全面、清晰的預判,對設計師尤其是新人設計師有兩個方面的優勢。

一個是有助于確保方案交付的完整,使產品更具可用性、易用性。登錄前后或者不同網絡環境下的體驗訴求肯定是不同的,設計師需要關注到這些狀態的存在,才能做出全面的設計布局,幫助用戶從容應對多變的體驗狀況。

再一個,當產品開發完畢,進入走查環節,對各種交互狀態的掌握,能夠快速查漏補缺,發現潛在問題并進行修復,避免產品帶著問題上線。盡管這些狀態可能并非產品的核心功能,但這些瑣碎的設計細節,對整體體驗感知起到非常重要的兜底作用。及時、友好的狀態設計,可以有效的降低用戶負面情緒,逐漸建立起對產品的信任和信心。

以下,為大家全面梳理了9個大類下的共38個狀態細節,并對每個交互狀態的設計思考點進行了簡單闡述,同時結合實際案例加深理解:

一、角色

1. 未登錄/已登錄

  • 未登錄:如何進行登錄引導,判斷哪些頁面不可見、功能不可用
  • 已登錄:如何退出,入口放在哪,是否需要提示?
  • 引導形式:氣泡、內容模塊、整頁、彈窗、Snackbar
  • 登錄形式:彈窗、半浮層、整頁

2. 新用戶/老用戶

  • 新用戶如何降低學習成本、快速上手?新手引導的形式,是否分步?如何退出?
  • 是否需要收集用戶信息,為內容推薦提供初始來源。用戶標簽收集信息有哪些?分幾步?如何順利完成,降低跳過率?
  • 功能是否可以自定義?如何回到默認狀態?
  • 老用戶如何體驗更高效?是否需要提供快捷、個性化操作,快速進入任務狀態?

3. 游客賬號

  • 游客身份下是否保存相關記錄?保存的時效性?
  • 什么時候引導用戶注冊/登錄正常的帳號?如何引導?
  • 登錄后游客身份的資料信息如何處理?

4. 第三方賬號

  • 支持哪些平臺的帳號?
  • 與本地帳號整合時如何提示?帳號合并后資料信息如何處理?如何提示?
  • 如何與平臺賬號解綁?

5. 普通用戶/高級會員

  • 普通用戶與會員的差異是什么?流程、功能還是服務?
  • 會員身份如何體現?(標識、顏色、文案等)
  • 會員服務如何與普通服務區分?
  • 如何引導轉化?策略是什么?入口放在哪?

6. 內網/外網賬號

  • 需要向用戶說明當前所處內外網環境
  • 訪問權限是依據用戶賬號還是訪問地址?
  • 外部用戶可否訪問?訪問內容范圍是什么?如何提示?
  • 是否支持申請?申請流程如何設計?

7. 管理員賬號

  • 是否支持身份切換?入口放在哪?
  • 身份標簽如何展示?

二、網絡

1. 網絡中斷

  • 由于信號端、應用端等非用戶原因,或主動關閉信號、切換至飛行模式等用戶原因導致的網絡中斷
  • 根據內容狀態、內容類型選擇合適的、反饋清晰的通知方式

2. 大流量消耗

  • 看視頻、玩游戲等大流量消耗場景,正式開始前進行提示
  • 確認是否支持在平臺內對流量提醒進行設置

3. 信號不佳/不穩定

  • 信號不穩定不代表網絡中斷,只是較弱或連接不穩定,時連時斷,對該狀態進行提示
  • 尤其是在線會議、觀看視頻等持續消耗流量的場景,用戶需要對情況及時了解并做出反應

4. 流量形式切換

  • 從wifi流量切換至移動數據時,進行toast提示
  • 切換至WiFi時是否提示,可自行判斷

三、內容

1. 沒有內容

  • 給出解釋
  • 避免中斷用戶體驗,可進行操作引導

2. 敏感/違規內容

  • 確定敏感、違規內容的范圍,并按照相關規則、平臺屬性進行分類、定義
  • 從產品各關聯方進行考慮,如內容提供者、內容消費者、平臺方
  • 用戶輸入敏感詞或違規內容時,是否需要提示?如何提示?
  • 用戶發布、分享的內容涉嫌違規時,如何進行提示?如有違規懲罰機制可一并告知
  • 是否需要對內容違規部分進行精準提示?
  • 用戶瀏覽敏感內容、違規內容時如何進行提示?是否支持繼續瀏覽?

3. 站外內容

  • 跳轉鏈接為站外內容,進行免責告知

四、設備

1. 橫豎屏

  • 適合橫屏瀏覽的內容,進行友情提示,或為用戶提供一鍵橫屏操作
  • 告知用戶如何退出

2. 分辨率

  • 是否有相應的適配規則
  • 大概幾種方式:保持頁面不變,簡單拉伸適配;居中顯示,兩邊留白;保持頁面框架,調整模塊內的樣式;重組頁面布局
  • 確定邊界值、縮放內容,固定區域等信息

3. 清晰度

  • 對分辨率切換狀態進行告知
  • 如果分辨率領先競品,或是會員權益的一部分,可以對最高畫質進行水印常駐提示

4. 不同版本

  • 產品是否存在新舊版本、不同的模式(青少年模式、無障礙版/關懷版、聽筒模式等)?
  • 如果存在,差異點是什么?
  • 對于較低版本的應用,如何進行升級引導?頁面中是否需要提供升級的快捷入口?
  • 升級后是否支持退回舊版本?有必要對升級情況進行提示
  • 是否支持用戶切換版本?如支持則提供切換的入口。另外切換時是否需要某種權限?避免誤操作
  • 不同系統間的版本差異

5. 硬件調用

  • 場景:藍牙、定位、相機、話筒、存儲
  • 是否需要獲取權限?獲取那些權限?
  • 提示如何觸發?(被動、主動)
  • 調用狀態是否需要實時顯示?

6. 硬件聯動

  • 告訴用戶接下來的操作需要與硬件進行聯動、連接,并提供入口
  • 連接過程中需要進行的操作?分步or單頁or彈窗
  • 連接狀態如何?如何取消聯動?

五、加載

1. 加載類型

全屏加載

  • 一次性加載完所有數據后再顯示內容

占位符加載

  • 先加載框架,再加載框架內的內容
  • 提前讓用戶知道整個界面的架構
  • 降低用戶的等待感

上拉加載

  • 手勢上拉,信息自動加載
  • 加載形式:文字?icon?文字&icon
  • 加載完成后是否需要提示?是否需要提示具體加載的結果?
  • 每次加載多少?加載到最后時如何提示?

下拉加載

  • 下拉后,整個頁面重新加載刷新
  • 加載形式:文字?icon?文字&icon?進度條?
  • 刷新后是否需要提示?是否需要提示具體加載的結果?

局部加載

  • 無需整頁加載,僅局部進行加載

智能加載

  • 判斷當前網絡環境,如網絡較差,耗流量內容通過占位符展示,等網絡變好后重新加載
  • 判斷當前網絡環境,如為蜂窩網絡,顯示占位符,如為wifi,直接加載內容,幫助用戶節省流量

2. 加載節點

加載前

  • 確定加載策略,如上劃至某個位置觸發加載、上劃至底部觸發加載、點擊按鈕觸發加載等
  • 確定提示文案

加載中

  • 提示形式:純文字、文字+icon、純icon

加載后

  • 加載結束后是否需要提示?
  • 如進行提示,是否需要對具體加載數進行說明?
  • 提示位置

六、中斷

1. 沒有電

  • 電量恢復后,是否支持恢復關機前相關頁面?
  • 是否需要對頁面非正常關閉進行說明?
  • 對未完成任務進行告知,提供快捷操作

2. 低電量

  • 如當前功能對電量有一定要求,為保證體驗效果,提醒用戶及時充電
  • 如有低電量模式服務,需要確定模式轉化策略,什么情況變為低電量模式,什么時候取消?
  • 低電量模式下,如何展示模式狀態
  • 是否支持設置服務自動關閉,避免手機電量過度消耗

3. 加載失敗

  • 加載失敗的原因是什么?提示文案是什么?
  • 盡可能提供重試的操作

4. 服務器異常

  • 確定提示形式,彈窗or頁面
  • 如為頁面提示,則提供刷新操作或回到首頁/上一步等

5. 安裝/下載/發布/連接等失敗

  • 確定提示文案
  • 確定提示形式
  • 不要中斷用戶體驗,提供相應的跳轉操作

七、特殊

1. 深色模式

  • 梳理現有內容類型,確定顯示策略,如降低信息與背景的對比度,對圖片/圖標進行遮罩
  • 模式間如何切換?是否支持用戶設置?跟隨系統or手動選擇

2. 沉浸模式

  • 需要用戶長時間聚焦瀏覽的信息,為了保障信息呈現的效率、效果,考慮是否提供沉浸模式選項
  • 確定進入沉浸模式的策略,手動選擇or系統自動
  • 是否需要提示用戶如何退出?
  • 進入/退出如何平滑過渡?

3. 存在廣告屏蔽插件

  • 判斷當前產品是否以廣告作為主要收入來源,如果是,則要針對AdBlock等廣告屏蔽插件設計相應的提示策略

八、操作

1. 輸入

  • 是否存在提示文案或默認值
  • 如何處理不同輸入狀態,輸入前、輸入中、輸入后、輸入正確、輸入錯誤、未填寫
  • 是否需要進行輸入提示
  • 確定鍵盤調起策略,自動觸發輸入后彈出or手動觸發輸入后彈出
  • 如何處理鍵盤對內容的遮擋
  • 輸入內容是否需要保存?保存策略?

2. 點擊

  • 如何處理不同點擊狀態,默認、hover、點擊、禁用、加載中
  • 基于不同的作用,確定不同的按鈕樣式

3. 反復點擊/惡意操作

  • 為確保產品安全,確定防刷機制
  • 判斷哪些操作需要?如驗證碼、下單等反復提交
  • 什么情況下進行限制?如控制點擊次數、提交次數、點擊日期等
  • 如何進行提示?頁面提示、toast提示等

4. 誤操作

  • 如果用戶誤操作會導致一定后果,則需要考慮如何避免誤操作
  • 提升操作成本,該方式需要慎重考慮,但仍然適用于某些“危險”場景
  • 進行二次確認
  • 用戶實時錄入的內容進行自動保存,避免丟失
  • 支持撤銷操作

九、限制

1. 極值

  • 最大、最小、最多、最少等極值范圍如何提示?
  • 極限情況下的內容如何展示?
  • 達到極值時是否需要進行提示?

2. 邊界

  • 判斷產品與用戶的互動過程是否存在邊界限制?
  • 邊界如何提示或引導?
  • 超過顯示邊界時如何處理?

3. 時間

  • 時間要素是否存在限制,如何提示?
  • 是否需要設置默認時間,最新or從零開始or中間值
  • 是否需要預判用戶所選時間的合理性,并進行提示

4. 地域

  • 服務范圍是否存在地域限制,如何告知?
  • 當前位置是否在服務范圍內,如果不在,如何提示?

以上就是九大類交互狀態以及延伸出的38個狀態細節,希望這份清單能為大家提供一些有價值的設計參考。其中每個狀態下的設計思考點想到哪里就寫到哪里,肯定是有遺漏的。這有待于大家深入設計場景,真實的去感受,通過不斷的設計實踐,形成完善的思考邏輯和應對策略。

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

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 不愧是大佬,就是不一樣

    來自廣東 回復
  2. 有用

    來自浙江 回復
    1. 有用

      來自廣東 回復
  3. 感謝大佬分享

    來自福建 回復
  4. 牛逼,app設計者都需要對照自查,看是否有遺漏

    來自廣東 回復
  5. 寫的很好,很剛需。

    來自廣東 回復