win界面风格规范v1.1

北大青鸟 Aptech·学术部 74810000.doc 1 界面设计规范 发布日期：2002－8 北大青鸟 Aptech·学术部 74810000.doc 2 1．引言 1.1 设计说明 本文档是对系统界面设计风格进行描述， 而和用户交互的最终界面将会中项目 《详细设 计说明书》中设计和解释。 1.2 概念和定义 1. 用户界面 又称人机界面， 实现用户与计算机之间的通信， 以控制计算机或进行用户和计算机之间 得数据传送的系统部件。 2. GUI 即图形用户界面，一种可视化得用户界面，它使用图形界面代替文本界面。 开发人员必须选择仔细选择窗体，并且要理解为什么比其他形式的窗体更适用。 3. 主要窗体（Primary Windows） 主要窗体包含了一个应用程序的大部分功能， 大多时候它是一个单独的窗体， 但在一个 MDI 风格的应用程序中，父窗体和子窗体都被认为是主要窗体。 1) Single Document Interface (SDI) 一个单独的主要窗体通常包含一个菜单栏、 工具栏和状态栏， 打开此窗体时应该运 行在当前所有窗体的上面，并且在任务栏提供显示，就像记事本和写字板程序。 2) Multiple Document Interface (MDI) 通常适合有多个任务， 或同时管理所有的窗口。 例如 Microsoft Word， Excel 和 Visual Basic。 3) Split Document Interface (split SDI 或 Explorer) 是一个分隔的主要窗体，通常包括菜单栏、工具栏和状态栏。例如资源管理器和 Outlook。 4. 次要窗体（Secondary Windows） 一个次要窗体通常用于为主要窗体提供补充信息和交互作用，界面比较简单。 1) Modal dialog boxes（模态对话框） 2) Modeless dialog boxes（非模态对话框） 3) Property sheet 1.3 用户假定 将使用本系统的用户定义为： 对应用程序或计算机的一般用法有一定了解， 用户希望界 北大青鸟 Aptech·学术部 74810000.doc 3 面符合 Windows 9X/2000 特别是 Office 97/2000 风格，对易用性、简洁性有比较高的要求， 对界面快速交互没有很强的要求（即不希望通过命令方式快速交互） 。 北大青鸟 Aptech·学术部 74810000.doc 4 2. 用户界面设计规范 2.1 用户界面设计原则 图形用户界面（GUI）设计原则，界面直观、对用户透明：用户接触软件后对界面上对 应的功能一目了然、不需要多少培训就可以方便使用本应用系统。 界面设计员应该明白软件中用户是所有处理的核心，不应该有应用程序来决定处理过 程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意 愿把操作流程强加给用户。 界面设计必须经过确认才能完成。 2.2 Windows 界面标准 1. 窗体大小要设计适合 800×600 像素 2. 程序第一次运行时默认最大化打开，以后要以用户定义的大小打开 3. 次要窗体不能大于 500×400 像素 4. 一些次要窗体大小的标准（单位：像素） 1) 关于对话框（About Box） 390w×264 2) 登录对话框（Login） 290×142 3) 起始信息框（Splash Screen） 500×310 5. 所有窗体的设计都必须遵从可视化开发的标准 1) 突起的项目可以被点击； 2) 当鼠标移动到可以被点击的项目上时，该项目高亮显示； 3) 凹进的项目不能被点击； 4) 当项目有白色的背景并可以置放光标时，该项目可以被编辑； 5) 项目的背景为灰色时不能被编辑； 6) 灰色的项目是不能使用的； 如下图所示。 北大青鸟 Aptech·学术部 74810000.doc 5 图 1 可视化开发样例 6. 只有主窗体才能有菜单栏、工具栏和状态栏 7. 应用程序将要包含下面的元素 1) 系统图标（System Icon） 2) 系统名称（System Name Text） 3) Data Type Name (只应用于 MDI applications) 如下图所示。 图 2 主窗体标题栏示例 MDI 窗体标题栏（TITLE BAR）如下图所示 北大青鸟 Aptech·学术部 74810000.doc 6 图 3 MDI 窗体标题栏示例 当 MDI 窗体最大化时，融合在父窗体时的例图如下所示。 图 4 MDI 窗体融合后标题栏示例 8. 次要窗体不能调整大小 9. 主要窗体必须包含一个状态栏 如下图所示。 子 窗 体子 窗 体 子 窗 体子 窗 体 主 窗 体主 窗 体 北大青鸟 Aptech·学术部 74810000.doc 7 图 5 状态栏标准 10. 使用通用的对话框。 如下图所示。 表 1 Windows 对话框 通用 Windows 对话框 Open Save As Find Replace Print Print Setup Page Setup Font Color 11. Windows 界面中控件间距要保持一致 控件间为 7 个像素 控件到边缘 12 个像素 如下图所示。 主窗体状态栏标准 北大青鸟 Aptech·学术部 74810000.doc 8 图 6 控件间距图例 12. 避免窗体出现水平滚动条 2.3 界面一致性 在界面设计中应该保持界面的一致性。 一致性既包括使用标准的控件， 也指使用相同的 信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 1. 显示信息一致性标准 1) 标签提示：字体为不加重、宋体、黑色、灰底或透明、无边框、右对齐、不带冒号、 一般情况为五号（10 号）； 2) 日期：正常字体、宋体、白底黑字 3) 对齐方法 左对齐：一般文字、单个数字、日期等。 右对齐：数字、时间、日期（含时间） 。 4) 分辨率为 800×600，增强 16 色 5) 字体缺省为宋体、五号、黑色 6) 底色缺省采用灰色 这些信息的排列显示风格供参考，在同一个应用中，这些信息的表现方式不一致，会使 得用户分散注意力， 影响这一软件的使用， 因此开发者应当注意在同一软件中表现形式的一 之间大小为 7 pixels 之间大小为12.5 pixels 北大青鸟 Aptech·学术部 74810000.doc 9 致性。 2. 布局合理化原则 应注意在一个窗口内部所有控件的布局和信息组织的艺术性，使得用户界面美观。 在一个窗口中按 tab 键，移动聚焦的顺序不能杂乱无章，tab 的顺序是先从上至下，再 从左至右。一屏中首先应输入的和重要信息的控件在 tab 顺序中应当靠前，位置也应放在窗 口上较醒目的位置。 布局力求简洁、有序、易于操作。 3. 鼠标与键盘对应原则 应遵循的是可不用鼠标的原则： 应用中的功能只用键盘也应当可以完成， 即设计的应用 中还应加入一些必要的按钮和菜单项。 但是，许多鼠标的操作，如双击