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

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

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

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

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

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

一、角色

1. 未登錄/已登錄

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

2. 新用戶/老用戶

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

3. 游客賬號(hào)

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

4. 第三方賬號(hào)

• 支持哪些平臺(tái)的帳號(hào)？
• 與本地帳號(hào)整合時(shí)如何提示？帳號(hào)合并后資料信息如何處理？如何提示？
• 如何與平臺(tái)賬號(hào)解綁？

5. 普通用戶/高級會(huì)員

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

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

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

7. 管理員賬號(hào)

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

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

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

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

2. 大流量消耗

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

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

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

4. 流量形式切換

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

三、內(nèi)容

1. 沒有內(nèi)容

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

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

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

3. 站外內(nèi)容

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

四、設(shè)備

1. 橫豎屏

• 適合橫屏瀏覽的內(nèi)容，進(jìn)行友情提示，或?yàn)橛脩籼峁┮绘I橫屏操作
• 告知用戶如何退出

2. 分辨率

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

3. 清晰度

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

4. 不同版本

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

5. 硬件調(diào)用

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

6. 硬件聯(lián)動(dòng)

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

五、加載

1. 加載類型

全屏加載

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

占位符加載

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

上拉加載

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

下拉加載

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

局部加載

• 無需整頁加載，僅局部進(jìn)行加載

智能加載

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

2. 加載節(jié)點(diǎn)

加載前

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

加載中

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

加載后

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

六、中斷

1. 沒有電

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

2. 低電量

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

3. 加載失敗

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

4. 服務(wù)器異常

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

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

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

七、特殊

1. 深色模式

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

2. 沉浸模式

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

3. 存在廣告屏蔽插件

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

八、操作

1. 輸入

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

2. 點(diǎn)擊

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

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

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

4. 誤操作

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

九、限制

1. 極值

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

2. 邊界

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

3. 時(shí)間

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

4. 地域

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

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