面向对象设计3-人机交互部分

《面向对象设计3-人机交互部分》由会员分享，可在线阅读，更多相关《面向对象设计3-人机交互部分（113页珍藏版）》请在金锄头文库上搜索。

1、第8章界面设计第第8章章 界面设计界面设计 8.1 概述概述 8.2 界面需求分析界面需求分析 8.3 输入设计输入设计 8.4 输出设计输出设计 8.5 屏幕界面设计屏幕界面设计 第8章界面设计8.1 概概 述述 8.1.1 用户界面的概念用户界面的概念用户界面用户界面(UserInterface)是对用户与系统之间进行交互所采用的方式、途径、内容、布局及结构的总称，用户界面也叫人机界面、人机接口、人机输入输出或人机交互界面等。第8章界面设计用户界面的不同观点：用户界面的不同观点： 开发者：用户界面是信息系统与用户的交流渠道，是系统向用户展示功能的界面，是开发工作的一个方面。用户：用户界面就

2、是信息系统的全部和信息系统本身。通过主机、显示器、键盘、鼠标等物件构成了对信息系统的物理印象；通过窗口、菜单、控件，声音构成了对信息系统感知印象；通过所反映问题域中的客户、产品、定单、图表、输入、修改等事物和功能形成对信息系统的概念印象。第8章界面设计 用户界面的形式：用户界面的形式： 输入界面：用户向系统输入信息的人机界面；输出界面：系统向用户展示信息、功能和作用的人机界面；输入输出界面：同时能够进行输入、输出处理的混合界面，用户界面更多的是混合型的输入输出界面。用户界面还涉及到人机交互方式、人机交互流程、输入输出设备和媒体等内容。第8章界面设计8.1.2 用户界面发展的三个阶段用户界面发展

3、的三个阶段1命令用户界面命令用户界面命令用户界面也称为命令行用户界面(CommandLineUserInterface)，它是从字符显示终端出现到20世纪80年代中期人机交互界面的主要形式。用户通过系统提供的命令语言使用系统，在字符终端上显示命令接收状态，系统从字符终端上接收用户输入的操作命令，并对命令进行解释执行，最后把命令处理结果输出给用户。第8章界面设计第8章界面设计2图形用户界面图形用户界面图形用户界面GUI（GraphicsUserInterface）被称为第二代用户界面，也是目前人机交互采用的主要人机界面方式。与命令用户界面相比，图形用户界面人机交互的自然性和效率都有较大的提高。但

4、是,图形用户界面属于二维界面，与人之间的信息通信方式主要依靠手和眼，与人之间进行信息交互的途径和方式仍然存在局限性。第8章界面设计第8章界面设计3多通道用户界面多通道用户界面为使人机交互能够更自然化，支持时变媒体，实现三维、非精确及隐含的人机交互，随着虚拟现实技术的研究和发展，近年来提出了多通道用户界面的概念。在多通道用户界面中，人与机器被看成主动参与者，通过虚拟现实环境，人机以自然的通信方式进行交流。在这种方式下，用户可以使用自然的交互方式，如语音、手势、眼神、表情、指点等与系统进行协作工作。第8章界面设计8.1.3 用户界面设计的原则用户界面设计的原则 合理性：指在用户界面设计过程中应该尽

5、量做到全面、系统、客观、美观和协调。 有效性：指用户界面设计应该作到界面友好、操作方便、快速高效、一致规范、灵活适应。安全性：指设计的用户界面保证系统的数据、操作和功能被可靠使用的能力。包括使用权限的设置、检测、保护和修改，对错误的诊断、报告、纠正和保护，以及对输入数据的正确性检查、报告和纠错等方面的能力。第8章界面设计8.1.4 用户界面设计的工作用户界面设计的工作包括界面需求分析、输入设计、输出设计、屏幕界面设计和编写用户手册等工作，见图8.1。图8.1输入输出界面设计的工作第8章界面设计8.2 界面需求分析界面需求分析界面需求分析是从人机交互处理的角度，对人机交互处理过程所反映的系统功能

6、和信息的交互处理需求、界面的分布、人机交互方式、人机交互流程、输入输出设备及工作性质和用户特征等方面所做的分析工作。界面需求分析的依据是系统需求文档。界面需求分析是用户界面设计工作的基础，其包含的工作见图8.2。第8章界面设计图8.2界面分析的工作第8章界面设计1交互需求分析交互需求分析收集、分析、整理信息系统和用户之间所存在的人机交互处理的需要和内容；分析的主要依据是系统需求文档； 分析用例图和顺序图中参与者与系统交互的内容； 用对话设计的形式描述出交互需求。第8章界面设计2界面分布分析界面分布分析从总体上确定信息系统中各节点的类型、构成和分布情况，设计的所有用户界面将来就要分布在这些节点上

7、。 主要依据是系统结构设计中的系统节点分布。 3交互方式分析交互方式分析 确定信息系统各个节点所采用的人机交互方式。 有联机、脱机和混合交互方式。 对采用混合方式的节点还要确定具体的联机方式处理和脱机方式处理的分工和时间分配。第8章界面设计4交互流程分析交互流程分析交互流程指人机交互过程的顺序程式； 交互流程分为固定流程和随机流程两种形式； 交互流程分析可以在对话设计的基础上进行，每一个对话设计本身就已经描述了人机交互的过程和顺序，但对话设计只是描述一个个单一功能的交互过程，没有反映具有复合功能的完整业务的交互流程。因此需要我们从完整的业务处理过程的需要出发，设计出所有交互的固定流程。第8章界

