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

了解用戶在各種場景下可能面對的交互狀態(tài)，是UX設(shè)計師日常工作中的一項重要任務(wù)。

對這些狀態(tài)進行全面、清晰的預(yù)判，對設(shè)計師尤其是新人設(shè)計師有兩個方面的優(yōu)勢。

一個是有助于確保方案交付的完整，使產(chǎn)品更具可用性、易用性。登錄前后或者不同網(wǎng)絡(luò)環(huán)境下的體驗訴求肯定是不同的，設(shè)計師需要關(guān)注到這些狀態(tài)的存在，才能做出全面的設(shè)計布局，幫助用戶從容應(yīng)對多變的體驗狀況。

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

以下，為大家全面梳理了9個大類下的共38個狀態(tài)細節(jié)，并對每個交互狀態(tài)的設(shè)計思考點進行了簡單闡述，同時結(jié)合實際案例加深理解：

一、角色

1. 未登錄/已登錄

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

2. 新用戶/老用戶

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

B端产品经理的能力模型与学习提升

B端产品经理面临的第一大挑战，是如何正确的分析诊断业务问题。 这也是最难的部分，产品设计知识对这部分工作基本没有帮助，如果想做好业务分析诊断，必须具备扎实 ...

查看详情 >

3. 游客賬號

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

4. 第三方賬號

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

5. 普通用戶/高級會員

• 普通用戶與會員的差異是什么？流程、功能還是服務(wù)？
• 會員身份如何體現(xiàn)？（標識、顏色、文案等）
• 會員服務(wù)如何與普通服務(wù)區(qū)分？
• 如何引導(dǎo)轉(zhuǎn)化？策略是什么？入口放在哪？

6. 內(nèi)網(wǎng)/外網(wǎng)賬號

• 需要向用戶說明當前所處內(nèi)外網(wǎng)環(huán)境
• 訪問權(quán)限是依據(jù)用戶賬號還是訪問地址？
• 外部用戶可否訪問？訪問內(nèi)容范圍是什么？如何提示？
• 是否支持申請？申請流程如何設(shè)計？

7. 管理員賬號

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

二、網(wǎng)絡(luò)

1. 網(wǎng)絡(luò)中斷

• 由于信號端、應(yīng)用端等非用戶原因，或主動關(guān)閉信號、切換至飛行模式等用戶原因?qū)е碌木W(wǎng)絡(luò)中斷
• 根據(jù)內(nèi)容狀態(tài)、內(nèi)容類型選擇合適的、反饋清晰的通知方式

2. 大流量消耗

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

3. 信號不佳/不穩(wěn)定

• 信號不穩(wěn)定不代表網(wǎng)絡(luò)中斷，只是較弱或連接不穩(wěn)定，時連時斷，對該狀態(tài)進行提示
• 尤其是在線會議、觀看視頻等持續(xù)消耗流量的場景，用戶需要對情況及時了解并做出反應(yīng)

4. 流量形式切換

• 從wifi流量切換至移動數(shù)據(jù)時，進行toast提示
• 切換至WiFi時是否提示，可自行判斷

三、內(nèi)容

1. 沒有內(nèi)容

• 給出解釋
• 避免中斷用戶體驗，可進行操作引導(dǎo)

2. 敏感/違規(guī)內(nèi)容

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

3. 站外內(nèi)容

• 跳轉(zhuǎn)鏈接為站外內(nèi)容，進行免責告知

四、設(shè)備

1. 橫豎屏

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

2. 分辨率

• 是否有相應(yīng)的適配規(guī)則
• 大概幾種方式：保持頁面不變，簡單拉伸適配；居中顯示，兩邊留白；保持頁面框架，調(diào)整模塊內(nèi)的樣式；重組頁面布局
• 確定邊界值、縮放內(nèi)容，固定區(qū)域等信息

3. 清晰度

• 對分辨率切換狀態(tài)進行告知
• 如果分辨率領(lǐng)先競品，或是會員權(quán)益的一部分，可以對最高畫質(zhì)進行水印常駐提示

