輸入組件通用規范
開發吐槽原型說明不清晰,領導催促原型要快細節再說,真是夾縫中生存的產品。今天教大家一個方法,既快又全。
對原型規范&說明模板不明白朋友,可查看:如何解決原型說明寫不全?
本期:輸入組件通用規范
概述:涉及輸入框、數字輸入框、選擇框、選擇器等組件樣式、交互、可控參數的通用規范。
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 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
很好??,很多系統輸入框設計的很差,體驗很不好,建議直接抄你這個