上一篇文章從寬泛的宏觀角度說明了輸出原型圖交互說明需要注意的事項，本篇結(jié)合圖例嘗試從微觀角度通過分類，闡述輸出移動端原型圖交互說明應(yīng)該注意的細(xì)節(jié)。

頁面元素交互說明的具體內(nèi)容與之前提到的交互自查表的內(nèi)容有關(guān)聯(lián)。我們可以從以下幾大類展開分析：模式與場景、頁面狀態(tài)、操作與反饋、數(shù)值限制條件和文案。

接下來逐一舉例闡述：

一、模式與場景

1. 硬件設(shè)備

1.1 橫豎屏

對于支持橫屏和豎屏兩種顯示模式的應(yīng)用，要考慮到兩者排版布局的區(qū)別，以及模式如何切換。如下圖是最常見的視頻類應(yīng)用，豎屏切換為橫屏播放模式的交互說明。

1.2 分辨率

不同分辨率會牽扯到適配問題，我們在設(shè)計界面時往往要根據(jù)應(yīng)用的受眾群體，兼顧不同屏幕尺寸呈現(xiàn)。交互設(shè)計師需要在排版布局時就考慮到這個因素。

如下圖需要在文章列表頁單篇文章的字段中顯示“行業(yè)與發(fā)布日期”，此時若想將兩個字段放置在一行，需要避免在低分辨率、小屏幕上字段的重疊。

1.3 硬件交互

某些應(yīng)用在進行某項操作時需要調(diào)起手機的麥克風(fēng)、攝像頭或藍牙等，這時需要詢問用戶，讓用戶自己選擇是否開啟相應(yīng)權(quán)限。

下圖以最近朋友圈刷屏的應(yīng)用ZEPETO舉例：

2. 模式

是指應(yīng)用內(nèi)不同場景下使用的模式，經(jīng)常用到的包括：編輯模式、夜間模式、無圖或省流量模式，低電量模式等。

下圖以知乎的無圖模式舉例。

大家設(shè)想一下，如果知乎只在這里放置了灰色的占位圖，并在占位圖附上文案“當(dāng)前為無圖模式，不顯示圖片”。那用戶在這里的使用體驗會大打折扣，而知乎的做法是不僅支持用戶單篇文章可單獨點擊查看圖片內(nèi)容，也貼心的告訴讀者原因是開啟了無圖模式，需要到哪里去設(shè)置解決。

強調(diào)這一點是為了說明：交互設(shè)計師在工作項目中拿到產(chǎn)品需求，作為需求在設(shè)計層面的第一道關(guān)口，在完成需求任務(wù)的同時，需要進一步思考產(chǎn)品需求的合理性，如果不合理有怎樣的解決方案，是否有更好的呈現(xiàn)方式等。

3. 異常狀態(tài)

原型的交互說明一定要考慮在各種異常場景下可能出現(xiàn)的問題及相應(yīng)的解決辦法。頁面的異常狀態(tài)通常從三個方面分析：

異常操作：連續(xù)多次相同的操作給予的反饋，比如相同時間段內(nèi)多次點擊發(fā)送短信驗證碼，應(yīng)用會提示隔幾分鐘之后再來嘗試發(fā)送。

數(shù)據(jù)相關(guān)：服務(wù)器無法獲取數(shù)據(jù)，數(shù)據(jù)加載時間較長等。

頁面提示：尤其是對To c的產(chǎn)品，經(jīng)常會有運營活動，有關(guān)某活動即將上線、活動失效、服務(wù)下線、系統(tǒng)繁忙等提示就必不可少了。

下圖是異常狀態(tài)中數(shù)據(jù)相關(guān)的交互說明。

4. 賬號權(quán)限

賬號是否注冊登錄，直接決定了是否能使用該應(yīng)用，或者是否能在應(yīng)用內(nèi)進行某些操作。另外也包括部分應(yīng)用需要指紋、手勢或密碼驗證身份。

比如淘寶允許用戶在未注冊登錄的情況下瀏覽頁面，但當(dāng)用戶進行某些個人行為操作時，如購買，收藏和關(guān)注等，此時會引導(dǎo)用戶去注冊登錄賬號。

下圖是農(nóng)業(yè)銀行APP轉(zhuǎn)賬操作的交互說明。

因為牽扯到資金的流動，所以安全性是第一位的，當(dāng)用戶使用銀行類移動應(yīng)用進行有關(guān)資金轉(zhuǎn)移支付的操作時，系統(tǒng)會要求通過某種方式，如密碼、指紋、刷臉等驗證用戶身份，以確保是使用者本人操作。

在項目設(shè)計中如果涉及到某流程安全性重要性層級高，大家需要考慮是否增加驗證。

二、頁面狀態(tài)

1. 默認(rèn)狀態(tài)

默認(rèn)狀態(tài)是指沒有對頁面進行操作的初始狀態(tài)。通常需要注意默認(rèn)顯示的文案、默認(rèn)篩選項、默認(rèn)調(diào)起的鍵盤類型，以及常見的列表默認(rèn)排序規(guī)則等。

