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

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

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

步驟二：使用模板

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

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

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

本期組件：滑動范圍輸入條。

組件概述：??當用戶需要在數值區(qū)間/自定義區(qū)間內進行選擇時，建議使用此類組件。

一、 約定默認交互

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

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

1. 交互約定

1）元件狀態(tài)

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

2）元件操作

1.通過點擊滑軌，快速移動滑塊至點擊區(qū)域（點擊位置離哪個滑塊近，就移動哪個滑塊）。

2.左滑塊可滑動到右滑塊右側，變?yōu)樽畲笾?，右滑塊同理。

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

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

2. 設計約定

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

二、約定可控參數

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

3. 產出說明模板

組件名稱前加個“規(guī)范”，便于團隊識別規(guī)范組件；

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

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

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