8、面设计5输入输出设备分析输入输出设备分析各节点上的输入输出设备的类型、性能进行分析。因为交互处理工作最后就要落实到各个具体的输入输出设备上，交互处理所采用的设备性能会加强或制约输入输出效果。例如：在字符终端上就显示不出图形；激光打印机虽然具有很高的打印质量，但打印速度不高。CCD手持式条形码扫描仪比笔式条形码扫描仪的识别率高。第8章界面设计6用户分析用户分析对用户类型及其喜好、习惯等特征进行认真分析，以设计出满足用户需要的用户界面。把用户分为：外行型初学型熟练型专家型根据不同的用户类型进行界面设计。第8章界面设计8.3 输入设计输入设计信息系统输入设计信息系统输入设计是从输入角度，通过对输入设

9、备、输入方式、输入内容、输入形式、输入编码、输入安全控制等方面的分析研究，确定出可行的输入设计方案。目的目的是根据信息系统目标和用户的特点，确定出使用户满意的输入设计方案。输入设计与输出设计有密切的联系，需要综合考虑。第8章界面设计8.3.1 输入方式设计输入方式设计 1.输入方式的概念和形式输入方式的概念和形式 概概念念：输入方式是指在向信息系统输入数据的过程中所采用的策略和形式。形式：形式：批输入、联机输入和混合输入三种方式。第8章界面设计 2.2.输入方式设计输入方式设计 (1)批输入方式批输入方式概概念念：批输入方式也叫脱机输入方式，它是指组织一批数据并集中输入到系统之中的输入方式。设

10、计步骤：设计步骤：收集一组相关数据；把收集到的数据先存放到磁带、磁盘等电子媒体上。把电子媒体上的一组数据成批输入到系统之中。第8章界面设计 (2)(2)联机输入方式联机输入方式联机输入方式是在业务处理过程中，边输入数据边处理数据的一种数据输入方式。学生食堂售饭系统数据输入就采用联机输入方式，数据输入和卖饭业务是同时进行的。 (3)(3)混合输入方式混合输入方式是批输入和联机输入相结合的方式。超市售货系统就采用混合方式。结账台采用联机方式，每天在确定的时候POS机再成批地把数据发送到中心数据库中。第8章界面设计8.3.2 输入表单设计输入表单设计输入表单设计应考虑的方面：首先，内容的完整性：把本

11、用例或本界面的输入数据全部包括在所设计的表单之中；其次，数据的一致性：表单中不应该出现冗余数据或派生的数据；最后，规范合理性：表单格式应该简单、规范，符合用户习惯。图8.3是书店信息系统中的图书订单表单格式。第8章界面设计图8.3书店信息系统的图书订单第8章界面设计8.3.3 数据编码数据编码 1. 数据编码的概念和作用数据编码的概念和作用概概念念：数据编码是由字母、数字或特殊字符组成的一组编码序列，是用来标记和描述信息系统中的有关事物的，简称编码。电话号码、学生编号、产品编码、银行账户编码、信用卡编码、车辆编号、汽车牌照号等都是数据编码。作用：作用：提高数据输入的效率和惟一性。类型：类型：顺

12、序码、特征码、类型码和混合码四种类型。第8章界面设计 2. 数据编码的类型数据编码的类型 顺序码顺序码按照事物的时间顺序所进行的编码。如，某学生编码是“0000123324”，表示该生报到顺序是第123324个。 特征码特征码特征码是按照事物的某一方面的固有特征所具有的顺序进行的编码。如，按照学生名字的汉语拼音顺序对学号编码。顺序码基于事物发生的时间顺序，特征码按照事物固有特征进行编码。第8章界面设计 类型码类型码类型码是对一组具有相同特性的事物赋予的统一编码。例如，服装商店要按照不同的尺码、款式、颜色、种类来标记服装，像3530的蓝牛仔裤、3531的蓝牛仔裤等。可以给3530的蓝牛仔裤赋予1

13、01编码，给3531的蓝牛仔裤赋予102编码。 混合码混合码混合码是可以表示事物多种特征的编码。身份证号就是混合码，它可以反映一个人所在的省、县、乡，出生日期，性别以及在同一个乡中的顺序编码号等特征。通常企业编码、汽车车辆编码、产品编码都是混合码。第8章界面设计8.3.4 输入安全性设计输入安全性设计1.输入安全性涉及的因素输入安全性涉及的因素输入设备、输入数据、输入规程、输入权限、输入人员都会影响输入的安全性，因此，输入安全性应该考虑多方面的因素。2.输入数据正确性检查输入数据正确性检查输入数据正确性检查是输入安全性的一方面内容。数据检查由人工和系统两方面承担。 人工检查是指在输入数据之前，

