原型说明咋写-之数字输入框

开发吐槽原型说明不清晰；领导说出原型要快细节后面再说。
真是夹缝求生存的产品，今天教大家一个办法，既能快、又能全。

以下，enjoy~

1、约定规范

与开发、UI约定元件规范及产品可控内容，将规范维护在一份独立文件中。

以下为某元件约定规范：

2、使用模板

• Axure：将通用元件及说明置入元件库，编写文档时使用；开发看到通用元件，则使用约定规范。

• 墨  刀：同上

• Word：通过一份独立word维护，或编入“自动图文集”

以下为Axure中使用模板：

---

那么规范与模板应怎么写，写到什么程度？

本系列文章会将近几年积累的元件，以图文形式向大家倾囊相授。

PS：文末提供说明模板，可直接用

一、约定默认交互

状态约定：

交互设计约定：

1、允许定义递增递减的步数控制；

2、根据实际业务需求确定小数位位数；

3、当处于禁用状态的时候，无法输入数值或鼠标点击增减按钮；

4、当鼠标悬停时，输入框边框及按钮颜色发生变化；

5、当输入的数字超出范围，失去焦点时，就近取最大/最小值；

6、根据实际业务需求和操作习惯，可删除增减按钮，改为键盘输入；

7、当输入的内容为非数值字段时，通过改变边框颜色进行提示；

8、鼠标长按时，支持持续增加/减少。。

9、输入框无特殊说明，默认仅允许输入数字

视觉设计约定：

1、增减按钮可根据页面样式或观感设置成靠右上下排列，或两边排列；

2、增减按钮的图标样式由UI确定；

3、警告或提示的颜色以显眼的颜色为主，如红色、橙色；

4、无默认长度要求情况下，需根据最大值的长度，设计输入框长度。

二、约定产品可控参数

+默认状态：可用/禁用；

+数字格式：1，整数

-1.0，精确到小数点后1位

-1.00，精确到小数点后2位

+默认值：默认数值是多少，一般默认为1

+最小与最大值：根据业务需求规定可输入的最小与最大值，格式：1~10

+步数：即点一次增/减的数量

+是否支持输入：默认为是

+操作后置结果：影响关联数据表数据

三、产出说明模板：

规范-数字输入框

+默认状态：可用

+数字格式：整数

+默认值：1

+最小与最大值：0~10

+步数：1

+是否支持输入：支持

+操作后置结果：无

---

结语

以上就是关于常规输入框的原型说明模板，如有疑问、补充点，麻烦留言告知，我们互相学习共同成长。