用户界面设计风格说明(转)

2024-07-21 02:27:50

字体：大中小

来源：转载

供稿：网友

用户界面设计风格说明 (dotnet中华网技术论坛)

1引言

1.1设计说明
   本文档是对系统界面设计风格进行描述，和用户交互的最终界面在《详细设计说明书》中设计和解释。

1.2概念和定义
   用户界面：又称人机界面，实现用户与计算机之间得通信，以控制计算机或进行用户和计算机之间得数据传送得系统部件。
gui：即图形用户界面，一种可视化得用户界面，它使用图形界面代替正文界面。

1.3用户假定
   将使用本系统的用户定义为：对应用程序或计算机的一般用法有一定了解，用户希望界面符合windows9x特别是office97风格，对易用性、简洁性有比较高的要求，对界面快速交互没有很强的要求（即不希望通过命令方式快速交互）。

2用户界面设计规范

2.1用户界面设计原则
   本系统坚持图形用户界面（gui）设计原则，界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。
   界面设计员应该明白软件中用户是所有处理的核心，不应该有应用程序来决定处理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。
   界面设计必须经过确认才能完成。

2.2界面一致性
   在界面设计中应该保持界面的一致性。一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。
    1）显示信息一致性标准
      （1）标签提示:字体为不加重、宋体、黑色、灰底或透明、无边框、右对齐、不带冒号、一般情况为五号（10号）；
      （2）日期:正常字体、宋体、白底黑字、3-d lowered；
      （3）对齐方法：
           左对齐:一般文字、单个数字、日期等
           右对齐:数字、时间、日期加时间。
      （4）分辨率为800*600，增强色16色
      （5）字体缺省为宋体、五号、黑色
      （6）底色缺省采用灰色
    这些信息的排列显示风格供参考, 在同一个应用中,这些信息的表现方式不一致,会使得用户分散注意力,影响这一软件的使用，因此开发者应当注意在同一软件中表现形式的一致性。
    2）布局合理化原则
    应注意在一个窗口内部所有控件的布局和信息组织的艺术性,使得用户界面美观。
    在一个窗口中按tab键,移动聚焦的顺序不能杂乱无章,tab 的顺序是先从上至下，再从左至右。一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。布局力求简洁、有序、易于操作。
    3）鼠标与键盘对应原则
    应遵循的是可不用鼠标的原则:应用中的功能只用键盘也应当可以完成,即设计的应用中还应加入一些必要的按钮和菜单项。
但是,许多鼠标的操作,如双击、拖动对象等,并不能简单地用键盘来模拟即可实现。例如在一个列表框中用鼠标双击其中一项可以表示选中该项内容。为了用键盘也能实现这一功能,必须在窗口中定义一个表示选中的按钮,以作为实现双击功能的替代（或其它方式）。又如在一个窗口中有两个数据窗口,可以用鼠标从一个数据窗口中将一项拖出然后放到另一个中。如果只用键盘,就应当在菜单中设置拷贝或移动的菜单项。
    4）快捷键
    在菜单项中使用快捷键可以让使用键盘的用户操作得更快一些,在西文windows及其应用软件中快捷键的使用大多是一致的。本系统中应用的快捷键在各个配置项上语义必须保持一致。
    面向事务的:
    ctrl-d 删除
    ctrl-f 寻找
    ctrl-i 插入
    ctrl-n 新记录
    ctrl-s 保存
    查询/列表:
    ctrl-o
    ctrl-r
    其它:
    ctrl-c 拷贝
    ctrl-h 帮助
    ctrl-p 打印
    ctrl-v 粘贴
    ctrl-w 关闭
    ctrl-x 剪切
    ms windows保留键:
    ctrl-tab 下一窗口
    ctrl-esc 任务列表
    ctrl-f4 关闭窗口
    alt-f4 结束应用
    alt-tab 下一应用
    enter 缺省按钮/确认操作
    esc 取消按钮/取消操作
    shift-f1 上下文相关帮助
    其它快捷键
    其它快捷键使用汉语拼音的开头字母，不常用的可以没有快捷键。

2.3向导（wizard）使用原则
    对于应用中某些部分的处理流程是固定的，用户必须按照指定的顺序输入操作信息，为了使用户操作得到必要的引用应该使用向导，使用户使用功能时比较轻松明了，但是向导必须用在固定处理流程中，并且处理流程应该不少于3个处理步骤。

