Axure教程:頁面拖動(dòng)效果
今天我們來介紹一個(gè)簡單的基本交互——頁面拖動(dòng)??慈绾螌?shí)現(xiàn)頁面拖動(dòng)效果,enjoy~
想必有不少做移動(dòng)端的新手同學(xué)都有這么一個(gè)煩惱,頁面想展現(xiàn)手機(jī)內(nèi)容可以上下滑動(dòng),但卻無法實(shí)現(xiàn),只能靠PRD文檔進(jìn)行標(biāo)注,有的時(shí)候真的會(huì)感到灰心,所以今天小白白就來教大家怎么去實(shí)現(xiàn)這個(gè)效果。
涉及元件:文本框、動(dòng)態(tài)面板;內(nèi)容:“拖動(dòng)時(shí)”狀態(tài);
步驟如下:
(1)添加矩形/文本框,填充亂假文;將該元件設(shè)置為動(dòng)態(tài)面板;命名“展示內(nèi)容面板”。
(2)對(duì)動(dòng)態(tài)面板設(shè)置狀態(tài),“拖動(dòng)時(shí)-移動(dòng)-選擇內(nèi)容”,因?yàn)橄胍獙?duì)內(nèi)容進(jìn)行滑動(dòng)而不是對(duì)屏幕整體移動(dòng),所以選擇動(dòng)態(tài)面板下的“內(nèi)容”。(注:沒有漢化的Axure,拖動(dòng)時(shí)的英文是“Dragged”)
(3)因?yàn)槭鞘謾C(jī),所以選擇“垂直移動(dòng)”,到目前為止就可以實(shí)現(xiàn)內(nèi)容的上下滑動(dòng)了,但是當(dāng)前的滑動(dòng)是無休止的滑動(dòng),所以接著我們還要進(jìn)行下一步。
(4)設(shè)置頂部,底部范圍
頂部:小于等于0,底部:大于等于474。
設(shè)置范圍的口訣是:頂部小于等于動(dòng)態(tài)面板內(nèi)部的起始位置,底部大于等于動(dòng)態(tài)面板外部的終止位置。
之后保存并點(diǎn)擊瀏覽查看效果,一個(gè)簡單的頁面拖動(dòng)效果就實(shí)現(xiàn)了。
交互的rp文件,朋友們可以下載查看詳情:https://pan.baidu.com/s/1JoYJNEN0znpT3bLDBEIhQQ
下期我對(duì)這個(gè)效果進(jìn)行難度的提升,進(jìn)行APP下拉刷新的實(shí)現(xiàn)。
本文由 @產(chǎn)品小白白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
- 目前還沒評(píng)論,等你發(fā)揮!