起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識原型說明咋寫-滑動輸入條
開發(fā)吐槽原型說明不清晰，領導催促原型要快細節(jié)再說，真是夾縫中生存的產(chǎn)品。今天教大家一個方法，既快又全。文末提供模板，可直接用。
步驟一：約定規(guī)范
如圖，與開發(fā)、UI約定組件規(guī)范，并維護在獨立文檔中。
步驟二：使用模板
如圖，Axure可將帶說明的通用組件置入元件庫，出原型時使用；開發(fā)看到組件，則使用約定規(guī)范；墨刀同理?！綪S：想了解word如何使用，請評論留言哈】
那么，規(guī)范與模板應該怎么寫？
本系列將通過“通用、輸入、輸出、反饋”四類約43個常用組件及3篇頁面（表單頁、列表頁、詳情頁）寫法，將規(guī)范與模板分享予您。強烈建議點個【關注】或【收藏】不迷路。
=========當前第4篇，剩42篇=========
本期組件：滑動輸入條
組件概述：通過拖動滑塊在一個固定區(qū)間內(nèi)進行選擇，輸入器僅展示當前值和可選范圍。
一、約定默認交互
1. 其他交互約定
- 氣泡提示可定義是否默認顯示，不默認顯示時，鼠標懸停在圓點時，應顯示“氣泡提示”；
- 氣泡提示內(nèi)容為滑塊所選值；
- 可通過點擊滑軌，快速移動滑塊至點擊區(qū)域；
- 鼠標懸停滑塊時，滑塊需有交互，如變大、發(fā)光等；
- 根據(jù)業(yè)務需求確定是否需要搭配輸入框（默認為“數(shù)字輸入框”），輸入框的數(shù)值通過拖動滑塊來確定；
- 改變輸入框內(nèi)容，會同步移動滑塊。數(shù)值超出范圍自動回到最大/最小值。具體交互參考“數(shù)字輸入框”。
2. 視覺設計約定
- 根據(jù)原型設計確定合理的組件長度、顏色，以及滑塊的樣式；
- UI可根據(jù)實際情況決定橫向還是豎向布置。
二、約定產(chǎn)品可控參數(shù)
- +默認值：一般可默認為始發(fā)值、終點值或中間值；
- +狀態(tài)：啟用/禁用；
- +氣泡提示方式：常駐/懸停顯示；
- +氣泡提示內(nèi)容：可為整數(shù)、小數(shù)、百分數(shù)，具體由業(yè)務需求來確定；
- +是否帶輸入框：根據(jù)業(yè)務需求確定；
- +最小值：根據(jù)實際業(yè)務需求確定；
- +最大值：根據(jù)實際業(yè)務需求確定；
- +步長：即拖動的最小增/減量；
- +操作后置結(jié)果：影響關聯(lián)數(shù)據(jù)表數(shù)據(jù)。
三、產(chǎn)出說明模板
規(guī)范-滑動輸入條
- +默認值：中間值
- +狀態(tài)：啟用
- +氣泡提示方式：懸停顯示
- +氣泡提示內(nèi)容：整數(shù)
- +是否帶輸入框：無需
- +最小值：0
- +最大值：100
- +步長：1
- +操作后置結(jié)果：暫無
四、結(jié)語
以上就是關于常規(guī)輸入框的原型說明模板，如有疑問、補充點，麻煩留言告知，我們互相學習共同成長。
本文由 @產(chǎn)品工具庫 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于 CC0 協(xié)議
該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
別人教你畫原型，我們教你寫說明
公眾號：產(chǎn)品工具庫 | 后續(xù)提供模板下載
評論
- 目前還沒評論，等你發(fā)揮！
