最近看到一个界面，开关的逻辑让我觉得不太对劲，但是我又找不出问题在哪。

在这个页面里，当前状态是日间模式，开关展示的是夜间模式，点击后页面切换为夜间模式。

也就是说，页面当前状态和开关上展示的状态是相反的。

还有一种做法，是页面状态和开关状态保持一致，即页面是日间模式，开关也是日间模式。如下图所示

这样看着好像舒服很多。

但当我看到QQ浏览器的夜间模式按钮时，就不淡定了：

在QQ浏览器里，正是文章开头的页面里的开关逻辑：

当前状态是日间模式，开关展示的是夜间模式，点击后页面切换为夜间模式。

操作起来，没有丝毫的违和感。

为什么QQ浏览器里，用这个逻辑就正常；文章开头的页面，就会觉得别扭？

无独有偶，知乎也和QQ浏览器是一样的逻辑：

再一次暴击。所以，到底哪种才是对的？我决定研究一下开关按钮。

提起开关按钮，最常见的莫过于以下这种：

灰色表示关闭，绿色表示开启。简单明了。这种开关，前面必须有一个主体词，以表示这个开关的意义：比如上图中绿框里的开关，前面的主体词是「夜间模式」。

「夜间模式」+开关的状态，共同表达了夜间模式的开启或关闭。

对比一下文章开头的例子，那个开关就没有主体词。

开关上有深色图标 +「深色」文案。开关上的「深色」两个字，显然不是开关的主体词，而是开关的状态。

在上图里，页面的状态是浅色，但开关展示的目前状态是深色，两者矛盾，所以会令人觉得奇怪，是不可取的。

那么为什么QQ浏览器里的那个按钮，就不会让人感到矛盾？

在上图中，当前页面是日间模式，按钮里展示的是「夜间模式」，点击后页面切换成夜间模式，按钮变成「日间模式」。

这个按钮实际上表达的是点击后的效果，而不是当前的状态。

对比一下这三种按钮：

第1种包含主体词+开关，开关表达夜间模式的开或关状态；

第2种只有一个开关，开关上展示当前处于浅色或深色模式；

第3种是一个按钮，展示的是点击后进入某种模式。

这3种形式，都可用于切换日间/夜间模式。但由于前两种都是开关的形式，因此展现的是当前页面的状态；第3种是按钮的形式，展现的是点击后的状态。

研究到这里，开关按钮总算研究清楚了。这个页面，可以有以下3种方案：

1）主体词+开关：

2）没有主体词，只用开关，但开关状态需要与页面状态保持一致：

3）如果想表现出切换后的效果，那么需要用按钮来表达：

今天研究了开关按钮的不同形式和用法。

你学废了吗？

Powered by Froala Editor