Axure如何设计日期选择框

前篇经验分享了axure有关设计时候选择框的方式，与时候分歧的是日期选择框涉及的是选择日期。这里再为大师介绍关于日期选择框的设计方式。

东西/原料

Axure 9

方式/步调

1
起首我们在Axure中拖动一个矩形作为日期选择呈现，定名为日期选择框，并按需设计结果，这里我设计悬停及选中为浅蓝色
2
接着拖动一个矩形框作为承载日期的底部面板，在样式中设计暗影结果
3
接着建造相关日期，相关箭头可以在阿里巴巴矢量图标库找到。
1、拖动两个矩形作为年和日期摆放，用两种箭头作为年和月的调整，即点击双箭头跳上一年下一年的结果，单箭头跳换上个月下个月的结果。同时为箭头设置悬停结果
4
接下来设计日期，不属于本月的时候字体较属于本月的更灰些，同时鼠标移至对应日期时字体变为蓝色结果
5
之后将有关日期的组归并转换为动态面板，并设置为埋没
6
在日期选择框中设计事务交互，当点击时切换显示动态面板并标的目的下滑动、埋没动态面板并标的目的上滑动。如图
7
接下来设计选中相关日期时，日期选择框文本变为选中日期的时候，以1号为例，新建单击交互事务，
1、当点击时日期选择框为当前年代（即一起头用来暗示2019年12月的矩形）文本值加上选中的日期。
2、动态面板标的目的上滑动埋没
3、设计完事务后点击预览没问题之后将1号上的事务复制黏贴到其他可选择的日期上
4、之后点击预览，可以看见根基的日期选中结果完当作
8
接下来我们要设计关于年和月的切换。关于这部门的思绪大致如下：
因为每一年每个月所对应的日期都是纷歧样的，所以需要操纵动态面板成立多个状况，当点击时设置动态面板切换到对应的状况即可。有乐趣的伴侣可以思虑一下若何设计。
9
因为Axure演示原型时不需要这么精确，所以我们可以点击相关箭头时使文本酿成对应文本就行，可是问题在于我们没法子知道当前点击时需要酿成什么文本，点击了几多次。所以要操纵全局变量来实现这个结果。
10
回到年代的矩形框，我们先新建两个全局变量，一个作为年，一个作为月，然后默认年为2019，月默认为12。
11
关于箭头<的逻辑如下：
当点击<时，
1、判定当前月是不是1月，若是是1月，全局变量year减一，全局变量month值为12月。
2、若是不是1月就全局变量month减一
关于年代的文本值为year年month月
12
关于箭头>的逻辑如下：
1、若是当前月为12月，全局变量year加一，全局变量month值为1月
2、若是当前月不是12月，则全局变量month加一
关于年代的文本值为year年month月
13
关于箭头《的逻辑比力简单，点击时全局变量year-1即可，最后再设置关于年代的文本值为year年month月。
箭头》同理，点击时全局变量year+1即可，最后再设置关于年代的文本值为year年month月。如下图
14
最后再点击预览，根基的日期选择器交互结果就完当作了

发表于 2019-12-19 23:06
阅读 ( 1163 )
分类：其他类型

Axure如何设计日期选择框

东西/原料

方式/步调

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »

推荐文章