扫码阅读
手机扫码阅读

原型说明咋写-时间选择器

72 2024-03-13

开发吐槽原型说明不清晰,领导催促原型要快细节再说,真是夹缝中生存的产品。
今天教大家一个方法,既快又全。文末提供模板,可直接用。

步骤一:约定规范
    如图,与开发、UI约定组件规范,并维护在独立文档中。



步骤二:使用模板

如图,Axure可将带说明的通用组件置入元件库,出原型时使用;开发看到组件,则使用约定规范;墨刀同理。【PS:想了解word如何使用,请评论留言哈】


那么,规范与模板应该怎么写?
本系列将通过“通用、输入、输出、反馈四类约43个常用组件及3篇页面(表单页、列表页、详情页)写法,将规范与模板分享予您。

=========强烈建议点个【关注】【收藏】不迷路=========

本期组件:时间选择器
组件概述:当用户需要输入一个时间,可通过输入框弹出面板进行选择一个任意时间或固定时间,本篇会拆分出4个模板,分别为固定时间选择器、固定范围时间选择器、任意时间选择器、任意时间范围选择器。

一、 约定基础规范
本节主要与研发约定默认实现内容,通过规范文档维护。
1.基础样式

单选-默认、悬停、完成:需有对应样式

范围-默认、悬停、完成:左右两边皆有输入值,默认通过“至”区隔

2.展开面板

  • 展开与收起:单击输入框,展开面板;点击输入框之外则收起

  • 展开方向:默认向下向右,当空间不够时,需往空间足够方向展开

  • 路径记忆:收起面板,记忆上次路径;重新载入,若无法记忆则回到第一个


3.固定时间面板说明

默认、悬停、完成:需有对应交互样式



4. 固定时间范围面板说明

默认、悬停、完成

  • 需有对应交互样式

备选项联动

  • 先选一侧时间,另一侧备选时间状态随之改变,如:选择开始时间后,另一侧小于等于开始时间的备选项置灰

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分

  • 快捷选项:未来一小时

  • 影响事件:暂无

原文链接: http://mp.weixin.qq.com/s?__biz=MzI1NTUwODc4OQ==&mid=2247484125&idx=1&sn=06cd709eeb77c212640dde447f0ce783&chksm=ea35aa87dd42239187454b048f2f8ceba46c41b20430605bb78e1a60ff2cb472022850fa6625#rd