界面设计规范
1.引言 (2)
1.1概述 (2)
1.2信息位置的安排原则 (2)
2.规范基本规定 (4)
2.1环境 (4)
2.2文字与颜色 (4)
2.3数据格式与显示 (4)
2.4 键盘控制与无鼠标操作 (4)
3.窗口控件 (5)
3.1 MDI与SDI (5)
3.2 快闪窗口(SPLASH) (6)
3.3 登录窗口(LOGIN) (7)
3.4关于窗口(ABOUT) (8)
3.5 响应窗口(RESPONSE) (8)
3.6 系统主窗口 (9)
3.7 业务办理类窗口 (10)
3.8 数据查询类窗口 (12)
4.数据窗口控件 (14)
5.菜单控件 (17)
6. 按钮控件 (17)
7. 输入域 (17)
8. 帮助 (17)
1.引言
用户界面是应用系统的外在表现,是用户工作的接口,它的质量会直接影响系统的友好性与可用性。
本规范用于说明进行管理信息系统(MIS)设计开发时,所应遵循的用户界面开发规范,旨在描述设计怎样的界面风格,为用户所接收。
该规范主要针对PowerBuilder开发工具的进行设计。
由于PowerBuilde所倡导并提供的风格是基于图形化用户界面GUI的,是与Windows的界面风格相一致的,因此该规范同样可以适用于其他的前台开发工具。
系统界面如果采用WEB页面的方式,则设计原则另行规定。
规范中未做声明的内容,以满足开发总则为准。
1.1概述
有资料调查结果显示,用户希望的最佳屏幕特点为:
●一个规整、清晰、毫不混乱的外观。
●对于将要显示的内容以及对其将进行的操作有一个明确的提示。
●所希望的信息出现在其应该出现的位置。
●清楚地指明标题、小标题、数据、指示、选择等各种项目的关系。
●平白、简单的文字。
●通过简单的途径找到系统所含内容及得到它的方法。
●明确地指出什么时候某个操作能引起数据或系统运行的永久性改变
这样就要求我们所设计的用户界面,应满足如下基本要求:
*充分性:用户界面应充分满足功能要求
*一致性:用户界面应满足一致性要求,包括本模块内与分系统之间
*简洁性:用户界面在满足功能的前提下应尽量保持简洁
*合理性:用户界面的布局与设置应满足合理的功能要求
美观性:用户界面应满足美观性要求
1.2信息位置的安排原则
1.在屏幕左上角提供明显的起动点。
2.在屏幕上为诸如菜单、按钮、错误信息、标题、数据区等特定信息保留特定的区域,
并使这些区域在所有屏幕上保持一致。
3.对各种区域的编排应保持均衡、规整、对称、简明、比例协调、整体性。
●屏幕标题位于上中部,有利于产生对称感;菜单置于屏幕顶部,仅在标题
之下;按钮置于屏幕底部,在信息区之下。
●均衡感是将窗口显示本身置于中央,让各种元素在水平轴和垂直轴两边均保持相同比重,以及将标题置于中央而实现的。
●规整性是一种基于某些规则或计划的形式上的统一性,界面的规整性是通过建立标准,并且一致性地安排行与列的起始位置而实现的。
●对称性是一种轴向“复制”,中轴线一侧的某个单元在轴的另一侧有其类似单元。
●简明性是简单而明智地使用显示元素以便尽可能简单的得到信息。
其中包含屏幕上使用的信息。
●比例协调是指显示项目的宽度和高度的比例关系,实验表明,宽度比高度更大一些能带来更好的审美效果,比例可以遵守黄金分割定律。
●整体性是一种内在的粘合性,视觉上各元素形成一个整体。
2.规范基本规定
2.1环境
应用系统工作界面显示属性设置:
2.2文字与颜色
颜色作为一种信息的增强的从属表达手段,应只使用一个有限集,在通常情况下,采用色调柔和、淡雅、互补的颜色要比采用亮丽的、高饱和度的颜色好一些。
对界面颜色的设置及选用应使用系统现成的资源。
各窗口、控件(除数据窗口外)背景色用SILVER灰色RGB(192,192,192)。
录入的信息均采用宋体9号黑色正常字体,背景色用白色RGB(255,255,255)
对于不可操作仅供显示的信息,采用宋体9号黑色正常字体,背景色用SILVER 灰色RGB(192,192,192)
每个窗体必须有主题,表明此窗体完成的具体功能。
当前不可用的控件一律变灰,予以Disable。
数据窗口的文字与颜色将在下面的章节中另行给出。
2.3数据格式与显示
2.4 键盘控制与无鼠标操作
窗口操作应该既可以用鼠标又可以用键盘操作。
3.窗口控件
在管理信息系统中采用各种界面构件,通过组织与控制完成相应的事务功能,窗口就是其中最主要的控件。
下面按照不同的用途,对常用的窗口控件进行说明。
3.1 MDI与SDI
基于WINDOWS的应用程序的主界面方式有MDI和SDI两种风格。
SDI方式使用一个单一的主窗口以及其中附带的一系列补充的二级窗口来表达任务,在桌面和任务拦上提供对打开窗口的管理。
它是在一个对象和它的窗口之间提供一个以数据为中心的、一对一的关系。
MDI方式使用父窗口和一系列子窗口的形式来表达应用,它是在一个对界面元素进行共享的窗口中显示出相同或相关数据的多重查看区域。
快闪窗口用于在应用系统装载时,显示系统信息与版权信息,系统应开发统一的界面模板。
示例如下:
登录窗口用于前端程序连接后台数据库系统,系统应开发统一的界面模板。
示例如下:
当用户与口令均正确一致时,按下“修改口令”按钮,系统显示如下:
关于窗口用于显示系统信息与版权信息,系统应开发统一的界面模板。
示例如下:
3.5 响应窗口(RESPONSE)
响应窗口即对话框,用于进行一些临时或短暂的任务。
示例如下:
3.6 系统主窗口
系统主窗口用于系统功能的调度与控制。
以下提供几种方式以备确定。
规范1:MDI型各子系统均采用MDI Frame with microhelp类型主窗口,各业务功能以菜单项的形式出现。
示例如下:
规范2:SDI型各子系统均采用MAIN类型主窗口,各业务功能以文字形式出现,可给背景配置漂亮的图片。
示例如下:
确定结果:A
3.7 业务办理类窗口
规范1:传统菜单型,所有的操作都以菜单项的形式出现。
可以方便地使用继承功能。
示例如下:
规范2:IE菜单型,需经过一定的封装技术处理;如果主界面为MDI型,则处理技术会比较复杂。
示例如下:
规范3:按钮型,操作功能直观,但需占用一定的界面资源。
示例如下:
确定结果:A、C
3.8 数据查询类窗口
规范1:综合型,条件区与信息区放置在同一个窗口,可以方便地修改查询条件。
信息以一种“Master--Detail”的方式显示。
其中,左侧区域使用“Grid”型的控件,逐条列出所有记录的主要字段,“鼠标点击”选择某记录,则右侧区域中显示该记录的详细信息。
示例如下:
规范2:分步型,用户先在弹出窗口中录入查询条件,系统显示结果列表,通过鼠标电击查看详细信息。
示例如下:
1)录入查询条件
2)显示查询结果列表
3)在上述结果集中,可以继续进行其他操作,如双击查看详细信息,或选中某人员后转入变更处理。
确定结果:
4.数据窗口控件
数据窗口是用来显示、修改数据库数据的控件。
本规范对数据窗口的使用做如下的规定:
●考虑到窗口的整体效果,数据窗口的TITLE栏禁止使用。
●Grid数据窗口的左边需预留Indicator的空区,Indicator一律采用Hand!;
●Grid数据窗口中各列的宽度和次序可以灵活调整,特别适于列项数目、宽度、
次序不固定的情况
●其他
示例2:浏览(Grid)
示例3:浏览(Tabular)
示例4:信息操作FreeForm(字段数目较多)
示例5:信息操作Tabular(字段数目较少)
示例6:信息操作Grid(字段数目较少)
5.菜单控件
常用菜单项应统一定义快捷键,并带有可理解性较强的图标。
6.按钮控件
●尽量避免使用图形按钮
●每个按钮提供键盘快捷键
●按钮应统一定义常用操作的标准名称、快捷键,以及摆放次序;相关按钮应放
在一起,且不同窗口出现的同样按钮应保持定位的一致性
●当一个按钮操作会产生另一个窗口时,在按钮文字后加一个省略号(...)
●按钮的大小应相同;如果无法满足,则水平放置的按钮应高度相同,竖直放置
的按钮应宽度相同
●在相邻按钮之间留下同样的且足够的空格
●按钮区通常在屏幕的(可多选,以备不同情况选用):AB
A、右下方
B、中下方
C、右上方
7. 输入域
标题放在输入域左边,在标题和输入域之间不放一个特殊记号冒号(:)和一个空格。
标题按列右对齐,输入域也按列左对齐;各列数据必须有间隔,以易于辨认。
该规范同样适用于FreeForm型数据窗口中信息列的摆放。
示例如下:
8.帮助
系统应提供帮助:
A、F1联机帮助(基于RTF)
B、在线帮助(基于HTML)
确定结果:A、B。