GUI设计禁忌 之九 ——不好的布局和窗口位置

一、容易忽略的信息

    人们总是会忽略一些信息,并且忽略的信息总是比接受的信息多。这是人类认知的规律,不是错误。所以,重要的信息都应该比其他信息突出显示,比如大的字体,比如不同的颜色。但是有些开发人员并不考虑用户的注意力。他们会犯以下错误:

  • 太小或者太普通:有些重要信息所在的区域非常非常小,或者它们的字体和颜色与其他内容一样,这样的信息将湮没在整个界面中。除非它们在移动或者非常亮。
  • 信息位于用户关注区域之外:人类的视觉活动只有在视觉中心位置的一小块地方是敏锐的。把重要信息分散到页面各个角落,很容易让用户来回切换关注点。
  • 大量雷同信息:比如下面这个例子中,两行文本中只有两个字不同,这让用户很难区分:

    

    为了避免这样的错误,需要遵循以下原则:构建一个视觉层次结构,让用户能逐层地定位信息;让重要的信息变大,但是不要满屏幕都是大字体大符号;将重要信息放在用户正在注视的地方,比如光标闪烁的地方;颜色高亮显示,比如红色或者橙色;图形和符号比文字更吸引人。

    即便这样,用户仍然有可能会忽略信息。不过有三个特殊手段,一定可以让用户无法忽略:对话框/弹出窗口、声音、振动和动画。但是这三种手段都应该少用:弹出对话框,用户需要多点击一次鼠标;在有噪音的地方,声音也没有什么好的效果;持久的振动和动画会让用户注意力转移到动画上去。

二、对话框控制按钮和内容控制按钮混合放置

    有很多对话框将标准按钮(确定、应用、关闭、取消、帮助、是、否、重试、放弃等)与控制特定数据或设置的按钮放在了一起。

    这是一种错误。首先,控制特定数据的按钮和数据离得太远,很难发现其中的联系。其次,用于控制整个对话框的按钮和其他按钮没有外观上的区别。

三、不恰当地使用组合框

    这种错误有几种变体:

  • 单个设置外加组合框:组合框的左上角有个缺口,可以设置组合框的标签,有些程序员就把组合框的标签当做组合框内部唯一的控件的标签。这种用法忽略了组合框的真正用途“对控件进行分组”。很多GUI控件本身也有边界,所以想把组合框当做边框也是多余的。但是注意一个特例,单选按钮虽然是表示单个设置,但是用组合框框起来有助于将其与附近其他单选按钮组分开。对于下面示例中的绿色框的内容,我们不提倡,因为它下面没有其他单选按钮了。

    

  • 组合框外再加组合框:这会导致不必要的显示混乱。当界面上用做边界的线条比较多时,用户需要花费一些时间,弄清楚谁和谁是同层次的。
  • 整个窗口就是一个组合框:这种用法很可笑,这个组合框不管带不带标签文本,都是多余的。

    

    windows xp的鼠标属性对话框是一个正确使用组合框的例子:

    

    使用组合框是为了将控件分组,而不是为某个控件设置边界。过多的组合框会让界面混乱,所以要少用组合框。空白和分割线,同样可以起到分组作用,所以能不用组合框就不要用组合框。

四、单选按钮之间距离过大

    单选按钮的选项之间间隔太大,会让它们看上去没有什么关联,甚至会让用户弄错它们的分组。在下面的例子中,横向的单选按钮是一组,但是看上去纵向才是一组:

    

    很多程序员理直气壮地说,不是有标签吗,看看标签就知道如何分组了。那好吧,下面这个例子呢:

    

    用户绝对可以通过几秒钟时间弄清楚标签的分组,但是这几秒钟会让他们失去对原来任务的感知,他们不得不花费更长时间回想自己原本的任务是什么。

    前面已经介绍了几种避免此类错误的方法:组合框,空白,分割线。还有一种方式,就是不同组的单选按钮距离不规则,也能让用户一眼就分辨出分组情况。

