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

根據(jù)自己多年的產(chǎn)品經(jīng)驗，梳理了大部分APP都會用到的交互，并用Axure畫出最簡潔的實現(xiàn)步驟。

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

頁面跳轉(zhuǎn)

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

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

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

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

顯示多屏內(nèi)容

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

操作步驟：將頁面內(nèi)容生成動態(tài)面板，設(shè)置顯示高度并且按需顯示滾動條。

上導航

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

操作步驟：將上導航的元件選中并右鍵生成動態(tài)母版，然后郵件固定到瀏覽器，設(shè)置相關(guān)參數(shù)。

下導航

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

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

吐司

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

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

彈層

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

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

操作列表

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

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

總結(jié)

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

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

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

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

相關(guān)閱讀

移動端APP原型設(shè)計三部曲

如何使用Axure規(guī)范的畫出頁面的線框圖

#專欄作家#

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

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

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