編輯導(dǎo)讀：用戶(hù)在初次安裝或者更新APP的時(shí)候，第一印象就來(lái)自于APP首次引導(dǎo)頁(yè)。那么，如何做好APP首次引導(dǎo)頁(yè)呢？本文作者將基于自身工作經(jīng)驗(yàn)，梳理了整套APP首次引導(dǎo)頁(yè)的Axure教程。

APP更新或用戶(hù)首次安裝APP引導(dǎo)頁(yè)是必不可少的一部分。

準(zhǔn)備

• Axure 8（或Axure 9）軟件已安裝。
• 掌握基本的軟件使用。
• 熟悉動(dòng)態(tài)面板。

本教程知識(shí)點(diǎn)

• 基礎(chǔ)動(dòng)態(tài)面板應(yīng)用。
• 移動(dòng)邊界值的判斷。

詳細(xì)教程

本文以三頁(yè)引導(dǎo)頁(yè)為例，實(shí)現(xiàn)引導(dǎo)頁(yè)的基本功能。

功能

打開(kāi)APP可以通過(guò)拖動(dòng)切換引導(dǎo)頁(yè)的展示信息。同時(shí)支持跳過(guò)，最后一個(gè)頁(yè)面跳轉(zhuǎn)登錄頁(yè)面。

制作方式

1）搭建基礎(chǔ)框架

• 引導(dǎo)頁(yè)、首頁(yè)
• 引導(dǎo)頁(yè)主要由跳過(guò)按鈕、引導(dǎo)頁(yè)內(nèi)容動(dòng)態(tài)面板、滑動(dòng)條、立即體驗(yàn)按鈕組成
• 注意：在制作內(nèi)容時(shí)，如果使用局部圖片（如案例）注意排版時(shí)盡可能的保證圖片在每個(gè)界面的位置統(tǒng)一

2）制作左滑動(dòng)效果和右滑動(dòng)效果

• 由于在Axure中只有動(dòng)態(tài)面板存在拖動(dòng)的交互觸發(fā)時(shí)間，所以此處需要采用動(dòng)態(tài)面板的這一屬性進(jìn)行實(shí)現(xiàn)。
• 以左滑為例（動(dòng)態(tài)面板的向左拖動(dòng)結(jié)束交互事件）。
• 設(shè)置滑動(dòng)結(jié)束后的切換面板狀態(tài)為下一個(gè)即可。
• 設(shè)置動(dòng)畫(huà)為向左滑動(dòng)，且為500毫秒。這樣可以有一個(gè)半秒鐘的滑動(dòng)效果。

3）制作底部滑動(dòng)條的效果（以左滑為例）

• 原理：每切換一個(gè)引導(dǎo)頁(yè)，滑動(dòng)條跟隨移動(dòng)固定距離。且左滑動(dòng)至最后一張?jiān)倩瑒?dòng)不在向左移動(dòng)，向右滑動(dòng)至第一張不在向右移動(dòng)
• 根據(jù)原理，可設(shè)置每次左滑動(dòng)移動(dòng)滑軸50px。同時(shí)設(shè)置左側(cè)邊界可移動(dòng)區(qū)域小于188px

移動(dòng)50px原理：由于滑軸的長(zhǎng)度為為100px、滑桿的長(zhǎng)度為200px。整個(gè)滑軸可移動(dòng)的范圍為100px，三個(gè)頁(yè)面移動(dòng)兩次，每次移動(dòng)50px。

左側(cè)小于188px原理：滑軸初始狀態(tài)（未滑動(dòng)前）的X左側(cè)坐標(biāo)為88px，移動(dòng)兩次后為188px。為了防止移動(dòng)超過(guò)，設(shè)置限制為188px。

右滑也是基于同樣的原理。

4）制作立即體驗(yàn)按鈕和滑軸進(jìn)度的切換展示

在第三個(gè)引導(dǎo)頁(yè)后兩個(gè)中，存在隱藏（顯示）滑動(dòng)條顯示（隱藏）立即體驗(yàn)按鈕的交互。這里可以采用動(dòng)態(tài)面板的狀態(tài)改變時(shí)的交互事件。

當(dāng)添加特定觸發(fā)條件。切換對(duì)應(yīng)的事件。

狀態(tài)改變時(shí)，動(dòng)態(tài)面板狀態(tài)為引導(dǎo)頁(yè)三，隱藏滑動(dòng)條，等待200毫秒，顯示立即體驗(yàn)。

等待100毫秒，是為了有一個(gè)視覺(jué)上的展示顯示效果。

狀態(tài)改變時(shí)，動(dòng)態(tài)面板狀態(tài)為引導(dǎo)頁(yè)二，隱藏立即體驗(yàn)，顯示滑動(dòng)條。

注：一定要處理好顯示隱藏的順序，Axure本質(zhì)上是按照順序事件的先后順序進(jìn)行處理，不同的順序處理的順序不同，展示的效果也不同。

5）其他細(xì)節(jié)處理

• 跳過(guò)
• 點(diǎn)擊事件：直接打開(kāi)首頁(yè)即可
• 鼠標(biāo)按下事件：設(shè)置點(diǎn)擊跳過(guò)事件為主色，鼠標(biāo)按下點(diǎn)擊時(shí)觸發(fā)器點(diǎn)擊效果
• 立即體驗(yàn)的點(diǎn)擊事件：直接打開(kāi)首頁(yè)即可

總結(jié)

• 靈活的應(yīng)用不同元件的交互事件
• 注意交互的先后順序
• 注意元件的命名

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

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