產(chǎn)品設(shè)計交互規(guī)范-radio單選組件(十四)

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末酱畅,一起剝皮案震驚了整個濱河市琳袄,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌纺酸,老刑警劉巖窖逗,帶你破解...
    沈念sama閱讀 211,948評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異餐蔬,居然都是意外死亡碎紊,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評論 3 385
  • 文/潘曉璐 我一進店門樊诺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來仗考,“玉大人,你說我怎么就攤上這事词爬⊥菏龋” “怎么了?”我有些...
    開封第一講書人閱讀 157,490評論 0 348
  • 文/不壞的土叔 我叫張陵缸夹,是天一觀的道長痪寻。 經(jīng)常有香客問我,道長虽惭,這世上最難降的妖魔是什么橡类? 我笑而不...
    開封第一講書人閱讀 56,521評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮芽唇,結(jié)果婚禮上顾画,老公的妹妹穿的比我還像新娘。我一直安慰自己匆笤,他們只是感情好研侣,可當我...
    茶點故事閱讀 65,627評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著炮捧,像睡著了一般庶诡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上咆课,一...
    開封第一講書人閱讀 49,842評論 1 290
  • 那天末誓,我揣著相機與錄音扯俱,去河邊找鬼。 笑死喇澡,一個胖子當著我的面吹牛迅栅,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播晴玖,決...
    沈念sama閱讀 38,997評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼读存,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了呕屎?” 一聲冷哼從身側(cè)響起让簿,我...
    開封第一講書人閱讀 37,741評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎榨惰,沒想到半個月后拜英,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體静汤,經(jīng)...
    沈念sama閱讀 44,203評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡琅催,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,534評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了虫给。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片藤抡。...
    茶點故事閱讀 38,673評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖抹估,靈堂內(nèi)的尸體忽然破棺而出缠黍,到底是詐尸還是另有隱情,我是刑警寧澤药蜻,帶...
    沈念sama閱讀 34,339評論 4 330
  • 正文 年R本政府宣布瓷式,位于F島的核電站,受9級特大地震影響语泽,放射性物質(zhì)發(fā)生泄漏贸典。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,955評論 3 313
  • 文/蒙蒙 一踱卵、第九天 我趴在偏房一處隱蔽的房頂上張望廊驼。 院中可真熱鬧,春花似錦惋砂、人聲如沸妒挎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽酝掩。三九已至,卻和暖如春眷柔,著一層夾襖步出監(jiān)牢的瞬間期虾,已是汗流浹背积蜻。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留彻消,地道東北人竿拆。 一個月前我還...
    沈念sama閱讀 46,394評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像宾尚,于是被迫代替她去往敵國和親丙笋。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,562評論 2 349

推薦閱讀更多精彩內(nèi)容