UI设计素材之按钮和选框，悠闲素材帮你轻松搞定设计。

UI 界面当中&＃xff0c;各种开关、按钮、选框控件是非常常见的组件&＃xff0c;它们看起来不复杂&＃xff0c;但是在实际使用的时候讲究非常之多&＃xff0c;它们不仅关乎体验&＃xff0c;而且涉及到一些界面逻辑问题。

英文中的 「Toggle」一词&＃xff0c;对应的是带有短柄的拨动式开关&＃xff0c;拨动它的时候&＃xff0c;能够在两种不同的状态之间切换。

至于 「单选按钮」&＃xff08;Radio Buttons&＃xff09;这一词则来自汽车收音机&＃xff0c;在老式的汽车控制面板上有一排机械的可以存储预设电台的按钮&＃xff0c;用户可以快速地按动按钮切换不同的电台。按下其中一个按钮&＃xff0c;其他的按钮会弹起&＃xff0c;这里的按钮是互斥的&＃xff0c;多个按钮无法同时被激活。

举几个可以临摹的例子&＃xff0c;看看优秀作品是如何操作的&＃xff0c;更多按钮图标 到搜UI(SOOUI) 根据关键词搜索&＃xff01;

果味开关

复选框&＃xff08;Checkboxes&＃xff09;则通常有一个或者多个选项&＃xff0c;供用户选择&＃xff0c;复选框内的选项通常不是互斥的&＃xff0c;用户可以选择一个也可以选择多个。

带有灯光和阴影PSD的开关

黑暗的必备开关和PSD切换

拨动开关&＃xff08;Toggle-Switch&＃xff09;则是最常见的一种按钮样式&＃xff0c;点击即可切换状态。

七彩切换/开关打开关闭

选择按钮&＃xff08;Choice Chips&＃xff09;是单选按钮一种精简模式&＃xff0c;它通常会包含有至少2个选项&＃xff0c;用户可以选择其中的一个&＃xff0c;选择按钮大多出现在移动端界面上。

按钮免费赠品V2

多选按钮&＃xff08;Multi-select Chips&＃xff09;则是复选框的一种通用替代品&＃xff0c;用户可以选择其中多个选项&＃xff0c;而这种按钮也大多应用在移动端设备上。

3个开关

各类选择控件已经在用户界面中存在了很长时间&＃xff0c;所以用户对于它的功能、认知以及期望是清晰的。下面是一个非常简单的清单&＃xff0c;列举出了绝大多数常见的选择控件的类型和使用场景&＃xff1a;