VB编程基础教程19-界面设计的基础

• 爱奇艺限时半价  |   30+正版软件打折  |   PD 虚拟机 7 折  |   RackNerd 黑五  |   京东 Plus ￥69

不必成为创建用户界面的艺术家－大多数用户界面设计的原则，与任意一门基础艺术课中所讲授的基础设计的原则相同。构图、颜色等的基本的设计原则，就象它们应用在纸张或油画上一样，也能很好地在一台计算机的屏幕上应用。
虽然 visual basic 能通过简单地将控件拖动并放置到窗体上而使得创建用户界面非常容易，但是，在设计之前稍微计划一下就能使应用程序的可用性有很大的改观。可能须先在纸上画出窗体开始设计，决定需要哪些控件，不同元素的相对重要性，以及控件之间的关系。
构图：应用程序的观感与感觉
窗体的构图或布局不仅影响它的美感，而且也极大地影响应用程序的可用性。构图包括诸如控件的位置、元素的一致性、动感、空白空间的使用、以及设计的简单性等因素。
控件的位置
在大多数界面设计中，不是所有的元素都一样重要。仔细地设计是很有必要的，以确保越是重要的元素越要很快地显现给用户。重要的或者频繁访问的元素应当放在显著的位置上，而不太重要的元素就应当降级到不太显著的位置上。
在大多数语言中我们习惯于在一页之中从左到右、自上到下地阅读。对于计算机屏幕也如此，大多数用户的眼睛会首先注视屏幕的左上部位，所以最重要的元素应当放在屏幕的左上部位。例如，如果窗体上的信息与客户有关，则它的名字字段应当显示在它能最先被看到的地方。而按钮，如“确定”或“下一个”，应当放置在屏幕的右下部位；用户在未完成对窗体的操作之前，通常不会访问这些按钮。
把元素与控件分成组也很重要。尽量把信息按功能或关系进行逻辑地分组。因为他们的功能彼此相关，所以定位数据库的按钮应当被形象地分成一组，而不是分散在窗体的四处。对信息也是一样，名字字段与地址通常分在一组，因为它们联系紧密。在许多情况下，可以使用框架控件来帮助加强控件之间的联系。
界面元素的一致性
在用户界面设计中，一致性是一种优点。一致的外观与感觉可以在应用程序中创造一种和谐，任何东西看上去都那么协调。如果界面缺乏一致性，则很可能引起混淆，并使应用程序看起来非常混乱、没有条理、价值降低，甚至可能引起对应用程序可靠性的怀疑。
为了保持视觉上的一致性，在开始开发应用程序之前应先创建设计策略和类型约定。诸如控件的类型、控件的尺寸、分组的标准以及字体的选取等设计元素都应该在事先确定。可以创建设计样板来帮助进行设计。
在 visual basic 中有大量的控件可供使用，这可能引起有人想使用所有的控件。为了避免这种引诱，选取能很好地适合特定应用程序的控件子集。虽然列表框、组合框、网格以及树等控件都可用来表示信息列表，最好还是尽可能使用一种类型。
还有，尽量恰当地使用控件，虽然 textbox 控件可以设置成只读并用来显示文本，但 label 控件通常更适用于该目的。在为控件设置属性时请保持一致性，如果在一个地方为可编辑的文本使用白色背景，除非有很好的理由，否则不要在别的地方又使用灰色。
在应用程序中不同的窗体之间保持一致性对其可用性有非常重要的作用。如果在一个窗体上使用了灰色背景以及三维效果，而在另一个窗体上使用白色背景，则这两个窗体就显得毫不相干。选定一种类型并在整个应用程序保持一致，即使这意味着要重新设计某些功能。
动感：窗体与其功能匹配
动感是对象功能的可见线索。虽然对这个术语也许还不熟悉，但动感的实例四处可见。自行车上的把手，手放在它的上面，动感会将把手用手扣紧这件事显现出来。按下按钮、旋转旋钮和点亮电灯的开关等都能进行动感表示— 一看到它们就可以看出其用处。
用户界面也使用动感。例如，用在命令按钮上的三维立体效果使得他们看上去象是被按下去的。如果设计平面边框的命令按钮的话，就会失去这种动感，因而不能清楚地告诉用户它是一个命令按钮。在有些情况下，平面的按钮也许是适合的，比如游戏或者多媒体应用程序；只要在整个应用程序中保持一致就很好。
文本框也提供了一种动感，用户可以期望带有边框和白色背景的框，框中包含可编辑的文本。显示不带边框的文本框 (borderstyle = 0) 也有可能，这使它看起来象一个标签，并且不能明显地提示用户它是可编辑的。
空白空间的使用
在用户界面中使用空白空间有助于突出元素和改善可用性。空白空间不必非得是白色的－它被认为是窗体控件之间以及控件四周的空白区域。一个窗体上有太多的控件会导致界面杂乱无章，使得寻找一个字段或者控件非常困难。在设计中需要插入空白空间来突出设计元素。
各控件之间一致的间隔以及垂直与水平方向元素的对齐也可以使设计更可用。就象杂志中的文本那样，安排得行列整齐、行距一致，整齐的界面也会使其容易阅读。
visual basic 提供了几个工具，使得控件的间距、排列和尺寸的调整非常容易。“排列”、“按相同大小制作”、“水平间距”、“垂直间距”和“在窗体中央”等命令都可以在“格式”菜单中找到。
保持界面的简明
界面设计最重要的原则也许就是简单化。对于应用程序而言，如果界面看上去很难，则可能程序本身也很难。稍稍深入考虑一下便有助于创建看上去（实际上也是）用起来都很简单的界面。从美学的角度来讲，整洁、简单明了的设计常常更可取。
在界面设计中，一个普遍易犯的错误就是力图用界面来模仿真实世界的对象。例如，想象一下要求创建完整的保险单的应用程序。很自然的反应就是在屏幕上设计完全仿照保险单的界面。这就做会出现几个问题：保险单的形状与尺寸和屏幕上的有很大不同，要非常完善地复制这样的表格会将其限制在文本框与复选框中，而对用户并没有真正的好处。
最好是设计出自己的、也能提供原始保险单打印副本（带打印预览）的界面。通过从原始保险单中创建字段的逻辑组，并使用有标签的界面或几个链接的窗体，就可以不要求滚动屏幕而显示所有的信息。也可以使用附加的控件，比如带有选取预装入的列表框，这些控件可以减少打字工作量。
也可以取出不常用的函数并把它们移到它们自己的窗体中去，来简化许多应用程序。提供缺省有时也可以简化应用程序；如果十个用户中有九个选取加粗的文本，就把文本粗体设为缺省值，而不要叫用户每次都选取一遍（不要忘记提供一个选项可以覆盖该缺省值）。向导也有助于简化复杂的或不常用的任务。
简化与否最好的检验就是在应用中观察应用程序。如果有代表性的用户没有联机帮助就不能立即完成想要完成的任务，那么就需要重新考虑设计了。
使用颜色与图象
在界面上使用颜色可以增加视觉上的感染力，但是滥用的现象也时有发生。许多显示器能够显示几百万种颜色，这很容易使人要全部使用它们。如果在开始设计时没有仔细地考虑，颜色也会象其他基本设计原则一样，出现许多问题。
每个人对颜色的喜爱有很大的不同，用户的品味也会各不相同。颜色能够引发强烈的情感，如果正在设计针对全球读者的程序，那么某些颜色可能有文化上的重大意义。一般说来，最好保守传统，采用一些柔和的、更中性化的颜色。
当然，预期的读者以及试图传达的语气与情绪也会影响对颜色的选取。明亮的红色、绿色和黄色适用于小孩子使用的应用程序，但是在银行应用程序中它很难带来财务责任心的印象。
少量明亮色彩可以有效地突出或者吸引人们对重要区域的注意。作为经验之谈，应当尽量限制应用程序所用颜色的种类，而且色调也应该保持一致。如果可能的话，最好坚持标准的 16 色的调色板；在 16 色显示器上观看时，抖动会使得其他一些颜色显示不出来。
使用颜色时另一个需要考虑的问题就是色盲。有一些人不能分辨不同的基色（如红色与绿色）组合之间的差别。对于有这种情况的人，绿色背景上的红色文本就会看不见。
图象和图标
图片与图标的使用也可以增加应用程序的视觉上的趣味，但是，细心的设计也是必不可少的。不用文本，图象就可以形象地传达信息，但常常不同的人对图象的理解也不一样。
带有表示各种功能的图标的工具栏，它是一种很有用的界面设备，但如果不能很容易地识别图标所表示的功能，反而会事与愿违。在设计工具栏图标时，应查看一下其它的应用程序以了解已经创建了什么样的标准。例如，许多应用程序用一张角上有卷边的纸来表示“新建文件”图标。也许还有更好的比喻来表示这一功能，但改用其它的表示方法会引起用户的混淆。
考虑图象文化上的意义也非常重要。许多程序使用田园风格的带一面旗的邮箱（图 6.21）来代表邮件功能。这原本是美国的图标；其他国家/地区或文化的用户也许不把它看作邮箱。
图 6.21 代表信箱的图标

