初級(jí)PM畫(huà)APP原型的時(shí)候經(jīng)常糾結(jié)要不要畫(huà)交互？往往是因?yàn)橛X(jué)得畫(huà)起來(lái)麻煩，還有就是不知道怎么畫(huà)。

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

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

頁(yè)面跳轉(zhuǎn)

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

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

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

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

顯示多屏內(nèi)容

顯示多屏內(nèi)容的交互是指當(dāng)頁(yè)面很長(zhǎng)的時(shí)候，手指向上滑動(dòng)可以顯示更多內(nèi)容。

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

上導(dǎo)航

上導(dǎo)航的交互是指滾動(dòng)頁(yè)面的時(shí)候，上導(dǎo)航依然固定在手機(jī)屏幕頂部。

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

下導(dǎo)航

下導(dǎo)航的交互是指滾動(dòng)頁(yè)面的時(shí)候，下導(dǎo)航依然固定在手機(jī)屏幕底部。并且點(diǎn)擊每一個(gè)下導(dǎo)航按鈕可以跳轉(zhuǎn)到對(duì)應(yīng)的導(dǎo)航頁(yè)面同時(shí)顯示選中按鈕效果。

操作步驟：前面的效果和上導(dǎo)航一樣，后面步驟使用單選項(xiàng)和頁(yè)面事件。

吐司

吐司的交互是指需要提醒用戶注意的時(shí)候，在頁(yè)面上顯示Toast，然后隔一會(huì)自動(dòng)消失。

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

彈層

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

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

操作列表

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

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

總結(jié)

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

建議初級(jí)PM學(xué)會(huì)這樣的的方法以便更好的理解APP原型除了頁(yè)面還有交互。至于實(shí)際工作中是不是應(yīng)該花費(fèi)時(shí)間來(lái)畫(huà)這些交互，請(qǐng)根據(jù)你們的項(xiàng)目要求而定。

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

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

相關(guān)閱讀

移動(dòng)端APP原型設(shè)計(jì)三部曲

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

#專欄作家#

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

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

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