14、由检查人员对要输入的数据进行检查。要求对采集和整理的数据认真进行核对检查，以保证数据的正确性。第8章界面设计自自动动检查：通过系统中设计的输入数据错误检查程序对输入的数据自动进行正确性检查。例如，为了保证人员档案数据中邮政编码的正确性，可以在系统中装配一个国家和地区邮政编码数据库，把输入的每一个人的邮政编码和地区与数据库中正确的邮政编码进行对照检查，这样就能够保证人员邮政编码的正确性。注意：保证输入正确性一方面要由系统来进行检查，但更需要输入人员认真而仔细的检查，因为信息系统不能自动检查出所有输入问题。例如，智能化再高的系统也不可能知道一个人的名字是“赵蓝”而不是“赵晓”。第8章界面设计 2.

15、输入数据检查技术输入数据检查技术 校验数位校验数位校验数位常常被用在对银行信用卡、存款账户、盘存物品号、客户和会员账户的检查。其含义是通过一种算法对原编码进行计算得出一个数字，然后把这个数字与原编码结合起来组成输入编码，并对输入编码按照给定的算法进行检查。第8章界面设计 相关检查相关检查相关检查的含义是用事物两个或多个相关属性来检查输入数据。例如，城市与国家，城市与省，地区与它的邮政编码等。通常，一个城市肯定属于一个确定的国家和省，而一个国家或省(地区)也有它确定的邮政编码。通过对事物相关属性进行检查，可以提高输入数据的正确性。第8章界面设计 界限检查界限检查界限和范围检查一般用于数字型输入数

16、据。界限包括下界和上界，输入必须大于或等于下界，而小于或等于上界。例如，输入数据的下界是1，上界是10，则输入数据应该大于或等于1，小于或等于10。有时可以省略下界或上界，这样输入的数据的自由度会更大一些。例如，大于0作为下界，而没有上界。第8章界面设计 完整性检查完整性检查完整性检查用来保证输入数据的完整性，以避免在输入过程中漏掉必要的输入数据项。例如，人员档案数据包括姓名、住址、城市、国家、邮政编码等数据，完整性检查就要检查人员档案数据是否已经完整地输入了这些数据项。第8章界面设计8.4 输输 出出 设设 计计 输出设计概念：信息系统输出设计是从信息输出角度，通过对输出设备、输出内容、输出

17、界面、输出控制等方面的分析研究，确定出可行的输出设计方案。输出设计与输入设计有密切的联系。 信息的输出途径：屏幕输出、报表输出和其它途径输出。屏幕输出又可分为文本输出、图表输出、图形图像输出和音频输出等形式。屏幕输出又可通过屏幕界面的方式来组织。第8章界面设计8.4.1 输出信息的类型及区别输出信息的类型及区别 1输出信息系统类型输出信息系统类型 内部信息内部信息内部信息是由信息系统所属的组织内部人员使用的信息。例如，教师用的学生名册，销售人员看到的销售报表等都属于内部信息。 外部信息外部信息外部信息是由信息系统所属的组织外部人员使用的信息。例如，企业向上级主管部门上报的各种统计报表就属于外部

18、信息。第8章界面设计 2. 内外部信息的区别内外部信息的区别 内部信息具有机密性，只限于组织内部。 外部信息的输出形式应该比内部信息规范。因为外部信息是向组织外部提供的，其表示形式应该精细、讲究。例如，采用高质量的激光或彩色打印机输出，在报表上打印出企业商标，用规则的带网格线的报表输出信息，使用阴影和加框等方法以提高输出效果等。第8章界面设计8.4.2 输出报表输出报表1明细表明细表明细表用来反映在确定的时间范围内事务活动的详实情况，它强调对信息反映的详实性。图8.4的学生选修课程明细表反映赵兰等同学2002年第2学期每一门课程的选修情况。在明细表中也会出现一些冗余信息和汇总信息。第8章界面设

19、计图8.4明细表学号姓名课程周学时节次345225612赵兰C语言42345225612赵兰计算机组成原理41345225613李晓数据结构62345225613李晓计算机组成原理41345225614张木C语言42345225614张木计算机组成原理41学生选修课程明细表2002年第2学期打印日期：2002.9第8章界面设计2汇总表汇总表汇总表反映业务活动的综合信息。图8.5的课程汇总表反映2002年第2学期各门课程学时的汇总情况，这个报表是在学生选修课程明细表的基础上，对课程明细信息汇总得到的。组织中的不同人员对汇总信息有不同的要求，一般在信息系统开发阶段很难设计出用户需要的所有汇总表，实

20、际上很多汇总表是在系统运行过程中根据用户的需要临时生成的。因此，信息系统应该提供由用户自己设计汇总表格式，并提取汇总数据的功能。第8章界面设计图8.5汇总表课程号课程名周学时总学时周数Act102会计电算化36020Bio101计算机导论44010Chm102管理学44812Mis111人机工程35418课程汇总表2002年第2学期打印日期：2002.9第8章界面设计3分析表分析表分析表反映信息的对比和分析情况。根据报表中信息的详细程度，可以分为明细分析表和汇总分析表两种形式，但一般以汇总分析表见多。图8.6是一张分析表，反映2001年与2002年某企业债务和资本的增减分析情况。第8章界面设计

