開(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ī)范；墨刀同理。【PS：想了解word如何使用，請(qǐng)?jiān)u論留言哈】

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

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

=========當(dāng)前第4篇，剩42篇=========

本期組件：滑動(dòng)輸入條

組件概述：通過(guò)拖動(dòng)滑塊在一個(gè)固定區(qū)間內(nèi)進(jìn)行選擇，輸入器僅展示當(dāng)前值和可選范圍。

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

1. 其他交互約定

1. 氣泡提示可定義是否默認(rèn)顯示，不默認(rèn)顯示時(shí)，鼠標(biāo)懸停在圓點(diǎn)時(shí)，應(yīng)顯示“氣泡提示”；
2. 氣泡提示內(nèi)容為滑塊所選值；
3. 可通過(guò)點(diǎn)擊滑軌，快速移動(dòng)滑塊至點(diǎn)擊區(qū)域；
4. 鼠標(biāo)懸?；瑝K時(shí)，滑塊需有交互，如變大、發(fā)光等；
5. 根據(jù)業(yè)務(wù)需求確定是否需要搭配輸入框（默認(rèn)為“數(shù)字輸入框”），輸入框的數(shù)值通過(guò)拖動(dòng)滑塊來(lái)確定；
6. 改變輸入框內(nèi)容，會(huì)同步移動(dòng)滑塊。數(shù)值超出范圍自動(dòng)回到最大/最小值。具體交互參考“數(shù)字輸入框”。

2. 視覺(jué)設(shè)計(jì)約定

1. 根據(jù)原型設(shè)計(jì)確定合理的組件長(zhǎng)度、顏色，以及滑塊的樣式；
2. UI可根據(jù)實(shí)際情況決定橫向還是豎向布置。

二、約定產(chǎn)品可控參數(shù)

• +默認(rèn)值：一般可默認(rèn)為始發(fā)值、終點(diǎn)值或中間值；
• +狀態(tài)：?jiǎn)⒂?禁用；
• +氣泡提示方式：常駐/懸停顯示；
• +氣泡提示內(nèi)容：可為整數(shù)、小數(shù)、百分?jǐn)?shù)，具體由業(yè)務(wù)需求來(lái)確定；
• +是否帶輸入框：根據(jù)業(yè)務(wù)需求確定；
• +最小值：根據(jù)實(shí)際業(yè)務(wù)需求確定；
• +最大值：根據(jù)實(shí)際業(yè)務(wù)需求確定；
• +步長(zhǎng)：即拖動(dòng)的最小增/減量；
• +操作后置結(jié)果：影響關(guān)聯(lián)數(shù)據(jù)表數(shù)據(jù)。

三、產(chǎn)出說(shuō)明模板

規(guī)范-滑動(dòng)輸入條

• +默認(rèn)值：中間值
• +狀態(tài)：?jiǎn)⒂?/li>
• +氣泡提示方式：懸停顯示
• +氣泡提示內(nèi)容：整數(shù)
• +是否帶輸入框：無(wú)需
• +最小值：0
• +最大值：100
• +步長(zhǎng)：1
• +操作后置結(jié)果：暫無(wú)

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

以上就是關(guān)于常規(guī)輸入框的原型說(shuō)明模板，如有疑問(wèn)、補(bǔ)充點(diǎn)，麻煩留言告知，我們互相學(xué)習(xí)共同成長(zhǎng)。