原型说明咋写-文本域输入框

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

 对提前准备原型规范&说明模板不明白的朋友，可以先查看《如何解决原型说明写不全？》

---

本期组件：数字输入框

组件概述：使用鼠标或键盘输入一定范围的标准数值，例：金额、数量等

一、约定默认交互

本节主要与研发约定默认实现内容，通过规范文档维护

1.  基础样式约定

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

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

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

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

2. 基础交互约定

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

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

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

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

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

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

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

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

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

二、约定产品可控参数

本节主要与研发约定原型中可控制的参数，也通过规范文档维护。文中会提供示例参数，及参数填写说明

• 默认状态：可用/禁用；
• 数字格式：1，整数
  • 1.0，精确到小数点后1位
  • 1.00，精确到小数点后2位
• 默认值：默认数值是多少，一般默认为1
• 最小与最大值：根据业务需求规定可输入的最小与最大值，格式：1~10
• 步数：即点一次增/减的数量
• 是否支持输入：默认支持
• 操作后置结果：影响关联数据表数据

三、产出说明模板

组件名称前加个“规范”，便于团队识别规范组件；模板可直接写入注释，并存为Axure/墨刀元件库

• 规范-数字输入框
• 默认状态：可用
• 数字格式：整数
• 默认值：1
• 最小与最大值：0~10
• 步数：1
• 是否支持输入：支持
• 操作后置结果：无

---

结语

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