中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

接下來逐一舉例闡述：

一、模式與場景

1. 硬件設備

1.1 橫豎屏

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

1.2 分辨率

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

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

1.3 硬件交互

某些應用在進行某項操作時需要調起手機的麥克風、攝像頭或藍牙等，這時需要詢問用戶，讓用戶自己選擇是否開啟相應權限。

下圖以最近朋友圈刷屏的應用ZEPETO舉例：

2. 模式

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

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

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

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

3. 異常狀態

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

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

數據相關：服務器無法獲取數據，數據加載時間較長等。

頁面提示：尤其是對To c的產品，經常會有運營活動，有關某活動即將上線、活動失效、服務下線、系統繁忙等提示就必不可少了。

下圖是異常狀態中數據相關的交互說明。

4. 賬號權限

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

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

下圖是農業銀行APP轉賬操作的交互說明。

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

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

二、頁面狀態

1. 默認狀態

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

下圖是手淘搜索結果頁篩選項默認狀態的交互說明。

2. 正常狀態

用戶正常使用時遇到的頁面狀態。比如常見的登錄/未登錄、認證/未認證/審核中/認證失敗。

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

3. 特殊狀態

指一些特殊場景才會出現的頁面狀態。比如頁面無數據、網絡加載失敗、無網斷網等情況。這些特殊場景事先必須通盤考慮清楚。

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

三、操作與反饋

1. 刷新和加載

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

下圖是網易嚴選首頁下拉刷新中加入品牌元素的交互說明：

2. 交互方式

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

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

3. 操作類型

按照正常操作、錯誤操作和特殊操作區分。

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

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

對的，微信鼓勵你發狀態，相比你真正想離開的意圖，微信更希望為你發布動態。

四、數值限制條件

1. 取值范圍

數據的正常取值是由產品需求，目標受眾使用場景等因素決定。

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

2. 極限值

頁面元素最大值或最小值的顯示規則。

下圖是某評論頁面單條評論支持和反對數量的顯示規則，明確的規定了數字在某個范圍內的顯示，以及可能出現的極限值。

五、文案

1. 是否合理

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

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

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

總結

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

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

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

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

本文由 @Viksea 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自作者。