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

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

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

本節(jié)主要與研發(fā)約定默認(rèn)實(shí)現(xiàn)內(nèi)容，通過規(guī)范文檔維護(hù)。

1. 基礎(chǔ)樣式約定

1、需具備基礎(chǔ)樣式：默認(rèn)、懸停、禁用等

2、根據(jù)原型設(shè)計(jì)確定合理的組件長度、顏色，以及滑塊的樣式

3、軌道左側(cè)為最小值，右側(cè)最大值；豎向則底部最小，頂部最大

4、UI可根據(jù)實(shí)際情況決定橫向還是豎向布置

2. 基礎(chǔ)交互約定

1、基礎(chǔ)操作

• 鼠標(biāo)懸?；瑝K時(shí)，滑塊需有交互，如變大、發(fā)光等
• 拖動滑塊，改變數(shù)值
• 點(diǎn)擊滑軌，快速移動滑塊至點(diǎn)擊區(qū)域

2、氣泡提示

• 氣泡提示可定義是否默認(rèn)顯示；非默認(rèn)顯示，則鼠標(biāo)懸停在圓點(diǎn)時(shí)顯示
• 氣泡提示內(nèi)容為滑塊所選值

3、數(shù)字輸入框：根據(jù)業(yè)務(wù)需求確定是否需要搭配輸入框（默認(rèn)為“數(shù)字輸入框”）

• 輸入框的數(shù)值通過拖動滑塊來確定
• 改變輸入框內(nèi)容，會同步移動滑塊。數(shù)值超出范圍自動回到最大/最小值。具體交互參考“數(shù)字輸入框”

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

本節(jié)主要與研發(fā)約定原型中可控制的參數(shù)，也通過規(guī)范文檔維護(hù)。文中會提供示例參數(shù)，及參數(shù)填寫說明。

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

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

組件名稱前加個(gè)“規(guī)范”，便于團(tuán)隊(duì)識別規(guī)范組件；模板可直接寫入注釋，并存為Axure/墨刀元件庫。

• 規(guī)范-滑動輸入條
• 默認(rèn)值：中間值
• 狀態(tài)：啟用
• 氣泡提示方式：懸停顯示
• 氣泡提示內(nèi)容：整數(shù)
• 是否帶輸入框：無需
• 最小值：0
• 最大值：100
• 步長：1
• 操作后置結(jié)果：暫無

結(jié)語

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