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

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

接下來(lái)逐一舉例闡述：

一、模式與場(chǎng)景

1. 硬件設(shè)備

1.1 橫豎屏

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

1.2 分辨率

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

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

1.3 硬件交互

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

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

2. 模式

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

下圖以知乎的無(wú)圖模式舉例。

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

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

3. 異常狀態(tài)

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

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

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

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

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

4. 賬號(hào)權(quán)限

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

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

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

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

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

二、頁(yè)面狀態(tài)

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

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

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

2. 正常狀態(tài)

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

下圖是新聞?lì)悜?yīng)用ZAKER未登錄賬戶進(jìn)行操作收藏的交互說(shuō)明。

3. 特殊狀態(tài)

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

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

三、操作與反饋

1. 刷新和加載

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

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

2. 交互方式

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

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

3. 操作類型

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

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

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

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

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

1. 取值范圍

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

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

2. 極限值

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

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

五、文案

1. 是否合理

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

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

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

總結(jié)

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

這些是平時(shí)工作項(xiàng)目中的經(jīng)驗(yàn)總結(jié)，嘗試把零散的點(diǎn)歸類說(shuō)明，希望對(duì)你有所啟發(fā)和幫助。

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

作者：Viksea，微信公眾號(hào)：Viksea（ID：viksea-ux）

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

題圖來(lái)自作者。