Axure 教程:使用內(nèi)聯(lián)框架,制作頁面滾動
本次教各位小伙伴使用內(nèi)聯(lián)框架來實(shí)現(xiàn)頁面滾動,除此之外還會有一些小案例 ~
先來看看 天貓 首頁 頂部欄 的效果 ~
(以上圖片已是上傳的極限, 各位看官要是看不清,請自行下載天貓,打開首頁觀看)
所以今天我們就拿天貓首頁的頂部欄為例子,來講解在 Axure 里面是如何制作的 ?。?/p>
一、準(zhǔn)備元件
先看圖:
(以上圖片分三部分講,背景元件色值為:#E4E4E4,下面不重復(fù)講)
1.首先新建 Axure 文件,頂部電量條可由大家隨意制作( w:375 ,h:20 ),如果有相關(guān)組件庫的小伙伴可直接拖入 ;
2.頂部欄區(qū)域,拖進(jìn)一個元件當(dāng)做背景( w:375 ,h:44 ),從 阿里巴巴矢量圖標(biāo)庫 ( http://www.iconfont.cn )下載以下 icon 如圖擺放即可 ;
3.在頂部欄區(qū)域的下面,拖進(jìn)一個元件當(dāng)做背景( w:375 ,h:44 ),再在該元件上面放置一個純白色矩形( w:335 ,h:30 ),命名:“ 輸入框背景 ”、一個文本框( w:290 ,h:28 ),命名:“ 輸入框 ” 、一個搜索 icon?( w:14?,h:14 ),命名:“ 搜索 icon ” 。把 輸入框背景、輸入框、搜索icon 選中右鍵點(diǎn)擊組合,命名:“ 輸入框控件 ” ,完成 ;
完成以上的元件準(zhǔn)備,然后我們先把他放置在一旁,等待使用…
4.然后把第一個頁面命名為:“ 外頁 ” ,在新增一個頁面命名為:“ 內(nèi)頁 ” ,拖動 “ 內(nèi)頁 ” 為 “ 外頁 ” 的子級,如圖 :
5.然后我們雙擊進(jìn)入 外頁 的頁面,從左側(cè)組件庫拖進(jìn)一個內(nèi)聯(lián)框架( w:375 ,h:667 ),為了美觀我們在這個內(nèi)聯(lián)框架底部再拖進(jìn)一個矩形( w:377 ,h:669 ),然后我們點(diǎn)擊內(nèi)聯(lián)框架,在右側(cè)屬性 – 內(nèi)聯(lián)框架 – 選擇框架目標(biāo) – 內(nèi)頁 – 確定。
繼續(xù)點(diǎn)擊內(nèi)聯(lián)框架,右鍵點(diǎn)擊 – 轉(zhuǎn)換成動態(tài)面板 ,把該面板“ 自動調(diào)整為內(nèi)容尺寸 ”,然后進(jìn)入該動態(tài)面板,把內(nèi)聯(lián)框架的寬高都增加 17 px,如圖 :
6.把剛才步驟?1 – 3 的內(nèi)容,放入到內(nèi)頁里面( x :0 ,y :0 ),內(nèi)頁的內(nèi)容比較緊靠左上角,這樣才不會出現(xiàn)待會移動的時候體驗(yàn)不好,如圖 :
7.全選以上圖片所有內(nèi)容,右鍵點(diǎn)擊 轉(zhuǎn)換為動態(tài)面板 ,在右側(cè)屬性設(shè)置 – 固定在瀏覽器 – 水平固定:左 、垂直固定:上 。如圖:
8.然后我們在該原型的下方任意放置矩形,在每個矩形里添加 1、2、3 文字,增加識別度 :
完成以上的所有部分,可以先生成預(yù)覽看一下效果了 ~
以上就做好了所有的元件準(zhǔn)備,內(nèi)容比較多( 因?yàn)橛行┬』锇閯偨佑| Axure ,拆分得比較細(xì),各位老司機(jī)將就一下 ~ ),弄完之后我們就可以開始下一步操作了 ~
二、設(shè)置交互用例
1.雙擊進(jìn)入內(nèi)頁,在頁面的空白處設(shè)置 窗口滾動時(Case 1) :
a.設(shè)置條件:值 – [[Window.scrollY]] – 大于等于 – 5 ;
b.移動輸入框控件 – 移動:絕對 – x 為:60 ,y 為:27 – 動畫:線性 – 時間:250 毫秒 ;
c.設(shè)置尺寸:“ 輸入框 ” w :170 ,h :28 – 錨點(diǎn):左上角 – 動畫:線性 – 時間:250 毫秒 、“ 輸入框背景 ”?w :215 ,h :30 – 錨點(diǎn):左上角 – 動畫:線性 – 時間:250 毫秒 ;
d.設(shè)置 “ 背景 ” – 隱藏 – 動畫:向上滑動 – 時間:500毫秒 ;
2.雙擊進(jìn)入內(nèi)頁,在頁面的空白處設(shè)置 窗口滾動時(Case 2) :
a.設(shè)置條件:值 – [[Window.scrollY]] – 小于 – 5 ;
b.設(shè)置 “ 背景 ” – 顯示 – 動畫:向下滑動 – 時間:500毫秒 ;
c.移動輸入框控件 – 移動:絕對 – x 為:20 ,y 為:71 – 動畫:線性 – 時間:250 毫秒 ;
d.設(shè)置尺寸:“ 輸入框 ” w :290 ,h :28 – 錨點(diǎn):左上角 – 動畫:線性 – 時間:250 毫秒 、“ 輸入框背景 ”?w :335 ,h :30 – 錨點(diǎn):左上角 – 動畫:線性 – 時間:250 毫秒 ;
以上完成之后就可以得到以下效果了,是不是很簡單?
然后我們完成以上步驟之后,我們還可以在該頁面的下面放置一個 “ 返回頂部 ” 的 icon ,意為:當(dāng)我們下滑到一定位置時,顯示 “ 返回頂部 ” icon ,點(diǎn)擊該 icon 時,返回至頂部并隱藏 “ 返回頂部 ” icon …
下面我們來開始制作 ~
三、進(jìn)階
1.從左側(cè)元件庫拉出一條橫向水平線,長度小于 375 px 即可,命名為:“ 頂部 ” ,然后置于底層;
2.拉入一個作為 “ 返回頂部 ” 的 icon (?w:40,y:40?),或者隨意拉一個矩形代替都可以;
3.點(diǎn)擊 icon 右鍵轉(zhuǎn)換為動態(tài)面板,右側(cè)設(shè)置固定到瀏覽器(此處跟以上相同設(shè)置即可);
4.設(shè)置 “ 返回頂部 ” icon 交互用戶,鼠標(biāo)單擊時 – 滾動到元件<錨鏈接> – 勾選:頂部 – 僅垂直滾動 – 動畫:線性 – 時間:250 毫秒 ;
5.把 “ 返回頂部 ” icon 放置在內(nèi)頁( x:315,y:586 )的位置,點(diǎn)擊隱藏 ;
6.在內(nèi)頁的空白處設(shè)置 窗口滾動時(Case 3) :
a.設(shè)置條件:值 – [[Window.scrollY]] – 大于等于 – 500 ;
b.顯示 “ 返回頂部 ” icon – 動畫:逐漸 – 時間:250 毫秒;
7.在內(nèi)頁的空白處設(shè)置 窗口滾動時(Case 4) :
a.設(shè)置條件:值 – [[Window.scrollY]] – 小于 – 500 ;
b.隱藏 “ 返回頂部 ” icon – 動畫:逐漸 – 時間:250 毫秒;
完成以上設(shè)置就可以了,下面我們來看一下效果 ~
好的,以上就是本次的所有講解,謝謝大家??!
該文件百度云鏈接:https://pan.baidu.com/s/1OqQuVDe5HclUm6f6NyH30A? 密碼:05wb
需要的可以下載看看。同時有相關(guān)問題的可在以下留言區(qū)留言,我將第一時間回復(fù) ~
本文由 @李桂東 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
話說只用動態(tài)面板不也可以達(dá)成類似效果嗎
來的比較晚,可能求一份原型,上面的鏈接點(diǎn)擊刪除了
做的太好了,可惜百度云鏈接失效了,可以再發(fā)一下嗎?
進(jìn)階,第6第7步,做完沒有效果,,單獨(dú)拉出個頁面只做這個交互能實(shí)現(xiàn),但是和Case 1,Case 2在一起就不好使了
if 和 if else需要區(qū)分好
右鍵點(diǎn)擊case 3、4里的else if,選擇“切換為或”
默認(rèn)的Else If意思是上面的Case都不符合才會執(zhí)行,而If是一定會執(zhí)行。
已知Case1、2一個判斷y≥5一個判斷y<5,一定會有符合條件的,
所以Case3如果用Else If就不會判斷并執(zhí)行了。
源文件的鏈接失效了,請問大神可以發(fā)個新的鏈接嗎? ??
求大神寫一篇淘寶二樓或天貓二樓原型的文章 ??
“二樓”是什么意思
在首頁下拉
淘寶的沒有什么變化呀,還有本篇文章就是寫的天貓的
如果能配圖,再更有邏輯性,會更好
最近在學(xué)習(xí)制作微信原型,筆者可以出點(diǎn)教程嗎,感覺你寫的非常詳細(xì)
好的,下一次文章出
除非特別必要,還是建議不要用Axure這樣搞,實(shí)在是太費(fèi)時間了
做高保真效果只為了減少產(chǎn)品與設(shè)計、開發(fā)之前的溝通成本,在沒有一定基礎(chǔ)這么做確定不妥,因?yàn)闀ㄙM(fèi)太多時間,但一旦操作熟練了,這么做還是可以的
超贊 非常適合小白 感謝分享~~~
講解得夠不夠細(xì),不夠我再想想辦法
已經(jīng)很細(xì)致了,跟著做基本能完成~~~
最近比較忙,有什么想做的效果也可以跟我說,我找時間再寫點(diǎn)相關(guān)的
好的喔 ~~
一直不知道滑動以后頂部怎么切換成初始搜索框和滑動狀態(tài)的搜索框 受教 謝謝您
還可以用動態(tài)面板來制作的 老鐵
一點(diǎn)一點(diǎn)消化 老鐵給力
axure的操作確實(shí)比墨刀復(fù)雜好多
我看你寫的教程,這些對你來說還不是 so easy !! ??
你太客氣了,其實(shí)做這樣一個還是得很久的,突然感覺還是墨刀省事啊。
Axure 輸出交互說明文檔方便些,動效演示或交互原型還是用其他的工具方便些。
墨刀用過,可能是因?yàn)橹白鲞^ UI 吧,還是習(xí)慣用 Axure
是的,而且axure能夠做到的事情確實(shí)多很多,連小游戲都能做。
是的,看你做的作品挺好的
墨刀不怎么用,這效果墨刀也能做出來嗎?
不能,但是基本內(nèi)容墨刀都能做出來,且操作簡單的多