用户界面设计说明书 - 模版

1、项目名称项目名称 用户界面设计说明书用户界面设计说明书 版本版本 x.y 修订历史修订历史 修订日期版本修订说明作者生效日期 2002-4-17vx.y.z做了哪些修改谁修改的批准日期 目录目录 1.简介简介.2 1.1背景.2 1.2目标.2 1.3参考资料.2 1.4术语表.2 2.用户界面需求用户界面需求.2 3.界面总体风格界面总体风格.2 3.1页面风格.2 3.2按钮风格.2 3.3文字风格.2 3.4表单风格.2 3.5图象风格.2 4.用户界面清单用户界面清单.2 5.用户界面图集用户界面图集.2 5.1子系统一.2 5.1.1界面一.2 用户界面设计说明书用户界面设计说明书

2、注意：模板中蓝色字体为撰写本文档的说明或提示，请于文档完成时删除。 用户界面设计说明书（User Interface Design Specification，UIDS），对软件的用户界面风格、 布局、操作流程等进行全面说明。 1. 简介简介 1.1 背景 简要说明待开发的软件系统的名称、版本和将要实现的功能。 1.2 目标 说明本用户界面设计所要达到的目标以及详细程度。 1.3 参考资料 2.2. 应当遵循的界面设计规范应当遵循的界面设计规范 2.1 用户界面设计原则用户界面设计原则 本系统坚持图形用户界面（GUI）设计原则，界面直观、对用户透明。用户接触软件后对界面上对 应的功能一目了然、

3、不需要多少培训就可以方便使用本应用系统。 界面设计员应该明白软件中用户是所有处理的核心，不应该有应用程序来决定处理过程，所以用 户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强 加给用户。 界面设计必须经过确认才能完成。 2.2界面一致性界面一致性 在界面设计中应该保持界面的一致性。一致性既包括使用标准的控件,也指使用相同的信息表现方 法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 2.2.1显示信息一致性标准显示信息一致性标准 （1）标签提示:字体为不加重、宋体、黑色、灰底或透明、无边框、右对齐、不带冒号、一般情况 为五号（10 号） ；

4、 （2）日期:正常字体、宋体、白底黑字、3-D lowered； （3）对齐方法： 左对齐:一般文字、单个数字、日期等 右对齐:数字、时间、日期加时间。 （4）分辨率为 800*600，增强色 16 色 （5）字体缺省为宋体、五号、黑色 （6）底色缺省采用灰色 这些信息的排列显示风格供参考, 在同一个应用中,这些信息的表现方式不一致,会使得用户分散注 意力,影响这一软件的使用，因此开发者应当注意在同一软件中表现形式的一致性。 2.2.2布局合理化原则 应注意在一个窗口内部所有控件的布局和信息组织的艺术性,使得用户界面美观。在一个窗口中按 tab 键,移动聚焦的顺序不能杂乱无章,tab 的顺序是

5、先从上至下，再从左至右。首先应输入的和重要 信息的控件在 tab 顺序中应当靠前,位置也应放在窗口上较醒目的位置。该系统的界面设计布局力求 简洁、有序、易于操作。 2.2.3鼠标与键盘对应原则 应遵循的是可不用鼠标的原则:应用中的功能只用键盘也应当可以完成,即设计的应用中还应加入一 些必要的按钮和菜单项。但是,许多鼠标的操作,如双击、拖动对象等,并不能简单地用键盘来模拟即 可实现。例如在一个列表框中用鼠标双击其中一项可以表示选中该项内容。为了用键盘也能实现 这一功能,必须在窗口中定义一个表示选中的按钮,以作为实现双击功能的替代（或其它方式） 。又 如在一个窗口中有两个数据窗口,可以用鼠标从一个

6、数据窗口中将一项拖出然后放到另一个中。如 果只用键盘,就应当在菜单中设置拷贝或移动的菜单项 3. 用户界面需求用户界面需求 简要说明系统对用户界面的需求以及设计时的考虑。 本节对应软件需求中对用户界面的要求。 4. 全站总体风格全站总体风格 本节描述本产品所有界面必须统一采用的风格。对应于总体设计阶段的用户界面设计。 以下以 Web 界面的典型风格说明怎样进行总体风格设计。 5.5. 首页风格首页风格 5.1 页面风格页面风格 页面总体风格包括主色调、背景图（一个产品应该运用统一的背景图）、适用的图象分辨率、 分帧等 5.2 按钮风格按钮风格 按钮的颜色、大小、间距等。同样也可分成几类分别描述

7、，如工具栏中的按钮、查询页中的 按钮等。 5.3 文字风格文字风格 文字的大小、颜色、字体、间距等。可分为中文字、英文字；也可分为正文文字、按钮中文 字、超链接文字等分别描述。 5.4 表单风格表单风格 如： 位于页面正中 是否适用“冒号”，如“项目名称”还是“项目名称：” 背景颜色，或不同颜色分别代表什么含义 边框是立体的还是平面的还是其它什么样的 5.5 图象风格图象风格 如： 图象大小限制（一般应有一上限） 图象格式（规定几种标准格式如.gif，.jpg 等，一般最好不要用.bmp 等） 图象命名（可以考虑先分类后命名，如 bg-01，bg-02，banner-01，banner-02，

8、button- open，button-close 等） 5.6 补充说明补充说明 6.6. 列表页风格列表页风格 6.1 页面风格页面风格 页面总体风格包括主色调、背景图（一个产品应该运用统一的背景图）、适用的图象分辨率、 分帧等 6.2 按钮风格按钮风格 按钮的颜色、大小、间距等。同样也可分成几类分别描述，如工具栏中的按钮、查询页中的 按钮等。 6.3 文字风格文字风格 文字的大小、颜色、字体、间距等。可分为中文字、英文字；也可分为正文文字、按钮中文 字、超链接文字等分别描述。 6.4 表单风格表单风格 如： 位于页面正中 是否适用“冒号”，如“项目名称”还是“项目名称：” 背景颜色，或不同颜色分别代表什么含义 边框是立体的还是平面的还是其它什么样的 6.5 图象风格图象风格 如： 图象大小限制（一般应有一上限） 图象格