界面设计风格.docVIP

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