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

0 評論 9352 瀏覽 34 收藏 6 分鐘

編輯導(dǎo)讀:用戶在初次安裝或者更新APP的時候,第一印象就來自于APP首次引導(dǎo)頁。那么,如何做好APP首次引導(dǎo)頁呢?本文作者將基于自身工作經(jīng)驗,梳理了整套APP首次引導(dǎo)頁的Axure教程。

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

準(zhǔn)備

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

本教程知識點(diǎn)

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

詳細(xì)教程

本文以三頁引導(dǎo)頁為例,實(shí)現(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)面板的這一屬性進(jìn)行實(shí)現(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è)坐標(biāo)為88px,移動兩次后為188px。為了防止移動超過,設(shè)置限制為188px。

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

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

在第三個引導(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ì)上是按照順序事件的先后順序進(jìn)行處理,不同的順序處理的順序不同,展示的效果也不同。

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

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

總結(jié)

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

 

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!