下圖是手淘搜索結(jié)果頁篩選項默認(rèn)狀態(tài)的交互說明。

2. 正常狀態(tài)

用戶正常使用時遇到的頁面狀態(tài)。比如常見的登錄/未登錄、認(rèn)證/未認(rèn)證/審核中/認(rèn)證失敗。

下圖是新聞類應(yīng)用ZAKER未登錄賬戶進行操作收藏的交互說明。

3. 特殊狀態(tài)

指一些特殊場景才會出現(xiàn)的頁面狀態(tài)。比如頁面無數(shù)據(jù)、網(wǎng)絡(luò)加載失敗、無網(wǎng)斷網(wǎng)等情況。這些特殊場景事先必須通盤考慮清楚。

下圖是抖音無網(wǎng)狀態(tài)的交互說明。抖音的無網(wǎng)頁面既提供了當(dāng)前頁面狀態(tài)說明；也考慮到用戶所移動的區(qū)域可能通訊信號弱暫時無網(wǎng)，包含了刷新按鈕；同時也考慮存在用戶手機停機無網(wǎng)的可能，提供了查看解決方案的入口，引導(dǎo)用戶在手機系統(tǒng)設(shè)置中檢查網(wǎng)絡(luò)情況。

三、操作與反饋

1. 刷新和加載

頁面刷新分為自動或手動刷新。頁面加載是指加載數(shù)據(jù)的過渡狀態(tài)。比如在視覺設(shè)計中專門會利用頁面之間轉(zhuǎn)場的過渡或等待時間，設(shè)計一些情感化或品牌化的形象動效。

下圖是網(wǎng)易嚴(yán)選首頁下拉刷新中加入品牌元素的交互說明：

2. 交互方式

移動端用戶使用各種手勢操作，如常用的單擊、雙擊、滑動、長按和3Dtouch重按等。最近華為爆出將在后續(xù)新款手機中，增加手指關(guān)節(jié)畫圈對屏幕截圖等新的交互操作手勢。

下圖是華為手機Mate20系列創(chuàng)新的全面屏手勢，目的是通過便捷的手勢減去繁瑣的操作步驟。

3. 操作類型

按照正常操作、錯誤操作和特殊操作區(qū)分。

錯誤操作時要給出糾正反饋，特殊操作是指用戶進行了一些無意或者極端的操作，仍然要有提示和預(yù)防機制，這種情況雖然很少出現(xiàn)但也需要考慮到位。

下圖是微信朋友圈編輯動態(tài)，若用戶編輯了大段文字后無意點擊左上角關(guān)閉按鈕，給用戶提示彈框選擇是否保留編輯。大家肯定會想我就是不想發(fā)朋友圈了難道還要多一步彈框提示？

對的，微信鼓勵你發(fā)狀態(tài)，相比你真正想離開的意圖，微信更希望為你發(fā)布動態(tài)。

四、數(shù)值限制條件

1. 取值范圍

數(shù)據(jù)的正常取值是由產(chǎn)品需求，目標(biāo)受眾使用場景等因素決定。

如下圖是訂票應(yīng)用智行APP的購票日期選擇界面，因為火車票規(guī)定最多提前預(yù)售自當(dāng)天起往后30天以內(nèi)的車票，所以這里超過30天時限的具體日期被置灰不可選，且后續(xù)月份沒有出現(xiàn)。

2. 極限值

頁面元素最大值或最小值的顯示規(guī)則。

下圖是某評論頁面單條評論支持和反對數(shù)量的顯示規(guī)則，明確的規(guī)定了數(shù)字在某個范圍內(nèi)的顯示，以及可能出現(xiàn)的極限值。

五、文案

1. 是否合理

界面設(shè)計中我們經(jīng)常容易忽略文案隱喻的重要性。兩個相近的詞乍一看表達的意思沒有太大差異，但細(xì)究起來到底使用哪個對用戶而言更易理解，其實很值得深入思考。

文案使用的合理性主要表現(xiàn)在：傳達的意思是否通俗易懂，簡單明了；不同頁面相同場景提示文案是否保持一致。

如下圖對比，這是之前做過的一個需求，當(dāng)時設(shè)計時沒有針對提示框文案考慮太多，之后回頭思考，單就文案這里確實存在待改進的地方。

總結(jié)

除了以上提到的元素交互說明需要注意的點之外，還可能牽扯到應(yīng)用通知機制、埋點說明、技術(shù)可行性及實現(xiàn)難度說明，以及動效的交互說明等。

這些是平時工作項目中的經(jīng)驗總結(jié)，嘗試把零散的點歸類說明，希望對你有所啟發(fā)和幫助。

需要提醒的是：因為項目和需求等因素的差異，大家應(yīng)該依據(jù)自己實際的工作項目，總結(jié)出適合自己輸出原型圖交互說明的方案。如果你有更好的觀點補充，歡迎留言交流。

作者：Viksea，微信公眾號：Viksea（ID：viksea-ux）

本文由 @Viksea 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自作者。