界面设计规范.docx

界面设计规范.docx

《界面设计规范.docx》由会员分享，可在线阅读，更多相关《界面设计规范.docx（14页珍藏版）》请在冰豆网上搜索。

界面设计规范

版本所有：

广东同望科技股份有限公司

保密级别：

■普通□保密□机密

文件编号：

TUP/BZ-ZC-MG-JM

统一过程管理体系

界面设计规范

版本号1.0

修订历史

版本

发布日期

生效日期

修订说明

作者

审核人

批准人

当前状态

1.0

2007-11-30

2007-11-30

新建

曾雪玲

梁锋

袁阗

试用发布

目录

1.目的范围4

2.术语定义5

3.标准规范5

3.1用户界面设计准则5

3.1.1易用性5

3.1.2规范性5

3.1.3合理性6

3.1.4美观性7

3.1.5独特性7

3.1.6安全性8

3.1.7菜单设置8

3.1.8快捷方式9

3.1.9帮助9

3.1.10多窗口应用与系统资源10

3.2用户界面执行细则10

3.2.1布局10

3.2.2颜色11

3.2.3字体11

3.2.4文字12

3.2.5图形12

3.2.6表格12

3.2.7按钮12

3.2.8样式表13

3.2.9交互准则13

3.2.10联机帮助14

4.裁剪指南14

5.层次关系14

5.1主控文件14

5.2支持文件14

5.3相关文件14

6.附录14

6.1文件放置位置14

6.2各文件命名14

6.3图片的命名15

1.目的范围

●目的作用：

本文档目的是为了提高软件界面设计的规范性，为界面设计工作提供指导依据。

●应用范围：

美工部

●读者对象：

界面设计师、美工部经理。

2.术语定义

●可用性usability：

以有效性、效率和满意度为指标，产品在特定使用背景下为了特定的目的可为特定用户使用的程度。

●用户user：

与产品交互的个体。

●任务task：

实现目的所必需的活动。

3.标准规范

3.1用户界面设计准则

3.1.1易用性

“易用性Usability（又为可用性）”即把用户而非系统置于开发过程的中心。

这种被称为“以用户为中心进行设计”的概念，是指从设计过程的开端便把用户所关注的东西包含于其中，并规定用户应该是任何设计决定中最重要的因素。

易用性细则如下：

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.专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性语言。

3.1.2规范性

通常界面设计都按Windows界面的规范来设计，即包含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”的标准格式，界面遵循规范化的程度越高，则易用性相应的就越好。

小型软件一般不提供工具厢。

规范性细则如下：

1.常用菜单要有命令快捷方式。

2.完成相同或相近功能的菜单用横线隔开放在同一位置。

3.菜单前的图标能直观的代表要完成的操作。

4.菜单深度一般要求控制在三层以内。

5.工具栏要求可以根据用户的要求自己选择定制。

6.相同或相近功能的工具栏放在一起。

7.工具栏中的每一个按钮要有及时提示信息。

8.一条工具栏的长度最长不能超出屏幕宽度。

9.工具栏的图标能直观的代表要完成的操作。

10.系统常用的工具栏设置默认放置位置。

11.工具栏太多时可以考虑使用工具厢。

12.工具厢要具有可增减性，由用户自己根据需求定制。

13.工具厢的默认总宽度不要超过屏幕宽度的1/5。

14.状态条要能显示用户切实需要的信息，常用的有：

目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提示。

15.滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。

16.状态条的高度以放置五好字为宜，滚动条的宽度比状态条的略窄。

17.菜单和工具条要有清楚界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。

18.菜单和状态条中通常使用12px字体。

工具条比菜单宽，一般以左右各6像素为准。

19.右键快捷菜单采用与菜单相同的准则。

3.1.3合理性

合理性细则如下：

1.父窗体或主窗体的中心位置应该在对角线焦点附近。

2.子窗体位置应该在主窗体的左上角或正中。

3.多个子窗体弹出时应该依次向右下方偏移，以显示窗体出标题为宜。

4.重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。