4. 不同版本

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

5. 硬件調(diào)用

• 場景：藍牙、定位、相機、話筒、存儲
• 是否需要獲取權(quán)限？獲取那些權(quán)限？
• 提示如何觸發(fā)？（被動、主動）
• 調(diào)用狀態(tài)是否需要實時顯示？

6. 硬件聯(lián)動

• 告訴用戶接下來的操作需要與硬件進行聯(lián)動、連接，并提供入口
• 連接過程中需要進行的操作？分步or單頁or彈窗
• 連接狀態(tài)如何？如何取消聯(lián)動？

五、加載

1. 加載類型

全屏加載

• 一次性加載完所有數(shù)據(jù)后再顯示內(nèi)容

占位符加載

• 先加載框架，再加載框架內(nèi)的內(nèi)容
• 提前讓用戶知道整個界面的架構(gòu)
• 降低用戶的等待感

上拉加載

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

下拉加載

• 下拉后，整個頁面重新加載刷新
• 加載形式：文字？icon？文字&icon？進度條？
• 刷新后是否需要提示？是否需要提示具體加載的結(jié)果？

局部加載

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

智能加載

• 判斷當前網(wǎng)絡(luò)環(huán)境，如網(wǎng)絡(luò)較差，耗流量內(nèi)容通過占位符展示，等網(wǎng)絡(luò)變好后重新加載
• 判斷當前網(wǎng)絡(luò)環(huán)境，如為蜂窩網(wǎng)絡(luò)，顯示占位符，如為wifi，直接加載內(nèi)容，幫助用戶節(jié)省流量

2. 加載節(jié)點

加載前

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

加載中

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

加載后

• 加載結(jié)束后是否需要提示？
• 如進行提示，是否需要對具體加載數(shù)進行說明？
• 提示位置

六、中斷

1. 沒有電

• 電量恢復(fù)后，是否支持恢復(fù)關(guān)機前相關(guān)頁面？
• 是否需要對頁面非正常關(guān)閉進行說明？
• 對未完成任務(wù)進行告知，提供快捷操作

2. 低電量

• 如當前功能對電量有一定要求，為保證體驗效果，提醒用戶及時充電
• 如有低電量模式服務(wù)，需要確定模式轉(zhuǎn)化策略，什么情況變?yōu)榈碗娏磕Ｊ?，什么時候取消？
• 低電量模式下，如何展示模式狀態(tài)
• 是否支持設(shè)置服務(wù)自動關(guān)閉，避免手機電量過度消耗

3. 加載失敗

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

4. 服務(wù)器異常

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

5. 安裝/下載/發(fā)布/連接等失敗

• 確定提示文案
• 確定提示形式
• 不要中斷用戶體驗，提供相應(yīng)的跳轉(zhuǎn)操作

七、特殊

1. 深色模式

• 梳理現(xiàn)有內(nèi)容類型，確定顯示策略，如降低信息與背景的對比度，對圖片/圖標進行遮罩
• 模式間如何切換？是否支持用戶設(shè)置？跟隨系統(tǒng)or手動選擇

2. 沉浸模式

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

3. 存在廣告屏蔽插件

• 判斷當前產(chǎn)品是否以廣告作為主要收入來源，如果是，則要針對AdBlock等廣告屏蔽插件設(shè)計相應(yīng)的提示策略

八、操作

1. 輸入

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

2. 點擊

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

3. 反復(fù)點擊/惡意操作

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

4. 誤操作

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

九、限制

1. 極值

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

2. 邊界

• 判斷產(chǎn)品與用戶的互動過程是否存在邊界限制？
• 邊界如何提示或引導(dǎo)？
• 超過顯示邊界時如何處理？

3. 時間

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

4. 地域

• 服務(wù)范圍是否存在地域限制，如何告知？
• 當前位置是否在服務(wù)范圍內(nèi)，如果不在，如何提示？

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