按钮的状态和功能

　　前几天偶尔看了一款触屏产品的GUI设计，发现了一个问题。下图是某个应用的开关，你能看明白吗?

　　“on”表示的是当前状态是“开”，还是表示当前状态是关，点击后打开呢?

　　“off”表示的是当前状态是“关”，还是表示当前状态是开，点击后关闭呢?

　　图一

　　下面是iphone的GUI中的开关，展现的很清楚。

　　“on”表示的是状态，即当前为“开”，点击后会关闭

　　“off”表示的是状态，即当前为“关”，点击后会打开

　　图二

　　出现这种问题在于设计者没有考虑到视觉传达(开和关都是蓝色，用户无法进行判断)，只是照着葫芦画瓢，仿制ipone的GUI。因为没有把握到本质问题，反而出现了严重的可用性问题。

　　要说清楚这个问题，关键不在于视觉传达，而在于交互设计中，对按钮类型的定义。所有的按钮都可以分为以下两个大类：

　　表示当前状态：即当前的按钮表示的是当前的状态，点击后会切换到另一个状态。下图的单选按钮和复选框就是典型的表示状态的按钮。

　　图三

　　表示功能：即当前的按钮表示的是某一种功能，点就后就会激活这个功能。下图的播放、暂停和停止就是典型的表示功能的按钮。

　　图四

　　出于使用习惯，在设计时会将两个(或多个)相反的功能设计成为一个按钮，例如“播放和暂停”、“选中和未选中”、“打开和关闭”等。在设计时就要充分考虑到如何进行恰当的视觉传达，使用户很容易的区分出当前按钮到底是表达功能，还是表达状态。

　　在图二中，苹果的开关设计，很巧妙。它使用颜色的习惯用法(与彩色搭配时，一般灰色表示未选中、取消、关闭等意思)来表达出按钮上的文字“on”和“off”是状态，而不是功能。

　　在设计按钮时，一定要明确的传达出按钮到底是表示功能还是状态。图五是最常见的设计方法。

　　图五

　　文章来源：blog.sina.com.cn/mingqin1