21、项目2001年2002年相差量相差比(%)资产：现金0.60.80.233应收账款3.33.70.412.1办公设备5.25.50.35.8小计9.110.00.99.9债务：应付账款1.11.20.19.1长期借款3.22.8-0.4-12.5小计4.34.0-0.37.0资本：一般存货3.03.00.00.0雇佣收益1.83.01.266.7小计4.86.01.225.0债务和资本9.110.00.99.9图8.6分析表第8章界面设计4历史表历史表历史表用来反映业务活动的历史记录。历史表并不是一种单一的报表类型，它可以采用明细表、汇总表或分析表的形式来反映历史信息。在历史表中主要反映的是过

22、去的信息。第8章界面设计8.4.3 输出图表输出图表1散点图散点图用来表现数据变化趋势和规律，见图8.7。企业管理通常用散点图反映业务过程的历史数据，并预测业务未来的变化趋势。图8.7散点图第8章界面设计2折线图折线图折线图用来反映一定时间区间内数据变化的波动情况，见图8.8。折线图也可以表现数据的变化趋势，但与散点图的区别在于折线图增加了时间维数，因此，它能够表现出数据随时间变化的趋势。折线图可以用来比较在相同时间范围内，两个或多个事件的变化情况。它可以表现产品销售业务、销售人员的销售活动、学生对课程的登记情况等业务活动。需要注意的是，折线图中X轴一般用来表示时间，而Y轴表示业务值。第8章界

23、面设计图8.8折线图第8章界面设计3条形图条形图条形图用来表现各分量之间的关联关系和比例关系。按照图中的条棒的方向，可以把条形图分为水平条形图和垂直条形图。水平条形图用来对相同时间区间内的不同项目进行比较，而垂直条形图用来比较不同时间区间中同一项目的情况，图8.9是垂直条形图的例子。条形图的缺点是不能反映相同时间区间中所有项目的合计和不同时间区间中同一项目的合计。第8章界面设计图8.9条形图第8章界面设计4饼图饼图通过圆和多个扇面来表示整体和部分以及各部分在整体中所占的比例，见图8.10。饼图也可以设计成多种不同的形式，如可以设计成如图8.10的二维结构，也可以设计成三维结构。为了突出其中某一

24、部分或多个部分，可以在图中突出某一个扇形或多个扇形。另外，在每一个扇形中也可以标出所表示的比例数字。第8章界面设计图8.10饼图第8章界面设计8.5 屏幕界面设计屏幕界面设计8.5.1 屏幕界面设计的准则屏幕界面设计的准则BenShneiderman的八项基本准则。图8.11用户界面设计的八项准则第8章界面设计尽量保持一致性尽量保持一致性一致性的含义：一致性的含义：是所设计界面的按键、窗口格式、色彩、界面布局等在整个系统中始终应该保持一致。一致性的作用：一致性的作用： 一致性是人习惯的需要，人惯于用已经形成的习惯来进行观察和行动。一致性既可以保持界面的规整、简洁，又可以减轻人们学习和使用信息系

25、统的负担。第8章界面设计为熟练用户提供快捷键为熟练用户提供快捷键 快捷键能够提高系统的操作速度。初学者：提供丰富的联机帮助和界面说明，并更多地使用菜单和选项；熟练用户：提供快捷键。过多的操作界面反而会增加操作量，降低使用效率。第8章界面设计 提供有效反馈提供有效反馈系统应该对用户的每一个操作都给出反馈信息，以让用户了解系统对用户操作的确认。及时的反馈会提高用户的注意力，增强用户使用系统的兴趣。 设计完整的对话过程设计完整的对话过程设计的对话过程应该完整，有开始、中间处理和结束部分，因为人处理每一个业务都是一个完整的过程。但是在业务处理过程中应该提供例外处理功能。第8章界面设计 提供简单的错误处

26、理机制提供简单的错误处理机制界面设计应提供对用户错误的处理功能，并能够检查、提示、纠正用户出现的常见错误。否则，所设计的系统将是一个不健壮的系统。 允许撤消动作允许撤消动作对用户的一些错误或试探性动作应该允许用户在操作过程中自动撤除，这符合人们日常试探性和往复性的工作习惯。人们在从事一项工作的过程中，经常会做出一些试探动作，或不自觉地犯错，撤消这些动作并重新进行符合用户的工作习惯。第8章界面设计 提供控制的内部轨迹提供控制的内部轨迹系统随时把控制的内部轨迹提示给用户，用户会感觉到自己一直在控制着系统，最起码能够了解系统的工作过程。这样会增加用户使用系统的亲和感。 减少短期记忆负担减少短期记忆负

27、担心理学规律发现，人在同一时间只能记忆7条信息。系统界面设计中应该尽量减少人的记忆负担。可通过信息提示、反馈等方式减轻对人记忆信息的要求。第8章界面设计8.5.2 图形屏幕界面图形屏幕界面图形屏幕界面也叫图形用户界面(GUI)，它主要由窗口、菜单和控件三要素构成。 1 1界面框架界面框架( (Frame)Frame) 界面框架：界面框架：是一个屏幕界面的总构架，所有屏幕控件都建立在界面框架之中。 界面框架形式：界面框架形式：单文档界面SDI(SimpleDocumentInterface)：是指在同一时间只能打开一个文档的用户界面。在SDI方式下，如果要打开另外一个文档，需要先关闭当前打开的文