在设计自己的图标与图象时，应尽量使它们简单。具有多种颜色的复杂的图片，作为 16x16 象素的工具栏图标，或者在高分辨率的屏幕上显示时，都不能很好地适应。
选取字体
字体也是用户界面的重要部分，因为它们常常给用户传递重要的信息。需选取在不同的分辨率和不同类型的显示器上都能容易阅读的字体。最好尽量坚持使用简单的无衬线字体或者衬线字体。通常手写字体或者其他装饰性字体的打印效果比屏幕上的效果更好，而且字体越小读起来越难。
除非计划按应用程序来配置字体，否则应当坚持使用标准 windows 字体，如 arial、new times roman 或者 system。如果用户的系统没有包含指定的字体，系统会使用替代的字体，其结果可能与设想的完全不一样。如果正在为国际读者设计，需要调查在预想的语言里可用什么字体。还有，在为其他语言设计时，需要考虑文本的扩展— 有些语言的文本串可以多占 50％ 以上的空间。
还有，在选取字体时，设计的一致性非常重要。大多数情况下，不应当在应用程序中使用两种以上字体。太多的字体会使得应用程序看上去象罚款通知单。

各种显示类型的设计

microsoft windows 是与设备无关的－基于窗口的应用程序可以在许多不同显示分辨率与颜色浓度的计算机中运行。同样，用 visual basic 编写的应用程序也会在不同类型的显示器上运行，在设计应用程序时需要考虑到这一点。
设计与分辨率无关的窗体
缺省情况下，当改变屏幕分辨率时，microsoft visual basic 不会改变窗体与控件的尺寸。这就意味着在分辨率为 1024 x 768 的屏幕上设计的窗体，在分辨率为 640 x 480 的屏幕中运行时会伸出屏幕的边界之外。如果想创建不管使用什么样的屏幕分辨率都能有相同比例的窗体和控件，必须在最低的分辨率下设计窗体，或者将改变窗体的代码添加到程序中去。
避免尺寸问题的最简单的方法是在 640 x 480 的分辨率下设计窗体。如果更喜欢在高一些的分辨率下工作，仍需要考虑窗体在低一些的分辨率下将如何显示。实现这一点的方法是用“form layout”窗口预览窗体的大小和位置。您也可以使用“resolution guides”观察在低分辨率时屏幕的哪些部分是可见的。要切换到“resolution guides”，可以在“form layout”窗口单击鼠标右键，从弹出菜单上选择“resolution guides”菜单项。
在运行时，visual basic 根据设计时的位置来放置窗体。如果设计时在 1024 x 768 的分辨率上运行，并把窗体放到屏幕的右下角，则当它在比较低的分辨率下运行时该窗体可能看不见。为了避免这种情况的发生，在设计时可从“form layout”窗口的弹出菜单选择“startup position”菜单项来设置窗体的启动位置。同样，您也可以在运行时用下面的 form load 事件中的代码来设置窗体的位置：
private sub form_load()
me.move 0, 0
end sub
若是设置窗体的 left 与 top 的属性都为 0 也能有同样的效果，但 move 方法只要一步就能完成。
visual basic 使用与设备无关的度量单位，缇，是用来计算尺寸与位置。screen 对象的两个属性 twipsperpixelx 与 twipsperpixely 可以用来确定运行时的显示尺寸。应用这些属性，可以编写代码来调整窗体以及控件的尺寸与位置。
private sub setcontrols()
dim x as integer
dim y as integer
x = screen.twipsperpixelx
y = screen.twipsperpixely
select case x, y
case 15, 15
‘ 重新改变控件尺寸及移动控件。
txtname.height = 200
txtname.width = 500
txtname.move 200, 200
’ 增加为其它分辨率编写的代码。
…
end sub
也需要知道在设计时 visual basic 自身窗口的位置。如果在高分辨率下把“工程”窗口放置到屏幕的右边，那么会发现在低分辨率下打开工程时，它不再是可访问的了。
设计不同浓度的颜色
在设计应用程序时，也需要考虑运行应用程序计算机可能的颜色显示能力。有些计算机可以显示 256 色或更多的颜色，而另一些只能显示 16 种颜色。如果使用 256 色的调色板来设计窗体，那么在 16 色上显示时，抖动（模仿无效颜色的一种方法）会使窗体上的一些元素消失。
为了避免这种情况，最好把应用程序使用的颜色局限于 windows 标准的 16 颜色。这些颜色由 visual basic 的颜色常数来表示（如 vbblack、vbblue 和 vbcyan 等等）。如果在应用程序中需要用 16 种以上的颜色，那么对于文本、按钮以及其他界面元素仍然应当坚持用标准颜色。

