Axure 实例 – iOS7 UI Widget

好久没做 Axure 的实例分享了,正好 Axure 7 正式版也发布有段时间了,就顺手拿来做了套简单的仿 iOS7 UI 组件。其中大部分为方便调用都做成了 Master,部分组件模拟了 iOS 的交互效果,数量虽不多,但都是较为常见的。

预览 | 下载

全部的 UI 组件见图。因为尺寸基于 iOS 标准,所以体积较大。在线预览时请耐心等待,建议直接下载源文件本地预览。「基于 Axure 7.0 制作,所以查看源文件不能用 6.x 版本,这你懂的。」

整体来说这套组件没太多技术含量,需要的只是耐心。即便如此,我在制作虚拟键盘的时候还是偷懒了,界面只包括了「字母」-「数字」-「符号」三种,在「长按」操作下出现的更多选择也只做了「字母」界面这一层「效果请长按 E、U、I、O、A、V 查看 」。其中相对来说有点小复杂的只有那个调节亮度的「滑杆」,所以这里简单说下其制作方法。

之前需要准备好以下几样组件:

1、一个 Button Shape,设为圆型,阴影效果直接在 Axure 7 中就可以实现,如果是 Axure 6 就不得不做张 PNG 了。

2、一个 Dynamic Panel,命名为「slider-btn」用于存放 Button Shape,原因在于只有这玩意可以添加 Drag「拖动」动作。

3、两条 Horizontal Line,一条灰色,一条蓝色,长度相等。

4、一个 Dynamic Panel,命名为「slider-blue」用于存放蓝色的那条 Horizontal Line,原因在于后续要用到 Set Panel Size 这个动作指令。

5、一个 Rectangle,命名为「drag-box」,与 Button Shape 同高,与 Horizontal Line 同宽「也可略宽」,用于控制按钮的滑动范围。

6、两个修饰性 Icon,这里我直接用了图片,用 Axure 自带的控件也可以画出来,如果你有那份闲心的话。

将上述组件如样合体,其中名为「slider-blue」的 Dynamic Panel 要根据效果将长度调短一些,但放在其中的蓝色 Horizontal Line 要保持原始长度。目的在于通过控制 Dynamic Panel 的长度和利用其对于内部组件的「遮罩」效果来实现蓝色线条随按钮伸缩的效果。而用于控制滑动范围的「drag-box」要将边框和背景色都设为无,它只是个幕后英雄。「示例图中的黑色边框只为讲解而设」

接下来就是关键所在了,为「slider-btn」设置 OnDrag 事件。

Case 1,包含两个 Action。

设置 Move 对象为「slider-btn」,移动方式为 with drag x「即只允许沿 x 轴移动」。
设置 Set Panel Size 对象为「slider-blue」,高度保持不动,宽度则需要用到 Axure 的函数和变量了。

为「slider-blue」定义一个 Local Variable「本地变量」,命名为 dragline,并设置 [[This.x-dragline.x]] 这个函数公式来计算按钮滑动的距离值。其中 This.x 用于获取「slider-btn」当前的 x 座标值,而 dragline.x 用于获取「slider-blue」当前的 x 座标值,两者的差值就是按钮滑动的实际距离。而把这个距离值作为宽度,就可以实现「slider-blue」跟随「slider-btn」的左右滑动而自动伸缩的效果了。

滑动效果实现了,那如何控制滑动范围呢?这就要用到前面所提到的幕后英雄「drag-box」。继续为「slider-btn」设置 OnDrag 事件。

Case 2,包含一个 Action 和一项 Condition。

为「slider-btn」和「drag-box」分别定义 Local Variable,命名为 dbtn 和 dbox,并转换为相对应的函数 dbtn.left 和 dbox.left,然后设置其条件为 if「dbtn.left」≤ 「dbox.left」。目的在于通过 xx.left 函数来获取相关元素当前左边界的座标值,并借此判断「slider-btn」是否超出了「drag-box」的左边界。

设置 Move 对象为「slider-btn」,移动方式为 by,x 座标值利用公式 [[dbox.left-dbtn.left]] 来获取。举个例子来说明,假设「drag-box」当前左边界 x 座标值为 300,那么「slider-btn」向左滑动的最低 x 座标值就是 300,如果是 200 即说明「slider-btn」滑动过界,需要将其重新移动 [[dbox.left-dbtn.left]],即 300-200=100 回到 x 座标为 300 的位置上。这样就变相实现了控制滑动范围左边界的效果。

对于滑动范围右边界的设置同理,再为「slider-btn」设置一个 OnDrag 事件。

Case 3,包含一个 Action 和一项 Condition。

函数改用 xx.right 来获取相关元素当前右边界的座标值,条件设置为 if「dbtn.right」≥「dbox.right」,Move 对象为「slider-btn」,移动方式为 by,x 座标值利用公式 [[dbox.right-dbtn.right]] 来获取。

最后可以再为「slider-btn」设置一个空的 OnClick 事件,目的是让鼠标指针具有「手形」效果,方便用户对于交互事件的识别。

至此大功告成。另外 UI 组件中的 Mark Control 也使用的是同样的方法,不过受限于 Axure 的功能不能做到完美模拟,但对于演示效果来说足够了。

  • Noah

    下载不了,求邮件 517871467@qq.com

  • Raye Cheung

    链接失效了,是否能更新一个呢?感谢po主的分享

    • http://24says.com 24Says

      下载地址更新了

      • Raye Cheung

        谢谢~

  • 良柄

    7.0用了两天觉得不好使,又回退6.5了……

    • http://24says.com/ 24Says

      从 6.5 到 7.0 是要适应一段时间,不过在很多功能上的细节比 6.5 人性多了。