編輯導讀：用戶在初次安裝或者更新APP的時候，第一印象就來自於APP首次引導頁。那麼，如何做好APP首次引導頁呢？本文作者將基於自身工作經驗，梳理了整套APP首次引導頁的Axure教程。
APP更新或用戶首次安裝APP引導頁是必不可少的一部分。
準備
Axure 8（或Axure 9）軟體已安裝。掌握基本的軟體使用。熟悉動態面板。
本教程知識點
詳細教程
本文以三頁引導頁為例，實現引導頁的基本功能。
功能
打開APP可以通過拖動切換引導頁的展示信息。同時支持跳過，最後一個頁面跳轉登錄頁面。
製作方式
1）搭建基礎框架
引導頁、首頁引導頁主要由跳過按鈕、引導頁內容動態面板、滑動條、立即體驗按鈕組成注意：在製作內容時，如果使用局部圖片（如案例）注意排版時儘可能的保證圖片在每個界面的位置統一
2）製作左滑動效果和右滑動效果
由於在Axure中只有動態面板存在拖動的交互觸發時間，所以此處需要採用動態面板的這一屬性進行實現。以左滑為例（動態面板的向左拖動結束交互事件）。設置滑動結束後的切換面板狀態為下一個即可。設置動畫為向左滑動，且為500毫秒。這樣可以有一個半秒鐘的滑動效果。
3）製作底部滑動條的效果（以左滑為例）
原理：每切換一個引導頁，滑動條跟隨移動固定距離。且左滑動至最後一張再滑動不在向左移動，向右滑動至第一張不在向右移動根據原理，可設置每次左滑動移動滑軸50px。同時設置左側邊界可移動區域小於188px移動50px原理：由於滑軸的長度為為100px、滑杆的長度為200px。整個滑軸可移動的範圍為100px，三個頁面移動兩次，每次移動50px。
左側小於188px原理：滑軸初始狀態（未滑動前）的X左側坐標為88px，移動兩次後為188px。為了防止移動超過，設置限制為188px。
右滑也是基於同樣的原理。
4）製作立即體驗按鈕和滑軸進度的切換展示
在第三個引導頁後兩個中，存在隱藏（顯示）滑動條顯示（隱藏）立即體驗按鈕的交互。這裡可以採用動態面板的狀態改變時的交互事件。
當添加特定觸發條件。切換對應的事件。
狀態改變時，動態面板狀態為引導頁三，隱藏滑動條，等待200毫秒，顯示立即體驗。
等待100毫秒，是為了有一個視覺上的展示顯示效果。
狀態改變時，動態面板狀態為引導頁二，隱藏立即體驗，顯示滑動條。
註：一定要處理好顯示隱藏的順序，Axure本質上是按照順序事件的先後順序進行處理，不同的順序處理的順序不同，展示的效果也不同。
5）其他細節處理
跳過點擊事件：直接打開首頁即可滑鼠按下事件：設置點擊跳過事件為主色，滑鼠按下點擊時觸發器點擊效果立即體驗的點擊事件：直接打開首頁即可
總結
靈活的應用不同元件的交互事件注意交互的先後順序注意元件的命名本文由 @Brose 原創發布於人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議。