GUI设计禁忌1、使用了错误的控件.doc

GUI设计禁忌 之一 使用了错误的控件一、混淆复选框和单选按钮 复选框和单选按钮是比较常见的两种不同控件，但是很多人不知道它们到底有什么区别。 单选按钮用于从多个值中选择一个，每一个值对应一个按钮，这多个值在逻辑上就是一组按钮，每次选择都只能选中一个。有的GUI工具包把单个的单选按钮作为一个控件，有的GUI工具包把一组单选按钮(可以根据某个属性来确定数目)作为一个控件。在前一种情况下，需要自己编写代码实现同组单选按钮的选项互斥。 复选框用于从两个相反的值中选择一个。不管在什么GUI工具包中，复选框总是一个独立的控件。尽管经常看到很多复选框成组出现在页面上，但是每个复选框和其他复选框之间是独立的。比如下面这个例子所显示的这样：这是博客园为文章设置分类的部分。各个选项之间都是独立的，选择Database并不影响是否选择GUI这一项。 下面是几种混淆复选框和单选按钮的错误： 单独的一个单选按钮：这等于说是告诉用户这里可供选择，却又让用户没有选择余地 把复选框当作单选按钮：两个具有相反值的单选按钮和一个复选框是等价的，所以不要把复选框当作单选按钮，从而出现相反值能同时选中的情况 互斥的复选框：复选框的各个选项之间是独立的，不存在互斥关系 要避免这类错误，首先要清楚复选框和单选按钮的区别。单选按钮用于从多个选择中选出一个，它适用于以下情形： 选项数目固定，并且只有28个 面板上有足够的空间，能显示所有的选项 如果选项数目不固定，或者选项数目比较多，一般使用下拉菜单或者滚动列表框代替单选按钮。 有时候我们会看到一组复选框，虽然各项之间相互独立，不能互斥，但是有时我们会让用户选择有限数目的项，比如选择5个你最喜欢的内地女歌手。在这种情况下，可以在用户的选择超过最大限制时，拒绝选中或者给出声音等提示。但是千万不要自作聪明地把用户已经选好的项取消掉，一个原因是用户未必能注意到这种改变，另一个原因是即便用户能注意到某个项被取消选中，他们也不明白为什么取消的是这一项而不是那一项。二、在非开关设置中使用复选框 复选框用于从两个相反的值中选择一个，而不仅仅是二选一。所以，遇到“启用/禁用”,“可见/不可见”等明显相反的值时，可以使用复选框(也可以用具有两个值的单选按钮)。但是遇到“红色/绿色”这种并非相反的值时，是不能用复选框的，只能用单选按钮或者下拉菜单等控件。有一款游戏叫“孤胆枪手”，进入游戏前，有一个复选框用于选择怪物血的颜色。默认是绿色，如果勾选了复选框，怪物的血就变为红色。这其实就是不对的。勾选复选框表示怪物的血是红色，那么不勾选表示怪物的血不是红色，但是“不是红色”是一种什么颜色呢？尽管这个选项对大多数人不会有什么影响，但是有些人对红绿色有些识别障碍，他们或许会遇到一些不便。三、把命令按钮当作开关 很多GUI工具包都有“按钮”这类控件。这些按钮会触发一个事件或者调用一个操作。但是有些人错误地把这种命令按钮当做了开关控件，也就是点击某个按钮，打开开关或者由模式A切换到模式B；再点击同一个按钮，关闭开关或者由模式B切换回模式A。 这种做法是不对的。用户无法预料，点击这个按钮会有什么事情发生。有些人会认为，可以在点击了按钮后，立即改变按钮上的标签，用来标记当前的状态。不过，按钮那么小，用户基本上不太会注意它的标签是否发生变化，因为他们的注意力本来就不在于此。即便他们发现了一个按钮的标签发生了变化，也需要花费一些时间，去猜测这个按钮上的标签为什么变了。 正确的做法是，用复选框当做开关，或者其他专门设计来做开关的控件。 四、把选项卡当作单选按钮 选项卡主要用于GUI上有较多设置，无法在一个界面上一次性全部显示的情况。选项卡是一个用于导航的控件，在一组选项卡不同的面板之间切换，只能呈现不同的内容，不能影响不显示的面板上的数据或者应用程序最终的行为。比如，不能因为从面板A切换到面板B，用户在面板A上所做的修改就全部生效。这是不对的(一般情况下，必须由用户自己手动点击了“确定”按钮后，才能生效)。windows xp的“鼠标属性”对话框对于选项卡的使用是正确的： 五、太多的选项卡 选项卡的每一个面板都有一个标签，这个标签的内容有时候比较长，当面板比较多的时候，选项卡的宽度可能就不能容纳所有的标题内容了。到现在为止，还没有好的方法来解决这个问题： 拉宽选项卡宽度：但是有可能面板的内容并不多，却因为标题的缘故浪费了空间 在选项卡四周放置标签：问题是用户可能很想知道上方的标签是不是比下方的标签更重要一些(实际上它们是同等重要的) 通过使用缩写等方式缩短标签：缩写对于用户而言可能是模糊的含义，而且有些语言没有缩写词 长标签分成两行：这需要GUI工具包支持才行。将一个长单词分成两行会影响用户的阅读。同时，单行标签和两行标签同时存在，也是很难看的。 把选项卡排列成多行：windows xp的“声音和音频设备属性”对话框就是这样一个例子： 相信大家都有同样的经历，在左图显示的界面上点击了“音量”标签，出现了右图显示的界面，此时鼠标位置没有变，但是“音量”标签却变到了第二行。很多时候，我都需要花费一两秒钟来寻找我刚刚点击的标签去了哪里。时间长了，我知道这种方式会让我点击的标签移动位置，但是我仍然需要花费时间去寻找它。假如点击了某个标签，该标签仍停留在原来的行，而不是最接近面板内容的行，用户的确不用去找它了，但是它离面板内容有些远，让我们不太确定到底哪个标签和当前面板内容对应。 以上五种方法都没有很好地解决选项卡的面板过多带来的问题，所以，最好的方法就是避免在一个选项卡中有太多面板。假如面板数目不太好协调，而稍微增加一点选项卡宽度就可以解决问题，也可以稍稍增加选项卡宽度。要记住，永远不要把标签排列成多行。六、为永久只读数据提供输入控件 一个比较常见的错误是使用输入控件(文本框，复选框，单选按钮等)表示用户在当前界面永远不可编辑的数据。有些输入控件虽然初始状态时不可编辑的，但是界面上有办法激活它，这样的控件不在此列。这类错误的例子仍然来自于windows xp。请看windows xp的“区域和语言选项”对话框： 这会引起用户误解。或许他们会尝试着在界面上找到启用这五个文本框的方法。 不可编辑的数据永远不能在那些看上去可编辑或者可操作的控件中显示。即使通过禁用控件的方式灰化，用户也会花费额外的时间，尝试激活这些被禁用的控件，因为它们看上去就是这样的。对于这种不可编辑的数据，应该用静态文本来显示。当然有一种情况是例外的，就是使用滚动文本框显示冗长的不可编辑文本，例如收到的电子邮件信息，软件许可协议等。七、对于本应该有输入约束的字段使用普通文本框 文本框是最常见的控件之一，但是单纯的文本框没有提供数据格式指导，也没有提供输入值是否有效的提示。像电话号码，Email地