初級PM畫APP原型的時候經常糾結要不要畫交互？往往是因為覺得畫起來麻煩，還有就是不知道怎么畫。

根據自己多年的產品經驗，梳理了大部分APP都會用到的交互，并用Axure畫出最簡潔的實現步驟。

如果你的上級希望你畫帶交互的APP原型或者需要演示給甲方客戶看效果，可以把這篇文章收藏起來備用。

頁面跳轉

頁面跳轉是指可以從一個頁面跳轉到其他頁面，也可以返回到最初頁面。

操作步驟：首先畫出一個個頁面，然后在需要跳轉的頁面中選中熱區，最后給它設置交互事件“從當前頁面打開新鏈接”，詳細步驟見下圖：

所謂的熱區，是指點擊哪里會跳轉到新頁面。往往是一個圖形按鈕或者文字按鈕。

至于為什么要畫頁面間跳轉，可參考舊文章 《如何正確地畫出頁面流程圖》

顯示多屏內容

顯示多屏內容的交互是指當頁面很長的時候，手指向上滑動可以顯示更多內容。

操作步驟：將頁面內容生成動態面板，設置顯示高度并且按需顯示滾動條。

上導航

上導航的交互是指滾動頁面的時候，上導航依然固定在手機屏幕頂部。

操作步驟：將上導航的元件選中并右鍵生成動態母版，然后郵件固定到瀏覽器，設置相關參數。

下導航

下導航的交互是指滾動頁面的時候，下導航依然固定在手機屏幕底部。并且點擊每一個下導航按鈕可以跳轉到對應的導航頁面同時顯示選中按鈕效果。

操作步驟：前面的效果和上導航一樣，后面步驟使用單選項和頁面事件。

吐司

吐司的交互是指需要提醒用戶注意的時候，在頁面上顯示Toast，然后隔一會自動消失。

操作步驟：模仿toast樣式畫出來，然后觸發某個條件之后，顯示toast元件，設置等待3秒后，隱藏元件即可。

彈層

彈層的交互是指需要提醒用戶進行重要操作的時候，在頁面上顯示彈層，然后由用戶決定是否繼續操作還是取消操作。

操作步驟：觸發某個條件之后，顯示彈層，然后點擊按鈕可以隱藏彈層或執行其他行為。

操作列表

操作列表的交互是指需要提醒用戶進行不同操作的時候，顯示上拉列表然后供用戶選擇不同的操作或者取消操作。

操作步驟：觸發某個條件之后，從頁面底部向上展示操作列表同時半透明遮住后面的頁面。然后點擊按鈕可以下拉隱藏彈層或執行其他行為。

總結

以上是我總結的APP原型中常見交互的Axure畫法，后續會一直更新。

建議初級PM學會這樣的的方法以便更好的理解APP原型除了頁面還有交互。至于實際工作中是不是應該花費時間來畫這些交互，請根據你們的項目要求而定。

當然，如果你把以上交互做成APP元件庫，后續就可以快速應用到自己的Axure RP項目中。

AxureRP源文件下載地址https://www.jianguoyun.com/p/DaXJp44Qu4zdBRjzoz4

相關閱讀

移動端APP原型設計三部曲

如何使用Axure規范的畫出頁面的線框圖

#專欄作家#

浪子，業務型PM，浪子PRD系列51prd.com，公眾號langzisay。

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

題圖來自 unsplash，基于 CC0 協議