28、档。第8章界面设计多文档界面MDI(MultipleDocumentInterface)：是指允许在同一屏幕界面上同时打开多个文档的用户界面。每一个文档都显示在自己的文档窗口中，并且可以 在 不 同 文 档 之 间 进 行 切 换 。 Microsoft Word、MicrosoftExcel、VisualBasic、Delphi等都采用多文档界面方式工作。第8章界面设计2 2窗口窗口窗窗口口的的概概念念：窗口(Window)也叫窗体，是屏幕界面上带有边界的矩形区域，用户通过窗口与系统进行交互处理。第8章界面设计 窗口的作用：窗口的作用：可以把窗口视为虚拟屏幕，而把显示器屏幕看成物理屏幕。虚拟

29、屏幕一般比物理屏幕小，并且在同一个物理屏幕上可以同时显示多个窗口。在窗口上只能同时显示用户需要的一部分信息，可以采用窗口滚动技术看到整个用户空间的全貌。 窗口的属性：窗口的属性：窗口标题、大小、位置、颜色、图标、最大化和最小化等。滚动条、工具条等。 窗窗口口的的类类型型：注册窗口、主控窗口、数据处理窗口、事务处理窗口和信息查询窗口等类型。第8章界面设计3 3菜单菜单菜菜单单的的概概念念：菜单(Menu)是由系统显示给用户的一种可选项目的列表,用户可以从中选择一项要做的工作。菜单是通俗名称，其规范名称是选单(“全国自然科学名词审定委员会”1994年定)。菜单的形式：菜单的形式：下拉式菜单，弹出式

30、菜单。第8章界面设计1) 下拉式菜单下拉式菜单概概念念：下拉式菜单是一种应用于主控界面的菜单类型，被用来描述系统的功能结构。 结构：结构：两层。第一层：主菜单，各选项名水平排成一行被放在窗口最上方的一个带形区域中。第二层：子菜单，一个子菜单隶属一个主菜单项。垂直方向排列，放置在其对应的主菜单项的下方。平常各个子菜单被隐藏起来，只有当单击主菜单项时，对应的子菜单才被弹出。每次只能显示被选中主菜单项的子菜单。图8.12是MicrosoftWord的下拉式菜单。第8章界面设计图8.12MicrosoftWord的下拉式菜单第8章界面设计2) 弹出式菜单弹出式菜单弹出式菜单是垂直排列功能选项的矩形框，

31、可被下拉式菜单或其它窗口功能选项驱动弹出，因此被称为弹出式菜单。弹出式菜单可以是单层结构或多层结构，位置可以根据用户操作或当时的操作环境确定。图8.13是在WindowsXP下按鼠标右键所弹出的一个弹出式菜单。第8章界面设计图8.13在WindowsXP下按鼠标右键所弹出的菜单第8章界面设计4 4控件控件控控件件的的概概念念：控件(Component)是图形用户界面对除窗口和菜单之外的所有界面构件的总称，有些图书把窗口和菜单也归到控件之中。控控件件的的作作用用：通过在界面中设置菜单或各种不同的控件，构成完成确定功能的人机交互界面。在前端开发平台中，提供了大量可以自动生成的控件，程序员可以利用系

32、统提供的各种控件，设计出所需要的人机交互界面。窗口及控件见图8.14。第8章界面设计图8.14窗口及控件第8章界面设计 标签标签( (Label)Label)标签用来在窗口中显示一段不能编辑的文本。使用标签，可以对文本框、列表框等控件进行解释或描述，也可在窗口中输出一段说明性文字信息，还可向用户输出提示、出错等信息。 文本框文本框( (TextBoxTextBox) )文本框是用来接收用户输入信息的正文编辑区域，用户可以在文本框中的光标位置输入信息。文本框可以分为单行和多行，输入内容超出编辑框宽度时，可以自动滚动。第8章界面设计 列表框列表框( (ListBoxListBox) )列表框是向用

33、户提供功能、信息或参数的选项列表。进入列表框后，光条显示在列表框的第一个选项上面，用户可以把光条移动到所要选择的选项上。当列表框中的选项超过列表框的长度时，列表框上会显示滚动条，可通过按滚动条来移动选项。滚动条可以设计成上下方式、左右方式或上下左右方式，一般为单列的上下滚动方式。第8章界面设计 滚动条滚动条( (ScrollBarScrollBar) )通过滚动条可以实现应用程序中输出信息的水平或垂直滚动，以方便地浏览和显示大量信息。滚动条分为水平滚动条和垂直滚动条两种类型。一般在列表框、文本框中的控件会自带滚动条。滚动条控件主要应用于那些不能自动提供滚动条的控件或应用界面，以实现信息的滚动输

34、出。第8章界面设计 按钮按钮( (Button)Button)按钮是在屏幕上显示的小矩形框，通过单击按钮可以触发确定的功能操作。例如，单击“OK”按钮可以对当前操作进行确认；单击“Cancel”按钮则忽略或放弃当前操作；而单击“Help”按钮可以触发联机帮助功能。 单选按钮单选按钮( (RadioButtonRadioButton) )单选按钮用来实现从多项选项中，选且仅选择一项的应用。一个单选按钮表示一个选项，用小圆圈表示，在圆圈中带小点的单选按钮表示当前要选择的选项。第8章界面设计 复选框复选框( (CheckBoxCheckBox) )复选框表示对某个选项是否选择。复选框用一个小方框表示