可用性设计

任何应用程序的可用性基本上由用户决定。界面设计是需多次反复的过程；在为应用程序设计界面时，第一步就设计出非常完美的界面的情况非常少见。用户参与设计过程越早，化的气力越少，创建的界面越好、越可用。
什么是好的界面
设计用户界面时，开始时最好是先看看 microsoft 或其他公司的一些卖得很好的应用程序。毕竟，界面很差的应用程序不会卖得很好。将会发现许多通用的东西，比如：工具栏、状态条、工具提示、上下文菜单以及标记对话框。visual basic 具有把所有这些东西添加到应用程序中的能力，这并不偶然。
也可以凭借自己使用软件的经验。想一想曾经使用过的一些应用程序，哪些可以工作、哪些不可以、以及如何修改它。但要记住个人的喜好不等于用户的喜好，必需把自己的意见与用户的意见一致起来。
还要注意到大多数成功的应用程序都提供选择来适应不同的用户的偏爱。例如，microsoft windows“资源管理器”允许用户通过菜单、键盘命令或者拖放来复制文件。提供选项会扩大应用程序的吸引力，至少应该使所有的功能都能被鼠标和键盘所访问。
windows 界面准则
windows 操作系统的主要的优点就是为所有的应用程序提供了公用的界面。知道如何使用基于 windows 的应用程序的用户，很容易学会使用其他应用程序。而与已创建的界面准则相差太远的应用程序不易让人明了。
菜单就是这方面很好的例子—大多数基于 windows 的应用程序都遵循这样的标准：“文件”菜单在最左边，然后是“编辑”、“工具”等可选的菜单，最右边是“帮助”菜单。如果说 documents 会比 file 更好，或者“帮助”菜单要放在最前，这就值得讨论一下了。没有任何事情阻止您这样做，但这样做会引起用户的混淆，降低应用程序的可用性。每当在应用程序与其他程序之间切换时，用户都不得不停下来想一想。
子菜单的位置也很重要。用户本期望在“编辑”菜单下找到“复制”、“剪切”与“粘贴”等子菜单，若将它们移到“文件”菜单下会引起用户的混乱。不要偏离已经创建的准则太远，除非有很好的理由这样做。
可用性的检测
测试界面可用性的最好方法是在整个设计过程中请用户参与。不论是正在设计大型的压缩包应用程序，还是小型的有限使用的应用程序，设计的过程应当完全相同。使用已创建的设计准则，界面设计应从纸上开始。
下一步是创建一个或者多个原型，在 visual basic 中设计窗体。还需要增加足够的代码来启动原型：显示窗体、用示例数据填充列表框等等。然后准备可用性测试。
可用性测试可以是个不拘形式的过程：与用户一道审查设计；也可以是在已创建的可用性实验室中进行的正式的过程。这两种方法目的是一样的：从用户那儿了解哪儿设计得很好，哪儿还需要改进的第一手材料。放开，让用户与应用程序在一起，然后观察它们；这种方式比询问用户更为有效。当用户试图完成一系列任务时让他们表达其思考过程：“要想打开新文档，所以要在‘文件’菜单中找一找。”记下哪些地方的界面设计没有反应他们的思考过程。与不同类型的用户一起测试，如果发现用户完成某个特定的任务有困难，该任务可能需要多加关照。
下一步，复查一下记录，考虑如何修改该界面使它更加可用。修改界面并再测试。一旦对应用程序可用性满意，就准备开始编码。在开发的过程中也需要不时地测试来确保对原型的设想是正确的。
功能的可发现性
可用性测试的关键的概念是可发现性。如果用户不能发现如何使用某个功能（或者甚至不知道有此功能存在），则此功能很少有人去使用。例如，windows 3.1 的大多数用户都从来不知道 alt 和 tab 的组合键可以用于在打开的应用程序之间切换。界面中没有任何地方可提供线索来帮助用户发现这一功能。
为了测试功能的可发现性，不解释如何做就要求用户完成一个任务（例如，使用“窗体模板”创建新文档）。如果他们不能完成这个任务，或者尝试了好多次，则此功能的可发现性还需要改进。