图形用户界面设计规范文档格式.docx
- 文档编号:16656141
- 上传时间:2022-11-25
- 格式:DOCX
- 页数:21
- 大小:36.75KB
图形用户界面设计规范文档格式.docx
《图形用户界面设计规范文档格式.docx》由会员分享,可在线阅读,更多相关《图形用户界面设计规范文档格式.docx(21页珍藏版)》请在冰豆网上搜索。
很多速度问题的处理是通过GUI而非硬件。
根据应用程序的类型,速度可能是决定程序是否被用户群接受的成败关键。
例如,如果你的程序是面向在线事务处理(OLTP)的,操作太慢很快就会导致用户产生放弃系统的念头。
你可以用几种方法使用户界面上显得很快的样子。
除非绝对必要,不要重绘屏幕。
另一个方法是使这个屏幕的所有区域同时可用,而非一个区域一个区域的来。
另外,根据用户的熟练程度,应该在用户界面中加入一些功能,这些功能可以让熟练用户在不同的区域快速的输入数据。
这些功能包括重复功能、快捷键、带有有意义的图标的按钮等等,所有这些可以使速度快的用户可以控制界面并加快数据的输入。
应该怎样和不该怎样
每个好的开发者都应该把目标定在尽可能的设计最好的图形用户界面。
但如何把这个目标变成现实呢?
下文中,在各个章节给出了图形用户界面设计的规范(标准)。
同任何出色的专业人士一样,你需要一些可重复的成功设计法则。
我们就是用这里提供的法则为我们的客户服务并教授了超过20000名的国内国际GUI设计专业的学生。
这些规范也会对你有帮助的。
对人的理解
程序必须反映用户的视角和行为。
要充分理解用户开发者首先要理解人,因为我们都具有共同的特征。
人类通过辨别比通过记忆学习起来更容易。
要经常试着提供一个数据列表给用户,而非让用户凭记忆自己输入数据。
普通人能记住2000到3000单词,但却可以认出50000单词。
留意不同的视角
很多设计者在设计图标或程序整个行为的时候会不自觉的陷入视角陷阱。
最近我看到一个图标,它用于在一个会计系统中指明汇总。
为了标示这个功能,设计者花了很多心思在画一个把桂圆组合到一起的图标。
不幸的是,这个系统的用户对这个图标的喻意更本就没有一点概念,虽然它从设计者的视角来看是非常直观的。
保留图标列表中给出了标准图标,如图一所示,可以帮助你消除这些问题。
(原Html文件中就没图,估计老外也时兴转载)
ReservedIcons
Figure1
Picture
MeaningandBehaviour
UsetoIdentifyanApplication
UsedtoIdentifyaFunction
ReservedWordTextLabel
InformationMessage
No
Yes
(identifiesInformationmessagebox)
None
WarningMessage
(identifiesWarningmessagebox)
QuestionMessage
(identifiesquestionmessagebox)
ErrorMessage
(identifieserrormessagebox)
清楚一致的设计
很多GUI程序对最终用户常常不够清楚。
一个增强程序清楚表述能力的有效方法是使用列表中的保留字进行开发。
用户中最常见的抱怨是某个术语表述的不清楚或不一致。
我常常看见开发者们激烈的争论按钮或菜单项上用那个术语更合适,而同时就在一墙之隔的另一群开发者也在争论同样的问题,在程序发布之后,一个屏幕上可能写着“项目”,而下一屏却写着“产品”,而第三屏又变成了“货物”,可是其实这三个术语是指的同一个东西。
这种一致性的缺乏导致用户非常迷惑并产生操作失误。
图二给出了保留字列表的一个例子。
一个开发小组应该用更多的保留字来完善和扩充这个表。
保留字列表
图二
文本
含义和行为
是否出现在按钮上
是否出现在菜单上
Mnemonic
Keystrokes
热键?
Shortcut
快捷键?
OK
接受输入的数据或显示的响应信息,关掉窗口
Yes
<
Return>
or<
Enter>
Cancel
不接受输入的信息,关掉窗口
Esc
Close
结束当前的任务,让程序继续进行;
关掉数据窗口
Alt+C
Exit
推出程序
Alt+X
Alt+F4
Help
调出程序的帮助信息
Alt+H
Fl
Save
保存数据,停留在当前窗口
Alt+S
Shift+Fl2
SaveAs
用新名字保存数据
Alt+A
F12
Undo
撤销前一个动作
Alt+U
Ctrl+Z
Cut
剪切高亮字符
Alt+T
Ctrl+X
Copy
拷贝高亮的文本
Ctrl+C
Paste
在插入点粘贴被拷贝或剪切的文本
Alt+P
Ctrl+V
同常见软件保持一致性的设计
出色的用户界面在程序中将实现同用户以前用过的其它成功软件一致的动作。
写商用程序软件的时候应该尽可能的给用户提供这种一致性。
例如,EmbassySuit和CourtyardMarriot连锁旅店增长的非常快,因为商务旅行者知道这些连锁的旅店能为他们提供相似的客房和其它大体差不多的服务。
最次也使得商务旅行者不必每到一个新的城市都为找新旅店发愁。
你的软件的商务用户有同样的需求。
你程序中提供的每个新的特色都可能让用户感到焦躁,迫使他们反复试验或着给你的维护小组打昂贵的长途电话。
提供可视反馈
如果你曾有过傻傻的瞪着自己电脑上显示的沙漏等着一个操作结束的时候,就会明白没有可视化的反馈信息有多糟糕。
你的用户非常希望知道一个操作会花费多长的时间以便准备好足够的耐心。
作为最一般的规则,当一个操作超过7~10秒的时候,大多数用户希望看到一个带有进度条的消息对话框。
时间的长短要根据用户类型和应用程序的特点来调整。
提供声音反馈
上周,我有幸乘坐了一次电梯,这部电梯用悦耳的声音通知乘客他们到那一层了。
大楼非常新,而首先,雇员们认为声音非常可爱。
一层层的走来走去的六个月后,雇员忽略了声音,开始觉得它厌烦而不认为是一个帮助。
同样的事情在你的用户界面上也会发生,除了一个是厌烦的声音限制在电梯之内,一个是到了工作间的每个人的耳朵里。
把音效放到几百台电脑上,在开放式的工作间中就会产生刺耳的杂音。
但无论如何,声音反馈是有用的,尤其是在你需要警告用户一个严重问题产生的地方,例如进一步的操作将导致数据的丢失或程序出错。
允许用户取消声音反馈,除非错误不得不通知。
保持文字内容清楚
开发者常常通过增加大量词汇来尽力使文字反馈内容清楚。
但事与愿违,他们最后使消息更不清楚了。
简化文本标签、用户错误信息和一行的帮助信息上的词汇是一项挑战。
文字反馈的任务可以交给科普作家,通常他们可以高效的处理。
提供操作路径跟踪
如果你的用户曾经说过象这样的话:
“我也不知道怎么就到这个窗口了,可是我在这里了,我也不知道怎么才能退回去。
”那么就是你没有提供一个可跟踪的路径,或者说,在这种情况下,是一个可重复的操作路径。
提供一个可重复的操作路径说着容易做来难。
应该从设计简洁的启动你指定的功能的菜单结构开始着手。
你也要指明你菜单结构的展开位置,避免超过两级的级联菜单。
为每个对话框提供描述性的标题可以非常有用的提醒用户是哪个菜单项或按钮被按下后把他们带到当前窗口的。
提供键盘支持
键盘是用户桌面上常见的固定设备,为用户输入文本和数据提供了一个有效手段。
在介绍图形用户界面程序时,我们常常假定用户把鼠标作为主要的交互设备。
而用鼠标操作程序对于录入员或常用用户来讲是非常费时和低效的。
加速建可以给用户提供一种非常有效的操作方式来访问窗口中的指定菜单项和控件。
加速建应该易于使用并限制在一到两个键(如F3或者Ctrl-P)。
键盘在GUI的世界中有一定的限制,例如在实现象拖拽、点击、变大变小窗口等直接操作任务的时候。
相对来说,你总会发现有一小批人坚持用鼠标从不碰键盘。
这导致你需要对所有菜单和窗口操作提供完整等价的键盘和鼠标支持。
注意表达模式
把所有界面的各个方面连起来的一个重点是界面的外观和风格。
外观和风格必须一致。
用户使用一个窗体或对话框过后,在此基础上,他们希望在使用下一个窗体或控件时有同样的感受。
研究好的界面设计模式和连续性是最重要的。
决定模式一定要用心,例如程序是有单文档界面还是多文档界面。
模式也包括用户如何在程序中完成他们的任务。
指定合适的程序表达方式对开发后续窗口提供了很大的便利,因为它们有很多通用的内在框架。
另一方面,如果你不尽早在你的界面设计中定义好表达方式,拖后对程序外观和风格的修改将浪费大量的时间和金钱,因为改动几乎会影响到所有的窗口。
有模式和无模式对话框
当我们需要用户的输入时,我们常常就需要用有模式对话框。
使用有模式对话框一直被很多开发者尽量避免,因为它对用户限制太多。
但不管怎样,有模式对话框在复杂程序中还是很有用的,因为很多人同一时间只在一个窗口内工作。
当有特定任务时可以试着用有模式对话框。
对不确定完成时限的任务无模式对话框是一种更好的选择,但有个提示:
在同一时刻,要使用户的无模式对话框保持在3个以内。
如果超过这个数的话,你维护部门的电话就会响个不停了,这时用户就很难把注意力集中到他们的任务上,却要花费很多的时间管理各种各样打开的窗口。
利用图三中的表来决定合理的使用对话框和窗口。
何时使用对话框、窗口
图三
类型
描述
使用
例子
有模式
对话框
给出一个确定的任务
打开文件对话框
另存为对话框
无模式
给出一个持久的任务
查找框
历史记录框
任务列表框
应用程序窗口
含有子文档窗口的窗口框架
给出一个对象的多个实例
比较两个或多个窗口中的数据
文字处理
电子表格
文档窗口
无模式对话框或者被应用程序窗口管理和包含的文档窗口
给出一个程序的多个部分
数据的多个视图(表单)
从属窗口
附属应用程序的主窗口
给出被父程序调用的另一个程序
调出一个程序的帮助
控件约定
控件是用户同程序交互的可见单元。
用户界面设计人员面对着的控件集合取之不尽。
每个新的控件带有自己特定的行为和特征。
为每个用户选择合适的控件会产生更高的产出、更低的错误率和更高的用户满意度。
可以在你的屏幕上按图四的表中列出的控件用法使用控件。
控件使用说明
图四
控件
范围内应用的数量
控件类型
MenuBar
最多十个子项
Staticaction
Pull-DownMenu
最多十二个子项
CascadingMenu
最多五个子项,一层级联
Pop-upMenu
Push-button
每个对话框中最多六个
CheckBox
每组最多10~12个
Staticset/selectvalue
RadioButton
每组最多六个
ListBox
表中最多50行,显示8~10行
Dynamicset/selectvalue
Drop-downListBox
控件中一次显示一个选项,下拉框中不超过20项
Dynamicset/selectsinglevalue
CombinationListBox
控件中按标准格式一次显示一个选项,下拉框中不超过20项
Dynamicset/selectsinglevalue;
addvaluetolist
SpinButton
Slider
依赖于显示的数据
Staticset/selectvalueinrange
最后,尽量在整个应用程序中保持这些控件基本行为和摆放的一致性。
一旦你改变这些基本控件的行为,用户就会迷糊。
要仔细想过才改,并且这些改变用的时候要一致。
使用设计规范
要理解出色的用户界面设计(GUI)背后的规范并把它们应用到自己的程序中是一个挑战。
让我们检查一个程序,看看如何应用这些规范来改善界面。
看一看要重新设计的用户界面设计
图五中的界面被一家救护车分派公司用来维护客户数据,提供财务信息和分派救护车。
应用程序是从字符系统移植过来的,包含很多设计错误,这些错误将影响到重要任务应用系统程序的用户使用。
要记住,在重要应用系统中,界面的清晰简单尤其重要。
例如这里,对请求的快速处理攸关生死。
这个窗体中有如下错误:
图五
∙顶层有太多的功能。
用户要求新系统方便的提供所有信息,这使得窗体同时用于客户管理和救护车派送。
如果你输入完整的客户资料并按更新按钮,记录就更新了。
但是,如果你只输入最少量的客户信息,例如社会安全号,诊断,从哪里到哪里,然后按分派按钮,救护车就被派出。
更新功能和派送功能需要在不同的对话框中处理。
∙太多按钮。
右侧的按钮应该在父窗口中,也许就在工具栏中,但不应该在子窗口中。
∙差的导向帮助。
GUI控件应该按使用的频率摆放。
最重要的字段应该放在左上;
次要的字段应该放在右下。
当分派救护车时很难想象公司名和发票号是最重要的字段。
∙控件的不合理使用。
设计者采用了文本标签而不是组别框来区分屏幕上的数据应该归哪一组。
这许许多多的文本标签弄得屏幕非常乱同时使数据和标签很难区分。
可编辑的字段应该用一个框子框起来,以便可以非常直观的看出那些字段可以更改。
∙缺乏对称性。
简单的调整一些字段、组框和按钮就可以使界面更容易使用。
我们的大脑喜欢有序,而非无序。
改进的用户界面
图六和图七展示了同一应用程序大大改进后的界面。
图六
图七
∙不再乱七八糟。
这个应用程序应该有几个子窗口以便用户做不同的任务。
这些任务可以简单的通过任务菜单或按竖着的工具条上的按钮来操作。
派车按钮调出一个有模式的对话框而非无模式的子窗口。
这样,你就可以要求用户确认完成了派车任务。
如果用无模式的窗口的话,有可能被用户覆盖掉,甚至根本就没派车。
∙重排了输入字段。
混乱的字段顺序已经按重要性和使用频率更有逻辑性的调整了结构。
∙改进的控件。
修正后的界面显示了数据输入字段使用的一致性。
所有用户可以输入数据的字段都被框了起来。
组别框被用于分组相关字段或表明一个范围。
利用我们以前讨论过的规范,这些修正使我们得到一个清楚干净的并非常直观的一个界面。
实施有效的标准
当你把一些出色的设计经验应用到你的程序当中时,你怎么保证你的团队中其他人也这么做呢?
最有价值效用的使得你的GUI程序保持一致性的方法是采用易用、清晰、简明的GUI标准。
我们都有过这种经验,被积极发放给协作成员的标准手册,立刻就被放到了开发者的书架上,同其它从未读过的标准手册摆在一起。
要使你的标准避免这种命运,可以给他们提供在线的超文本格式的标准手册。
把你的标准分成一条一条规则和建议,要求开发人员必须遵守,如果违反,要求开发人员给出理由。
开发人员希望知道那些是强制执行的那些他们可以由他们自己调整。
总结
无论GUI用于哪个平台,九十年代以来对程序开发人员来讲,设计出色的图形用户界面(GUI)是一项重要的技能。
出色的GUI设计不是自发的。
它需要开发者学习和应用一些基本的规则,包括设计用户每天都乐于使用的一些东西。
它也需要开发人员坚持不懈用这些规则获得尽可能多的经验,以及向出色的GUI设计学习。
记住,如果你应用了规范并设计出来出色的用户界面,你的用户利用你为他们设计的界面将更容易和熟练的完成他们的工作。
JamesHobart是CCI(CorporateComputingInternational)的高级顾问,提供关于客户-服务器和GUI的服务,咨询和产品。
他擅长大型、大规模的客户-服务器应用程序的开发设计。
他对把基于字符的系统移植到图形用户界面的规划和事务处理系统的GUI设计有丰富的经验。
可通过70334.3064@同他联系。
PrinciplesofgoodGUIDesign
Graphicaluserinterfaces(GUIs)havebecometheuserinterfaceofchoice.YetdespitetheGUI'
spopularity,surprisinglyfewprogramsexhibitgoodinterfacedesign.Moreover,findinginformationexplainingwhatconstitutesagoodandintuitiveinterfaceisexceedinglydifficult.Inthisarticle,Idescribethebasicrulesforallgoodinterfaces-thecardinaldosanddon'
ts.
However,beforestartinginonwhatconstitutesgooddesign,Ineedtoexplainthecausesofbaddesign.Thisway,ifyouaretemptedtodeviatefromthetriedandtrue,you'
llknowwherethewrongpathleads-and,Ihope,getbacktogooddesign.
ForgettingtheUser
Developersoftendesignforwhattheyknow,notwhattheusersknow.Thisage-oldproblemoccursinmanyotherareasofsoftwaredevelopment,suchastesting,documentation,andthelike.Itisevenmoreperniciousintheinterfacebecauseitimmediatelymakestheuserfeelincapableofusingtheproduct.Avoidthiserrordiligently.
GiveUsersControl
GUIdesigners'
predilectionforcontrolisevidentinapplicationsthatcontinuallyattempttocontrolusernavigationbygrayingandblackeningmenuitemsorcontrolswithinanapplication.Controllingtheuseriscompletelycontradictorytoevent-drivendesigninwhichtheuserratherthanthesoftwaredictateswhateventswilloccur.Asadeveloper,ifyouarespendingalotoftimedynamicallygrayingandblackeningcontrols,youneedtore-examineyourdesignapproachandrealizethatyoumaybecontrollingtheuser,whomaynotwanttobecontrolled.Asbusinesschangesatafasterpace,flexibilityinuserinterfaceswillbecomeakeyenablerforchange.Allowingtheusertoaccesstheapplicationinwaysyouneverdreame
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 图形 用户界面 设计规范