五、标签和数据字段之间的间隔太大

    有很多程序员为了让界面“好看”,将标签左对齐,字段控件右对齐,看上去真的很整齐:

    

    但是标签和它们对应的字段控件距离大的也太离谱了吧?而且有些页面的布局还会因为显示器的宽窄而变化。遇到更宽的屏幕,这个距离还会变大。

    还有一种更严重的错误,就是标签和它自己对应的控件之间的距离,比这个标签和其他数据字段之间的距离还要远。

    要避免这类错误,可以通过遵循以下四条简单规则来实现:

  • 不要将标签和它们对应的字段控件放在界面的两个相反的边缘
  • 防止少数长标签影响整个表单的对齐:

    

    一种解决方法是把长标签分为两行,另一种做法是将长标签对应的控件适当缩短。

  • 标签和它自己的字段控件之间的距离,应该比该标签和其他字段之间的距离近:比如让标签右对齐,或者将标签宽度调整为文本长度,不要让标签宽度比文本长出太多,以至于看上去标签文本距离控件很远。
  • 将标签放在字段上方

    在对齐标签的时候,一定要注意和当前的平台一致,windows的系统都是左对齐,而Mac、Unix和linux都是右对齐。

六、标签对齐方式不一致

    标签如果放在控件左侧,就有左对齐和右对齐两种对齐方式。一个很普遍的错误就是一些地方是左对齐,一些地方是右对齐。一种情况是不同页面上,对齐方式不同。这绝大多数是因为不同的人有不同习惯,而整个项目又没有统一对齐方式引起的。第二种情况是同一个页面上对齐的方式不同。这可能是因为有些内容是平台提供的,还有一些内容是程序员写的。

    不管怎样,在一个软件或者网站中,一致性是很重要的。虽然标签对齐方式对于用户使用造成不了什么大的影响,但是用户会感觉很不专业,他们会觉得同一个界面上对齐方式都不一样,开发人员在开发过程中,到底有没有用心呢?

七、窗口的初始位置不合适

    大多数应用程序都有一个主窗口和一些其他窗口。这些窗口最开始的位置放在哪里,也存在一些错误:

  • 在同一个坐标显示所有窗口:窗口位置是由其左上角在屏幕中的坐标决定的,大多数开发工具设置的默认值就是左上角(0,0)。很多程序员为了自己少写代码,就使用默认值,结果所有新窗口,都叠放在左上角。有些程序员会稍微变通一下,让所有子窗口都位于父窗口某个特定位置,但是却忘了让子窗口交错放置。
  • 子窗口盖在父窗口上方:如果子窗口完全盖住父窗口,用户可能会以为父窗口被关闭了;如果子窗口部分盖住父窗口,用户很难区分自己看到的内容中,哪些是父窗口的,哪些是子窗口的。而且,子窗口会覆盖父窗口的重要内容,比如菜单。
  • 不在屏幕上显示子窗口:有些子窗口只能在父窗口范围内活动,有些子窗口却可以被拖动到父窗口之外。假如某个子窗口被设计的初始位置在父窗口之外,而父窗口本身占满了屏幕,那么子窗口只能显示在屏幕之外了。

    以下原则可以帮助避免大量窗口堆积在一起:

  • 确定每个窗口的开始位置
  • 最佳位置取决于窗口类型:错误对话框、确认对话框、信息对话框都应该在屏幕中心显示;主窗口和基本窗口应该在屏幕任意位置显示,只要不在同一位置即可
  • 如果可以的话,记录窗口关闭之前所在的位置,以便下次在此位置打开
  • 窗口应该总是在屏幕中完整显示
  • 连续出现的同一类型的窗口要交错放置,每一个新窗口都应该比前一个窗口向右下方偏移一些
  • 外部子窗口要和父窗口部分重叠,以便让用户知道,这个子窗口是可以移出父窗口的
  • 确保子窗口不会覆盖父窗口重要信息
原文地址:https://www.cnblogs.com/yuepeng/p/1957257.html