文章教大家如何在Axure用中繼器做APP引導頁，與大家分享。

今天教大家用中繼器做app的引導頁，該原型使用方便簡單，制作完成后，所有交互都已經(jīng)設定好，您只需要在中繼器中導入圖片，即可自動生成app的引導頁，不需要連外網(wǎng)。

app引導頁主要有三類，根據(jù)不同的類別有不同的效果。

一、效果演示

原型演示地址：https://axhub.im/pro/679326080aa14177/#g=1&p=%E9%9D%99%E6%80%81%E5%B9%BF%E5%91%8A%E6%8E%A8%E5%B9%BF%E7%B1%BB

二、功能介紹

1. 推廣類引導頁

推廣類引導頁，主要放的是廣告，用戶可以觀看，廣告或者選擇跳過，具有以下幾個功能

自動播放功能：

跳過廣告功能：

點擊廣告查看詳情功能：

左右滑動翻頁：

2. 功能介紹類引導頁

功能介紹類引導頁，主要是向用戶介紹此app的亮點，所以同樣具備自動播放、左右滑動查看的功能，此外鼠標點擊時，會進入下一張引導頁。

3. 使用說明類引導頁

使用說明類引導頁，主要是向用戶介紹如何使用該app，所以可以不會自動跳轉(zhuǎn)，通過鼠標單擊代表用戶已明白，才會進入下一頁。

三、制作方法

1. 制作手機外框

可以在網(wǎng)上手機外框的素材，如下圖所示：

2. 中繼器內(nèi)制作

2.1 中繼器表格

在pic列右鍵導入圖片即可

2.2 中繼器交互

在中繼器中放入一張圖片，圖片大小和手機中部空白大小一致即可

中繼器每項加載時設置圖片=item.pic

將中繼器轉(zhuǎn)為動態(tài)面板，設置動態(tài)面板的大小和單張圖片大小一致。

2.3 動態(tài)面板交互

鼠標向左滑動時，我們需要判斷，該圖片是不是最后一張，如果不是最后一張，移動動態(tài)面板到下一張圖片，如果是最后一張，隱藏該動態(tài)面板，即可進入首頁。

鼠標向右滑動時，要判斷是不是第一張，如果是第一張的話不做交互，如果不是第一張的話，動態(tài)面板向左移動一張圖的距離。

2.4 鼠標單擊時事件

需要分兩類，?一類是點擊進入下一張引導頁，那么鼠標單擊時，觸發(fā)鼠標向左滑動結(jié)束時的事件就可以了。另外一種是要打開另外一個頁面，這時需要設置在內(nèi)聯(lián)框架打開某個頁面即可。

2.5 自動播放圖片

這個也很簡單，拖入一個新的動態(tài)面板，讓他狀態(tài)改變的時候，觸發(fā)向左滑動結(jié)束時的事件即可。

這樣就制作完成了，以后使用，僅需導入圖片，即可自動生成app的引導頁，所以強烈推薦給各位使用。

有問題的小伙伴，或者需要原型的小伙伴們可以給我留言哦。

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

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