UI设计规范说明书(1).docx

UI设计规范说明书 UI设计说明书 UI设计规范说明书 修订历史记录 日期 版本 说明 作者 1 前言 1.1 文档简介 本文档是对整个系统界面设计风格进行描述，和用户交互的最终界面在详细设计说明书中设计和解释。 1.2 系统定义 用户界面：又称人机界面，实现用户与计算机之间得通信，以控制计算机或进行用户和计算机之间得数据传送得系统部件。 GUI：即图形用户界面，一种可视化得用户界面，它使用图形界面代替正文界面。 1.3 编写目的 统一图形界面规范，为开发人员提供统一的标准，为用户提供统一显示效果、统一操作方式的界面，便于用户识别与使用。 第 1 页 共 8 页 UI设计说明书 2 界面设计准则 Rules 2.1 引言 Introduction 在界面设计中应该保持界面的一致性。一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、风格、颜色、术语、提示信息等方面确保一致。 2.2 主要内容 Content 2.2.1 显示信息一致性原则 坚持图形用户界面设计原则，界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。 明确用户是所有处理的核心，不应该有应用程序来决定处理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。 界面设计必须经过最终确认才能完成。 2.2.2 布局合理化原则 应注意在一个窗口内部所有控件的布局和信息组织的艺术性，使得用户界面美观。在一个窗口中按tab键，移动聚焦的顺序不能杂乱无章，tab的顺序是先从上至下，再从左至右。一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前，位置也应放在窗口上较醒目的位置。布局力求简洁、有序、易于操作。 2.2.3 鼠标与键盘一致性原则 第 2 页 共 8 页 UI设计说明书 尽量遵循可不用鼠标的原则：应用中的功能只用键盘也应当可以完成，即设计的应用中还应加入一些必要的按钮和菜单项。 但是，许多鼠标的操作，如双击、拖动对象等，并不能简单地用键盘来模拟即可实现，此类操作可适当增加操作按钮。 2.2.4 向导使用原则 对于应用中某些部分的处理流程是固定的，用户必须按照指定的顺序输入操作信息，为了使用户操作得到必要的引用应该使用向导，使用户使用功能时比较轻松明了，但是向导必须用在固定处理流程中，并且处理流程应该不少于3个处理步骤。 2.2.5 系统响应时间 系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧，而响应时间过快也会影响到用户的操作节奏，并可能导致错误。因此在系统响应时间上坚持如下原则： 响应时间长度界面设计： 0-5秒鼠标显示成为沙漏； 5秒以上显示处理窗口，或显示进度条； 一个长时间的处理完成时应给予完成警告信息。 2.2.6 出错信息和警告 出错信息和警告是指出现问题时系统给出的坏消息，对于出错信息和警告应该遵循以下原则： 第 3 页 共 8 页 UI设计说明书 信息以用户可以理解的术语描述； 信息简明扼要，指出出错原因并提供解决办法提示。 2.2.7 信息显示原则 信息显示遵循以下原则： 1）只显示与当前用户语境环境有关的信息； 2）不要用数据将用户包围，使用便于用户迅速吸取信息的方式表现信息； 3）使用一致的标记、标准缩写和颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源； 4）产生有意义的出错信息； 5）使用缩进和文本来辅助理解； 6）使用窗口分隔控件分隔不同类型的信息； 7）高效地使用显示器的显示空间，但要避免空间过于拥挤。 2.2.8 数据输入原则 数据输入遵循以下原则： 1）尽量减少用户输入动作的数量； 2）维护信息显示和数据输入的一致性； 第 4 页 共 8 页 UI设计说明书 3）交互应该时灵活的，对键盘和鼠标输入的灵活性提供支持； 4）在当前动作的语境中使不合适的命令不起作用； 5）让用户控制交互流，用户可以跳过不必要的动作、改变所需动作的顺序以及在不退出系统的情况下从错误状态中恢复； 6）为所有输入的动作提供帮助； 7）消除冗余输入。可能的话提供默认值、绝不要让用户提供程序中可以自动获取或计算出来的信息。 3 界面实施细则 Detail 3.1 概述 界面设计中保持界面的一致性。一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 界面力求简洁明了，保证系统功能设计的合理与明确，布局明确、交互操作合理、协调统一。功能要表现清楚，分类清晰有条理，避免过多的控件嵌套导致的视觉混乱；单一功能的操作目的明确，符合易用性原则，避免不必要的信息显示而对用户造成视觉干扰；力求操作简单，简单的功能一步完成，比较复杂的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。 3.2 颜色搭配 Corlor 3.3 字体 Font 3.4 资源 Resources 第 5 页 共 8 页 UI设计说明书 3.5 控件风格 Style 3.5.1 窗体 Window 3.5.2 菜单 Menu 3.5.3 工具栏 ToolBar 3.5.4 状态栏 StatusBar 3.5.5 导航栏 OutlookBar 3.5.6 数据窗口 DataWindow 3.5.7 按钮 Button 3.5.8 单选框 RadioButton 3.5.9 静态文本 Statictext 3.5.10 文本框 SingleLineEdit 3.5.11 下拉选择框 DropDownList 3.5.12 树形视图 TreeView 3.5.13 图片PictureBox 3.6 界面布局 Layout 3.6.1 引言 Introduction 3.6.2 间距 Distance 3.6.3 对齐 Align 3.6.4 分辨率 3.6.5 主界面布局 3.6.6 用户主要工作区布局 3.6.6.1 衍生布局1 3.6.6.2 衍生布局2 第 6 页 共 8 页 UI设计说明书 3.6.6.3 衍生布局3 3.6.7 弹出式窗口布局 3.6.7.1 业务模块弹出式窗口 3.6.7.2 管理模块弹出式窗口 3.6.7.3 弹出式窗口上数据窗口 3.7 快捷键 ShortCuekey 在菜单项中使用快捷键可以让使用键盘的用户操作得更快一些，在Windows及其应用软件中快捷键的使用大多是一致的。应用的快捷键在各个配置项上语义必须保持一致。 3.8 用户简单交互 Action 3.8.1 消息框 MessageBox 3.9 联机帮助 Help 3.9.1 帮助 Help 常用的帮助有两种：集成的和附加的。集成的帮助一开始就是设计在软件中的，它与语境有关，用户可以直接选择与所要执行操作相关的主题。通过集成帮助可以缩短用户获得帮助的时间，增加界面的友好性。 附加的帮助在系统建好以后再加进去的。通常是一种查询能力比较弱的联机帮助。 提供这两种帮助，设计和实现时遵循以下原则： 1）进行系统交互时，提供部分帮助功能，即：提供主要操作的帮助； 2）用户可以通过帮助菜单、F1键和帮助按钮访问帮助； 第 7 页 共 8 页 UI设计说明书 3）表示帮助时根据需要提供三种方式的选择：另一个窗体、微帮助和指出参考某个文档； 4）用户如何回到正常交互方式有两种选择：返回键和功能键。 帮助信息的构造：采用分层式帮助。 3.9.2 微帮助 MicroHelp 微帮助提供：由状态栏提供，或控件上的提示文本。 微帮助要求：简明扼要的说明问题，避免冗长繁复的阐述。 3.9.3 Tooltip 3.9.4 帮助文件 CHM/HLP 4 追加说明 更改说明或更改本用户界面设计时应该征得所有开发者的同意，所有开发者应该按更正后的原则修改和设计用户界面。 第 8 页 共 8 页