Axure入門案例系列：APP首次引導(dǎo)頁

Axure入門案例系列：APP首次引導(dǎo)頁APP更新或用戶首次安裝APP引導(dǎo)頁是必不可少的一部分。準備Axure8（或Axure9）軟件已安裝。掌握基本的軟件使用。熟悉動態(tài)面板。本教程知識點基礎(chǔ)動態(tài)面板應(yīng)用。移動邊界值的判斷。詳細教程本文以三頁引導(dǎo)頁為例，實現(xiàn)引導(dǎo)頁的基本功能。功能打開APP可以通過拖動切換引導(dǎo)頁的展示信息。同時支持跳過，最后一個頁面跳轉(zhuǎn)登錄頁面。制作方式1）搭建基礎(chǔ)框架引導(dǎo)頁、首頁引導(dǎo)頁主要由跳過按鈕、引導(dǎo)頁內(nèi)容動態(tài)面板、滑動條、立即體驗按鈕組成注意：在制作內(nèi)容時，如果使用局部圖片（如案例）注意排版時盡可能的保證圖片在每個界面的位置統(tǒng)一2）制作左滑動效果和右滑動效果由于在Axure中只有動態(tài)面板存在拖動的交互觸發(fā)時間，所以此處需要采用動態(tài)面板的這一屬性進行實現(xiàn)。以左滑為例（動態(tài)面板的向左拖動結(jié)束交互事件）。設(shè)置滑動結(jié)束后的切換面板狀態(tài)為下一個即可。設(shè)置動畫為向左滑動，且為500毫秒。這樣可以有一個半秒鐘的滑動效果。3）制作底部滑動條的效果（以左滑為例）原理：每切換一個引導(dǎo)頁，滑動條跟隨移動固定距離。且左滑動至最后一張再滑動不在向左移動，向右滑動至第一張不在向右移動根據(jù)原理，可設(shè)置每次左滑動移動滑軸50px。同時設(shè)置左側(cè)邊界可移動區(qū)域小于188px移動50px原理：由于滑軸的長度為為100px、滑桿的長度為200px。整個滑軸可移動的范圍為100px，三個頁面移動兩次，每次移動50px。左側(cè)小于188px原理：滑軸初始狀態(tài)（未滑動前）的X左側(cè)坐標為88px，移動兩次后為188px。為了防止移動超過，設(shè)置限制為188px。右滑也是基于同樣的原理。4）制作立即體驗按鈕和滑軸進度的切換展示在第三個引導(dǎo)頁后兩個中，存在隱藏（顯示）滑動條顯示（隱藏）立即體驗按鈕的交互。這里可以采用動態(tài)面板的狀態(tài)改變時的交互事件。當(dāng)添加特定觸發(fā)條件。切換對應(yīng)的事件。狀態(tài)改變時，動態(tài)面板狀態(tài)為引導(dǎo)頁三，隱藏滑動條，等待200毫秒，顯示立即體驗。等待100毫秒，是為了有一個視覺上的展示顯示效果。狀態(tài)改變時，動態(tài)面板狀態(tài)為引導(dǎo)頁二，隱藏立即體驗，顯示滑動條。注：一定要處理好顯示隱藏的順序，Axure本質(zhì)上是按照順序事件的先后順序進行處理，不同的順序處理的順序不同，展示的效果也不同。5）其他細節(jié)處理跳過點擊事件：直接打開首頁即可鼠標按下事件：設(shè)置點擊跳過事件為主色，鼠標按下點擊時觸發(fā)器點擊效