開發(fā)吐槽原型說明不清晰；領(lǐng)導(dǎo)說出原型要快細(xì)節(jié)后面再說。真是夾縫求生存的產(chǎn)品，今天教大家一個(gè)辦法，既能快、又能全。以下，enjoy~

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

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

步驟二：使用模板

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

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

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

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

組件概述：??當(dāng)用戶需要在數(shù)值區(qū)間/自定義區(qū)間內(nèi)進(jìn)行選擇時(shí)，建議使用此類組件。

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

本節(jié)主要與開發(fā)、UI約定默認(rèn)實(shí)現(xiàn)內(nèi)容，并明確通過哪種形式約束交互；

本節(jié)內(nèi)容可通過一份規(guī)范文檔維護(hù)。

1. 交互約定

1）元件狀態(tài)

1. 需具備”啟用、禁用、鼠標(biāo)懸停與拖動(dòng)滑塊”狀態(tài)，樣式如下圖：
2. 鼠標(biāo)懸停與拖動(dòng)滑塊：懸停時(shí)，滑塊放大，并出現(xiàn)氣泡提示，以表示可操作；拖動(dòng)時(shí)，在懸?；A(chǔ)上氣泡數(shù)值根據(jù)滑塊拖動(dòng)位置改變。

2）元件操作

1.通過點(diǎn)擊滑軌，快速移動(dòng)滑塊至點(diǎn)擊區(qū)域（點(diǎn)擊位置離哪個(gè)滑塊近，就移動(dòng)哪個(gè)滑塊）。

2.左滑塊可滑動(dòng)到右滑塊右側(cè)，變?yōu)樽畲笾?，右滑塊同理。

3.顯示氣泡提示：可定義默認(rèn)顯示，即常駐“氣泡提示”。

4.帶輸入框：可定義是否帶輸入框。輸入框默認(rèn)為“數(shù)字輸入框”，輸入框邊界受輸入條影響，改變輸入框數(shù)值，同步影響滑塊位置。

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

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

二、約定可控參數(shù)

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

3. 產(chǎn)出說明模板

組件名稱前加個(gè)“規(guī)范”，便于團(tuán)隊(duì)識別規(guī)范組件；

模板可直接寫入注釋，并存入Axure/墨刀的元件庫。

組件名稱：規(guī)范-滑動(dòng)范圍輸入條

• +狀態(tài)：啟用
• +默認(rèn)值：XX、XX
• +氣泡提示方式：懸停顯示
• +氣泡提示內(nèi)容：整數(shù)
• +需要輸入框：無需
• +最小值：XX
• +最大值：XX
• +步長：1
• +操作后置結(jié)果：暫無