原型说明咋写-日期时间选择器
开发吐槽原型说明不清晰,领导催促原型要快细节再说,真是夹缝中生存的产品。
今天教大家一个方法,既快又全。文末提供模板,可直接用
如图,Axure可将带说明的通用组件置入元件库,出原型时使用;开发看到组件,则使用约定规范;墨刀同理。【PS:想了解word如何使用,请评论留言哈】
本节主要与研发约定默认实现内容,通过规范文档维护
参考“日期选择器” Roc,公众号:产品工具库原型说明咋写-日期选择器
单选
选项排列:平铺展示本月所有日期
选项切换:
-
点击单箭头切换月份,步长1月;点击月份,面板切换至“月份面板”(具体交互参考“月份选择器”),选择月份后回到当前面板
-
点击双箭头切换年度,步长1年;点击年度,面板切换至“年度面板”(具体交互参考“年度选择器”),选择年份后,到月份面板选月份
时间选择:形式有多种,如下展示。本文仅描述第一种、第二种(时间面板交互,参考“时间选择器”)
-
第一种(推荐):右侧延申平铺时间选择面板
-
第二种:通过显示的时间作为按钮,点击后面板切换至时间选择
-
第三种:通过时间输入框,再弹出一个时间面板
默认选项:默认选中当前日期时间
完成选择:通过“确认”按钮完成
范围
在“单选”基础上,有以下不同:
面板样式:左右两个面板,右侧值默认为左侧的延续;面板底部增加时间选择(考虑面板宽度过长,所以时间面板收起)。
面板操作:两个面板选项可单独切换,但需确保左侧数据小于右侧
范围样式:需体现开始、结束、范围内,区分选中样式
完成选择:选择一个开始值再选一个结束值则完成选择,收起面板
-
支持先选结束值,再选开始值
-
已有范围后,重新点选,则重选范围
本节主要与研发约定原型中可控制的参数,也通过规范文档维护。文中会提供示例参数,及参数填写说明
日期可控参数,参考“日期选择器” Roc,公众号:产品工具库原型说明咋写-日期选择器
时间可控参数,参考“时间选择器” Roc,公众号:产品工具库原型说明咋写-时间选择器
三、输出说明模板
组件名称前加个“规范”,便于团队识别规范组件;模板可直接写入注释,并存为Axure/墨刀元件库
1.单选
-
组件名称:日期时间选择器
-
状态:可用
-
提示文案:请选择
-
一键清除:有
-
周起始日:周一
-
预选值:今日,今时
-
时制:24小时制
-
可选日期范围:不限
-
可选时间范围:10:00~18:00
-
时间步长:10分
-
快捷选项:
-
影响事件:暂无
2.范围
-
组件名称:日期时间选择器
-
状态:可用
-
提示文案:开始日期时间、结束日期时间
-
一键清除:有
-
预选值:今日到下周,10:30
-
周起始日:周一
-
可选范围:
-
开始范围:不限
-
结束范围:不限
-
-
最大范围:不限
-
时间步长:10分
-
快捷选项:无
-
影响事件:暂无