35、。如果选中复选框所表示的选项，则复选框中显示一个小对号，没有选中不显示对号。上面我们介绍了在图形用户界面中常用的7个控件,一般客户端开发平台都提供了大量丰富的控件，程序员可以利用这些控件设计自己所需要的窗口界面。不同的开发平台所提供的控件种类和形式也有差异。因此，应该根据具体选择的开发平台，从事控件设计工作。第8章界面设计8.5.3 屏幕界面结构设计屏幕界面结构设计1屏幕界面结构的含义屏幕界面结构的含义概概念念：屏幕界面结构是由信息系统用户界面中的所有屏幕界面构成的结构框架。一个信息系统完整的用户界面可能由几百幅到几千幅屏幕界面构成，每一个屏幕界面就相当于科教片中的一个幻灯镜头，把这些幻灯镜头

36、按照确定的顺序放映，就完整地向人们介绍了一项科教知识。在信息系统中，为了完成用户需要的交互处理，每幅屏幕界面也有其显示顺序和切换条件，由这些屏幕界面按照一定的切换联系就构成了信息系统的屏幕界面结构。图8.15是MicrosoftWord的树形屏幕界面结构。第8章界面设计图8.15MicrosoftWord的屏幕界面结构第8章界面设计2信息系统功能结构信息系统功能结构概概念念：信息系统功能结构是信息系统功能的总体构成框架，它决定着信息系统的屏幕界面结构。分分析析依依据据：系统用例图、系统逻辑结构、系统的拓扑结构和系统处理的基本要求。由用例图和逻辑结构确定信息系统的总体功能结构；功能到节点界面的分

37、布；增加状态设置、日志、备份、恢复、联机帮助等辅助功能。第8章界面设计书店信息系统的基本功能结构见图8.16。书店信息系统的功能分布到六个节点：“计划采购”，“书库管理”，“图书销售”“结算”，“事务管理”，“系统管理” 增加辅助功能。书店系统各个节点的功能结构见图8.17图8.22。这里没有考虑数据库服务器节点上的功能设置。第8章界面设计书店信息系统功能结构计划采购管理计划管理：编辑图书计划，查询图书计划，输出图书计划，计划执行统计订单管理：编辑图书订单，查询订单信息，输出图书订单合同管理：编辑合同，查询合同，输出合同，合同执行情况统计书目管理：编辑书目，查询书目，输出书目信息到货处理：登记

38、到货图书，打印入库单，统计到货情况供书商管理：编辑供书商信息，查询供书商信息，输出供书商信息书库管理入库管理：编辑入库信息，查询入库信息，输出入库信息出库管理：编辑出库信息，查询出库信息，输出出库信息盘库管理：盘库处理，打印盘库单报损管理：报损处理，打印报损单图书销售管理领书处理：编辑出库图书，查询出库图书，打印出库单图书上架：编辑上架图书，查询上架图书，打印架存报表销售图书：售书处理：打印书单，收书款，出售图书浏览图书销售信息打印图书销售报表结账：销售汇总，打印销售账单盘架：盘架处理，打印盘架单资金结算：汇总收款数据，打印结算单事务管理员工基本信息管理：编辑员工基本信息，浏览员工基本信息，输

39、出员工信息员工工资管理：员工工资管理，员工工资发放员工勤绩管理：编辑员工勤绩信息，浏览员工勤绩信息，员工勤绩统计日常事务管理图8.16书店信息系统的总体功能结构第8章界面设计书店系统计划采购节点功能结构计划管理到货处理编辑图书计划登记到货图书查询图书计划打印入库单输出图书计划统计到货情况计划执行情况统计供书商管理订单管理编辑供书商信息编辑图书订单查询供书商信息查询订单信息输出供书商信息输出图书订单系统维护合同管理打印机设置编辑合同备份与恢复查询合同帮助输出合同关于书店信息系统合同执行情况统计目录搜索书目管理主题搜索编辑书目联机帮助查询书目输出书目信息图8.17“计划采购”节点的功能结构第8章界

40、面设计书店系统书库管理节点功能结构入库管理报损管理编辑入库信息报损处理查询入库信息打印报损单输出入库信息系统维护出库管理打印机设置编辑出库信息备份与恢复查询出库信息帮助输出出库信息关于书店书库系统盘库管理目录搜索盘库处理主题搜索打印盘库单联机搜索图8.18“书库管理”节点的功能结构第8章界面设计书店系统图书销售节点功能结构领书处理结账编辑出库图书销售汇总查询出库图书打印销售账单打印出库单盘架图书上架盘架处理编辑上架图书打印盘架单查询上架图书系统维护打印架存报表打印机设置销售图书备份与恢复售书处理帮助浏览图书销售信息关于书店图书销售系统打印图书销售报表目录搜索主题搜索图8.19“图书销售”节点的

