輸入組件通用規范

1 評論 2311 瀏覽 15 收藏 5 分鐘

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

對原型規范&說明模板不明白朋友,可查看:如何解決原型說明寫不全?

本期:輸入組件通用規范

概述:涉及輸入框、數字輸入框、選擇框、選擇器等組件樣式、交互、可控參數的通用規范。

1. 通用基礎樣式

本節主要與研發約定默認實現內容,通過規范文檔維護。

1、默認:即最基礎的樣式

2、懸停:可輸入組件,在鼠標懸停時需有交互,表示此組件可操作

3、獲取焦點/選中:當前窗戶聚焦的組件,需顯示對應樣式

4、完成:輸入/選擇完成的樣式

5、只讀:內容可復制,但不能更改、輸入

6、禁用:無法與用戶交互,如無法復制或者輸入

7、溢出:內容溢出需有良好交互,以便用戶及時獲取所需內容

  • 輸入框:溢出截斷,光標移動至邊緣后,推動文本往反方向移動
  • 單選框:溢出截斷即可
  • 復選框:選項溢出則向下拓展選擇框,選項內文字溢出則用“…”代替

2. 通用基礎交互

本節主要與研發約定默認實現內容,通過規范文檔維護。

2.1. 一鍵清除

輸入框、選擇器等需填入內容的組件,需默認支持一鍵清除,如場景中無需,則在組件中說明。具體交互如下:

  • 有填入值時鼠標懸停,右側圖標切換為“清空”狀態,點擊清空選項。
  • 無填入值時鼠標懸停,不顯示

2.2. 通用反饋

1、必填項未填:失去焦點/提交表單時,必填項內容為空,則出現此提示

2、加載中:失去焦點后需調用時間較長的接口進行數據校驗,則此時組件為“禁用”樣式,并有“加載提示”

3. 約定可控參數

本節主要與研發約定原型中可控制的參數,也通過規范文檔維護。文中會提供示例參數,及參數填寫說明。

3.1 操作反饋

在用戶操作時,可提供反饋提示,以引導用戶做出正確操作。提示信息簡明扼要,控制10字內。提示類型涉及信息、加載、正確、錯誤、警告,以便應用于各場景

說明編寫方式,在組件說明的最后一條加上“操作反饋”,如:

1)其他說明點…

2)操作反饋:

事件,提示類型“文案”,如:

  • 獲取焦點時,消息提示“請輸入XXXX”
  • 失去焦點時,加載提示“字段校驗中”?
  • 用戶名重復時,錯誤提示“該用戶名已被占用”
  • 輸入內容不符合規則時,警告提示“用戶名必須為6至20位字母或字母+數字組合”

結語

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

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

題圖來自Unsplash,基于 CC0 協議

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 很好??,很多系統輸入框設計的很差,體驗很不好,建議直接抄你這個

    來自廣東 回復