radio單選組件
視頻及原型文件下載:https://study.163.com/course/courseMain.htm?courseId=1209770824&share=2&shareId=400000000540015
定義:應用于列表中兩個或兩個以上互斥的選項滔韵,用戶必須從中至少選定一個泳叠。
交互原則:
1袒餐、將單選框只用于設(shè)置河劝,單選框更改設(shè)置场仲,而不是像使用行動按鈕那樣來執(zhí)行命令橄唬。
2、選項應該易于理解且容易區(qū)分耙厚,單選框存在的一個最大可用性問題是選項中包含模糊强挫、誤導、難懂的內(nèi)容薛躬,用戶一般很難理解俯渤。例如:男、女型宝、不確定八匠。
3絮爷、始終提供一個默認的選項。
4梨树、垂直展示列表坑夯,水平排列的單選框選項不易于用戶快速瀏覽定位。
5劝萤、將整個標簽選項作為點擊區(qū)域渊涝,單選框所占空間很小慎璧,所以床嫌,根據(jù)菲茨定律,它們很難被點擊胸私。為了擴大點擊區(qū)域厌处,我們應讓用戶不僅能點擊那個圓點,還可以點擊整個選項岁疼。用戶可以通過點擊圓點和跟隨其后的選項完成選擇阔涉。
6、使用單選框代替下拉列表捷绒,如果選項少于7個瑰排,應考慮使用單選框。
7暖侨、避免嵌套椭住,使用單選框時應盡量避免與其他單選框或checkbox嵌套。
交互說明:
1字逗、【默認狀態(tài)】:默認單選框是哪個選項是選中的京郑,例如:默認單選框組中,默認選中“已提交”葫掉;
2些举、【狀態(tài)改變時】:單選框選中的狀態(tài)發(fā)生改變時,會影響到哪些元素俭厚,例如:會員選擇字段選項“其它”時户魏,下面加載顯示輸入框,輸入具體的內(nèi)容挪挤;
3绪抛、【單選框組中的選項枚舉】:將所有的選項枚舉出來,告訴研發(fā)同學电禀,具體的數(shù)據(jù)內(nèi)容或來源幢码,例如:會員類型為:金牌會員、銀牌會員尖飞、銅牌會員症副;
使用場景:
1店雅、選項低于五個時,且為單選贞铣;
2闹啦、和select的區(qū)別是選項全部展示出來。
例如:boss直聘填寫個人信息時辕坝,性別選擇男女時窍奋,就是一個radio單選組件。
視頻及原型文件下載:url.cn/5DBHMuo