41、功能结构第8章界面设计书店系统结算节点功能结构收书款帮助资金结算关于书店结算系统收款目录搜索打印结算单主题搜索系统维护打印机设置备份与恢复图8.20“结算”节点的的功能结构第8章界面设计书店系统事务管理节点功能结构员工基本信息管理系统维护编辑员工基本信息打印机设置浏览员工基本信息备份与恢复输出员工信息帮助员工工资管理关于书店事务管理系统员工工资管理目录搜索员工工资发放主题搜索员工勤绩管理联机帮助编辑员工勤绩信息浏览员工勤绩信息员工勤绩统计日常事务管理图8.21“事务管理”节点的功能结构第8章界面设计系统管理节点功能结构系统设置帮助节点设置关于系统节点配置设置目录搜索用户设置主题搜索权限设置系统

42、检测节点检测用户检测出错检测图8.22“系统管理”节点的功能结构第8章界面设计3屏幕界面结构设计屏幕界面结构设计1) 屏幕界面结构设计的任务屏幕界面结构设计的任务 屏幕界面结构包括总体屏幕界面结构和支细屏幕界面结构。总体屏幕界面结构是信息系统从顶层屏幕界面向下两到三层的屏幕界面结构，它是信息系统屏幕界面结构的主体骨架，在屏幕界面中起核心作用。支细屏幕界面结构则是总体屏幕界面下层的各个分支界面结构。 屏幕界面结构设计的任务是确定总体屏幕界面结构。第8章界面设计2) 下拉式菜单设计下拉式菜单设计 下拉式菜单反映系统的总体功能，通过菜单中的各个选项可以把屏幕切换到下一级屏幕界面，所以下拉式菜单是总体

43、屏幕界面结构的核心。信息系统功能结构是每一个节点的下拉菜单设计的依据，菜单的内容就反映了各节点的功能结构。 菜单设计的方法很简单，现在所有可视化工具都提供了十分方便的菜单设计的功能。图8.23是利用Jbuider设计的书店信息系统“图书销售”节点的下拉菜单界面。第8章界面设计图8.23“图书销售”的下拉菜单第8章界面设计3) 屏幕界面结构屏幕界面结构事实上，下拉菜单的内容就已经确定了信息系统应该具有的屏幕界面结构。每一个菜单项描述一个系统功能，点击该菜单项，就能把完成对应功能的屏幕界面切换为当前屏幕界面。书店信息系统“图书销售”节点的屏幕界面结构见图8.24。第8章界面设计图8.24“图书销售

44、”屏幕界面结构第8章界面设计8.5.4 对话设计对话设计1 1对话过程对话过程对对话话过过程程：用户与信息系统之间的交互过程。用户要通过信息系统完成一个完整功能，就需要与系统发生一次对话过程。 一个用例功能的实现过程就是用户与系统的一次对话过程。在对话过程中，用户向系统提出要求，系统给予应答。下面给出“售书处理”用例中，售书员和收款员分别通过各自图书销售管理节点和结算节点与书店信息系统的对话过程。第8章界面设计条件：假定售书员已经把销售图书节点上的系统启动，并处在“售书处理”屏幕界面；收款员已经把结算节点系统启动，并处在“收书款”屏幕界面。读者从书架上找到两本系统分析与设计及一本软件工程技术概

45、论，拿到售书员柜台前，希望购买这三本书。系统分析与设计的图书编号是9787111108481，软件工程技术概论的图书编号是9787030099402。图8.25是在售书处理过程中，售书员和收款员分别与系统的三个对话过程。第8章界面设计对话一：在销售图书节点售书员与系统的对话售售 书书 员员 ： 用 扫 描 仪 扫 描 三 本 书 的 图 书 编 号 9787111108481、9787111108481和9787030099402。系系统统：在屏幕上显示出这两种书的图书信息，包括图书编号、图书名称、作者、出版社、单价、出版日期、册数，以及价格合计。售书员：售书员：点击“开书单”按钮。系系统统：

46、弹出窗口，提示用户等待，当前正在打印书单，启动打印机，打印出三联书单。书单打印完成之后，自动消除提示窗口。注：注：售书员把三联书单交给读者，让读者在收款柜台交书款。(a)“售书处理”对话一图8.25“售书处理”的三个对话过程第8章界面设计图8.25“售书处理”的三个对话过程对话二：在结算节点收款员与系统的对话收款员：收款员：输入书单号。系系统统：显示该书单信息，包括每一种图书的图书编号、图书名称、作者、出版社、单价、出版日期、册数，以及书单图书的价格合计。收款员：收款员：收读者的书款，并按“书款”按钮。注注：收款员给自己留一联书单，并给另外两联书单上盖章，然后把书单交给读者，让读者回到售书员处

47、持书单领书。(b)“售书处理”对话二第8章界面设计图8.25“售书处理”的三个对话过程对话三：在销售图书节点售书员与系统的对话(继续)售书员：售书员：输入书单号。系系统统：显示书单信息，包括每一种图书的图书编号、图书名称、作者、出版社、单价、出版日期、册数，以及书单图书的价格合计。特别显示“书款已交”。售书员：售书员：按“售出图书”按钮。注：售书员给自己留存一联书单，给读者一联书单，并给图书上盖章，把图书交给读者，本次售书结束。(c)“售书处理”对话三第8章界面设计2 2对话界面设计对话界面设计 对话界面对话界面：能够实现一个用例对话过程的一组屏幕界面称为对话界面。 对话界面设计：对话界面设计

