|
|
划屏操作是智能手机的一项非常基本的操作。Axure6.0可以模拟这种交互体验。以图片切换为例。方法有两种。
方法一：把图片作为动态面板的不同状态。在动态面板上叠加左右两个透明面板，在透明面板上添加OnDrag促发事件，添加Dragcursor位置的条件判断和图片动态面板的切入切出动作。从而模拟出往不同方向划动时图片切换的交互效果。
方法一的优点为1、简单快速，动态面板只有一层，且只要添加ondrag事件。2、作为演示文档，其交互效果的保真程度也已足够。
缺点是1、图片被透明面板挡住了，若图片上面还有交互事件，作起来就会变得麻烦。2、达不到高保真的效果，低级研发人员有可能误解。
方法二：将显示区域作为第一层动态面板，并把要切换的图片作为第二层动态面板，且所有图片均紧挨着放到同一个状态里。在第一层动态面板的左右两部份各方一个图像热区，用以判断划动方向和幅度。图片与图片相连的左右两边各放一个宽度很小的图像热区。在动态面板上添加ondrag事件和ondragdrog事件，根据划动时小图像热区与左右大图像热区的覆盖情况来判断松开鼠标时显示哪张图片。
方法二的优点是：1、高保真。增加了划动幅度的判断，与实际产品的交互体验高度吻合。2、不影响在图片上添加交互事件，因图像热区可以放到底层。
缺点是：麻烦耗时。动态面板要有二层。且要添加ondrag和ondragdrop两个事件。还要做好几个图像热区来作为判断条件。一不小心很容易出bug。
我的意见是：一般情况下两种方法都可以用，推荐用第一种，方便快速。但在一些突出划屏操作体验的应用里，比如说android的home桌面，就最好用第二种。 |
|
发表于 2011-5-27 15:05:36
