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