5.错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。

横排开头或最后与竖排最后为易点位置。

6.与正在进行的操作无关的按钮应该加以屏蔽（Windows中用灰色显示，没法使用该按钮）。

7.对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。

8.非法的输入或操作应有足够的提示说明。

9.对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待。

10.提示、警告、或错误说明应该清楚、明了、恰当。

3.1.4美观性

界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。

美观性细则如下：

1.长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。

2.布局要合理,不宜过于密集，也不能过于空旷，合理的利用空间。

3.按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。

4.按钮的大小要与界面的大小和空间要协调。

5.避免空旷的界面上放置很大的按钮。

6.放置完控件后界面不应有很大的空缺位置。

7.字体的大小要与界面的大小比例协调。

8.前景与背景色搭配合理协调，反差不宜太大，主色要柔和，具有亲和力与磁力，坚决杜绝刺目的颜色。

9.大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等。

10.界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。

11.如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放。

12.对于含有按钮的界面一般不应该支持缩放，即右上角只有关闭功能。

13.通常父窗体支持缩放时，子窗体没有必要缩放。

14.如果能给用户提供自定义界面风格则更好，由用户自己选择颜色、字体等。

3.1.5独特性

如果一味的遵循业界的界面标准，则会丧失自己的个性，在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。

尤其在商业软件流通中有着很好的迁移默化的广告效用。

独特性细则如下：

1.安装界面上应有单位介绍或产品介绍，并有自己的图标。

2.主界面，最好是大多数界面上要有公司图标。

3.登录界面上要有本产品的标志，同时包含公司图标。

4.帮助菜单的“关于”中应有版权和产品信息。

5.公司的系列产品要保持一致的界面风格，如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。

3.1.6安全性

在界面上通过下列方式来控制出错几率，会大大减少系统因用户人为的错误引起的破坏。

开发者应当尽量周全地考虑到各种可能发生的问题,使出错的可能降至最小。

如应用出现保护性错误而退出系统,这种错误最容易使用户对软件失去信心。

因为这意味着用户要中断思路,并费时费力地重新登录,而且已进行的操作也会因没有存盘而全部丢失。

安全性细则如下：

1.最重要的是排除可能会使应用非正常中止的错误。

2.应当注意尽可能避免用户无意录入无效的数据。

3.采用相关控件限制用户输入值的种类。

4.当用户作出选择的可能性只有两个时,可以采用单选框。

5.当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。

6.当选项特别多时，可以采用列表框，下拉式列表框。

7.在一个应用系统中,开发者应当避免用户作出XX或没有意义的操作。

8.对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。

9.对可能发生严重后果的操作要有补救措施。

通过补救措施用户可以回到原来的正确状态。

10.对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。

11.对错误操作最好支持可逆性处理，如取消系列操作。

12.在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。

13.对可能造成等待时间较长的操作应该提供取消功能。

14.特殊字符常有；;’”><,｀‘：

“［”｛、\|｝］+=）-（_*&&^%$#@!

~,.。

?

/还有空格。

15.与系统采用的保留字符冲突的要加以限制。

16.在读入用户所输入的信息时，根据需要选择是否去掉前后空格。

17.有些读入数据库的字段不支持中间有空格，但用户切实需要输入中间空格，这时要在程序中加以处理。

3.1.7菜单设置

菜单是界面上最重要的元素，菜单位置按照按功能来组织。

菜单设置细则如下：

1.菜单通常采用“常用--主要--次要--工具--帮助”的位置排列，符合流行的Windows风格。

2.常用的有“文件”、“编辑”，“查看”等，几乎每个系统都有这些选项，当然要根据不同的系统有所取舍。

3.下拉菜单要根据菜单选项的含义进行分组，并切按照一定的规则进行排列，用横线隔开。

4.一组菜单的使用有先后要求或有向导作用时，应该按先后次序排列。

5.没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头，不常用的靠后放置；重要的放在开头，次要的放在后边。

6.如果菜单选项较多，应该采用加长菜单的长度而减少深度的原则排列。

