软件界面设计规范.doc
目 录一、概述2二、原则31.易用性32.规范性33.帮助设施44.合理性55.美观与协调性56.菜单位置设置67.独特性78.快捷方式的组合79.安全性910.多窗口的应用与系统资源10三、实用技巧101.暂时不可操作的菜单命令项一般要屏蔽变灰102.正在起作用的菜单命令旁打上选中标记()113.为命令选项设置访问键(Access key)114.为命令选项增加快捷键(Shortcut Key)115.在要弹出对话框的命令选项后增加省略号(.)提示用户126.用右指向的箭头(),来指引用户选择此项将引出级联菜单(Cascading Menu)127.对相关的命令用分隔条(Separate Bar)进行分组128.建立动态菜单,提高软件的灵活性129.生成弹出式菜单,增强软件的可操作性1310.窗体设计1311.菜单设计1512.照顾用户的感觉15一、概述界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。同时界面如同人的面孔,具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉,相反由于界面设计的失败,让用户有挫败感,再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。而在实际软件开发的工作中,往往只强调功能而忽略了界面的设计,因此,必须要制定出一套用户界面设计的规范,约束和指导软件开发者在用户界面中的设计。二、原则1.易用性按钮名称应该易懂,用词准确,摈弃模棱两可的字眼,要与同一界面上的其他按钮易于区分,能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。易用性细则:1):完成相同或相近功能的按钮用Frame框起来,常用按钮要支持快捷方式。2):完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。3):按功能将界面划分局域块,用Frame框括起来,并要有功能说明或标题。4):界面要支持键盘自动浏览按钮功能,即按Tab键的自动切换功能。5):界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。 6):同一界面上的控件数最好不要超过10个,多于10个时可以考虑使用分页界面显示。7):分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab8):默认按钮要支持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):菜单和工具条要有清楚的界限;菜单要求凸出显示,这样在移走工具条时仍有立体感。14):菜单和状态条中通常使用五号字体(宋体)。工具条一般比菜单要宽,但不要宽的太多,否则看起来很不协调。15):右键快捷菜单采用与菜单相同的准则。 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): 布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间。3): 按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置。4): 按钮的大小要与界面的大小和空间要协调。5): 避免空旷的界面上放置很大的按钮。6):放置完控件后界面不应有很大的空缺位置。7): 字体的大小要与界面的大小比例协调, 通常使用的字体中宋体五号较为美观8): 前景与背景色搭配合理协调,反差不宜太大,最好少用深色,如大红、大绿等。常用色考虑使用Windows界面色调。9): 如果使用其他颜色,主色要柔和,具有亲和力与磁力,坚决杜绝刺目的颜色。10): 大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等。11): 界面风格要保持一致,字的大小、颜色、字体要相同,除非是需要艺术处理或有特殊要求的地方。12): 如果窗体支持最小化和最大化或放大时,窗体上的控件也要随着窗体而缩放;切忌只放大窗体而忽略控件的缩放。13):对于含有按钮的界面一般不应该支持缩放,即右上角只有关闭功能。14): 通常父窗体支持缩放时,子窗体没有必要缩放。15):如果能给用户提供自定义界面风格则更好,由用户自己选择颜色、字体等。6.菜单位置设置菜单是界面上最重要的元素,菜单位置按照按功能来组织。菜单位置设置细则:1):菜单通常采用“常用-主要-次要-工具-帮助”的位置排列,符合流行的Windows风格。2):常用的有“文件”、“编辑”,“查看”等,几乎每个系统都有这些选项,当然要根据不同的系统有所取舍。3):下拉菜单要根据菜单选项的含义进行分组,并切按照一定的规则进行排列,用横线隔开。4):一组菜单的使用有先后要求或有向导作用时,应该按先后次序排列。5):没有顺序要求的菜单项按使用频率和重要性排列,常用的放在开头, 不常用的靠后放置;重要的放在开头,次要的放在后边。6):如果菜单选项较多,应该采用加长菜单的长度而减少深度的原则排列。7):菜单深度一般要求最多控制在三层以内。8):对常用的菜单要有快捷命令方式,组合原则见8。9):对与进行的操作无关的菜单要用屏蔽的方式加以处理,如果采用动态加载方式即只有需要的菜单才显示最好。10):菜单前的图标不宜太大,与字高保持一直最好。11):主菜单的宽度要接近,字数不应多于四个,每个菜单的字数能相同最好。12):主菜单数目不应太多,最好为单排布置。7.独特性 如果一味的遵循业界的界面标准,则会丧失自己的个性,在框架符合以上规范的情况下,设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。1):安装界面:应有单位介绍或产品介绍,并有自己的图标。2):主界面:最好是大多数界面上要有公司图标。3):登录界面:要有本产品的标志,同时包含公司图标。4):帮助菜单的“关于”中应有版权和产品信息。5):公司的系列产品要保持一直的界面风格,如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。8.快捷方式的组合在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些 在西文Windows及其应用软件中快捷键的使用大多是一致的。 菜单中:1):面向事务的组合有: Ctrl-D 删除 ;Ctrl-F 寻找 ;Ctrl-H替换;Ctrl-I 插入 ;Ctrl-N 新记录 ;Ctrl-S 保存Ctrl-O 打开。2):列表: Ctrl-R ,Ctrl-G定位;Ctrl-Tab下一分页窗口或反序浏览同一页面控件;。3):编辑:Ctrl-A全选;Ctrl-C 拷贝;Ctrl-V 粘贴;Ctrl-X 剪切;Ctrl-Z撤消操作;Ctrl-Y恢复操作。4)文件操作:Ctrl-P 打印;Ctrl-W 关闭。5):系统菜单Alt-A文件;Alt-E编辑;Alt-T工具;AltW窗口;AltH帮助。6):MS Windows保留键:Ctrl-Esc 任务列表 ;Ctrl-F4 关闭窗口; Alt-F4 结束应用;Alt-Tab 下一应用 ;Enter 缺省按钮/确认操作 ;Esc 取消按钮/取消操作 ;Shift-F1 上下文相关帮助 。按钮中:可以根据系统需要而调节,以下只是常用的组合。Alt-Y确定(是);Alt-C取消;Alt-N 否;Alt-D删除;Alt-Q退出;Alt-A添加;Alt-E编辑;Alt-B浏览;Alt-R读;Alt-W写。这些快捷键也可以作为开发中文应用软件的标准,但亦可使用汉语拼音的开头字母。9.安全性在界面上通过下列方式来控制出错几率,会大大减少系统因用户人为的错误引起的破坏。开发者应当尽量周全地考虑到各种可能发生的问题,使出错的可能降至最小。如应用出现保护性错误而退出系统,这种错误最容易使用户对软件失去信心。因为这意味着用户要中断思路,并费时费力地重新登录,而且已进行的操作也会因没有存盘而全部丢失。 安全性细则:1):最重要的是排除可能会使应用非正常中止的错误。2):应当注意尽可能避免用户无意录入无效的数据。3):采用相关控件限制用户输入值的种类。4):当用户作出选择的可能性只有两个时,可以采用单选框。5):当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。6):当选项特别多时,可以采用列表框,下拉式列表框。7):在一个应用系统中,开发者应当避免用户作出未经授权或没有意义的操作。8):对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。9):对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。10):对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。11):对错误操作最好支持可逆性处理,如取消系列操作。12):在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。13):对可能造成等待时间较长的操作应该提供取消功能。14):特殊字符常有;;”><,:“”、|+=)-(_*&&%$#!,.。?/还有空格。15):与系统采用的保留字符冲突的要加以限制。16):在读入用户所输入的信息时,根据需要选择是否去掉前后空格。17):有些读入数据库的字段不支持中间有空格,但用户切实需要输入中间空格,这时要在程序中加以处理。 10.多窗口的应用与系统资源设计良好的软件不仅要有完备的功能,而且要尽可能的占用最底限度的资源。1): 在多窗口系统中,有些界面要求必须保持在最顶层,避免用户在打开多个窗口时,不停的切换甚至最小化其他窗口来显示该窗口。 2):在主界面载入完毕后自动卸出内存,让出所占用的WINDOWS系统资源。3):关闭所有窗体,系统退出后要释放所占的所有系统资源 ,除非是需要后台运行的系统。4):尽量防止对系统的独占使用。三、实用技巧1.暂时不可操作的菜单命令项一般要屏蔽变灰 Windows菜单中有一些菜单项是以变灰的形式出现的,并用虚线字符来显示,这一类的命令表示当前不可用,也就是说,执行此命令的条件当前还不具备。例如,在学生档案管理软件中,初始的“输入与查询”菜单为灰,因为在没有选中“年级”的情况下,系统将不知要查询哪个年级的学生资料。在图1中设计时,点击“输入与查询”菜单条的“有效(E)”属性,改变其默认的“有效”为“无效”,然后设计在“年级”菜单中各年级的Click事件中传递所选中的年级信息给“输入与查询”模块后改变后者的“有效”属性值,让其可操作:Private Sub mnu98dz_Click() Transfer = "c:dagl98dz.mdb" mnuFind.Enabled = True End Sub 2.正在起作用的菜单命令旁打上选中标记() Windows中有一些命令是触发式的,打勾号表明该命令正在起作用,否则表明不起作用,可通过点击,反复切换。例如,在上述所举的学生档案管理软件中,当选择了某一年级时,系统就在对应年级菜单前打上“”,表明正在操作的是此年级的数据库。要做到这一点,只要把菜单编辑器中相应菜单条的“复选(C)"框选中即可,然后在菜单的驱动事件加入如下语句来切换该属性:mnu98dz.Checked=not mnu98dz.Checked 3.为命令选项设置访问键(Access key) 菜单项中带有下划线的字母,称为该命令的访问键,是为了方便使用键盘的用户而设置的,按Alt键和该字母时即可打开该菜单,增加访问键只要在菜单编辑器的“标题(P)”框中,在要让其成为访问键的字母前加“”即可,当然,访问键最好不要重复,否则系统只认定第一个有效。 4.为命令选项增加快捷键(Shortcut Key) 某些菜单命令的右边有一组合键,称为该命令的快捷键,可以不打开菜单而直接按快捷键来选择执行此命令。为一个命令项增加一个快捷键,可在菜单编辑器中的“快捷键(S)”列表框中为该命令项分配一个,列表中一个快捷键只能被分配一次,否则系统会拒绝接受。 5.在要弹出对话框的命令选项后增加省略号(.)提示用户 Windows中,如果命令项后面有省略号(.),表明选择此命令将引出一个对话框,从对话框系统要求用户提供更多执行该命令所需的信息,在设计时只要在会引出对话框的菜单项的标题后增加“(.)"提示即可。 6.用右指向的箭头(),来指引用户选择此项将引出级联菜单(Cascading Menu) 级联菜单即所谓的子菜单,在VB中箭头由系统根据菜单编辑器中设计菜单大纲时所安排的“缩进”度而自动实现的,因此,关键是在设计菜单时合理安排大纲中各菜单项上下级的逻辑关系,在VB中最多可以有四级子菜单。 7.对相关的命令用分隔条(Separate Bar)进行分组 为了让用户迅速地在菜单中找到他要执行的命令项,有必要对菜单中相关的一组命令用分隔条进行分组,如文件菜单中,把有关打印输出的一组命令:“页面设置”、“打印预览”、“打印”等用分隔条醒目地进行分隔。这只要在需要进行分组的命令之间插入一个特殊的命令条,该命令条的“标题”为“”,而“名称”任意,因为在程序中一般不会引用此命令的名称。 8.建立动态菜单,提高软件的灵活性 动态菜单即运行时会伸缩的菜单,Windows中有许多软件的“文件”菜单中都具有记忆最近操作过的几个文档名的功能,在本文所举例的学生档案管理软件中,因为每年都会有新的学生到校,在形成新的年级时,要在“年级”菜单中动态地增加新的年级名称以供选择和查询,这首先要在设计时生成菜单命令的控件数组(Menu Control Array),在菜单的编辑器中加入一个菜单选项,设其Index属性设置为0,然后可以加入名称相同(在本例中名称为MnuNj),Index值相邻递增的菜单选项(比如加入10个),设计时让它们标题框均为空,留作日后引用填入新年级名,并设这些备用菜单条的“可见”属性为无效,即目前不可见。在有建立和删年级库功能的“系统初始化”菜单驱动事件中引用这个数组名和索引值在“输入与查询”中动态地加进新的年级名选项,并让其可见或不可见(在删除时): Private AddMenu_Click() Counter=counter1 Nj=Nj1 Nj是一个模块级变量,初值为1998 MnuNj(counter).Caption= Nj "年级" MnuNj(counter).Visible=Ture End Sub Windows中许多应用程序的“文件"菜单记住最近使使过的文件名的实际方法与此类似。 9.生成弹出式菜单,增强软件的可操作性 有时为了方便用户需要,为一些最常用的命令建立右键弹出式快捷菜单,这种菜单的前期设计和普通菜单一样,不同的是一般要先点击“可见(P)”框,让此菜单不可见,然后在窗体的MouseDown或MouseUp事件中引用PopupMenu方法来实现在窗体上按下鼠标右键时弹出此菜单: Private Sub MdiForm1_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single) If button=2 the MnuEdit为制作的要弹出的菜单 Popupmenu MnuEdit End SubPopupMenu方法将忽略初始设置的“不可见”属性。 10.窗体设计 窗体设计的好坏往往影响到软件的整体形象,因此必须首先处理好窗体的设计问题。1、 窗体的边框 窗体边框的默认风格为“Sizeable”(可变的),但并不是所有窗体都可以使用可变边框。因为用户常常有意无意地改变窗体的大小(比如双击窗口的标题栏),如果窗体中包含大量的控件,极有可能遮住部份控件或由于窗体过大而使控件的相对位置发生变化,使用户产生疑惑。解决该问题的一种方法是在form_Resize事件过程中动态改变控件的位置和大小,使之在窗体中保持相对位置,但缺点是当窗体过小时,很难保证控件的可视效果。当然可以用程序控制窗体的最小尺寸,但更简单的方法是将窗体边框设置成“Fixed Single”, 如果不想提供最大化或最小化功能,也可以将其设为“Fixed Dialog”。2、窗体的初始位置 窗体的初始位置会直接影响用户的使用,特别在多窗口的环境中,如果新的窗口完全覆盖了先前的窗口,用户一定会以为原先的窗口丢失了。使用层叠方法排列窗口并在任务条上显示每个窗口的进程标题是个不错的选择。 模式窗体激活时会阻止用户操作其它窗体,因此必须在不需要同时使用任何其它窗体的情况下才使用模式窗体,并确保窗体是可移动的。3、使用多文档窗口界面在多窗口界面中,所有窗体都以桌面为依托,好象有多个应用程序在运行一样,窗口管理比较麻烦,采用MDI多文档界面会将窗口管理的复杂程度降到最低。 在多文档界面中,必须有且只有一个主文档窗体(MDI主窗体),它的窗体区域不能放置除菜单类组件以外的任何控件,但可以拥有多个子窗体(MDI子窗体),也就是说MDI子窗体不能独立存在,并且不能为模式窗体,它们只能在MDI主窗体的窗体区域内活动;子窗体最大化时其标题栏和菜单栏能和主窗体合并;最小化时子窗体并不会缩至任务条上,而是缩小至主窗体的左下角;关闭主窗体时,所有子窗体都能自动关闭。充分使用好MDI界面会使用户觉得窗口控制更加简单。4、控件的安排 控件是窗体最主要的组成部份,其排列形式会对用户操作的直观性和易用性产生重要影响。控件的放置一般应遵循以下原则: 按功能组织控件的位置。将控件按功能分类放置于窗体的不同的区域,会让用户更容易找到所需的功能。如果将“字体”和“取消”按钮放在一起,而将“颜色”和“确定”按钮放在一起,用户一定会摸不着头脑。在保证可视性良好的前提下,控件的尺寸应尽可能地“小”,这样可以尽量缩小窗体的尺寸。不在过小的窗体中放置过多的控件。在过小的窗体中放置过多的控件,会造成窗体元素的过分拥挤,使控件的标题和文本难以辨认。如果可能,应在按钮控件中使用图标,这样既可以使画面更生动,又使用户更容易理解控件的作用。使用控件的“ ToolsTip ”属性。“ToolsTip”可以为控件加上浮动的提示条。当用户的鼠标指向该控件时,提示条会自动显示,让用户立即从文字中了解控件的功能,数秒钟后它还会自动消失,不会给用户带来视觉障碍。 11.菜单设计 菜单是界面设计中的重要组成部份,“简单、直观、一致、有效”是菜单设计的原则。下面的建议可能对创建满足用户期望的菜单有所帮助。 按照逻辑功能将菜单项分组,并且在下拉菜单中用分隔线将功能更相关的项目分组排列。在同一菜单中避免使用多个相同功能的菜单项,否则会使用户产生疑惑。 避免使用没有下拉项的菜单项,因为孤立的菜单项和按钮没什么区别。点击这类菜单项并直接产生某个动作,通常会给用户产生过于 “突然”的感觉。为了使用户使用更方便,可以在相关的窗体或控件区域内设置弹出式菜单,特别推荐用鼠标右键弹出菜单。同时这些弹出式菜单可以在主菜单中保留副本。 如果单击某个下拉菜单项会弹出对话框的话,最好在菜单标题的末尾添加“”(省略号),这是Windows的约定。这样会使菜单更接近标准的Windows菜单,给熟悉Windows操作的用户带来方便。12.照顾用户的感觉 用户的感觉是检验软件成功与否的试金石,这种感觉包括对软件的外观、易用性和速度等许多方面。 通常用户单击图标、控件或者菜单项时总希望看见一些事情发生。如果在单击后屏幕上没有发生变化,用户可能产生困惑,或者以为没有按对鼠标,或者干脆怀疑程序是否已经“死”了,但实际上程序可能正在处理一些需要较长时间才能完成的事情。结果不是为了确认鼠标是否按下而多次运行了同一个程序(这会使情况更糟),就是程序被强行关闭。这是我们不愿看到的。解决的方法很简单,只要在开始处理前显示一个等待画面,如显示一条诸如“正在处理数据,请您稍候”之类的信息,如果能配合显示动画图标和进度条,则效果更佳,它给用户的感觉就会变成:程序正在“拼命”地工作,而且很快就会完成了。如果整个程序的启动时间过长,也会造成同样的情况。可以用类似的方法来解决:显示一个“闪现”画面(Flash Screen),在显示过程中完成启动处理,然后关闭“闪现”画面,进入主程序(类似Word的启动画面)。需要说明的是,要显示“闪现”画面,最好使用Sub_Main()作为程序的入口。一些带有许多窗体的程序在运行时不断地装载或卸载窗体,用户感觉很“慢”,一个行之有效的方法就是在程序启动阶段将常用的窗体用Load语句预先装入内存(不显示),需要的时候只要用窗体的Show方法就能立即显示出来。虽然这有可能增加程序启动的时间和对内存的要求,但程序运行时的性能表现要快得多。另外,用户对于不受他们控制的程序操作大多比较反感,因此让用户有机会取消操作将会更体贴用户。一般在执行某个关键操作前,可以显示一个对话框,它至少包括两个按钮:“确定”和“取消”,这样可以给用户“反悔”的机会;在执行一些需要长时间才能完成的动作(比如数据复制)的过程中,在不影响数据安全性的前提下,可以提供一个“取消”按钮,让不耐烦的用户有机会终止操作。在设计这种功能时要熟练使用DoEvents语句。