老胡 发表于 2011-5-27 15:05:36

表达手机划屏切换图片或页面的二种方法

划屏操作是智能手机的一项非常基本的操作。Axure6.0可以模拟这种交互体验。以图片切换为例。方法有两种。

方法一：把图片作为动态面板的不同状态。在动态面板上叠加左右两个透明面板，在透明面板上添加OnDrag促发事件，添加Dragcursor位置的条件判断和图片动态面板的切入切出动作。从而模拟出往不同方向划动时图片切换的交互效果。

方法一的优点为1、简单快速，动态面板只有一层，且只要添加ondrag事件。2、作为演示文档，其交互效果的保真程度也已足够。

缺点是1、图片被透明面板挡住了，若图片上面还有交互事件，作起来就会变得麻烦。2、达不到高保真的效果，低级研发人员有可能误解。


方法二：将显示区域作为第一层动态面板，并把要切换的图片作为第二层动态面板，且所有图片均紧挨着放到同一个状态里。在第一层动态面板的左右两部份各方一个图像热区，用以判断划动方向和幅度。图片与图片相连的左右两边各放一个宽度很小的图像热区。在动态面板上添加ondrag事件和ondragdrog事件，根据划动时小图像热区与左右大图像热区的覆盖情况来判断松开鼠标时显示哪张图片。

方法二的优点是：1、高保真。增加了划动幅度的判断，与实际产品的交互体验高度吻合。2、不影响在图片上添加交互事件，因图像热区可以放到底层。

缺点是：麻烦耗时。动态面板要有二层。且要添加ondrag和ondragdrop两个事件。还要做好几个图像热区来作为判断条件。一不小心很容易出bug。


我的意见是：一般情况下两种方法都可以用，推荐用第一种，方便快速。但在一些突出划屏操作体验的应用里，比如说android的home桌面，就最好用第二种。

semiichi 发表于 2011-5-27 18:52:49

学习了，非常详细
多谢 :)

stems 发表于 2011-7-29 15:49:28

郁闷了 我的怎么划不了

moon 发表于 2011-7-30 08:28:30

hoho学习了。。。。。用到图像热区了这个吗？

moon 发表于 2011-7-30 08:31:33

:'(我错了，没有看HOME的说明

fengzhi0429 发表于 2011-8-8 22:46:11

谢谢，这个有用

rosecky 发表于 2011-8-9 16:56:43

非常棒！

fmislx 发表于 2011-8-10 10:07:33

很强咯，要是能实现循环就好了，“图片四”与“图片一”边缘切换。

小陶爱吃桃 发表于 2011-8-11 17:54:56

感谢楼主，学习了

没有方向感 发表于 2011-8-15 10:59:40

学习 感谢楼主

高跃华 发表于 2011-8-23 16:51:25

这个学习了，很不错！！

毛毛熊1010 发表于 2011-10-18 11:48:28

谢谢，学习~~

悠悠龟 发表于 2011-10-25 10:34:44

谢谢，学习~~

郑爱博 发表于 2011-11-8 13:55:42

谢谢，学习~~

ruozui 发表于 2011-11-10 16:31:46

太棒了。支持老胡！

稻之草 发表于 2011-11-14 15:24:06

学习感谢分享

pablo3518 发表于 2011-12-8 08:18:09

顶了

yocchen 发表于 2011-12-27 23:01:54

很强大的说。

随便他哥 发表于 2012-1-3 13:41:24

收藏一个，以备后须~

greatwaether 发表于 2012-1-11 09:46:22

太强大了！学习了！
页: [1] 2 3
查看完整版本: 表达手机划屏切换图片或页面的二种方法