Axure:使用動(dòng)態(tài)面板實(shí)現(xiàn)拖動(dòng)的方法

COFCO
2 評(píng)論 19625 瀏覽 30 收藏 3 分鐘

本文分享了一個(gè)在Axure中利用動(dòng)態(tài)面板實(shí)現(xiàn)拖動(dòng)效果的方法,一起來看看~

分析:

在Axure元件庫中,動(dòng)態(tài)面板是唯一一個(gè)能夠?qū)崿F(xiàn)拖動(dòng)效果的元件。所以,實(shí)現(xiàn)步驟大體應(yīng)該如下:

  • 元件放入動(dòng)態(tài)面板的首個(gè)狀態(tài)中;
  • 為動(dòng)態(tài)面板添加“拖動(dòng)時(shí)”的用例。

實(shí)現(xiàn):

步驟1:添加兩個(gè)元件:滑塊外框,命名為“外框”,滑塊,命名為“滑塊”,如下:

此時(shí):“外框”元件的的X軸坐標(biāo)為100,寬度為202,高度31;“滑塊”元件的X軸坐標(biāo)為100,寬度為48,高度31,如下:

步驟2:將“滑塊”元件,【轉(zhuǎn)換為動(dòng)態(tài)面板】,命名為“滑動(dòng)動(dòng)態(tài)”,放置于外框左側(cè)處,如下:

步驟三,為“滑塊”添加【拖動(dòng)時(shí)】的用例。

用例分析,產(chǎn)生滑動(dòng)的效果,需將此元件水平拖動(dòng)至最右,即拖動(dòng)距離為 100(邊框X軸坐標(biāo))<=X<=302(邊框X軸坐標(biāo)+邊框?qū)挾龋?/strong>

用例設(shè)計(jì)如下:

F5預(yù)覽,可以在界限內(nèi)隨意拖動(dòng)了!

原型鏈接,歡迎下載。

鏈接:https://pan.baidu.com/s/1XpiW0EPQA4PmNy7NKduoXA 密碼:u1hy

 

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!
专题
18286人已学习13篇文章
用户体验地图展示的是用户在体验一款产品和服务时的情感流程。本专题的文章分享了如何建立用户体验地图。
专题
14168人已学习12篇文章
本专题的文章分享了供应链系统设计指南。
专题
17849人已学习13篇文章
在精细化运营的过程中,为自己的产品搭建一套数据指标体系,对于促进产品和业务增长是至关重要的。本专题的文章分享了如何搭建数据指标体系。
专题
17548人已学习13篇文章
出于文本易读性方面的考虑许多app都做了深色模式,本专题的文章分享了深色模式的设计指南。
专题
144990人已学习32篇文章
做一个好运营,技术和意识都得过硬。
专题
37667人已学习23篇文章
不知道这些问题,你出去都不敢说自己是做电商运营的。