网站设计中按钮如何设计更加合理

切换按钮应该做三件事 – 更改状态，显示当前状态，以及显示未选择的选项。如果您的切换按钮不能完成所有这些操作，则其可用性较差。

许多单个切换按钮在显示当前状态或使未选择的选项可见时失败。他们很难做到正确，因为用户只有一个按钮来切换状态。单个切换按钮是否应显示状态或第二个选项？

许多设计师错误地在切换按钮上显示状态。这种做法很糟糕，因为它隐藏了用户的第二种选择。他们无法知道它与国家相结合。

在上面的示例中，跟随某人的操作将状态和第二个选项组合到一个切换按钮中。当用户按下“跟随”时，按钮变为“跟随”，但是取消关注选项不可见。用户必须按下“跟随”按钮才能取消关注某人，这一点并不清楚。

有时，用户不会看到“关注”。相反，他们只会看到“取消关注”选项。现在用户不确定他们是否跟踪此人。他们必须假设取消关注状态意味着他们“跟随”那个人。

在这两种情况下，很明显如何关注某人但不清楚如何取消关注他们或者他们是否已经关注他们。当您不显示当前状态并向用户显示辅助选项时，会发生这种混淆。

要清除混淆，请通过在配置文件数据旁边的文本标记中显示切换状态来将状态与第二个选项分开。用户会注意到“跟随”徽章，并知道他们正在关注谁。按下时，跟随按钮切换为“取消关注”，因此用户可以看到未选择的选项。

如果您正确设计，切换按钮是有用的控件。单个切换按钮比多个切换按钮带来更多挑战。如果你确保它遵循这三个要求，你将毫无困难地克服它们。

1. 改变状态
2. 显示当前状态
3. 显示未选择的选项