步骤一：约定规范
如图，与开发、UI约定组件规范，并维护在独立文档中。
步骤二：使用模板
本期组件：时间选择器
组件概述：当用户需要输入一个时间，可通过输入框弹出面板进行选择一个任意时间或固定时间，本篇会拆分出4个模板，分别为固定时间选择器、固定范围时间选择器、任意时间选择器、任意时间范围选择器。
一、约定基础规范本节主要与研发约定默认实现内容，通过规范文档维护。
1.基础样式单选-默认、悬停、完成：需有对应样式
范围-默认、悬停、完成：左右两边皆有输入值，默认通过“至”区隔
2.展开面板展开方向：默认向下向右，当空间不够时，需往空间足够方向展开
路径记忆：收起面板，记忆上次路径；重新载入，若无法记忆则回到第一个
3.固定时间面板说明默认、悬停、完成：需有对应交互样式
4.固定时间范围面板说明默认、悬停、完成
备选项联动
先选一侧时间，另一侧备选时间状态随之改变，如：选择开始时间后，另一侧小于等于开始时间的备选项置灰
5.任意时间面板说明默认、完成
分别是时分秒排列，默认24小时制
通过“上下拖动参数/滚动条”、“滚动鼠标滚轮”方式可滚动参数，滚动方式为循环滚动
中间为“已选区”，参数滚动至“已选区”表示被选
悬停
悬停在哪列，鼠标滚轮可滚动哪列，同时输入框选中对应列数据
支持键盘方向键调整参数及所选列
可输入
通过点选输入框的时间粒度，进行对应时间输入
输入时，同时展开面板，点选哪列则选中哪列数据
支持键盘方向键调整参数及所选列
6.任意范围时间面板说明操作
备选项联动
先选一侧时间，则另一侧的备选时间状态随之改变，区分可选/禁用样式
二、约定可控参数本节主要与研发约定原型中可控制的参数，也通过规范文档维护。文中会提供示例参数，及参数填写说明。
1.通用状态：可用/只读/禁用
可用：即可修改可输入
只读：框内一般有内容，但不能更改、输入，只能复制
禁用：无法与用户交互，如无法复制或者输入
提示文案：选择时间
影响事件：暂无
一键清除：有/无
无选项时悬停，不做改变
2.固定时间默认时间：离当前最近时间
可选范围：10：00~14：00
可提供固定值
步长：15分
3.固定时间范围在“固定时间”基础上，有以下不同
可选范围：开始范围结束范围
仅显示此范围内时间，按步长值从开始时间列出选项清单
可提供固定值，也可以说明会受哪些事件影响。
4.任意时间时制：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分
快捷选项：未来一小时
影响事件：暂无
本文由@产品工具库原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。