用户界面设计规范.docx
《用户界面设计规范.docx》由会员分享，可在线阅读，更多相关《用户界面设计规范.docx（29页珍藏版）》请在冰点文库上搜索。
用户界面设计规范
用户界面设计规范
--------------------------------------------------------------------------------
[发表时间：
2005-10-1818:
06:
00来源：
中国艺术吧作者：
未知][字体：
大中小]
一个好的应用程序不仅要有强大的功能，还要有美观实用的用户界面。
界面设计不仅仅是编程的问题，也需要一定的美学修养。
用户界面是应用程序的一个重要组成部分，一个应用程序的界面往往决定了该程序的易用性与可操作性。
一、VisualBasic中用户界面的设计原则
VisualBasic通过在窗体上拖曳控件的方式为创建用户界面提供了非常简便的方法，窗体的设计和规划不仅影响到它本身外观的可观赏性，而且对应用程序的可操作性也有很重要的作用。
一个良好的用户界面并不是只有专业的美术人员才能设计出来，在大多数时候，这样的界面设计都是由程序设计人员完成，因此了解用户界面的设计原则，是每个程序设计人员都要做的事情。
虽然在某些时候，用户界面的设计并不是一件很重要的事情，但一个优秀的程序员在设计应用程序时，总是时时从用户角度出发，以方便用户的使用为程序设计的目标，而用户第一次接触应用程序就是从界面开始的，因此如何设计应用程序的界面在某些方面也有一些重要的意义。
大多数用户界面设计原则和任何基础美术课程中所教授的基础设计原则一样。
在计算机屏幕上组合颜色、文字、框架等的基本原则和在纸张上画图一样。
在开始之前作一点简单设计会加快应用程序的设计进程，有些时候，往往一个控件位置的安排就能让程序设计人员左右为难。
所以在界面设计开始之前，可以先将设计的窗体画在纸上，然后考虑哪些控件是所需要的，以及不同元素的重要性、控件之间的联系等。
协调界面、组织窗体的工作包括控件的位置、大小、一致性编排与其它相关内容。
（一）、控件的位置拖放安排
在绝大多数的程序界面设计中，并不是所有的元素都具有相同的重要性，所以应抓住重点，将较重要的元素定位在对用户来说处在一日了然的位置，重要的和需要经常访问的元素应当处于显著的位置，次要的元素则应当处于次要的位置。
习惯的阅读顺序一般是从左到右，从上到下。
按照此原则，用户第一眼看到的应是计算机屏幕的左上部分，因此最重要的元素应当定位在这里，如同网页设计一样。
比如有一条重要的数据信息，它的标题栏应当安排放在能被用户第一眼看到的位置，而各种操作按钮则应当处于该标题栏的下方，因为用户通常是要使用按钮来完成窗口的操作。
将控件和元素适当分组也是非常重要的，可以尝试根据“功能”和“关系”来组成一个逻辑信息组。
按照控件在功能上的联系，将它们放在一起，在视觉效果上也要比将它们分散在屏幕的各处要好得多。
在通常情况下，可以使用“框架”控件来帮助合理编排各控件之间的关系。
（二）、控件的大小与一致性编排
控件的大小设置是程序设计时经常遇到的问题，虽然操作非常简单，但在决定控件大小时却很让人头疼。
合理设置控件的大小以达成一致性是界面设计中的重要问题之一，一致性的外观将体现应用程序的协调性。
如果缺乏一致性就会使界面混乱而无序，这样的界面将会使应用程序看起来混乱而不严密，体现不出应有的价值，不但对用户的使用带来不便，甚至还会使用户觉得应用程序不可靠。
VisualBasic提供的控件丰富多样，每一种都能被利用，但是，应该抛弃使用较多不同控件的想法，而应当尽量使用协调性强的控件，来选择最适合自己应用程序的特定控件子集。
当有ListBox，ComboBox等多种控件被同时利用时要尽可能的使得它们采用同一风格。
例如，在控件中使用相同的颜色作为背景色等，如果没有特别需要，尽量不使用鲜艳的颜色。
在应用程序中保持不同控件的一致性对提高应用程序的可用度来讲也是非常重要的。
如果两种控件选择了不同的颜色和显示效果，那么应用程序将会显得十分不协调。
所以在确定设计思路时，一定要坚持用同一种风格贯穿整个应用程序的想法，用这个思路来完成整个程序的设计。
（三）、合理利用空间，保持界面的简洁
在界面的空间使用上，应当形成一种简洁明了的布局。
在用户界面中使用空白空间有助于突出元素和改善可用性。
即合理使用窗体控件之间以及控件四周的空白区域。
一个窗体上有太多的控件会导致界面杂乱无章，给寻找字段或者控件带来不便或者困难。
因此，在设计中需要插入空白空间来突出设计元素。
各控件之间一致的间隔以及垂直与水平方向各元素的对齐也可以使设计更为明了，行列整齐、行距一致、整齐的界面安排也会使其容易阅读。
在此，可以合理利用VisualBasic提供了几个工具，以便让控件的间距、排列和尺寸的调整变得非常容易。
水平间距、垂直间距、在窗体中央、排列、按相同大小制作等菜单项都可以在“格式”菜单中找到。
另外，界面设计最重要的原则就是简洁与明了。
对于应用程序而言，如果界面看上去很难，则可能程序使用本身也比较复杂，而在设计时稍稍深入考虑一下，便有助于创建看上去和用起来都很简单的界面。
从美学的角度来讲，整洁、简单明了的设计更有可取性。
在界面设计中，一个普遍易犯的错误就是力图用界面来模仿现实世界的对象，但这样的设计，除了对自己的设计增加难度，而对用户并没有真正的好处。
最好的设计就是根据对现实对象的理解来设计出自己的、并能为用户带来方便的界面，并不一定要模仿显示对象，而可以使用有标签的界面或几个链接的窗体来显示所有的信息，也可以使用附加的控件，比如带有选取预装入的列表框，这些控件可以减少输入工作量，还可以取出不常用的函数并把它们移到自己的窗体中去来简化许多应用程序。
提供缺省有时也可以简化应用程序，如果十个用户中有九个选取加粗的文本，就把文本粗体设为缺省值，而不需要用户每次都选取一遍，但要注意不要忘记提供一个选项可以覆盖该缺省值。
此外，向导也有助于简化复杂的或不常用的任务。
简化与否最好的检验就是在应用中观察应用程序。
（四）、合理利用颜色、图像和显示效果来达成内容与形式的统一
在界面上使用颜色可以增加视觉上的感染力，现在的许多显示器能够显示上百万种的不同颜色，这很容易使人想要全部使用它们。
如果在开始设计时没有仔细地考虑，颜色也会像其它基本设计原则一样出现许多问题。
每个人对颜色的喜爱有很大的不同，用户的品味也会各不相同。
颜色能够引发强烈的情感，如果是设计针对普遍用户的程序，那一般说来，最好保守传统，采用一些柔和的、更中性化的颜色。
当然，对特定的用户就要依据用户自己的选择了。
少用明亮色彩可以有效地突出或者吸引人们对重要区域的注意。
依据许多程序设计人员的经验，应当尽量限制应用程序所用颜色的种类，而且色调也应该保持一致。
如果可能的话，最好坚持标准的16色的调色板，
另外，图片与图标的使用也可以增加应用程序视觉上的影响，所以细心的设计也是必不可少的。
在某些时候不用文本而利用图像就可以更形象地传达信息，但常常不同的人对图像的理解也不一样。
带有表示各种功能图标的工具栏，是一种很有用的界面组成，但如果不能很容易地识别图标所表示的功能，反而会事与愿违。
在设计工具栏图标时，应查看一下其它的应用程序，以了解已经创建了的普遍的大众可认可的标准。
例如，用Windows的图标来表示相似的功能。
总之，在设计自己的图标与图像时，应尽量使它们简单。
用户界面也广泛使用各种显示效果，合理的选择显示效果，也能表达特定的设计意图，选择静态或动态显示，可带给用户不同的信息。
动感的显示是对象功能的可见线索，虽然用户可能对某个术语还不熟悉，但动态的实例可体会设计者的意图。
按下按钮、旋转旋钮和点亮电灯的开关等都能进行动感表示，一看到它们就可以看出其用处。
例如，用在命令按钮上的三维立体效果使得它们看上去像是被按下去的。
如果设计平面的命令按钮，就会失去这种动感，因而不能清楚地告诉用户这是一个命令按钮。
但在某些情况下，可能平面的按钮是适合的，但不管怎样，只要在整个应用程序中合理的利用各种显示效果并能保持一致，这都能更好的促进内容与形式相统一。
二、如何创建友好的用户界面毫无疑问，应用程序的界面对用户非常重要——无论代码多么卓越，如果用户发现应用程序很难使用，那么难于很好地接受它。
因此，在开发应用程序的过程中，开发人员必须重视用户界面的友好性。
本文以VisualBasic为例，向读者介绍创建友好的用户界面。
界面设计基础
1、什么是好的界面
设计用户界面时，最好是先看看Microsoft或其他公司比较优秀的应用程序，我们会发现许多通用的东西，比如工具栏、状态条、工具提示、上下文菜单以及标记对话框等。
也可以凭借自己使用软件的经验，想一想曾经使用过的一些应用程序，哪些很好用。
另外，还要注意到大多数成功的应用程序都提供多种选择，来适应不同用户的偏爱。
例如MicrosoftWindows的“资源管理器”允许用户通过菜单，用键盘或者鼠标拖放来复制文件。
提供同一功能的多种操作方式，会扩大应用程序的吸引力。
至少应该使所有的功能都能被鼠标和键盘所访问。
2、Windows界面准则Windows操作系统的主要优点就是为所有的应用程序提供了公用的界面。
知道如何使用基于Windows应用程序的用户，很容易学会使用其他应用程序。
而与创建的界面准则相差太远的应用程序不易让人喜欢。
菜单就是这方面很好的一个例子——大多数基于Windows的应用程序都遵循这样的标准、“文件”菜单在最左边，然后是“编辑”、“工具”等可选的菜单，最右边是“帮助”菜单。
子菜单的位置也很重要。
用户本期望在“编辑”菜单下找到“复制”、“剪切”与“粘贴”等子菜单，若将它们移到“文件”菜单下会引起用户的混乱。
不要偏离已经创建的准则太远，除非有很好的理由这样做。
3、控件的位置通常，在用户界面中，应该将重要的或者频繁访问的元素放在显著的位置上，而不太重要的元素就应当降级到不太显著的位置上，以确保越是重要的元素越要很快地显现给用户。
对于大多数自然语言来说，我们都习惯于在一页之中从左到右、自上到下地阅读。
对于计算机屏幕也如此，大多数用户的眼睛会首先注视屏幕的左上部位，所以最重要的元素应放在屏幕的左上部位。
例如，如果窗体上的信息与用户有关，则它的名字字段应当显示在它能最先被看到的地方。
而命令按钮，如“确定”或“下一个”，应当放置在屏幕的右下部位（因为用户在未完成对窗体的操作之前，通常不会访问这些按钮）。
应当尽量把元素按功能或关系进行逻辑地分组，比如定位数据库的按钮（如“下一条”、“最后一条”）应当被形象地分成一组，而不是分散在窗体的四处。
再如，通常将各字段与地址分在一组，因为它们联系紧密。
在许多情况下，可以使用框架控件来进行分组。
4、界面元素的一致性在用户界面设计中，一致性是一种优点。
一致的外观与感觉可以在应用程序中创造一种和谐。
如果界面缺乏一致性，则很可能引起混淆，并使应用程序看起来没有条理，甚至可能引起对应用程序可靠性的怀疑。
在VisualBasic中虽然有大量的控件可供使用，但应尽可能地选择能很好适合特定应用程序的控件子集。
例如，虽然列表框、组合框、网络以及树等控件都可用来表示信息列表，最好还是尽可能使用一种类型。
还有，尽量恰当地使用控件，虽然TextBox控件可以设置成只读，并用来显示文本，但Label控件通常更适用于该目的。
在为控件设置属性时要保持一致性，如果在一个地方可编辑的文本使用白色背景，除非有很好的理由，否则不要在别的地方又使用灰色。
在应用程序中不同的窗体之间保持一致性对其可用性有非常重要的作用。
如果在一个窗体上使用了灰色背景以及三维效果，而在另一个窗体上使用白色背景及二维效果，则这两个窗体就显得毫不相干。
5、空白空间有的用户界面中使用空白空间有助于突出元素和改善可用性。
一个窗体上有太多的控件会导致界面杂乱无章，使得寻找一个字段或者控件非常困难，在设计中需要插入空白空间来突出设计元素。
各控件之间一致的间隔以及垂直与水平方向元素的对齐可以使设计更可用。
就像杂志中的文本那样，安排得行列整齐、行距一致，整齐的界面也会使其容易阅读。
VisualBasic提供了几个工具，使得控件的间距、排列和尺寸的调整非常容易。
“排列”、“按相同大小制作”、“水平间距”、“垂直间距”和“在窗体中央”等命令都可以在“格式”菜单中找到。
6、颜色在界面上使用颜色可以增加视觉上的感染力，少量明亮色彩也可以有效地引起人们对重要区域的注意。
但是，应当尽量限制应用程序所用颜色的种类，而且色调也应该保持一致。
如果可能的话，最好坚持标准的16色调色板。
7、图像和图标
图片与图标的使用也可以增加应用程序在视觉上的趣味，但是，细心的设计也是必不可少的，如果用户不能很容易地识别图标所表示的功能，就会很糟糕。
在设计工具栏图标时，应查一下其他的应用程序以了解已经创建了什么样的标准。
例如，许多应用程序用一张角上有卷边的纸来表示“新建文件”图标。
也许还有更好的比喻来表示这一功能。
但改用其他的表示方法会引起用户的混淆。
8、字体
字体也是用户界面的重要部分，因为它们常常给用户传递重要的信息。
需要选取在不同的分辨率和不同类型的显示器上都能容易阅读的字体。
应当尽量使用标准Windows字体，如Arial、NewTimesRoman或者System。
如果使用了非标准的字体，那么当用户的系统中没有包含指定的字体时，系统会使用替代的字体，其结果可能与设想的完全不一样。
还有，在选取字体时，设计的一致性非常重要。
大多数情况下，不应当在应用程序中使用两种以上的字体。
9、错误处理用户在使用程序的时候总会出现这样那样的问题。
程序设计人员在设计用户界面时，应尽量全面地考虑可能出现的错误，并判断哪一个需要用户交互作用，哪一个可以按事先安排的方案解决。
1、创建容易理解的对话框 偶尔应用程序中会出现错误，需要为解决这种情况做出判断。
这通常作为代码的分支出现If...Then语句或者Case语句。
如果这个判断要与用户交互，此问题通常用对话框来提交给用户。
相信任何程序员都会使用对话框与用户交互，关键问题是要采取用户容易理解的语言。
比如这样的消息、“硬盘C的扇区被损坏或不能访问。
中止、重试、忽略？
”，这对一般的用户而言不大好理解。
更好的表达可以是“在C盘上存文件有问题，请把文件存于A盘。
存不存文件？
”
当为应用程序创建对话框时，应想着用户。
这个消息给用户传达了有用的信息吗？
它容易理解吗？
命令按钮表示的选择明确吗？
这个选择适合给定的条件吗？
2、不用对放大框的错误处理
当错误出现时不一定要打断用户。
有时更可取的是不通知用户而用代码来处理错误，或者以不停止用户工作流程的方法来提醒用户。
很好的例子是MicrosoftWord中的“自动更正”功能、如果普通单词拼错了，Word自动修改它；如果不常用单词拼错了，在其下划一条红线提醒用户以后改正。
10、有大量的技巧可以采用
（1）、在“编辑”菜单中添加“撤消”功能。
对于删除等情况，与其用“确定”对话框来打断用户，还不如确保他们做出正确的决定，并提供“撤消”功能以备他们以后改变主意。
（2）、在状态栏或图标上显示消息。
如果错误不影响用户当前的任务，不要停止应用程序。
使用状态栏或亮色警告图标来警告用户——当他们准备好后可以处理该问题。
（3）、直接改正问题。
有时错误的解决办法很显然，例如，当用户试图存文件时磁盘已满，则在其他驱动器中检查寻找空间。
如果空间可用，则保存该文件；在状态栏中显示一条消息告诉用户做了些什么。
11.设计完善的帮助体系
不论用户界面设计得多么好，有时用户总需要帮助。
应根据操作的难易程度和用户的类别，为程序设计层次不同但相对完善的帮助体系，可以采用的方法包括建立联机帮助、工具提示、状态条、“这是什么”帮助等。
1.联机帮助
联机帮助是任何应用程序的重要部分，它通常是用户有问题时最先查看的地方。
甚至简单的应用程序也应该提供“帮助”。
在设计“联机帮助”时，要记住它的主要目的是回答问题。
创建主题名称与索引条目时尽量用用户的术语，例如，“我如何格式化页面？
”比“编辑”、“页格式”菜单更容易找到主题。
很多情况下，还要提供上下文相关的帮助，如果用户按下F1键后，屏幕上立刻出现了相关的帮助画面，用户会感到非常满意。
2.工具提示
工具提示是个小标签，当鼠标指针在控件上停留时即显示相关帮助信息。
当用户在用户界面上搜索时，工具提示是一种向他们显示信息的好方法。
大多数VisualBasic控件都包含用来显示工具提示的属性ToolTipText，可以用这个属性为控件提供工具提示，如、CmdPrint.ToolTipText＝“打印文档”
3.状态显示
状态显示是提供那些不太适合工具提示的指令或消息的一种好方法，包括在VisualBasic的专业版与企业版中的状态条控件能很好地显示消息，Label控件也能用作状态显示。
在状态显示中显示的文本可以用以下两种方法之一来更新、用控件或窗体的GotFocus事件，或者用MouseMove事件。
4.“这是什么”帮助
“这是什么”帮助是指当用户选取窗体右上角的小问号并单击控件，或者直接在控件上按下鼠标右键时，出现的帮助信息。
“这是什么”帮助提供了和弹出式“帮助”主题的链接，稍复杂的应用程序就应该提供这种帮助形式。
三、有关界面设计与测试的规范
我在工作中总结了一些有关界面设计与测试的规范，与大家共享。
界面设计与测试规则界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。
而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。
同时界面如同人的面孔，具有吸引用户的直接优势。
设坪侠淼慕缑婺芨没Т辞崴捎湓玫母惺芎统晒Φ母芯酰喾从捎诮缑嫔杓频氖О埽糜没в写彀芨校偈涤们看蟮墓δ芏伎赡茉谟没У奈肪逵敕牌懈吨疃鳌Ｄ壳敖缑娴纳杓埔鹑砑杓迫嗽钡闹厥拥某潭然乖对恫还唬钡阶罱持谱鞯男似穑攀艿阶业那囗６疑杓屏己玫慕缑嬗捎谛枰哂幸帐趺赖奶旄扯饩芫?
目前流行的界面风格有三种方式、多窗体、单窗体以及资源管理器风格，无论那种风格，以下规则是应该被重视的。
1、易用性：
按钮名称应该易懂，用词准确，屏弃没楞两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。
理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。
易用性细则：
1）、完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。
2）、完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。
3）、按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。
4）、界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。
5）、界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。
6）、同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。
7）、分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab
8）、默认按钮要支持Enter及选操作，即按Enter后自动执行默认按钮对应操作。
9）、可写控件检测到非法输入后应给出说明并能自动获得焦点。
10）、Tab键的顺序与控件排列顺序要一直，目前流行总体从上到下，同时行间从左到右的方式。
11）、复选框和选项框按选择几率的高底而先后排列。
12）、复选框和选项框要有默认选项，并支持Tab选择。
13）、选项数相同时多用选项框而不用下拉列表框。
14）、界面空间较小时使用下拉框而不用选项框。
15）、选项数叫少时使用选项框，相反使用下拉列表框。
16）、专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。
2、规范性：
通常界面设计都按Windows界面的规范来设计，即包含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”的标准格式，可以说、界面遵循规范化的程度越高，则易用性相应的就越好。
小型软件一般不提供工具厢。
规范性细则：
1）、常用菜单要有命令快捷方式。
2）、完成相同或相近功能的菜单用横线隔开放在同一位置。
3）、菜单前的图标能直观的代表要完成的操作。
4）、菜单深度一般要求最多控制在三层以内。
5）、工具栏要求可以根据用户的要求自己选择定制。
6）、相同或相近功能的工具栏放在一起。
7）、工具栏中的每一个按钮要有及时提示信息。
8）、一条工具栏的长度最长不能超出屏幕宽度。
9）、工具栏的图标能直观的代表要完成的操作。
10）、系统常用的工具栏设置默认放置位置。
11）、工具栏太多时可以考虑使用工具厢。
12）、工具厢要具有可增减性，由用户自己根据需求定制。
13）、工具厢的默认总宽度不要超过屏幕宽度的1/5。
14）、状态条要能显示用户切实需要的信息，常用的有、
目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提示。
15）、滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。
16）、状态条的高度以放置五好字为宜，滚动条的宽度比状态条的略窄。
17）、菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。
18）、菜单和状态条中通常使用5号字体。
工具条一般比菜单要宽，但不要宽的太多，否则看起来很不协调。
19）、右键快捷菜单采用与菜单相同的准则。
3、帮助设施：
系统应该提供详尽而可靠的帮助文档，在用户使用产生迷惑时可以自己寻求解决方法。
帮助设施细则。
1）、帮助文档中的性能介绍与说明要与系统性能配套一致。
（我们的系统帮助文档都是系统的祖先时期的说明，让人困惑）。
2）、打包新系统时，对作了修改的地方在帮助文档中要做相应的修改。
3）、操作时要提供及时调用系统帮助的功能。
常用F1。
4）、在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。
也就是说帮助要有即时针对性。
5）、最好提供目前流行的联机帮助格式或HTML帮助格式。
6）、用户可以用关键词在帮助索引中搜索所要的帮助，当然也应该提供帮助主题词。
7）、如果没有提供书面的帮助文档的话，最好有打印帮助的功能。
8）、在帮助中应该提供我们的技术支持方式，一旦用户难以自己解决可以方便的寻求新的帮助方式。
4、合理性：
屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。
合理性细则。
1）、父窗体或主窗体的中心位置应该在对角线焦点附近。
2）、子窗体位置应该在主窗体的左上角或正中。
3）、多个子窗体弹出时应该依次向右下方偏移，以显示窗体出标题为宜。
4）、重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。
5）、错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。
横排开头或最后与竖排最后为易点位置。
6）、与正在进行的操作无关的按钮应该加以屏蔽（Windows中用灰色显示，没法使用该按钮）。
7）、对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。
8）、非法的输入或操作应有足够的提示说明。
9）、对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待。
10）、提示、警告、或错误说明应该清楚、明了、恰当。
5、美观与协调性：
界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。
美观与协调性细则。
1）、长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。
2）、布局要合理,不宜
升级会员 