7.菜单深度一般要求最多控制在三层以内。

8.对常用的菜单要有快捷命令方式，组合原则见“3.2.8快捷方式”。

9.对与进行的操作无关的菜单要用屏蔽的方式加以处理，如果采用动态加载方式——即只有需要的菜单才显示——最好。

10.菜单前的图标不宜太大，与字高保持一致最好。

11.主菜单的宽度要接近，字数不应多于四个，每个菜单的字数能相同最好。

12.主菜单数目不应太多，最好为单排布置。

3.1.8快捷方式

在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些在西文Windows及其应用软件中快捷键的使用大多是一致的。

快捷方式细则如下：

1.面向事务的组合

a）Ctrl-D删除；Ctrl-F寻找；Ctrl–H替换；Ctrl-I插入；

b）Ctrl-N新记录；Ctrl-S保存；Ctrl-O打开。

2.列表：

Ctrl-R，Ctrl-G定位；Ctrl-Tab下一分页窗口或反序浏览同一页面控件。

3.编辑：

a）Ctrl-A全选；Ctrl-C拷贝；Ctrl-V粘贴；Ctrl-X剪切；

b）Ctrl-Z撤消操作；Ctrl-Y恢复操作。

4.文件操作：

Ctrl-P打印；Ctrl-W关闭。

5.系统菜单：

Alt-F文件；Alt-E编辑；Alt-T工具；Alt－W窗口；Alt－H帮助。

6.MSWindows保留键：

a）Ctrl-Esc任务列表；Ctrl-F4关闭窗口；Alt-F4结束应用；Alt-Tab下一应用。

b）Enter缺省按钮/确认操作；Esc取消按钮/取消操作；Shift-F1上下文相关帮助。

7.按钮中：

可以根据系统需要而调节，以下只是常用的组合。

a）Alt-Y确定（是）；Alt-C取消；Alt-N否；Alt-D删除；Alt-Q退出；

b）Alt-A添加；Alt-E编辑；Alt-B浏览；Alt-R读；Alt-W写。

c）这些快捷键也可以作为开发中文应用软件的标准,但亦可使用汉语拼音的开头字母。

3.1.9帮助

系统应该提供详尽而可靠的帮助文档，在用户使用产生迷惑时可以自己寻求解决方法。

帮助细则如下：

1.帮助文档中的性能介绍与说明要与系统性能配套一致。

2.打包新系统时，对作了修改的地方在帮助文档中要做相应的修改。

3.操作时要提供及时调用系统帮助的功能。

常用F1。

4.在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。

也就是说帮助要有即时针对性。

5.提供联机帮助格式或HTML帮助格式。

6.用户可以用关键词在帮助索引中搜索所要的帮助，当然也应该提供帮助主题词。

7.如果没有提供书面的帮助文档的话，最好有打印帮助的功能。

8.在帮助中应该提供我们的技术支持方式，一旦用户难以自己解决可以方便的寻求新的帮助方式。

3.1.10多窗口应用与系统资源

设计良好的软件不仅要有完备的功能，而且要尽可能的占用最底限度的资源。

多窗口应用与系统资源细则如下：

1.在多窗口系统中，有些界面要求必须保持在最顶层，避免用户在打开多个窗口时，不停的切换甚至最小化其他窗口来显示该窗口。

2.在主界面载入完毕后自动卸出内存，让出所占用的WINDOWS系统资源。

3.关闭所有窗体，系统退出后要释放所占的所有系统资源，除非是需要后台运行的系统。

4.尽量防止对系统的独占使用。

3.2用户界面执行细则

3.2.1布局

3.2.1.1屏幕不能拥挤

1.拥挤的屏幕让人难以理解，因而难以使用。

试验结果（Mayhew,1992年）屏幕总体覆盖度不应该超过40％，而分组总覆盖度不应该超过62％。

让人看上去，不能太拥挤，也不能太松散。

2.整个项目，采用统一的控件间距，通过调整窗体大小达到一致，即使在窗体大小不变的情况下，宁可留空部分区域，也不要破坏控件间的行间距。

