界面设计风格.docx

界面设计规范1•引言21.1概述21.2信息位置的安排原则22•规范基本规定42.1环境42.2文字与颜色42.3数据格式与显示42.4键盘控制与无鼠标操作4窗口控件5MDI与SDI5快闪窗口（SPLASH）6登录窗口（LOGIN）73.4关于窗口（ABOUT）83.5响应窗口（RESPONSE83.6系统主窗口93.7业务办理类窗口103.8数据查询类窗口123. 数据窗口控件144. 菜单控件175. 按钮控件176. 输入域177. 帮助171引言用户界面是应用系统的外在表现，是用户工作的接口，它的质量会直接影响系统的友好性与可用性本规范用于说明进行管理信息系统（MIS）设计开发时，所应遵循的用户界面开发规范，旨在描述设计怎样的界面风格，为用户所接收该规范主要针对PowerBuilder开发工具的进行设计由于PowerBuilde所倡导并提供的风格是基于图形化用户界面GUI的,是与Windows的界面风格相一致的，因此该规范同样可以适用于其他的前台开发工具系统界面如果采用WEB页面的方式，则设计原则另行规定规范中未做声明的内容，以满足开发总则为准1.1概述有资料调查结果显示，用户希望的最佳屏幕特点为：一个规整、清晰、毫不混乱的外观。

对于将要显示的内容以及对其将进行的操作有一个明确的提示所希望的信息出现在其应该出现的位置清楚地指明标题、小标题、数据、指示、选择等各种项目的关系平白、简单的文字通过简单的途径找到系统所含内容及得到它的方法明确地指出什么时候某个操作能引起数据或系统运行的永久性改变这样就要求我们所设计的用户界面，应满足如下基本要求：1. 充分性：用户界面应充分满足功能要求一致性：用户界面应满足一致性要求，包括本模块内与分系统之间简洁性：用户界面在满足功能的前提下应尽量保持简洁合理性：用户界面的布局与设置应满足合理的功能要求美观性：用户界面应满足美观性要求1.2信息位置的安排原则在屏幕左上角提供明显的起动点2. 在屏幕上为诸如菜单、按钮、错误信息、标题、数据区等特定信息保留特定的区域，并使这些区域在所有屏幕上保持一致3. 对各种区域的编排应保持均衡、规整、对称、简明、比例协调、整体性屏幕标题位于上中部，有利于产生对称感；菜单置于屏幕顶部，仅在标题之下；按钮置于屏幕底部，在信息区之下均衡感是将窗口显示本身置于中央，让各种元素在水平轴和垂直轴两边均保持相同比重，以及将标题置于中央而实现的规整性是一种基于某些规则或计划的形式上的统一性，界面的规整性是通过建立标准，并且一致性地安排行与列的起始位置而实现的。