48、：需要根据用例的对话要求，设计出一组能够满足用例功能需要，并具有友好界面风格的屏幕界面。图8.26是“售书处理”用例对话过程的对话界面。首先进入“售书处理”界面，接收待售图书的书号和册数，接收完后，按“开书单”按钮，则在“售书处理”界面上弹出一个小窗口，显示“正在打印书单，请等待”。第8章界面设计图8.26“售书处理”对话界面第8章界面设计在“售书处理”界面按“出售图书”按钮，则界面切换到“出售图书”界面，接收“书单号”，按“确认”按钮出售图书。因此，在“售出处理”对话过程中共有“售书处理”和“出售图书”两个界面。图8.27是“收书款”对话界面。第8章界面设计图8.27“收书款”对话界面第8章

49、界面设计8.5.5 屏幕界面设计屏幕界面设计1 1屏幕界面的布局和风格屏幕界面的布局和风格屏屏幕幕界界面面布布局局：由各个界面构件在屏幕界面中的位置、大小、图样等所构成的整体屏幕格局。屏幕界面的布局应该整洁、合理、和谐，既能满足所显示内容的需要，又要具有美感。功能、内容和类型不同的屏幕界面其布局是不一样的。应重视屏幕界面的整体布局设计，在满足输入输出需要的基础上，设计出具有整体和谐美的屏幕界面。第8章界面设计屏屏幕幕界界面面设设计计风风格格：是在不同的屏幕界面设计中所表现出来的艺术特色和个性。不同的设计组织和人员在长期的屏幕界面设计过程中，会形成各自的风格。例如，Microsoft和Macin

50、tosh就有不同的屏幕界面风格。在屏幕界面设计中，应该正确处理共性与个性、规范与灵活、功能与设计、风格与统一之间的辨证关系。第8章界面设计2 2注册界面设计注册界面设计注注册册界界面面：是进行人员身份、口令、安全等级、职责设置和检查的交互界面。在初次进入系统时，一般先展示注册界面，由注册界面提供用户注册、检查和核对用户身份等功能，只有通过注册的用户方能进入系统。超级用户可以在系统运行期间，启动注册和设置界面对系统进行动态设置。下图是广联达工程概预算软件的注册界面。第8章界面设计第8章界面设计3 3主控界面设计主控界面设计主主控控界界面面：是展示系统主体功能，进行宏观整体控制的屏幕界面。主控界面

51、一般在注册界面之后调出，而且是整个系统运行期间的核心界面。主控界面构成：主控界面构成：下拉菜单：主控界面的核心构件，反映系统的整体功能。快捷图标：点击这些图标可以启动系统的一些常用功能。主工作区：在下拉菜单下面，用于信息显示、数据处理或事务处理。也可能是一个显示标志信息的空白区。状态行：显示系统的工作状态，一般在底行。第8章界面设计图8.12MicrosoftWord的主控界面第8章界面设计4 4数据处理界面设计数据处理界面设计数数据据处处理理界界面面：是对数据进行输入、修改、删除、检索、统计的屏幕界面。数据处理界面除了能够完成一般数据处理功能之外，还可以实现对数据库中的数据进行插入、删除、更

52、新、检索等操作。设计人员可以根据数据处理的具体要求，运用各种控件设计出具有不同格式和风格的数据处理界面。下图是一个系统的数据处理界面。第8章界面设计图8-A，数据处理界面例子第8章界面设计 5 5事务处理界面设计事务处理界面设计事务处理界面：事务处理界面：是人和信息系统之间进行事务处理的交互界面。用户在事务处理界面中可以驱动一个事务处理功能，信息系统也可能向用户提供一定的反馈信息。因为事务处理的多样化，决定了事务处理界面的格式和内容将是风格各异、五花八门。第8章界面设计PowerPoint的打印设置界面第8章界面设计6 6信息查询界面设计信息查询界面设计信信息息查查询询界界面面：是提供信息的检

53、索、查询和统计输出的人机界面。用户可以在查询界面中指定查询条件，信息系统根据给定的查询条件进行信息查询，并把查询的结果在查询界面中按照预先设计的格式输出。根据查询条件，可以将信息查询分为单条件查询和多条件组合查询；根据信息检索的范围，可以将信息查询分为单数据库查询和多数据库关联查询。第8章界面设计第8章界面设计8.5.6 界面建模界面建模界面中的框架、窗口、菜单、按钮、标签、文本框等所有控件在系统中都是以控件类的形式存在的。因此，所有的界面都可以用类图描述其界面构成。下面我们以图7.15的“售书处理界面”和“收款员界面”为例，讨论界面建模过程。图7.15的“售书处理界面”、“出售图书界面”和“收款员界面”三个界面被设计成为图8.28的三幅屏幕界面。第8章界面设计图8.28“售书处理”的三个屏幕格式第8章界面设计每一幅屏幕界面都由框架和控件构成，它们在系统中表现为控件类。图8.29是这三幅屏幕界面的类图。在图8.26和图8.27中，“售书处理”分别有“售书处理”和“出售图书”两个屏幕界面，“收书款”有一个屏幕界面。这三个屏幕界面对应着三个屏幕框架（Frame），每一个框架中又包括若干个标签、文本框和按钮。第8章界面设计图8.29“售出处理”和“收书款”界面类图