3.2.1.2区域排列

1.一行控件，纵向中对齐,控件间距基本保持一致，行与行之间间距相同，靠窗体Border距离应大于行间间距（间距加边缘留空）。

2.当屏幕有多个编辑区域，要以视觉效果和效率来组织这些区域。

3.2.1.3数据对齐要适当

1.说明文字，中文版应使用中文全角冒号，纵向对齐时，并按冒号右对齐。

纵向控件宽度尽量保持相通。

并左对齐。

2.例如金额等字符穿应根据小数点对齐，或者右对齐。

3.2.1.4有效组合

逻辑上相关联的控件应当加以组合，以表示其关联性，反之，任何不相关的项目应当分隔开，在项目集合间，用间隔对其进行分组，或者使用方框划分各自区域。

3.2.1.5窗口缩放时，控件位置布局

为了使界面不出现跑版或者难看的局面，解决方法：

1.窗口大小，不允许改变尺寸。

2.改变尺寸的窗口，在Onsize的时候做控件位置、大小的相应改变。

3.2.2颜色

1.统一色调，针对软件类型以及用户工作环境选择恰当色调。

2.如：

安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等。

3.如果有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一，读取系统标准色表。

4.色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符，?

quot;!

"，"?

"着重号，以及图标等。

5.颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试。

6.遵循对比原则：

在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足够反差，而蓝色和白色反差很大。

除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。

7.整个界面色彩尽量少的使用类别不同的颜色。

3.2.3字体

1.使用统一字体，字体标准的选择依据操作系统类型决定。

2.中文采用标准字体，“宋体”，英文采用标准MicrosoftSansSerif不考虑特殊字体（隶书、草书等,特殊情况可以使用图片取代）,保证每个用户使用起来显示都很正常。

3.字体大小根据系统标准字体来，例如MSS字体8磅，宋体的小五号字（9磅）五号字（10.5磅）。

4.所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况。

5.ITop采用BCB，所有控件默认使用parentfont，不允许修改，这样有利于统一调整。

6.系统大小字体属性改变的处理。

7.Windows系统有个桌面设置，设置大字体属性，很多界面设计者常常为这个恼火，如果设计时遵循微软的标准。

8.全部使用相对大小作为控件的大小设置，当切换大小字体的时候，相对不会有什么特殊问题。

9.但是由于常常方便使用点阵作为窗口设计单位，导致改变大字体后，出现版面混乱的问题。

10.这个情况下，应该做相应处理：

a）写程序自动调节大小，点阵值乘以一个相应比例

b）全部采用点阵作为单位，不理会系统字体的调节，这样可以减少调节大字体带来的麻烦。

BCB/DELPHI中多采用这种方法，但是必然结果是和系统不统一。

3.2.4文字

提示信息、帮助文档文字表达遵循以下准则：

1.口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字

2.断句逗号句号顿号分号的用法，\r\n提示信息比较多的话，应该分段，

3.警告、信息、错误使用对应的表示方法

4.使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，则应该统一规定。

5.根据用户不同采用相应的词语语气语调，如专用软件，可以出现很多专业术语，用户为儿童：

这可以语气亲切和蔼，老年用户则应该成熟稳重。

制定标准遵循之。

3.2.5图形

一个多姿多彩的人机交互界面，少不了精美的鼠标光标、图标以及指示图片、底图等。

1.也需要遵循统一的规则，包括上述颜色表的建立，图标的建立步骤也应该尽可能的形成标准

2.有标准的图标风格设计，有统一的构图布局，有统一的色调、对比度、色阶，以及图片风格

3.底图应该融于底色，使用浅色,低对比，尽量少的使用颜色。

4.图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户机器容易联想的到物件，绝对不允许画出莫名奇妙的图案。

5.鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况。

3.2.6表格

1.长度：

以百分比来确定，根据界面信息量大小进行调节。

2.高度：

以表单默认的高度为准。

3.背景色：

通过CSS控制。

3.2.7按钮

