原型說明咋寫-復選框
開發吐槽原型說明不清晰,領導催促原型要快細節再說,真是夾縫中生存的產品。今天教大家一個方法,既快又全。文末提供模板,可直接用。
步驟一:約定規范
如圖,與開發、UI約定組件規范,并維護在獨立文檔中。
步驟二:使用模板
如圖,Axure可將帶說明的通用組件置入元件庫,出原型時使用;開發看到組件,則使用約定規范;墨刀同理。【PS:想了解word如何使用,請評論留言哈】
那么,規范與模板應該怎么寫?本系列將通過“通用、輸入、輸出、反饋”四類約43個常用組件及3篇頁面(表單頁、列表頁、詳情頁)寫法,將規范與模板分享予您。強烈建議點個【關注】或【收藏】不迷路。
以下,enjoy~
當前為本系列第7篇,剩39篇。
復選框,適用于多個勾選框綁定到同一個數組的情景,通過是否勾選來表示這一組選項中選中的項。單獨使用可以表示兩種狀態之間的切換。若選擇項超過5項,建議使用下拉選擇器。
1. 約定規范
本節為開發與設計師默認要實現的內容;以及產品會通過哪種形式約束哪些參數,通過一份規范文檔維護。
1.1樣式規范
+多選框默認方形,選中時填充方形/打勾,并呈現主題色
+可根據頁面要求,定義選項間距參數等,未定義則使用默認值
+可定義樣式:“帶框樣式”、“組合按鈕樣式”,樣式需覆蓋基礎狀態,未定義則使用默認樣式
1.2. 交互規范
基礎狀態及操作
+鼠標移入選項,對應選項呈懸停樣式(熱區為圖標與文字區域)
+禁用狀態下,無懸停效果,也無法選中;
+單擊選項,切換為選中狀態
-再次單擊,取消選中
-單擊其他選項,增加選中,不取消原有選項
-當選擇數量達到最大可選時,單擊未選中項,toast提示:已達最大可選數;
“全選”操作
+“全選”按鈕默認排第一位,選中則全選所有選項,取消選中則全不選
+選中所有選項后,“全選”自動選中
+僅選中其中一個選項,或未選滿,不自動選中“全選”
排版說明
+選項之間會隨著選項文字數調整間距,使選項間距始終一致。
+在有限橫向范圍內,一行放不下所有選項,則換行顯示。(注:非文字換行)
1.3.可控參數
+狀態:可用/禁用
+選項:將選項寫在說明中,不建議在通過原型維護,因為要照顧排版,較浪費時間
+默認值:默認選項
+帶全選:帶/不帶,帶全選則占用第一個選項為“全選”按鈕
+選擇數量限制:0~N,即可選范圍大于等于0個,小于等于N個,“全選”項不計數
+操作后置結果:選擇后,將影響關聯數據表數據及剩余可勾選的選項數量
2. 產出模板
組件名稱前加個“規范”,便于通過此標識讓團隊知道此組件已編制規范。
組件名稱:規范-復選框
+狀態:可用
+可選項:選項1、選項2、選項3
+默認值:選項1
+帶全選:不帶
+選擇數量限制:0~N
+操作后置結果:暫無
結語
本系列持續更新,喜歡的朋友請點個【關注】或【收藏】,您的鼓勵是我們持續分享的動力。
本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!