原型说明咋写-时间选择器
开发吐槽原型说明不清晰,领导催促原型要快细节再说,真是夹缝中生存的产品。
今天教大家一个方法,既快又全。文末提供模板,可直接用。
如图,Axure可将带说明的通用组件置入元件库,出原型时使用;开发看到组件,则使用约定规范;墨刀同理。【PS:想了解word如何使用,请评论留言哈】
本节主要与研发约定默认实现内容,通过规范文档维护。
单选-默认、悬停、完成:需有对应样式
范围-默认、悬停、完成:左右两边皆有输入值,默认通过“至”区隔
2.展开面板
-
展开与收起:单击输入框,展开面板;点击输入框之外则收起
-
展开方向:默认向下向右,当空间不够时,需往空间足够方向展开
-
路径记忆:收起面板,记忆上次路径;重新载入,若无法记忆则回到第一个
默认、悬停、完成:需有对应交互样式
默认、悬停、完成
-
需有对应交互样式
备选项联动
-
先选一侧时间,另一侧备选时间状态随之改变,如:选择开始时间后,另一侧小于等于开始时间的备选项置灰
5. 任意时间面板说明
默认、完成
-
分别是时分秒排列,默认24小时制
-
通过“上下拖动参数/滚动条”、“滚动鼠标滚轮”方式可滚动参数,滚动方式为循环滚动
-
中间为“已选区”,参数滚动至“已选区”表示被选
悬停
-
悬停在哪列,鼠标滚轮可滚动哪列,同时输入框选中对应列数据
-
点击“非已选区”选项,直接将选项滚动至“已选区”
-
支持键盘方向键调整参数及所选列
可输入
-
通过点选输入框的时间粒度,进行对应时间输入
-
输入时,同时展开面板,点选哪列则选中哪列数据
-
支持键盘方向键调整参数及所选列
6. 任意范围时间面板说明
操作
-
在任意面板基础上,键盘方向键可顺势从开始时间切换到结束时间
备选项联动
-
先选一侧时间,则另一侧的备选时间状态随之改变,区分可选/禁用样式
二、约定可控参数
本节主要与研发约定原型中可控制的参数,也通过规范文档维护。文中会提供示例参数,及参数填写说明。
1. 通用
状态:可用/只读/禁用
-
可用:即可修改可输入
-
只读:框内一般有内容,但不能更改、输入,只能复制
-
禁用:无法与用户交互,如无法复制或者输入
提示文案:选择时间
-
未选择时,输入框内显示的内容,样式需与输入文字有区别
影响事件:暂无
-
获取焦点、失去焦点、选中选项都可以产生影响其他组件的事件
一键清除:有/无
-
无选项时悬停,不做改变
-
有选项时悬停,右侧图标切换为“清空”状态,点击清空选项。(注:点击清空图标之外,为选择器基础交互)
2. 固定时间
默认时间:离当前最近时间
-
默认为离当前时间最近的值
可选范围:10:00~14:00
-
通过范围时间,结合步长值列出选项清单
可提供固定值
-
也可添加说明可选范围受哪些事件影响
步长:15分
-
控制相邻选项的时间间隔
3. 固定时间范围
在“固定时间”基础上,有以下不同
可选范围:开始范围&结束范围
-
仅显示此范围内时间,按步长值从开始时间列出选项清单
-
可提供固定值,也可以说明会受哪些事件影响。
4. 任意时间
时制:24小时制/12小时制
-
24小时制:常规显示方式
-
12小时制:增加控制上午、下午
默认时间:离当前最近时间
-
默认为离当前时间最近的值
可选范围:上午10:00~下午6:00
-
此范围内时间可选,非范围内时间不显示
-
可提供固定值,也可以说明会受哪些事件影响。
步长:10分
-
不仅控制相邻选项时间间隔,同时影响可选时间粒度
“此刻”按钮:有/无
-
面板底部增加“此刻”按钮,点击定位到离当前时间最近选项
5. 任意时间范围
在“任意时间”基础上,有以下不同
可选范围:开始范围&结束范围
-
仅显示此范围内时间,按步长值从开始时间列出选项清单
-
可提供固定值,也可以说明会受哪些事件影响。
三、产出说明模板
组件名称前加个“规范”,便于团队识别规范组件
模板可直接写入注释,并存为Axure/墨刀元件库
1. 固定时间
-
组件名称:规范-固定时间
-
状态:可用
-
提示文案:请选择时间
-
一键清除:有
-
预选时间:离当前最近时间
-
可选范围:10:00~18:00
-
步长:15分
-
影响事件:暂无
2. 固定时间范围
-
组件名称:规范-固定时间范围
-
状态:可用
-
提示文案:开始时间、结束时间
-
一键清除:有
-
预选时间:离当前最近时间
-
可选范围
-
-开始范围:
-
-结束范围:
-
步长:15分
-
影响事件:暂无
3. 任意时间
-
组件名称:规范-任意时间
-
状态:可用
-
提示文案:请选择时间
-
一键清除:有
-
时制:24小时制
-
预选时间:离当前最近时间
-
可选范围:10:00~18:00
-
步长:10分
-
快捷选项:此刻
-
影响事件:暂无
4. 任意时间范围
-
组件名称:规范-任意时间范围
-
状态:可用
-
提示文案:开始时间、结束时间
-
一键清除:有
-
时制:24小时制
-
预选时间:离当前最近时间
-
可选范围
-
-开始范围:
-
-结束范围:
-
步长:10分
-
快捷选项:未来一小时
-
影响事件:暂无