[项目名称] 用户界面设计说明书
版本 x.y
修订历史
修订日期 2002-4-17 版本 vx.y.z 做了哪些修改 修订说明 作者 谁修改的 生效日期 批准日期 目录
1. 简介 ........................................................................................................................................................ 2 1.1 1.2 1.3 1.4
背景 ................................................................................................................................................ 2 目标 ................................................................................................................................................ 3 参考资料 ........................................................................................................ 错误!未定义书签。 术语表 ............................................................................................................ 错误!未定义书签。
2. 用户界面需求 ........................................................................................................................................ 4 3. 界面总体风格 ........................................................................................................................................ 4 3.1 3.2 3.3 3.4 3.5
页面风格 ........................................................................................................................................ 4 按钮风格 ........................................................................................................................................ 4 文字风格 ........................................................................................................................................ 4 表单风格 ........................................................................................................................................ 4 图象风格 ........................................................................................................................................ 4
4. 用户界面清单 ........................................................................................................ 错误!未定义书签。 5. 用户界面图集 ........................................................................................................ 错误!未定义书签。 5.1
子系统一 ........................................................................................................ 错误!未定义书签。
界面一 .................................................................................................... 错误!未定义书签。
5.1.1
用户界面设计说明书
注意：模板中蓝色字体为撰写本文档的说明或提示，请于文档完成时删除。
用户界面设计说明书（User Interface Design Specification，UIDS），对软件的用户界面风格、布局、操作流程等进行全面说明。
1. 简介
1.1 背景
简要说明待开发的软件系统的名称、版本和将要实现的功能。
Page 2 of 5
1.2 目标
说明本用户界面设计所要达到的目标以及详细程度。
1.3 参考资料
2. 应当遵循的界面设计规范
2.1 用户界面设计原则
本系统坚持图形用户界面（GUI）设计原则，界面直观、对用户透明。用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。
界面设计员应该明白软件中用户是所有处理的核心，不应该有应用程序来决定处理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。 界面设计必须经过确认才能完成。
2.2 界面一致性
在界面设计中应该保持界面的一致性。一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 2.2.1
显示信息一致性标准
（1）标签提示:字体为不加重、宋体、黑色、灰底或透明、无边框、右对齐、不带冒号、一般情况为五号（10号）；
（2）日期:正常字体、宋体、白底黑字、3-D lowered； （3）对齐方法：
左对齐:一般文字、单个数字、日期等 右对齐:数字、时间、日期加时间。 （4）分辨率为800*600，增强色16色 （5）字体缺省为宋体、五号、黑色 （6）底色缺省采用灰色
这些信息的排列显示风格供参考, 在同一个应用中,这些信息的表现方式不一致,会使得用户分散注意力,影响这一软件的使用，因此开发者应当注意在同一软件中表现形式的一致性。 2.2.2
布局合理化原则
应注意在一个窗口内部所有控件的布局和信息组织的艺术性,使得用户界面美观。在一个窗口中按tab键,移动聚焦的顺序不能杂乱无章,tab的顺序是先从上至下，再从左至右。首先应输入的和重要信息的控件在tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。该系统的界面设计布局力求简洁、有序、易于操作。 2.2.3
鼠标与键盘对应原则
应遵循的是可不用鼠标的原则:应用中的功能只用键盘也应当可以完成,即设计的应用中还应加入一些必要的按钮和菜单项。但是,许多鼠标的操作,如双击、拖动对象等,并不能简单地用键盘来模拟即可实现。例如在一个列表框中用鼠标双击其中一项可以表示选中该项内容。为了用键盘也能实现这一功能,必须在窗口中定义一个表示选中的按钮,以作为实现双击功能的替代（或其它方式）。
Page 3 of 5
又如在一个窗口中有两个数据窗口,可以用鼠标从一个数据窗口中将一项拖出然后放到另一个中。如果只用键盘,就应当在菜单中设置拷贝或移动的菜单项
3. 用户界面需求
简要说明系统对用户界面的需求以及设计时的考虑。 本节对应软件需求中对用户界面的要求。
4. 全站总体风格
本节描述本产品所有界面必须统一采用的风格。对应于总体设计阶段的用户界面设计。 以下以Web界面的典型风格说明怎样进行总体风格设计。
5. 首页风格
5.1 页面风格
页面总体风格包括主色调、背景图（一个产品应该运用统一的背景图）、适用的图象分辨率、分帧等
5.2 按钮风格
按钮的颜色、大小、间距等。同样也可分成几类分别描述，如工具栏中的按钮、查询页中的按钮等。
5.3 文字风格
文字的大小、颜色、字体、间距等。可分为中文字、英文字；也可分为正文文字、按钮中文字、超链接文字等分别描述。
5.4 表单风格
如：
位于页面正中
是否适用“冒号”，如“项目名称”还是“项目名称：” 背景颜色，或不同颜色分别代表什么含义 边框是立体的还是平面的还是其它什么样的 ……
5.5 图象风格
如：
图象大小限制（一般应有一上限）
图象格式（规定几种标准格式如.gif，.jpg等，一般最好不要用.bmp等） 图象命名（可以考虑先分类后命名，如bg-01，bg-02，banner-01，banner-02，
Page 4 of 5
button-open，button-close等）
5.6 补充说明
6. 列表页风格
6.1 页面风格
页面总体风格包括主色调、背景图（一个产品应该运用统一的背景图）、适用的图象分辨率、分帧等
6.2 按钮风格
按钮的颜色、大小、间距等。同样也可分成几类分别描述，如工具栏中的按钮、查询页中的按钮等。
6.3 文字风格
文字的大小、颜色、字体、间距等。可分为中文字、英文字；也可分为正文文字、按钮中文字、超链接文字等分别描述。
6.4 表单风格
如：
位于页面正中
是否适用“冒号”，如“项目名称”还是“项目名称：” 背景颜色，或不同颜色分别代表什么含义 边框是立体的还是平面的还是其它什么样的 ……
6.5 图象风格
如：
图象大小限制（一般应有一上限）
图象格式（规定几种标准格式如.gif，.jpg等，一般最好不要用.bmp等） 图象命名（可以考虑先分类后命名，如bg-01，bg-02，banner-01，banner-02，
button-open，button-close等）
6.6 补充说明
Page 5 of 5
因篇幅问题不能全部显示，请点此查看更多更全内容