長文解析|九類交互狀態的自查與設計
做功能設計時,我們都要求會考慮到產品的各種情況,其實就是交互狀態的各種臨界和極限。這篇文章,作者梳理了九種狀態,細分了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設計者都需要對照自查,看是否有遺漏
寫的很好,很剛需。