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

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

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

步驟二：使用模板

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

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

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

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

=========當(dāng)前第3篇，剩43篇=========

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

一、約定默認(rèn)交互

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

1. 狀態(tài)約定

2. 交互約定

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

3. 設(shè)計(jì)約定

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

二、可控參數(shù)

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

三、產(chǎn)出模板

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

四、結(jié)語(yǔ)

本系列持續(xù)更新，喜歡的朋友請(qǐng)點(diǎn)個(gè)【關(guān)注】或【收藏】，您的鼓勵(lì)是我們持續(xù)分享的動(dòng)力。