如何用Toggle 和 Radio Buttons

toggle本质是数字开关,2个相反的选项切换。Radio button 本质是分频单选
Radio button 比toggle swith 更适合日历标记。Toggle-Switch Guidelines nngroup.com 给了非常好的指南。

 

我在用薄荷软件记录生理期时,App让我用toggle swith标记,很别扭。因为我下意识操作去从日历中去勾选,可日历中毫无反应。这个开关让人疑惑。

于是,我找来Norman的文章读,文章操作性很强。

 

再对比其他同类App,均是用基于radio button的设计,去解决勾选问题,其中有些软件很优秀,选中一个日期,自动续选5天,界面一目了然。

同时也发现,在一个登陆界面,用toggle switch勾选privacy条款,我觉得设计师误会了条款,用签署tick,而不是数字开关switch,因为一旦同意无法关闭。
 
toggle 设计注意事项

 

1.不同状态,区别明显

 

2.即刻呈现状态改变效果,无需CTA确认;

 

3.习惯上默认,左off 右on

 

4. 前后页面体系一致 

 

5.标签简洁、非中立;

 

 
结论:
toggle本质是数字开关,2个相反的选项切换。Radio button 本质是分频单选
 
When I used the Mint app to track my menstruation, the app asked me to mark it with toggle swith, which was awkward. I subconsciously went to check the box from the calendar, but the calendar did not respond. This switch was confusing. 
 
 
I read Norman’s post and find it is very excellent guideline. Other similar apps, all they are based on the design of the radio button to solve the track problem, some design is so good, that you select a date, automatically renewed 5 days, the interface is obvious at a glance. Occasionally,I found one app uses toggle swith as confirmation in the privacy terms. I think the designer misunderstood that the tick means signature not switch.Because once you agreed, you can’t close it.
 
 
toggle design Tips
  1. 1.Make different states obvious
  1. 2.Deliver Immediate Results, without CTA confirmation.
 
  1. 3.Follow Standard Visual Design, left off right on
  2.  
  1. 4.Implement Consistently
  2.  
  1. 5.Provide Concise, Nonneutral Labels
toggle is a digital switch essentially, with two opposite options to switch,While radio button is a crossover radio selection.