Axure 9原型教程:移動(dòng)端引導(dǎo)頁(yè)/歡迎頁(yè)滑屏交互

6 評(píng)論 7222 瀏覽 8 收藏 5 分鐘

當(dāng)你第一次打開一款應(yīng)用的時(shí)候常常會(huì)看到很棒的引導(dǎo)頁(yè)設(shè)計(jì),它們?cè)谀阄词褂卯a(chǎn)品之前提前告知你產(chǎn)品的主要功能與特點(diǎn),第一次印象的好壞會(huì)極大地影響到后續(xù)的產(chǎn)品使用體驗(yàn)。因此很多產(chǎn)品都在努力將這幾個(gè)頁(yè)面設(shè)計(jì)好,從一開始就引人入勝。那么接下來(lái)我和大家一起用Axure9來(lái)做一個(gè)移動(dòng)端引導(dǎo)頁(yè)的demo。

1. 拉出一個(gè)手機(jī)殼子啦啦啦啦

哈哈哈哈沒(méi)有殼子也行,那就拖個(gè)矩形出來(lái)吧(殼子原型鏈接在下面大家可自行下載哦)。有的朋友可能問(wèn)為啥是粉紅色的,因?yàn)檫@是一個(gè)母版~

Axure9原型教程:移動(dòng)端引導(dǎo)頁(yè)/歡迎頁(yè)滑屏交互

2. 再找?guī)讖垐D片“偽裝”成引導(dǎo)頁(yè)

像我一樣,我是在花瓣下載的~

Axure9原型教程:移動(dòng)端引導(dǎo)頁(yè)/歡迎頁(yè)滑屏交互

3. 把這幾張引導(dǎo)頁(yè)放在一個(gè)動(dòng)態(tài)面板里

首先得需要把圖片尺寸和手機(jī)主界面大小調(diào)整一致,當(dāng)然得你自己喜歡。調(diào)整好之后我們可以把其中一個(gè)引導(dǎo)頁(yè)設(shè)為動(dòng)態(tài)面板(點(diǎn)擊當(dāng)前選中圖片,右鍵單擊“轉(zhuǎn)換為動(dòng)態(tài)面板”),設(shè)為動(dòng)態(tài)面板后新增兩個(gè)狀態(tài),引導(dǎo)頁(yè)有幾頁(yè)這邊就新增幾個(gè)狀態(tài)啊同學(xué)們!可以給每個(gè)狀態(tài)給個(gè)名稱或者ID方便后面添加交互。

Axure9原型教程:移動(dòng)端引導(dǎo)頁(yè)/歡迎頁(yè)滑屏交互

4. 添加交互

在主界面選擇我們引導(dǎo)頁(yè)的動(dòng)態(tài)面板,右側(cè)交互,因?yàn)槲覀兞?xí)慣性從左往右滑動(dòng)引導(dǎo)頁(yè)進(jìn)入APP界面,當(dāng)然你喜歡往哪邊就往哪邊哈~我這里選擇從左往右滑動(dòng)進(jìn)入。

首先分析一下原型交互思路:

(1)在第一個(gè)界面從左往右滑動(dòng)界面時(shí)往第二個(gè)界面滑動(dòng),第二個(gè)界面往第三個(gè)界面滑動(dòng)

  • 情景一:面板狀態(tài)=1,動(dòng)態(tài)面板向2滑動(dòng)
  • 情景二:面板狀態(tài)=2,動(dòng)態(tài)面板向3滑動(dòng)

(2)在第三個(gè)界面從右往左滑動(dòng)界面時(shí)往第二個(gè)界面滑動(dòng),第二個(gè)界面往第三個(gè)界面滑動(dòng)

  • 情景一:面板狀態(tài)=3,動(dòng)態(tài)面板向2滑動(dòng)
  • 情景二:面板狀態(tài)=2,動(dòng)態(tài)面板向1滑動(dòng)

下面加入交互

選中動(dòng)態(tài)面板,右側(cè)選擇“向左拖到結(jié)束時(shí)”。

加入情景1:

Axure9原型教程:移動(dòng)端引導(dǎo)頁(yè)/歡迎頁(yè)滑屏交互

設(shè)置面板狀態(tài)

Axure9原型教程:移動(dòng)端引導(dǎo)頁(yè)/歡迎頁(yè)滑屏交互

加入情景2:

Axure9原型教程:移動(dòng)端引導(dǎo)頁(yè)/歡迎頁(yè)滑屏交互

設(shè)置面板狀態(tài):

Axure9原型教程:移動(dòng)端引導(dǎo)頁(yè)/歡迎頁(yè)滑屏交互

新建交互,“向左拖到結(jié)束時(shí)”

加入情景1:

Axure9原型教程:移動(dòng)端引導(dǎo)頁(yè)/歡迎頁(yè)滑屏交互

設(shè)置面板狀態(tài):

Axure9原型教程:移動(dòng)端引導(dǎo)頁(yè)/歡迎頁(yè)滑屏交互

加入情景2:

Axure9原型教程:移動(dòng)端引導(dǎo)頁(yè)/歡迎頁(yè)滑屏交互

設(shè)置面板狀態(tài):

Axure9原型教程:移動(dòng)端引導(dǎo)頁(yè)/歡迎頁(yè)滑屏交互

這是三頁(yè)引導(dǎo),如四頁(yè)五頁(yè)在此基礎(chǔ)進(jìn)行添加就可以了。

附上本原型實(shí)例鏈接:

https://pan.baidu.com/s/1Vh_7htgGc2hQEkBnXTyANw

提取碼:6rp5

 

作者:妖怪口袋;微信公眾號(hào):妖怪口袋,不定時(shí)更新axure9原型案例。

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 這三張圖是怎么排列放置的 折疊在一起嗎

    來(lái)自北京 回復(fù)
  2. 有沒(méi)有微信群大家可以交流

    來(lái)自北京 回復(fù)
    1. 加我微信13667321807

      來(lái)自廣東 回復(fù)
    2. 或者關(guān)注我公眾號(hào),里面可以加我

      來(lái)自廣東 回復(fù)
  3. 產(chǎn)品小白沒(méi)看懂復(fù)雜的交互設(shè)計(jì),想從基礎(chǔ)開始學(xué),卻無(wú)從下手?

    可以找Axure實(shí)戰(zhàn)班的助教小可愛@CC-起點(diǎn)學(xué)院(微信:qidiancc520),回復(fù)關(guān)鍵詞:禮物

    ?? 領(lǐng)取原型設(shè)計(jì)大禮包,還有不定期的Axure免費(fèi)視頻課程分享,老師在線答疑,多學(xué)多看多思考,你也能成為Axure原型設(shè)計(jì)大牛哦~

    來(lái)自廣東 回復(fù)
    1. 你們是真nb

      來(lái)自廣東 回復(fù)