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

APP閃屏

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

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

APP功能引導(dǎo)

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

然后再去加載閃屏，最后打開首頁。

頁面間交互

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

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

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

頁面內(nèi)交互

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

toast吐司

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

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

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

樣式：灰底白字、文字距離上下左右的間距是固定的?？勺远x位置、帶圖片限定最長寬度，自適應(yīng)高度。也可通欄。

實現(xiàn)機制：由服務(wù)端標識然后返回內(nèi)容給客戶端。

Alert彈窗

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

位置：頁面中間

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

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

實現(xiàn)機制：由服務(wù)端標識然后返回內(nèi)容給客戶端。特殊場景下，警告框當做頁面，以”頁面加載-整體加載”方法來處理。比如領(lǐng)取優(yōu)惠券。

模態(tài)視圖

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

位置：頁面頂部或者底部

交互：進入頁面之后，加載并顯示在頂層。根據(jù)服務(wù)端規(guī)則顯示相應(yīng)內(nèi)容。點擊頁面空白區(qū)域，向下滑動隱藏彈窗。

實現(xiàn)機制：是否可以服務(wù)端控制是否顯示，以及顯示什么內(nèi)容，以新增參數(shù)的形式。

操作列表

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

位置：頁面底部

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

實現(xiàn)機制：是否可以服務(wù)端控制是否顯示，以及顯示什么內(nèi)容，以新增參數(shù)的形式。

跳轉(zhuǎn)到其他APP

主要是分享功能會跳轉(zhuǎn)到其他APP，簡單了解一下交互效果。采用的是活動菜單這個控件。

總結(jié)

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

相關(guān)閱讀

移動端APP應(yīng)該如何定義頁面規(guī)范

如何用Axure規(guī)范地畫出APP原型的交互

移動端APP應(yīng)該如何定義頁面規(guī)范

#專欄作家#

浪子，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號langzisay，個人微信nuanai88。

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

題圖來自 unsplash，基于 CC0 協(xié)議