对称性是一种轴向“复制”，中轴线一侧的某个单元在轴的另一侧有其类似单元简明性是简单而明智地使用显示元素以便尽可能简单的得到信息其中包含屏幕上使用的信息比例协调是指显示项目的宽度和高度的比例关系，实验表明，宽度比高度更大一些能带来更好的审美效果，比例可以遵守黄金分割定律整体性是一种内在的粘合性，视觉上各元素形成一个整体2.规范基本规定2.1环境应用系统工作界面显示属性设置：主题备选推荐确定结果桌面区域A. 640*480象素B. 800*600象素B,以显示漂亮的字体，更多的信息B显示属性A. 16色B. 256色C. 更咼B，以不太影响图片的显示，也不对显示器有过咼要求B2.2文字与颜色颜色作为一种信息的增强的从属表达手段，应只使用一个有限集，在通常情况下，采用色调柔和、淡雅、互补的颜色要比采用亮丽的、高饱和度的颜色好一些对界面颜色的设置及选用应使用系统现成的资源各窗口、控件(除数据窗口外)背景色用SILVER灰色RGB(192,192,192录入的信息均采用宋体9号黑色正常字体，背景色用白色RGB(255,255,255)对于不可操作仅供显示的信息，采用宋体9号黑色正常字体，背景色用SILVER灰色RGB(192,192,192每个窗体必须有主题，表明此窗体完成的具体功能。

当前不可用的控件一律变灰，予以Disable数据窗口的文字与颜色将在下面的章节中另行给出2.3数据格式与显示数据类型显示/编辑格式对齐格式文字左数值右日期YYYY-MM-DD右时间HH:MM:SS右日期时间YYYY-MM-DDHH:MM:SS右2.4键盘控制与无鼠标操作窗口操作应该既可以用鼠标又可以用键盘操作3窗口控件在管理信息系统中采用各种界面构件，通过组织与控制完成相应的事务功能，窗口就是其中最主要的控件下面按照不同的用途，对常用的窗口控件进行说明3.1MDI与SDI基于WINDOWS的应用程序的主界面方式有MDI和SDI两种风格SDI方式使用一个单一的主窗口以及其中附带的一系列补充的二级窗口来表达任务，在桌面和任务拦上提供对打开窗口的管理它是在一个对象和它的窗口之间提供一个以数据为中心的、一对一的关系MDI方式使用父窗口和一系列子窗口的形式来表达应用，它是在一个对界面元素进行共享的窗口中显示出相同或相关数据的多重查看区域优点缺点MDI灵活，可以实现多个窗口的切换同时打开的各窗口之间的层次关系比较抽象复杂，初次接触MDI的用户一般难于理解多个业务窗口同时打开，如果连环处理同一个参保人员，会影响业务数据的处理SDI直观，简单，较易学习控制严格，灵活性差，不易满足高级用户的要求。

面向最终用户A.业务办理类窗口与查询类窗口均采用SDI（系统主窗口除外）B.业务办理类窗口与查询类窗口均采用MDIC.业务办理类窗口采用SDI，查询类窗口采用MDI确疋结果（业务办理类窗口与查询类窗口将在以下部分详细描述）C3.2快闪窗口（SPLASH快闪窗口用于在应用系统装载时，显示系统信息与版权信息，系统应开发统的界面模板示例如下：s^bu«inc.unanaioniBTian.0aosglls,#.version6.53.3登录窗口（LOGIN）登录窗口用于前端程序连接后台数据库系统，系统应开发统一的界面模板示例如下：当用户与口令均正确一致时，按下“修改口令”按钮，系统显示如下:3.4关于窗口（ABOUT）About关于窗口用于显示系统信息与版权信息，系统应开发统一的界面模板示例如下:PowersoftPowefIBiiilderEnterprise/32LySjiase/oision6.5Biiid44斗Copifight_1991-1398Sybase,Inc；andihwitisdi刖ies.PortionsCopynght_1991-1998ArtlxirDApplegateOuMonJun11D1598at01:OS3.5响应窗口（RESPONSE响应窗口即对话框，用于进行一些临时或短暂的任务。

示例如下:3.6系统主窗口系统主窗口用于系统功能的调度与控制以下提供几种方式以备确定规范1:MDI型各子系统均采用MDIFramewithmicrohelp类型主窗口，各业务功能以菜单项的形式出现示例如下：规范2：SDI型各子系统均采用MAIN类型主窗口，各业务功能以文字形式出现,可给背景配置漂亮的图片示例如下：确定结果：A3.7业务办理类窗口规范1：传统菜单型，所有的操作都以菜单项的形式出现可以方便地使用继承功能示例如下：规范2：IE菜单型，需经过一定的封装技术处理；如果主界面为MDI型，则处理技术会比较复杂示例如下：K*»卜1到顶上飙下擁到康勳］扯除煤存査询&打印关闭规范3：按钮型，操作功能直观，但需占用一定的界面资源示例如下:确定结果：A、C3.8数据查询类窗口规范1：综合型，条件区与信息区放置在同一个窗口，可以方便地修改查询条件信息以一种"Master-Detail”的方式显示其中，左侧区域使用"Grid”型的控件，逐条列出所有记录的主要字段，“鼠标点击”选择某记录，则右侧区域中显示该记录的详细信息示例如下：规范2:分步型，用户先在弹出窗口中录入查询条件，系统显示结果列表，通过鼠标电击查看详细信息。

示例如下：1）录入查询条件2）显示查询结果列表立件的淪辑⑥查看©转到謝收讒⑥工具迥帮助⑩名称_]文件夹9M-LT11:271~-|Lan文件夹99-9-1711:27_|Lanirttl丈件興99-9-1T11:20_|IMasters文件荚gg-g-iTn：26_J&F11»s文件夹00-10-1411:0ftPajrato*L文件夹99-9-1711:151poffic«e丈件天09-10-12£1:10_]PrograjrFiles文件夬S9-9-1T11:36,'E.ecycled回收站ea-io-1415HI:salslixv5099-10-2711:2144个対躱3.72MB舄我的电脑［修应时问大小|类型3）在上述结果集中，可以继续进行其他操作，如双击查看详细信息，或选中某人员后转入变更处理确定结果:数据窗口控件数据窗口是用来显示、修改数据库数据的控件本规范对数据窗口的使用做如下的规定：考虑到窗口的整体效果，数据窗口的TITLE栏禁止使用Grid数据窗口的左边需预留Indicator的空区，Indicator—律采用Hand!；Grid数据窗口中各列的宽度和次序可以灵活调整，特别适于列项数目、宽度、次序不固定的情况其他类型例示字段名□匕冃景字段名文字字段名边框字段值□匕冃景字段值文字字段值边框报表(Tabular)1白色黑色NONE白色黑八、、色NONE浏览(Grid)112白色黑色NONE白色黑八、、色NONE浏览(Tabular)3白色黑色NONE白色黑八、、色NONE信息操作FreeForm（字段数目较多）i4灰色黑色深蓝色（非空字段）NONE白色黑八、、色3D-L信息操作Tabular（字段数目较少）5灰色黑色深蓝色（非空字段）3D-R白色黑八、、字3D-L信息操作Grid（字段数目较少）—黑色深蓝色（非空字段）3D-R白色黑八、、字NONE下拉数据窗口Tabular7白色黑色NONE白色黑八、、色NONE示例2:浏览(Grid)ProductDeseriptionPnoductNameIDSizeColor旳UnitPriceTankTripTeeShirt300SmallWhite16$30CV-reckTeeShirt301MedunnCieng33114.00CmNeckTeeShirt302Driu趾fitsdlBlac。