这是一个系列连载，
UI设计培训老师上节内容谈到了搜索的设计细节，有兴趣的同学可以去回顾一下。
UI设计培训老师整理的这篇内容我们来学学怎么做好开关的设计。
作为控件中重要的组成之一，开关不仅仅被看成是“开”和“关”这两种动作，更深层次的看，更应该被理解成一种人机交互的延伸。
开关样式1 标准分离式开关
（1）标准化iOS和Android开关
最常见的开关设计，也是最原始规范的，除了颜色以外，基本遵循了开关固有的圆角矩形和圆形点。
以打开彩色，关闭灰色为代表的两大平台默认标准开关
（2）各种带有创意特色的分离式开关
加入缩微的图标或文字来增加乐趣，比如ON和OFF，勾和叉图标或是白天与黑夜中太阳与月亮的对比表现。
满足分离式开关特性后，就可以添加很多极富创意的想法。
然后有些时候过于创意而忘记了用户感受，比如这一组对应，夜间和白天的背景为相同颜色，就可能带来混淆。
开关样式2 开启和关闭的状态
（1）触发式状态的开关表现
形象的表现，通常以单次触发在原有位置上的造型变化或颜色变化。
iPhone自带相机中的实况照片开关状态
视频网站中的弹幕开关状态
美颜相机中的夜拍开关状态
（2）音乐中的播放与暂停
在此类产品中，播放与暂停就是两种状态，播放对应三角形图标，暂停对应两根竖线图标，给人很直观的操作感。
上图中，播放与暂停还增加了toast提示，显得非常多余。
（3）文字类的开关状态
豆瓣、抖音等社交软件的好友关注，其形态也属于开关的一种，以文字形式出现。
抖音和豆瓣的关注区别就是一个+号，而取消关注，明显抖音显得更为直白，即你不喜欢我，可以取消。
高德地图的下车提醒，除了开启与关闭的文字提示外，还有按钮颜色区分
（4）颜色变化类突显状态
白天和黑夜由图标切换，从背景的变化来分辨当前的状态
通过以上的分析，我们大致可以把开关分为两类：
第一类，表示操作，比如：
开启/关闭 订阅/取消订阅 关注/取消关注 展开/收起
第二类，表示状态，比如：
已开启/已关闭 夜拍开/夜拍关 已关注/已取关
最后通过三个同类产品中相同功能的开关对比，理解开关在设计中的运用到底有哪些方式。
1，激萌FACEU。默认的分离式开关，它的夜拍模式很明显是关闭的，再次点击可以开启。
2，美颜相机。图标状态显示它的夜拍模式是关闭的，再次触发可开启。
3，美图秀秀。图标状态显示它的夜拍模式是关闭的，并且上方会以非模态提醒用户，再次触发可开启。
哪一种设计得更好呢？相信你已经找到答案了。
————————————————————————
下集
UI设计培训老师将给大家系统分析《页码控制器》这个控件，敬请期待。
谢谢，记得点赞哦~！
源自名校
学院资质
专注16年
400-616-2336
刘老师
返回顶部