原型說明咋寫-數字輸入框

0 評論 1365 瀏覽 9 收藏 5 分鐘

開發吐槽原型說明不清晰,領導催促原型要快細節再說,真是夾縫中生存的產品。今天教大家一個方法,既快又全。文末提供模板,可直接用。

步驟一:約定規范

如圖,與開發、UI約定組件規范,并維護在獨立文檔中。

步驟二:使用模板

如圖,Axure可將帶說明的通用組件置入元件庫,出原型時使用;開發看到組件,則使用約定規范;墨刀同理?!綪S:想了解word如何使用,請評論留言哈】

那么,規范與模板應該怎么寫?

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

【關注】或【收藏】不迷路。

=========當前第3篇,剩43篇=========

本期組件:數字輸入框組件概述:使用鼠標或鍵盤輸入一定范圍的標準數值,例:金額、數量等。

一、約定默認交互

本節主要與開發、UI約定默認實現內容,并明確通過哪種形式約束交互;本節內容可通過一份規范文檔維護。

1. 狀態約定

2. 交互約定

  • 允許定義遞增遞減的步數控制。
  • 根據實際業務需求確定小數位位數。
  • 當處于禁用狀態的時候,無法輸入數值或鼠標點擊增減按鈕。
  • 當鼠標懸停時,輸入框邊框及按鈕顏色發生變化。
  • 當輸入的數字超出范圍,失去焦點時,就近取最大/最小值。
  • 根據實際業務需求和操作習慣,可刪除增減按鈕,改為鍵盤輸入。
  • 當輸入的內容為非數值字段時,通過改變邊框顏色進行提示。
  • 鼠標長按時,支持持續增加/減少。
  • 輸入框無特殊說明,默認僅允許輸入數字。

3. 設計約定

  • 增減按鈕可根據頁面樣式或觀感設置成靠右上下排列,或兩邊排列。
  • 增減按鈕的圖標樣式由UI確定。
  • 警告或提示的顏色以顯眼的顏色為主,如紅色、橙色。
  • 無默認長度要求情況下,需根據最大值的長度,設計輸入框長度。

二、可控參數

  • +默認狀態:可用/禁用;
  • +數字格式:1,整數
  • -1.0,精確到小數點后1位
  • -1.00,精確到小數點后2位
  • +默認值:默認數值是多少,一般默認為1
  • +最小與最大值:根據業務需求規定可輸入的最小與最大值,格式:1~10
  • +步數:即點一次增/減的數量
  • +是否支持輸入:默認為是
  • +操作后置結果:影響關聯數據表數據

三、產出模板

  • 規范-數字輸入框
  • +默認狀態:可用
  • +數字格式:整數
  • +默認值:1
  • +最小與最大值:0~10
  • +步數:1
  • +是否支持輸入:支持
  • +操作后置結果:無

四、結語

本系列持續更新,喜歡的朋友請點個【關注】或【收藏】,您的鼓勵是我們持續分享的動力。

本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!