登录 | 立即注册
群英荟萃 首页 产品狗 产品设计 查看内容

axure原型设计之日历设计

2017-3-10 16:54| 发布者: xuyuanfan77| 查看: 60| 评论: 0

摘要: 相信很多和我一样的,看了大神的产品经理原型图,却苦于难实现axure做网站原型,捂脸jpg。大神的实践讲解总是很少。。。准备工作,打开你电脑的axure原型工具,拉出两个控件(表格和中继器),表格保留一行,左右填 ...

相信很多和我一样的,看了大神的产品经理原型图,却苦于难实现axure做网站原型,捂脸jpg。大神的实践讲解总是很少。。。

准备工作,打开你电脑的axure原型工具,拉出两个控件(表格和中继器),表格保留一行,左右填充“上月”和“下月”,中间命名为“当前”;再拉出一个表格,保留一行7列,分别填充“日 一 二 三 四 五 六”,设置单元格40*40(这个大小随意设置);中继器命名为“日历”,双击中继器,进入详细页面,设置矩形为40*40(宽度与星期的单元格保持一致,美观),命名为“日历详情”,给方格添加交互状态(选中控件,右键,添加鼠标划入,选中,禁用的状态),中继器属性区添加42行空白内容,中继器样式选择水平布局,每行7个(对应周日-周六)。

以上,准备部件放置完成,请看下图实践:

接下来详细说明下实践原理,看过大神的原理介绍并能吃透的,自动下滑页面看实践,如果连实践也会的,那你就关了此页面吧(不要看妹纸献丑了,捂脸.jpg)

原理篇

原型分成上下两部分,上面控制月份变化,下面控制对应月份的详细日期显示。

页面加载完成后,日历显示当前月份日期,当前时间(举栗子:2017/3/9),当天时间被选中高亮,非当月时间置灰(实现的是显示当前月份内容)。点击”上月“和”下月“,”当前“单元格的时间与下方日历随之变化。

实现上会用到几个日期函数:Now,getDate(),getDay(),getMonth(),addMonths(months),addDays(days),toLocalDateString(),index。

Now:返回当前时间详细值,栗子:Thu Mar 09 2017 10:51:59 GMT+0800 (中国标准时间)

getDate():返回月的日期,栗子:9,今天是9号

getDay():返回日期是一周中的第几天(返回值为0-1,对应日-六),栗子:4,今天是周四

getMonth():返回日期所在月份,栗子:3,这个月是3月份

addMonths(months):对月份进行加减,前一个月后一个月的变化,括号内的months数值可正可负,正代表月份向未来变化,负代表月份向过去变化

addDays(days):对日期进行加减,前一天后一天的变化,括号内的days数值可正可负,正代表日期向未来变化,负代表日期向过去变化

toLocalDateString():将时间详细值转化为可读的”年月日“字符串,栗子:Now的时间”Thu Mar 09 2017 10:51:59 GMT+0800“,变成”2017/3/9“

index:位置排序的索引数值,栗子:42个方格,当前选中是第16个放个,则返回16

PS:日期函数示例http://share.yuanxingku.com/tutorial/datefunctions/#p=date_functions

页面添加3个全局变量,表示当前日期的变量”Date_Now“,表示当前日期所在月份的1号日期的变量”Date_Now_1“,表示1号日期的索引序值的变量”Date_Now_1_Index“

Date_Now_1的日期=Date_Now的日期+/-相差的天数,Date_Now的日期=Now获得的数值,相差天数=1-Date_Now的日期,栗子:今天9号,与1号相差8天,即8=9-1

函数表达:Date_Now_1=[[Date_Now.addDays(1-Date_Now.getDate())]]

getDay()的”日-六“对应返回”0-6“,首行的索引数值为”1-7“,即索引数值=”0-6“+1(假定了每月的1号出现在第一行或者第二行),Date_Now_1_Index的数值=Date_Now_1的索引值

函数表达:Date_Now_1_Index=[[Date_Now_1.getDay()+1]]

其他日期=日期+/-与1号日期的差值天数,与1号日期的差值天数=其他日期的索引值-Date_Now_1_Index

函数表达:其他日期=[[其他日期.addDays(Item.index-Date_Now_1_Index).getDate()]]

