界面设计标准

1.易用性

● 界面元素的名称、标签应该易懂，用词准确，避免使用模楞两可的字眼，要与同一界面上的其他元素易于区分，能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作作。

● disable 而不是not visible。

● 完成相同或相近功能的按钮用GoupBox框起来，常用按钮要支持快捷方式。

● 完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。

● 按功能将界面划分局域块，用GoupBox框括起来,并要有功能说明或标题。

● 界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。

● 界面上首先应输入的和重要信息的控件在Tab order中应当靠前,位置也应放在窗口上较醒目的位置。

● 同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。

● 分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab

● 默认按钮要支持Enter选定及鼠标选择操作，即按Enter后自动执行默认按钮对应操作。

● 可写控件检测到非法输入后应给出说明并能自动获得焦点。

● Tab 键的顺序与控件排列顺序要一致，总体遵守从上到下，同时行间从左到右的方式。

● 复选框和选项框按选择几率的高底而先后排列。

● 复选框和选项框要有默认选项，并支持Tab键选择。

● 界面空间较小时使用下拉框而不用选项框。

● 选项数较少时使用选项框，相反使用下拉列表框。

● 专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。

 

2.规范性

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

● 小型软件可以不提供工具栏。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

● 菜单和工具条要有清楚的界限;

● 菜单要求凸出显示，这样在移走工具条时仍有立体感。

● 菜单和状态条中通常使用5号字体。工具条一般比菜单要宽，但不要宽的太多，否则看起来很不协调。

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

● 如果菜单和按钮将使用户进入一个新的界面，则在标签文本之后加上三句点的省略号“…”

 

3.帮助设施

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

● 帮助文档中的性能介绍与说明要与系统性能配套一致。系统作修改时，相应的帮助文档也应该保持同步更新。

● 操作时要提供及时调用系统帮助的功能。常的热键是F1。

● 帮助要有即时针对性，在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。

● 最好提供目前流行的联机帮助格式或HTML帮助格式。

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

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

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

● 可以在系统菜单中提供一个about对话框，以快速地提供程序的版本、版权声明和技术支持方式等信息。

 

4.合理性

● 屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。

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

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

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

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

● 错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。

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

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

● 非法的输入或*作应有足够的提示说明。

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

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

 

5.美观与协调性

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

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

● 长宽比或宽长比接近黄金点比例，切忌长宽比例失调。

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

● 相邻或同组的按钮大小相同，同界面上所有的按钮高度相同。

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

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

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

● 字号的大小要与界面的大小比例协调,字体大小根据系统标准字体来，例如 MSS字体8磅，宋体的小五号字(9磅）五号字（10.5磅)。

● 使用正规字体，中文采用标准字体 “宋体”，英文采用标准 Microsoft Sans Serif，不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代)，除非是需要艺术处理或有特殊要求的地方。

● 前景与背景色搭配合理协调，反差不宜太大，常用色考虑使用Windows界面色调。

● 如果使用其他颜色，主色要柔和，具有亲和力，坚决杜绝刺目的颜色。Graphtalk程序建议以下按钮的风格：“确定” 按钮文本颜色设为深蓝，“取消”按钮文本颜色设为深红，“帮助” 按钮文本颜色设为深绿，大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等。

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

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

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

● 鼠标光标样式统一，尽量使用系统标准。

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

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

● 如果需要缩放对话窗，建议以下方式调整每个控件的attachment属性：不必变宽的控件，如按钮、静态文本等、采用左上锁定，右下不锁定。数据控件，如编辑框、下拉框等，尽可能排放于每行的最右边，采用左上角锁定，右边弹性粘附。多行式控件放置于界面最下面端，采用左上右下角全部锁定；

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

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

 

6.菜单

● 菜单位置按照按功能来组织。

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

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

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

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

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

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

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

● 对常用的菜单要有快捷命令方式，组合原则见6.1.8。

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

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

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

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

 

7.独特性

如果一味的遵循业界的界面标准，则会丧失自己的个性.在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。

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

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

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

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

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

 

8.键盘快捷方式

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

菜单中：

● 面向事务的组合有:

Ctrl-D 删除 ；Ctrl-F 寻找 ；Ctrl –H替换；Ctrl-I 插入 ；Ctrl-N 新记录 ；Ctrl-S 保存 Ctrl-O 打开。

● 列表:

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

● : 编辑:

Ctrl-A 全选；Ctrl-C 拷贝；Ctrl-V 粘贴；Ctrl-X 剪切；Ctrl-Z撤消*作；Ctrl-Y恢复*作。

● 文件操作:

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

● 系统菜单

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

● 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.安全性

在界面上通过下列方式来控制出错几率，会大大减少系统因用户人为的错误引起的破坏。开发者应当尽量周全地考虑到各种可能发生的问题,使出错的可能降至最小。如应用出现保护性错误而退出系统,这种错误最容易使用户对软件失去信心。因为这意味着用户要中断思路, 并费时费力地重新登录,而且已进行的操作也会因没有存盘而全部丢失。

● 排除可能会使应用非正常中止的错误。

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

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

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

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

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

● 在一个应用系统中,开发者应当避免用户作出未经授权或没有意义的操作。

● 对可能引起致命错误或系统出错的输入字符或动作要加限制、屏蔽和处理。

● 对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。

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

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

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

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

●特殊字符常有；;’”><,｀‘：“［”｛、\|｝］+=)-(_*&&^%$#@!~,.。?/还有空格

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

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

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

 

10.多窗口的应用与系统资源

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

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

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

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

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

 

 

 

界面设计目标：

● 用户认可

● 降低培训成本

● 体现企业文化

 

交互设计：制定交互方式、操作与跳转流程、结构

● 能够满足用户需求，理解用户、用户的工作方式与思考方式

● 错误的处理，首先要防止用户错误操作的发生，其次提供用户改正错误的方法，最后可以让用户重新开始

● 信息架构，组织分类与导航的结构要清晰。要有组织原则，组织原则要与“软件目标”和“用户需求”相关

● 命名规则，“说用户的语言”并且“保持一致性”

 

界面设计：界面的布局、导航、信息、视觉的设计

● 界面元素要主次分明，一看就知道那些是最重要的

● 遵循用户的使用习惯

● “分组”或“整理”界面散乱的信息

● 不要使用错误的控件，“多选框”、“单选框”、“下拉框”等哪一个是用户真正想点击的

● 一个控件只做一个功能，不复用

● 每个界面都应该有标题，知道当前在什么位置

● 一致性和标准，界面的布局、操作方式以及界面上的名词等要定义一致

● 界面用词不能有二意

● 界面要有进有出，自由控制

● 要有帮助、说明

● 状态要有可见性，不能点击某个按钮以后没有任何反应

● 不能把异常信息显示到界面

● 提示信息要简单，统一采用一种格式，如果是错误信息的提示，要提供解决错误的办法

● 颜色、字体要使用恰当，考虑用户的偏好。推荐字体：宋体，14px

● 信息内容与背景的“对比”要强烈，不能模糊不清

● 界面用词：口语化、客气、多用请，不要用或少用专业术语，杜绝错别字

● 最后，简单就是美，每个操作都不言而喻