2.4系统响应时间
    系统响应时间包括两个方面：时间长度和时间的易变性。用户响应时间应该适中，系统响应时间过长，用户就会感到不安和沮丧，而响应时间过短有时会造成用户加快操作节奏，从而导致错误。系统响应时间的易变性是指相对于平均响应时间的偏差。即使响应时间比较长，低的响应时间易变性也有助于用户建立稳定的节奏。因此在系统响应时间上坚持如下原则：
响应时间长度                 界面设计
0-10 秒                         鼠标显示成为沙漏
10 到18 秒                 由微帮助来显示处理进度
18 秒以上                   显示处理窗口，或显示进度条
一个长时间的处理完成时         应给予完成警告信息

响应时间的易变性               界面设计
用户感觉不到                       不考虑
用户稍微感觉到                       由微帮助提供易变性说明
容易性大而且时间绝对差别大          显示易变性提示

2.5用户帮助设施
   常用的帮助设施有两种：集成的和附加的。集成的帮助设施一开始就是设计在软件中的，它与语境有关，用户可以直接选择与所要执行操作相关的主题。通过集成帮助设施可以缩短用户获得帮助的时间，增加界面的友好性。附加的帮助设施在系统建好以后再加进去的。通常是一种查询能力比较弱的联机帮助。
本系统提供这两种帮助设施，设计和实现时遵循以下原则：
1）   进行系统交互时，提供部分帮助功能，即：提供主要操作的帮助
2）   用户可以通过帮助菜单、f1键和帮助按钮（如果有的话）访问帮助
3）   表示帮助时根据需要提供三种方式的选择：另一个窗体、微帮助和指出参考某个文档
4）   用户如何回到正常交互方式有两种选择：返回键和功能键
5）   帮助信息的构造：采用分层式帮助
6）   微帮助提供：由状态栏提供，或控件上的提示文本

2.6出错信息和警告
    出错信息和警告是指出现问题时系统给出的坏消息，本系统对于出错信息和警告应该遵循以下原则：
1）   信息以用户可以理解的术语描述；
2）   信息应提供如何从错误中恢复的建设性意见；
3）   信息应指出错误可能导致那些不量后果，以便用户检查是否出现了这些情况或帮助用户进行改正；
4）   信息应伴随着视觉上的提示，如特殊的图像、颜色或信息闪烁。
5）   信息不能带有判断色彩，即任何情况下不能指责用户

2.7命令交互
   由于本系统用户是windows用户，故本系统不提供命令交互。

2.8一般交互原则
   本系统一般交互遵循以下原则：
1）   一致性：菜单选择、数据显示以及其它功能都应使用一致的格式。
2）   提供有意义的反馈
3）   执行有较大破坏性的动作前要求确认
4）   在数据录入上允许取消大多数操作
5）   减少在动作间必须记忆的信息数量
6）   在对话、移动和思考中提高效率
7）   允许用户非恶意错误，系统应保护自己不受致命作物的破坏
8）   按功能对动作分类，并按此排列屏幕布局，设计者应那里提高命令和动作组织的内聚性
9）   提供语境相关的帮助机制

2.9信息显示原则
   本系统信息显示遵循以下原则：
1）   只显示与当前用户语境环境有关的信息；
2）   不要用数据将用户包围，使用便于用户迅速吸取信息的方式表现信息；
3）   使用一致的标记、标准缩写和可预测的颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源；
4）   产生有意义的出错信息，见2.6；
5）   使用缩进和文本来辅助理解；
6）   使用窗口分隔控件分隔不同类型的信息；
7）   高效地使用显示器的显示空间。

2.10数据输入原则
   本系统数据输入遵循以下原则：
1）   尽量减少用户输入动作的数量；
2）   维护信息显示和数据输入的一致性；
3）   交互应该时灵活的，对键盘和鼠标输入的灵活性提供支持；
4）   在当前动作的语境中使不合适的命令不起作用；
5）   让用户控制交互流，用户可以跳过不必要的动作、改变所需动作的顺序（如果允许的话）以及在不退出系统的情况下从错误状态中恢复；
6）   为所有输入的动作提供帮助，见2.5；
7）   消除冗余输入。可能的话提供缺省值、绝不要让用户提供程序中可以自动获取或计算出来的信息。

3用户界面设计更改和追加说明

3.1更改说明
    更改本用户界面设计时应该征得所有开发者的同意，所有开发者应该按更正后的原则修改和设计用户界面。

3.2追加说明
    追加本用户界面设计时应该发布给所有开发者，所有开发者应该按追加后的原则修改和设计用户界面。

4其它