Axure 9原型教程:移動(dòng)端引導(dǎo)頁(yè)/歡迎頁(yè)滑屏交互
當(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è)母版~
2. 再找?guī)讖垐D片“偽裝”成引導(dǎo)頁(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方便后面添加交互。
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:
設(shè)置面板狀態(tài)
加入情景2:
設(shè)置面板狀態(tài):
新建交互,“向左拖到結(jié)束時(shí)”
加入情景1:
設(shè)置面板狀態(tài):
加入情景2:
設(shè)置面板狀態(tài):
這是三頁(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é)議
這三張圖是怎么排列放置的 折疊在一起嗎
有沒(méi)有微信群大家可以交流
加我微信13667321807
或者關(guān)注我公眾號(hào),里面可以加我
產(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ì)大牛哦~
你們是真nb