原型說明咋寫-級聯單選器
開發吐槽原型說明不清晰,領導催促原型要快細節再說,真是夾縫中生存的產品。今天教大家一個方法,既快又全。文末提供模板,可直接用。
步驟一:約定規范
如圖,與開發、UI約定組件規范,并維護在獨立文檔中。
步驟二:使用模板
如圖,Axure可將帶說明的通用組件置入元件庫,出原型時使用;開發看到組件,則使用約定規范;墨刀同理?!綪S:想了解word如何使用,請評論留言哈】
那么,規范與模板應該怎么寫?
本系列將通過“通用、輸入、輸出、反饋”四類約43個常用組件及3篇頁面(表單頁、列表頁、詳情頁)寫法,將規范與模板分享予您。?
=========強烈建議點個【關注】或【收藏】不迷路=========
本期組件:級聯單選器
組件概述:當一個數據集合有清晰的層級結構時,可通過級聯選擇器逐級查看并選擇。
一、約定規范
本節主要與開發、UI約定默認實現內容,并明確通過哪種形式約束交互;
本節內容可通過一份規范文檔維護。
1.基礎樣式
默認、懸停、完成樣式與常規輸入框一致。
2. 完成樣式
+完成樣式可定義:
- 顯示完整路徑:不同級別選項通過“/”區分
- 顯示最后一級:
產品可控參數
+完成樣式:顯示完整路徑/ 顯示最后一級
3.一鍵清除
+有選項時懸停,右側圖標切換為“清空”狀態,點擊清空選項。其中,點擊清空圖標之外,為選擇器基礎交互
+無選項時懸停,不做調整
產品可控參數
+帶清除:是/否
4. 展開面板
+展開收起:單擊輸入框,展開面板;點擊輸入框之外則收起
1)內容排布:按選項級別從左往右排列
2)子菜單觸發方式:
- 點擊觸發:點擊父級,切換子集內容
- 懸停觸發:鼠標懸停到哪個父級,則切換到哪個子集
- 展開方向:默認向下向右,當選擇器與窗口邊緣距離不夠放下面板時,需往距離夠方向展開
3)路徑記憶:收起面板,記憶上次路徑
+懸停與選中:都有對應交互
產品可控參數
+選項清單:建議通過說明維護選項,可通過序號區隔方式列出選項,如:
1)父級一
- 子集一
2)父級二
- 子集一
+選項排序:默認按清單順序排序
+默認選項:即默認選中哪個選項
+子菜單觸發:點擊/懸停
5.選項顯示
+可自定備選項顯示內容,一般用于顯示子集數量
產品可控參數
+選項顯示:顯示一級子集數量
6.選擇方式?
+默認選最后一級,支持選擇任意層級的選項
選任意級別交互:面板交互與普通選擇框一致;選項樣式切換為“單選框”,并繼承其交互?
產品可控參數
+選擇方式:最后一級/任意層級
7.面板滾動
面板滾動:內容過多,則面板需要滾動顯示
1)無特殊要求,默認最多顯示5個選項,超出滾動顯示(注意:第6選項需顯示一半,以提示用戶可向下滾動)
2)展開時,保留上次停留位置;無法保留(如頁面重新載入)則:
- 已選,默認定位已選項
- 未選,回到第一個
8.異常樣式????
+超出顯示范圍
- 已選項超長:超出部分省略
- 選項長度超長:拓展面板寬度,但不超出窗口邊界
+待選項為空:面板提示“無匹配數據”
+禁用:分為選擇框禁用、選項禁用,都要有對應樣式。一般要什么什么原因導致的禁用
產品可控參數
+禁用:XXX事件會導致選擇器禁用 / 導致某選項禁用
9.其他
+可搜索:支持通過輸入關鍵字,從待選項中搜索結果
+影響事件:獲取焦點、失去焦點、選中選項都可以產生影響其他組件的事件
產品可控參數
+可搜索:無需/支持,搜索方式默認為半匹配
+影響事件:選中選項,如果是XXX,則顯示XXX組件
2. 產出模板
組件名稱前加個“規范”,便于團隊識別規范組件
模板可直接寫入注釋,并存為Axure/墨刀元件庫
+組件名稱:規范-級聯單選器
+提示文案:請選擇
+選項清單:
1)父級一
- 子集一
2)父級二
- 子集一
+選項排序:默認按清單順序排序
+默認選項:無
+子菜單觸發:懸停
+選擇方式:最后一級
+完成樣式:顯示完整路徑
+帶清除:是
+禁用:無
+可搜索:支持,搜索方式默認為半匹配
+影響事件:選中選項,如果是XXX,則顯示XXX組件
結語
本系列持續更新,喜歡的朋友請點個【關注】或【收藏】,您的鼓勵是我們持續分享的動力。
本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!