3.2.7.1TAB顺序

习惯用法，阅读顺序，从从左到右，从上到下。

3.2.7.2快捷键

1.全局快捷键菜单中加以描述CTRL+XXX并入帮助列表。

2.快捷键写入帮助，特殊说明，并在使用培训时强调使用

3.2.7.3加速键

1.使用非破坏性缺省按钮，回车、ESC键的正确使用：

a）一个窗体，有默认加速键，如回车表示激活当前窗口设置为default的按钮动作，esc表示关闭窗口。

b）在调用default按钮动作和关闭动作时候，不应该做有破坏性的操作，避免用户错误操作产生危害程度，例如不能把删除数据等功能的按钮作为缺省按钮。

当用户要提交很多数据时，应该屏蔽esc，或者做退出提示，告诫用户是否保存提交。

2.可接收动作控件必须拥有加速键，统一加速键描述（&A）。

为结合键盘使用，可操作控件都应该有加速键，加速键定义准则，为英文单词第一个字母，如果同一窗体重复则用第二个字母，以此类推，则加速方式为alt+这个加速键，用统一的方法标识在界面中，如XXX（A）或者wps的A.XXX英文可直接在字母下标识下划线Cancel，对于无法像button一样显示快捷键的Edit等控件，则在Edit描述的Label中显示快捷键。

3.2.7.4弹出菜单

1.辅助菜单必须在可视化界面上拥有对应的按钮或者菜单选项。

2.由于辅助菜单由用户点击鼠标左右键或者别的动作才能调出来显示给用户。

无法清晰的显示给用户，所以对应选项应该可以通过别的途径得到,例如界面上有相应控件或弹出右键菜单的按钮等。

3.2.8样式表

1.采用统一格式及命名。

2.每种类别必须加注释。

3.每次增加新类别必须加注释，注明修改人及时间。

3.2.9交互准则

1.disable而不是notvisible：

要使一个功能有时允许有时不允许用户使用，则这个控件的不能随便隐藏，应该使用disable属性进行表示，以免用户发现控件失踪后束手无策。

2.窗口弹出位置要明显：

点击一个控件，弹出窗口或者菜单，应该给人明显提示，最低要求是覆盖刚才点击的位置，让用户轻松跳转到新的界面。

3.执行动作要提示：

给用户一个视觉感受的同时，写程序的时候应该注意用户的交互感受，用户界面作为人机对话的工具，用户做了任何动作，应该给用户一个视觉或者听觉、触觉提示。

而且这个提示应该很明显，但不应提示过长，可以有以下几种方法，当用户点击按钮等动作进行一个工作时：

a）弹出交互对话框让用户点击确认。

b）改变用户界面中控件参数提示：

（处理不用用户确认的提示，有一定延时，或者用户按键后自动清除。

）

c）如：

改变标题栏字符串，显示“信息：

提交成功”,或者专门设置一个状态栏、TLable等用来进行提示。

d）听觉提示：

在确定有声卡，用户可以听到声音的时候，发出特殊声音提示。

一般作为重要提示的辅助。

声音不应过长，紧急错误提示应该短促，频率较高，成功提示应该舒缓，轻松。

等等……

3.2.10联机帮助

3.2.10.1帮助执行

1.系统默认、行业标准的控件操作不需要逐一描述，只需要对特殊控件加以描述。

2.特殊操作、特殊功能界面，在界面上加控件直接连接到对应的HELP文件中。

3.特殊设置，应该在界面上用简洁明了的语句说明，或者是用Tiptool，并由第二步帮助。

3.2.10.2执行文档

1.结构化，按功能模块划分，必须阐述功能通过什么方法可以在软件中实现。

2.帮助文件是帮助用户更好的使用软件，措辞要恰当、简捷、通俗易懂,每一句话都应该有目的，帮用户解决问题。

3.帮助文件不是广告、商业软件不允许打广告。

描述公司信息目的是为了方便用户在没有办法的情况下找到售后支持，网址连接、信箱地址、电话号码绝对不允许无效。