axure8.0原型设计实例:日历控件

2017年4月28日 阅读:900

日历控件,相信大家都不陌生,这是一个相当常见的控件,基本上有日期选择的地方就会有日历控件。但是日历控件在原型制作中却没那么简单,因此,很多产品人在做原型的时候,就截一张图,或者直接省掉只放一个输入框和一个日历icon意思意思一下就行。虽然说原型只要能让开发看得懂就行,但如果你能做得更好又为什么不做呢?这里就教大家如何使用axure8.0制作日历控件。

第一步:拖放摆放好相关控件

首先:一个矩形命名为“日历编辑框”和一个icon命名为“日历icon”;

然后:一个组合,命名为“日历控件”,初始状态设置为隐藏,组合中包括如下部分

1、“日期栏”组合:由“上一年”、“上一月”、“下一月”、“下一年”和“当前时间”5个文本标签组成;

2、“星期栏”组合:通过表格把“日一二三四五六”一周七天标识清楚就行;

3、“日历表格”:一个网络排布,每排项目数为7的中继器,中继器中是一30X30的正方形,命名为“日历单元”;

4、“按钮栏”组合:“清空”、“今天”和“确认”3个矩形充当按钮。

第二步:设置“日历表格”的中继器数据库

只设置一列“column0”,这一列有42个空值的数据

第三步:为页面添加页面载入时用例

1、添加3个全局变量:

current_date:当前时间

current_date_1 :当前月份的1号

current_date_1_index:当前月份的1号在日历表格中的位置序号

2、当前月份1号相对应于中继器数据库的位置中更新入current_date_1的值

3、设置“当前时间”的文本值

第四步:为“日历icon”添加鼠标单击时用例

切换“日历控件”,显示时向下滑动500毫秒,隐藏时向上滑动500毫秒。

第五步:为“日历表格”添加每项加载时用例

1、当是当前日期那一项时,设置“日历单元”为当前日期,设置“日历单元”的选中状态为false,启用日历单元,设置“日历单元”的选中状态为true;

2、当是与当前日期同一个月的其他项时,设置“日历单元”为相应日期,设置“日历单元”的选中状态为false,启用日历单元;

3、当是与当前日期不同一个月的其他项时,设置“日历单元”为相应日期,设置“日历单元”的选中状态为false,禁用日历单元;

第六步:为“日历单元”添加交互样式

鼠标悬停和选中时,填充颜色为蓝色,禁用时,填充颜色为灰色字体为白色

第七步:为“日历单元”添加鼠标点击时用例

1、设置“日历编辑框”的文字为所点击选择的日期;

2、隐藏“日历控件”,500毫秒向上滑动。

第八步:为“上一年”、“上一月”、“下一月”和“下一年”添加鼠标点击时用例

这里只以“上一年”为例,其他的类似,稍作调整即可。

1、设置3个全局变量:

current_date:上一年同月份的1号

current_date_1 :上一年同月份的1号

current_date_1_index:上一年同月份的1号在日历表格中的位置序号

2、设置中继器数据库中的数据全部为0

3、设置“当前时间”的文本值

第九步:为“清空”添加鼠标点击时用例

1、设置“日历编辑框”的文字为空值;

2、隐藏“日历控件”,500毫秒向上滑动。

第十步:为“今天”添加鼠标点击时用例

总共有4个动作,前3动作与页面加载时用例一样,请查看“第三步”;

第4个动作为隐藏“日历控件”,500毫秒向上滑动。

第十一步:为“确认”添加鼠标点击时用例

1、设置“日历编辑框”的文字为以选中的日期;

2、隐藏“日历控件”,500毫秒向上滑动。

可以了,步骤比较复杂,但做好后可以保存为自己的元件库,以供之后直接拿来使用。预览中,点击日历icon,就会弹出日历控件,然后可以选择今天、上一月、下一月、上一年和下一年,或者可以直接选择一个日期。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

效果图:axure原型设计之日历控件
更多原型案例:http://weidublog.com/index.php/2017/03/20/181/

作者:维度
转载请注明出处:http://weidublog.com/index.php/2017/04/28/546/

没有评论

评论已关闭。