開發(fā)吐槽原型說明不清晰，領(lǐng)導(dǎo)催促原型要快細節(jié)再說，真是夾縫中生存的產(chǎn)品。今天教大家一個方法，既快又全。文末提供模板，可直接用。

步驟一：約定規(guī)范

如圖，與開發(fā)、UI約定組件規(guī)范，并維護在獨立文檔中。

步驟二：使用模板

如圖，Axure可將帶說明的通用組件置入元件庫，出原型時使用；開發(fā)看到組件，則使用約定規(guī)范；墨刀同理?！綪S：想了解word如何使用，請評論留言哈】

那么，規(guī)范與模板應(yīng)該怎么寫？

本系列將通過“通用、輸入、輸出、反饋”四類約43個常用組件及3篇頁面（表單頁、列表頁、詳情頁）寫法，將規(guī)范與模板分享予您。強烈建議點個

【關(guān)注】或【收藏】不迷路。

=========當前第3篇，剩43篇=========

本期組件：數(shù)字輸入框組件概述：使用鼠標或鍵盤輸入一定范圍的標準數(shù)值，例：金額、數(shù)量等。

一、約定默認交互

本節(jié)主要與開發(fā)、UI約定默認實現(xiàn)內(nèi)容，并明確通過哪種形式約束交互；本節(jié)內(nèi)容可通過一份規(guī)范文檔維護。

1. 狀態(tài)約定

2. 交互約定

• 允許定義遞增遞減的步數(shù)控制。
• 根據(jù)實際業(yè)務(wù)需求確定小數(shù)位位數(shù)。
• 當處于禁用狀態(tài)的時候，無法輸入數(shù)值或鼠標點擊增減按鈕。
• 當鼠標懸停時，輸入框邊框及按鈕顏色發(fā)生變化。
• 當輸入的數(shù)字超出范圍，失去焦點時，就近取最大/最小值。
• 根據(jù)實際業(yè)務(wù)需求和操作習慣，可刪除增減按鈕，改為鍵盤輸入。
• 當輸入的內(nèi)容為非數(shù)值字段時，通過改變邊框顏色進行提示。
• 鼠標長按時，支持持續(xù)增加/減少。
• 輸入框無特殊說明，默認僅允許輸入數(shù)字。

3. 設(shè)計約定

• 增減按鈕可根據(jù)頁面樣式或觀感設(shè)置成靠右上下排列，或兩邊排列。
• 增減按鈕的圖標樣式由UI確定。
• 警告或提示的顏色以顯眼的顏色為主，如紅色、橙色。
• 無默認長度要求情況下，需根據(jù)最大值的長度，設(shè)計輸入框長度。

二、可控參數(shù)

• +默認狀態(tài)：可用/禁用；
• +數(shù)字格式：1，整數(shù)
• -1.0，精確到小數(shù)點后1位
• -1.00，精確到小數(shù)點后2位
• +默認值：默認數(shù)值是多少，一般默認為1
• +最小與最大值：根據(jù)業(yè)務(wù)需求規(guī)定可輸入的最小與最大值，格式：1~10
• +步數(shù)：即點一次增/減的數(shù)量
• +是否支持輸入：默認為是
• +操作后置結(jié)果：影響關(guān)聯(lián)數(shù)據(jù)表數(shù)據(jù)

三、產(chǎn)出模板

• 規(guī)范-數(shù)字輸入框
• +默認狀態(tài)：可用
• +數(shù)字格式：整數(shù)
• +默認值：1
• +最小與最大值：0~10
• +步數(shù)：1
• +是否支持輸入：支持
• +操作后置結(jié)果：無

四、結(jié)語

本系列持續(xù)更新，喜歡的朋友請點個【關(guān)注】或【收藏】，您的鼓勵是我們持續(xù)分享的動力。