原理绕了一圈,估计你可能有点”黑人问号脸“(我自己都有点绕蒙B了。。。)

下面进行实践,实践与原理对应起来了,就会豁然开朗了~

实践篇

开始给准备好的部件添加用例咯~

分成三部分来说,上面的控制月份的部件,下面中继器的部件,然后是月份与中继器的结合。

在页面载入时,先把3个全局变量赋值,并填充”当前“单元格的内容:

Date_Now=[[Now]],获取当前日期

Date_Now_1=[[Date_Now.addDays(1-Date_Now.getDate())]],获取当前日期月份1号日期

Date_Now_1_Index=[[Date_Now_1.getDay()+1]],获取1号日期的索引值

当前=[[Date_Now.toLocaleDateString()]],当前日期转化为”年月日“格式显示

设置上月,下月点击用例,以上月点击为例:

Date_Now=[[Date_Now_1.addMonths(-1)]],当前日期为向过去移动一个月的1号日期

Date_Now_1=[[Date_Now_1.addMonths(-1)]],当前日期月份的1号向过去移动一个月

Date_Now_1_Index=[[Date_Now_1.getDay()+1]],移动一个月后的1号索引位置

当前=[[Date_Now.toLocaleDateString()]]

下月点击用例同理,将addMonths(-1)修改为addMonths(1)即可。

浏览器预览一下吧,看看点击上月,点击下月,当前的时间显示是否有变化呢?

接着对中继器添加用例。对当前日期高亮选中,非当月日期置灰禁用。点击中继器,右侧属性”每项加载时“添加用例。

添加用例1,高亮当前日期:

用例条件:[[Date_Now_1.addDays(Item.index-Date_Now_1_Index)]]==[[Date_Now]],当前中继器的选项正好是当前日期,有点绕口,慢慢理解。。。

满足条件的进行操作:

日历详细=[[Date_Now_1.addDays(Item.index-Date_Now_1_Index).getDate()]],获得当前日期

日历详细,启用,鼠标划入有状态变化

日历详细,选中状态=true,设置被选中

添加用例2,显示当月的日期:

用例条件:[[Date_Now_1.addDays(Item.index-Date_Now_1_Index).getMonth()]]==[[Date_Now_1.getMonth()]],当前日期所在月份与1号日期月份相同

满足条件的进行操作:

日历详细=[[Date_Now_1.addDays(Item.index-Date_Now_1_Index).getDate()]],获得当前日期

日历详细,选中状态=false,设置未选中

日历详细,启用,鼠标划入有状态变化

添加用例3,非当月的日期置灰:

用例条件直接为非以上两种情况,无需添加特殊说明

满足条件的进行操作:

日历详细=[[Date_Now_1.addDays(Item.index-Date_Now_1_Index).getDate()]],获得当前日期

日历详细,禁用,鼠标划入无效果

中继器的用例添加完了,预览下,看看是不是已经能够显示全部日期了呢?

接下来,把月份切换与中继器日期显示结合啦~

以点击上月为例,点击时,更新中继器的内容,且切换到上一个月时,日期定为到1号且高亮(看下电脑的日期,月份切换时,选中高亮每月1号日期)。

选择中继器的”更新行“,添加用例,满足条件[[TargetItem.index>0]]更新内容。

点击下月同理操作。

日历操作就完成了,快去浏览器里预览下吧~

原型预览:http://59lgso.axshare.com


鲜花

握手

雷人

路过

鸡蛋
交流平台
群英荟萃交流群:群英荟萃1群
热门文章
产品经理面试的15个问题
产品经理面试的15个
- 1 -请罗列用户研究方法有哪些?如何进行
3种产品经理必须掌握的流程图
3种产品经理必须掌
刚入行的时候,我会火急火燎地画原型图,因
如何编写一份优秀的产品需求文档?(一)
如何编写一份优秀的
一、引言 1.0文档属性 1.1产品综述 1.2产品
2017年网页设计之十大趋势
2017年网页设计之十
又迎来了崭新的一年,让我们来了解网页设计
axure原型设计之表单设计
axure原型设计之表
axure原型设计中的表单可能是日常UI设计中

Archiver|手机版|小黑屋|群英荟萃 ( 粤ICP备16069393号-2

GMT+8, 2017-9-26 17:01 , Processed in 0.115137 second(s), 26 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部