Axure 实例 – 高保真日历控件

有些日子不动 Axure 了,再熟悉的东西如果长时间不用都会变得生疏,所以今天找来「日历控件」练手,一来是恢复下手感,二来继续积攒高保真的控件,毕竟像「日历」这种控件在 Web 设计中经常会被用到,所以有必要做一个 Masters,方便做各种原型时调用。

预览 | 下载

要求:
1、日历中的各个组件可联动。
2、选择任意日期后均可将值代入到输入框中。

这个控件做起来并不难,只是比较麻烦。原因在于界面上的所有组件彼此间都需要联动,需要考虑好它们之间的逻辑关系和各种小细节,所以我只设置了三套年月日的组合,效果足够示意就够了,如果把 12 个月都拉出来估计自己都会疯掉…将选择的日期值代入输入框需要用到变量,所以对于 Axure 的变量操作需要有一定了解,这个在我之前做过的实例里也有体现,过程细说起来太痛苦,只捡重要的几点说说,其余自己领悟吧。

给「输入框」命名为 date-box,设置 OnClick 事件用于激活日历。可以直接用 Show Panel,但这个动作的动画效果只有 fade 一种,如果像要更多可以用 Set Panel state to State,此例中动画选了 Animate in slide down。

拖一个 Dynamic Panel「动态面板」命名为 calendar,用于存放日历。用 Axure 的各种元素画出日历原型,至于组件可以自由组合,无论你是做日历、月历还是年历,重要的是方法。我使用的是比较常见的通用型日历,最上面是「当前年月」的显示,左右分别是「年份切换按钮」,中间是「年份选项」和「月份选项」,最下面自然是「日期表」,然后分别对这些组件进行命名。

如果想要效果更逼真,「日期表」需要根据年月组合制作多份,并且要不一样,这样在进行切换时可以看到效果。比如我的例子中年份为 2011 / 2012 / 2013,月份为 6 / 7 / 8,那「日期表」的组合就有 9 种,同样需要用一个 Dynamic Panel 存放。

左右的「年份切换按钮」需要根据年月的组合来设置触发条件,不仅要可进行年份的切换,还需要将「当前年月」和「年份选项」与切换后的「年份」进行联动,并显示相对应的「日期表」,同时还要考虑到无可切换的年份时按钮自身的 Disable 与 Enable 状态。

设置一个变量 varYear 用于存储「年份选项」的当前值,然后在切换的同时赋值给「当前年月」,以实现年份联动的效果。

「年份选项」和「月份选项」在做法上与「年份切换按钮」基本一致,只不过对于月份来说需要另设置一个变量 varMonth 来存储「月份选项」的当前值。

「日期表」这里最麻烦,1 〜 31 每个日期都要设置 OnClick 事件,幸好 Axure 良心的有复制功能,设好一个剩下的就是体力活了,最后再根据需要复制出多个日期,稍微调整下日期的显示顺序就可以了。

因为日期值基本是固定的,所以在传值的做法上可以不用变量,直接对应每一天写 1 – 31 个数字就可以,也就是说传给输入框「date-box」的变量可以直接写成 [[varMonth]] / 24 / [[varYear]]。不过我还是习惯用变量,所以再设一个存放日期的变量 varDay,把 31 个用做日期的 Button Shape 分别命名为 day-01 〜 day-31,再通过 text on widget 将其值赋给 varDay,则传给输入框「date-box」的变量就可以写成 [[varMonth]] / [[varDay]] / [[varYear]]。最后别往了给每个日期的 Button Shape 添加 Hide Panel 来隐藏整个日历「calendar」。

  • lingshaoxia

    求RP,谢谢博主

  • 122

    文件不存在了,求更新下载地址

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

      抱歉,已更新。

  • xumian

    求rp源文件,今天要急用,谢谢老大

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

      网站上有下载地址的

  • yoyozhou

    求RP原文件,急用, 谢谢DX
    ps 游戏不错

  • jinnhan

    求RP 谢谢!
    jinnhan@126.com

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

      已发,请注意查收。

  • Shunz

    求Rp,谢谢

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

      已发,注意查收。

  • nyima

    求rp文件。thanks !!

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

      已发。

  • owlet

    哈,有更新