移動端APP應該如何定義交互規範

每個APP都有很多交互功能，不同APP的交互效果也有差異，但是它們基本上都遵守統一的交互規範。比如相似的動作、位置、樣式、邏輯。

根據我多年的移動端APP的產品經驗，將設計APP都需要用到的交互都整理出來，供大家參考學習。建議結合之前的《移動端APP應該如何定義頁面規範》一起學習。

一、APP閃屏

每次啟動APP的時候，最好載入一張圖片。因為載入APP需要時間，有一個過渡畫面可以減弱用戶對等待的焦躁感。

常見的有微信採用了一張靜態圖片作為閃屏，而支付寶&淘寶等APP採用的是動態圖片來作為閃屏。

二、APP功能引導

當首次打開APP或者更新APP的時候，一般會載入幾張圖片來講解APP的功能。

然後再去載入閃屏，最後打開首頁。

三、頁面間交互

頁面間交互，其實就是一個頁面進入另外一個頁面的交互效果。

ios常見使用覆蓋移入效果。Android常見使用向左平移效果，當然返回的時候就是向右平移效果。

當然不常見的交互效果還有中央放大進入，3D翻轉，右下角翻頁等。

四、頁面內交互

頁面內必備的交互至少有吐司，彈窗，模態視圖3種，程度依次遞增。

4.1、toast吐司

下圖是吐司提示的交互，一般有3種樣式。

位置：頁面中部居中/頁面下方居中/頁面頂部

交互：淡入淡出，懸浮2秒。位於頁面層級的最上級，一般無遮罩效果。

樣式：灰底白字、文字距離上下左右的間距是固定的。可自定義位置、帶圖片限定最長寬度，自適應高度。也可通欄。

實現機制：由服務端標識然後返回內容給客戶端。

4.2、Alert彈窗

下圖是彈窗的交互，一般有1種樣式。也稱警告框，彈層。

位置：頁面中間

交互：淡入淡出&顯示遮罩效果(點擊外部位置，向下隱藏操作列表)。如果有2個按鈕，則統一左邊取消按鈕，右邊確定按鈕。

樣式：右按鈕是操作按鈕；為避免誤操作，左按鈕是返回/取消/隱藏。

實現機制：由服務端標識然後返回內容給客戶端。特殊場景下，警告框當做頁面，以"頁面載入-整體載入"方法來處理。比如領取優惠券。

4.3、模態視圖

為用戶提供了一種不脫離主流程的方式去進行操作，容易和彈窗混淆。

位置：頁面頂部或者底部

交互：進入頁面之後，載入並顯示在頂層。根據服務端規則顯示相應內容。點擊頁面空白區域，向下滑動隱藏彈窗。

實現機制：是否可以服務端控制是否顯示，以及顯示什麼內容，以新增參數的形式。

4.4、操作列表

也稱底部彈出框，底部上拉列表。

位置：頁面底部

交互： 點擊分享按鈕，從頁面底部向上彈出並顯示遮罩效果，點擊取消按鈕或者活動菜單外部就會自動向下隱藏。

實現機制：是否可以服務端控制是否顯示，以及顯示什麼內容，以新增參數的形式。

五、跳轉到其他APP

主要是分享功能會跳轉到其他APP，簡單了解一下交互效果。採用的是活動菜單這個控制項。

六、總結

希望大家能夠通過這篇文章對移動端APP的常見交互行為以及基本的規範有一定了解，至少設計自己APP的時不會在交互上犯原則性的錯誤。

#相關閱讀#

移動端APP應該如何定義頁面規範

如何用Axure規範地畫出APP原型的交互

移動端APP應該如何定義頁面規範

浪子，著有浪子PRD文檔http://51prd.com，公眾號langzisay，個人微信nuanai88。