界⾯设计需求⽂档
界⾯设计的⾏业标准总结⼀2011.09.23
GUI的整体标准包括以下四个⽅⾯：1.规范性2.合理性3.⼀致性4.界⾯定制性⼀、GUI设计的规范
遵循⼀致的准则，确⽴标准并遵循，是软件界⾯设计中必不可必的环节。确⽴界⾯标准的好处：
1.便于⽤户操作：户使⽤起来能够建⽴起精确的⼼⾥模型，使⽤熟练了⼀个界⾯后，切换到另外⼀个界⾯能够很轻松的推测出各种功能
2.使⽤户感觉到统⼀、规范，在使⽤软件的过程中愉快轻松的完成操作，提⾼对软件的认知3.降低培训、⽀持成本，不必花费较多的⼈⼒对客户进⾏逐个指导⼆、GUI布局的合理性
界⾯的合理性是指界⾯是否与软件功能相融洽，界⾯的颜⾊和布局是否协调等。例如：1.界⾯布局a.屏幕不能拥挤
* Mayhew在1992年的试验结果表明屏幕总体覆盖度不应该超过40％，⽽分组覆盖度不应该超过62％。
* 整个项⽬，采⽤统⼀的控件间距，通过调整窗体⼤⼩达到⼀致，即使在窗体⼤⼩不变的情况下，宁可留空部分区域，也不要破坏控件间的⾏间距。b.控件按区域排列
* ⼀⾏控件纵向中对齐, 控件间距基本保持⼀致，⾏与⾏之间间距相同，靠窗体的控件距窗体边缘的距离应⼤于⾏间距。* 当屏幕有多个编辑区域，要以视觉效果和效率来组织这些区域c.有效组合
逻辑上相关联的控件应当加以组合以表⽰其关联性，反之，任何不相关的项⽬应当分隔开。在项⽬集合间⽤间隔对其进⾏分组，或者使⽤⽅框划分各⾃区域d.窗⼝缩放时，控件位置、布局* 固定窗⼝⼤⼩，不允许改变尺⼨
* 改变尺⼨的窗⼝，在窗⼝尺⼨发⽣变化时控件的位置、⼤⼩做出相应的改变
* 改变尺⼨的窗⼝，在窗⼝改变尺⼨时增加相应在的纵向、横向滚动条，以⽅便⽤户使⽤窗体上的控件2.界⾯颜⾊搭配
使⽤恰当的颜⾊，可以使软件的界⾯看起来更加规范：a.统⼀⾊调
针对软件类型以及⽤户⼯作环境选择恰当⾊调，如：安全软件，根据⼯业标准，可以选取黄⾊。绿⾊体现环保，蓝⾊表现时尚清新、紫⾊表现浪漫等等，淡⾊可以使⼈舒适，暗⾊做背景使⼈不觉得累等。
b.与操作系统统⼀，读取系统标准⾊表c.遵循对⽐原则
在浅⾊背景上使⽤深⾊⽂字，深⾊背景上使⽤浅⾊⽂字，如蓝⾊⽂字以⽩⾊背景容易识别，⽽在红⾊背景则不易分辨。除⾮特殊场合，杜绝使⽤对⽐强烈，让⼈产⽣憎恶感的颜⾊d.整个界⾯⾊彩尽量少的使⽤类别不同的颜⾊
e.颜⾊⽅案也许会因为显⽰器、显卡、操作系统等原因显⽰出不同的⾊彩f.针对⾊盲、⾊弱⽤户，可以使⽤特殊指⽰符
e.颜⾊⽅案也许会因为显⽰器、显卡、操作系统等原因显⽰出不同的⾊彩f.针对⾊盲、⾊弱⽤户，可以使⽤特殊指⽰符三、GUI风格的⼀致性
界⾯的⼀致性既包括使⽤标准的控件，也指相同的信息表现⽅法，如在字体、标签风格、颜⾊、术语、显⽰错误信息等⽅⾯确保⼀致。
1.在不同分辨率下的美观程度
软件界⾯要有⼀个默认的分辨率，⽽在其他分辨率下也可以运⾏，分别在
800×600，1024×768，1280×768，1280×1024，1200×1600分辨率下的⼤字体、⼩字体下的界⾯表现。2.界⾯布局要⼀致
如所有窗⼝按钮的位置和对齐⽅式要保持⼀致。3.界⾯的外观要⼀致
如控件的⼤⼩、颜⾊、背景和显⽰信息等属性要⼀致，⼀些需要特殊处理或有特殊要求的地⽅除外。4.界⾯所⽤颜⾊要⼀致
颜⾊的前后⼀致会使整个应⽤软件有同样的观感，反之会让⽤户觉得所操作的软件杂乱⽆章，没有规则或⾔。5.操作⽅法要⼀致
如双击其中的项，触发某事件，那么双击任何其他列表框中的项，都应该有同样的事件发⽣。6.控件风格、控件功能要专⼀a.不错误的使⽤控件
例如使⽤Button样式做Table的功能，拿主菜单条显⽰版权信息等b.⼀个控件只做单⼀功能，不复⽤
如果在特殊情况下出现复⽤的时候，可采⽤以下两种⽅法解决：* 分组，使⽤双份控件
* 使⽤Table页，给⽤户很明显的视觉变化7.标签和讯息的措词要⼀致
如在提⽰、菜单和帮助中产⽣相同的术语。8.标签中⽂字信息的对齐⽅式要⼀致
如某类描述信息的标题⾏定为居中，那么其他类似的功能也应该与此⼀致。9.快捷键在各个配置项上语义保持⼀致
如Tab键的习惯⽤法是阅读顺序从从左到右，从上到下。在定义软件快捷键时也可以将现有⼀些快捷键的属性作为参考，如表1-3-1（见附件）列出了常⽤的快捷键及其功能。
四、GUI界⾯操作可定制性
界⾯的可定制性⼤致可分为以下⼏个特性：1.界⾯元素可定制
允许⽤户定义⼯具栏、状态栏是否显⽰，⼯具栏显⽰在界⾯上的位置；允许⽤户定义菜单的位置等。2.⼯具栏可定制
不同⽤户对常⽤⼯具的使⽤是不同的，因此允许⽤户建⽴新的⼯具栏，选择要显⽰的⼯具栏，定制⼯具栏上的按钮等功能在软件系统中经常被⽤到3.统计检索可定制
对于某些特殊⾏业的软件可以提供统计检索的可定制性，在充分了解⽤户需求的基础上制定⼤量的安全供⽤户选择。GUI所包含各类元素标准的定制GUI的元素⼤致可分为以下⼏个⽅⾯：1. 窗⼝2. 菜单3. 图标4. 控件5. ⿏标6. ⽂字7. 联机帮助
界⾯设计的⾏业标准总结⼆⼀、GUI窗⼝的标准
窗⼝是显⽰设备中的⼀个区域，⽤于观看对象、对象相关信息以及应⽤与对象的动作进⾏交互。从外观上来说，通常窗⼝是由标题、边框、菜单、⼯作区、滚动条等组成。窗⼝的标题栏可以进⾏打开、关闭、创建、缩放、移动、删除、重叠等操作好的GUI窗⼝应该具备以下标准：
1.窗⼝控件的⼤⼩、对齐⽅向、颜⾊、背景等属性的设置和程序设计规约相⼀致
2.显⽰相关的下拉菜单、⼯具条、滚动条、对话框、按钮、图标和其他控制，既能正确显⽰⼜能调⽤3.若窗⼝⽆法显⽰，所有内容能够改变⼤⼩、移动和滚动4.活动窗⼝能够反显加亮5.窗⼝能够正确的关闭
6.多个窗⼝叠加时窗⼝的名称正确显⽰
7.窗⼝的数据能够利⽤⿏标、功能键、⽅向前头和键盘操作8.当窗⼝被覆盖并重新调⽤后，窗⼝能够正确再⽣9.如果使⽤多任务，所有的窗⼝能够被实时更新10.窗⼝⽀持最⼩化和最⼤化或放⼤11.窗⼝上的控件随着窗体的缩放⽽缩放12.⽗窗体⽀持缩放时，⼦窗体也应该⽀持缩放
13. ⼀个窗⼝中按Tab键，移动聚焦按顺序移动。先从左⾄右，再从上到下
14.⼦窗⼝位置在⽗窗⼝的左上⾓或正中，正上⽅1/4处为易吸引⽤户注意⼒的位。⽗窗⼝或主窗⼝的中⼼位置应该在对⾓线焦点附近，如下图2-1-2所⽰
15.当多个⼦窗⼝弹出时依次向右下⽅偏移，并且显⽰出窗⼝标题，如下图2-1-3所⽰16.重要的命令按钮与使⽤频繁的按钮放在了界⾯醒⽬的位置17.与正在进⾏的操作⽆关的按钮应该加以屏蔽18.按钮⼤⼩要与界⾯的⼤⼩和空间协调19.窗⼝中所包含的标签左对齐排列20.多窗⼝的切换响应时间不宜过长⼆、GUI菜单的标准
菜单是否易⽤主要体现在它能否提供线索帮助⽤户识别，⽽不⽤强迫⽤户去记忆，⼀个好的菜单设置可以分为以下⼏个⽅⾯：1.菜单设置符合软件的需求
2.菜单项的措词准确，能够表达出所要进⾏设置的功能3.菜单项的顺序合理，具有逻辑关联的项⽬集中放置4.图形布局⼀致
5.菜单设置在窗体标题栏的下⽅三、GUI图标的标准
图标是表⽰实体信息简洁、抽象的符号，它还可以作为可视按钮项，当被选中激活时，可以完成指定的功能。那么图标的设计当中应该着重考虑哪些问题呢，以下提供⼏点可供参考：1.图标的设置符合常规的表达习惯2.不同的⽬标采⽤不同的图标
3.图标具有清晰的轮廓，轮廓清晰的图标可保证图像在不同背景⾊上都具有较好的效果
4.选择合适的尺⼨来定义图标。Windows XP系统的图标有四种尺⼨（以像素为单位）可作为参考：48×48，32×32，24×24以及16×16，图标⼤⼩的选取决定于⼯具栏所定义的宽度
5.图标的外形与实际功能相似，应尽量避免抽象。这样的图标可以使⽤户很轻松、容易地认识图标的作⽤6.在图标上加以标注，⽤来说明图标所完成的功能7.图标放置在菜单栏的下⽅四、GUI中控件的标准
软件系统功能的实现与控件是密不可分的，各控件位置的摆放直接影响到软件的使⽤，及其美观程度。下⾯举例说明软件系统中最常⽤到的控件对其元素间距、摆放位置进⾏说明：1.控件元素的间距a.单个元素间距
* 输⼊框之间垂直间距为5px
* Label⽂本标签和输⼊元素之间⽔平间距为8-22px* 复选框、单选按钮之间垂直间距为8px
* 多种元素混合垂直排列时，复选框和单选按钮边上的间距⽆论在什么情况下都为8pxb.元素分组间距
* 窗⼝边框和内容区域的四周边距为11px；* ⽗组和⼦组之间的四周间距为10px；
* 分组框边框和内部内容区域的四周边距为5px；* 复选框组、单选框组的组⽔平间距为15px
2.按钮的位置，如下表2-4-1对按钮摆放位置的规则做了总结
五、⿏标、⼿指、触屏笔、利器等在GUI中的标准
⽤户会把⿏标移进、移出窗⼝，或当光标在窗⼝，或当光标在窗⼝中，⽤户按下、释放⿏标键，⿏标是否准确、灵活，对⼀个软件系统来说也很重要。以下⼏点标准可作为在软件系统中⿏标设计的参考：1.在整个交互的过程中，可以识别⿏标操作2.多次点击⿏标后，仍能够正确识别
3.⿏标有多个按钮的情况下，能够正确识别每个按钮所要完成的功能4.光标、处理指⽰器和识别指针随操作恰当的改变5.点击选中时，⿏标指针停留在选中内容上，⽽不会滑动6.⽀持⿏标滑轮上下翻动操作
7.对于相同种类的元素采⽤相同的操作激活
8.采⽤动态图标形象的表⽰出当前的操作，如⽤⽔漏表⽰系统忙，⽤⼿型表⽰可以点击等9.⿏标⽆规则点击时不会产⽣不良后果
10.单击⿏标右键弹出快捷菜单，取消右键后该菜单隐藏11.⿏标光标样式统⼀，尽量使⽤系统标准，杜绝出现重复的情况六、GUI⽂字的标准
⽂字在视觉上向⽤户传达各种信息，界⾯⽂字包括界⾯⽂字的字体和界⾯⽂字的⽤语两个⽅⾯，那这两⽅⾯都有哪些要求呢？以下分别阐述。1.字体
a.使⽤统⼀字体，如规定软件系统的中⽂字体为“宋体”，英⽂及数据采⽤“Times New Roman”b.所有控件、描述信息尽量使⽤⼤⼩统⼀的字体属性，除了特殊提⽰信息、加强显⽰等例外情况2.⽂字表达
提⽰信息、帮助⽂档⽂字表达遵循以下准则：
a.⼝语化描述，⽤词客⽓多⽤您、请，不要⽤或少⽤专业术语，杜绝错别字
b.标点符号（断句、逗号、句号、顿号、分号）的⽤法要统⼀，提⽰信息⽐较多的话要进⾏分段c.警告、信息、错误使⽤对应的表⽰⽅法
d.使⽤统⼀的语⾔描述，例如⼀个关闭功能按钮，可以描述为退出、返回、关闭，则应该统⼀规定
e.根据⽤户不同采⽤相应的词语语⽓语调七、GUI联机帮助的标准帮助⽂档适⽤于以下三种情况：
* 系统默认、⾏业标准的控件操作不需要逐⼀描述，只需要对特殊控件加以描述* 特殊操作、特殊功能界⾯，在界⾯上加控件直接连接到对应的帮助⽂件中
* 特殊设置的详细信息，除了应该在界⾯上⽤简洁明了的语句说明外，还可以在界⾯上加控件直接连接到对应的帮助⽂件中帮助⽂档的标准要求：* 结构化，按功能模块划分
* 必须阐述功能通过什么⽅法可以在软件中实现* 措词恰当、简捷、通俗易懂，明了的帮助⽤户解决问题* 不在帮助⽂档中做⼴告宣传
