-界面设计及详细设计课件

第五章 界面设计5.1 概述概述 5.2 界面需求分析界面需求分析 5.3 输入设计输入设计 5.3.1 输入方式设计输入方式设计 5.3.2 输入表单设计输入表单设计 5.3.3 数据编码数据编码 5.3.4 输入安全性设计输入安全性设计5.4 输出设计输出设计 5.4.1 输出信息的类型及区别输出信息的类型及区别 5.4.2 输出报表输出报表 5.4.3 输出图表输出图表5.5 屏幕界面设计屏幕界面设计 5.5.1 屏幕界面设计的准则屏幕界面设计的准则 5.5.2 图形屏幕界面图形屏幕界面 5.5.3 屏幕界面结构设计屏幕界面结构设计 5.5.4 对话设计对话设计 5.5.5 屏幕界面设计及界面建模屏幕界面设计及界面建模5.6 详细设计详细设计2024/7/231 第五章 界面设计库存系统模块新建物资入库出库统计查询基本操作报表系统入库报表出库报表保管帐报表入库出库库存系统管理初始化用户管理下月结转物资类别部门供应商定义2024/7/232 第五章 界面设计2024/7/233 第五章 界面设计2024/7/234 第五章 界面设计2024/7/235 第五章 界面设计2024/7/236 第五章 界面设计 5.1 5.1 概述概述 5.1.1 5.1.1 用户界面的概念用户界面的概念 用户界面用户界面(User Interface)(User Interface)是对用户与系统之是对用户与系统之间进行交互所采用的方式、途径、内容、布局及结间进行交互所采用的方式、途径、内容、布局及结构的总称，用户界面也叫人机界面、人机接口、人构的总称，用户界面也叫人机界面、人机接口、人机输入输出或人机交互界面等。机输入输出或人机交互界面等。2024/7/237 第五章 界面设计 用户界面的不同观点：用户界面的不同观点：开发者：用户界面是信息系统与用户的交流渠道，是系开发者：用户界面是信息系统与用户的交流渠道，是系统向用户展示功能的界面，是开发工作的一个方面。统向用户展示功能的界面，是开发工作的一个方面。用户：用户界面就是信息系统的全部和信息系统本身。用户：用户界面就是信息系统的全部和信息系统本身。通通过过主主机机、显显示示器器、键键盘盘、鼠鼠标标等等物物件件构构成成了了对对信信息息系统的物理印象；系统的物理印象；通通过过窗窗口口、菜菜单单、控控件件，声声音音构构成成了了对对信信息息系系统统感感知知印象；印象；通通过过所所反反映映问问题题域域中中的的客客户户、产产品品、定定单单、图图表表、输输入、修改等事物和功能形成对信息系统的概念印象。入、修改等事物和功能形成对信息系统的概念印象。2024/7/238 第五章 界面设计 用户界面的形式：用户界面的形式：输入界面：用户向系统输入信息的人机界面；输入界面：用户向系统输入信息的人机界面；输输出出界界面面：系系统统向向用用户户展展示示信信息息、功功能能和和作作用用的的人机界面；人机界面；输输入入输输出出界界面面：同同时时能能够够进进行行输输入入、输输出出处处理理的的混合界面，用户界面更多的是混合型的输入输出界面。混合界面，用户界面更多的是混合型的输入输出界面。用用户户界界面面还还涉涉及及到到人人机机交交互互方方式式、人人机机交交互互流流程程、输入输出设备和媒体等内容。输入输出设备和媒体等内容。2024/7/239 第五章 界面设计 系统访问控制系统访问控制-用户登录部控制：用户登录部控制：完整性控制完整性控制：系统内部的机制和程序，用来保护系：系统内部的机制和程序，用来保护系 统和系统内的信息。统和系统内的信息。完整性控制目标完整性控制目标：确保所有重要的商业交易，即没：确保所有重要的商业交易，即没 有丢失交易或输入错误的或欺诈有丢失交易或输入错误的或欺诈 性交易；确保交易被正确地记录性交易；确保交易被正确地记录 和处理；保护组织的资产，记录和处理；保护组织的资产，记录 由于计算机崩溃或异常灾害丢失由于计算机崩溃或异常灾害丢失 的信息。的信息。系统访问控制系统访问控制：确定谁有权访问系统及其数据的完：确定谁有权访问系统及其数据的完 整性控制。整性控制。2024/7/2310 第五章 界面设计 系统访问控制系统访问控制-用户登录部控制：用户登录部控制：未授权用户未授权用户：无权访问系统的用户。：无权访问系统的用户。注册用户注册用户：已注册或系统已知的并被授权可以访问：已注册或系统已知的并被授权可以访问 系统某一部分的用户。系统某一部分的用户。特权用户特权用户：对系统有特殊安全访问权限的用户。：对系统有特殊安全访问权限的用户。2024/7/2311 第五章 界面设计2024/7/2312 第五章 界面设计 5.1.2 5.1.2 用户界面发展的三个阶段用户界面发展的三个阶段 1)1)命令用户界面命令用户界面 命命令令用用户户界界面面也也称称为为命命令令行行用用户户界界面面，它它是是从从字字符符显显示示终终端端出出现现到到2020世世纪纪8080年年代代中中期期人人机机交交互互界界面面的的主主要要形形式式。用用户户通通过过系系统统提提供供的的命命令令语语言言使使用用系系统统，在在字字符符终终端端上上显显示示命命令令接接收收状状态态，系系统统从从字字符符终终端端上上接接收收用用户户输输入入的的操操作作命命令令，并并对对命命令令进进行行解解释释执执行行，最最后把命令处理结果输出给用户。后把命令处理结果输出给用户。2024/7/2313 第五章 界面设计 2)2)图形用户界面图形用户界面 图形用户界面图形用户界面GUIGUI（Graphics User InterfaceGraphics User Interface）被称为第二代用户界面，也是目前人机交互采用的主被称为第二代用户界面，也是目前人机交互采用的主要人机界面方式。要人机界面方式。与命令用户界面相比，图形用户界面人机交互的与命令用户界面相比，图形用户界面人机交互的自然性和效率都有较大的提高。但是自然性和效率都有较大的提高。但是,图形用户界面图形用户界面属于二维界面，与人之间的信息通信方式主要依靠手属于二维界面，与人之间的信息通信方式主要依靠手和眼，与人之间进行信息交互的途径和方式仍然存在和眼，与人之间进行信息交互的途径和方式仍然存在局限性。局限性。2024/7/2314 第五章 界面设计 2024/7/2315 第五章 界面设计 3)3)多通道用户界面多通道用户界面 为为使使人人机机交交互互能能够够更更自自然然化化，支支持持时时变变媒媒体体，实实现现三三维维、非非精精确确及及隐隐含含的的人人机机交交互互，随随着着虚虚拟拟现现实实技技术术的的研研究究和和发发展展，近近年年来来提提出出了了多多通通道道用用户户界界面面的的概概念念。在在多多通通道道用用户户界界面面中中，人人与与机机器器被被看看成成主主动动参参与与者者，通通过过虚虚拟拟现现实实环环境境，人人机机以以自自然然的的通通信信方方式式进进行行交交流流。在在这这种种方方式式下下，用用户户可可以以使使用用自自然然的的交交互互方方式式，如如语语音音、手手势势、眼眼神神、表表情情、指指点点等等与与系系统统进进行行协协作作工作。工作。2024/7/2316 第五章 界面设计 5.1.3 5.1.3 用户界面设计的原则用户界面设计的原则 合理性：指在用户界面设计过程中应该尽量做到合理性：指在用户界面设计过程中应该尽量做到全面、系统、客观、美观和协调。全面、系统、客观、美观和协调。有效性：指用户界面设计应该作到界面友好、操有效性：指用户界面设计应该作到界面友好、操作方便、快速高效、一致规范、灵活适应。作方便、快速高效、一致规范、灵活适应。安全性：指设计的用户界面保证系统的数据、操安全性：指设计的用户界面保证系统的数据、操作和功能被可靠使用的能力。包括使用权限的设置、作和功能被可靠使用的能力。包括使用权限的设置、检测、保护和修改，对错误的诊断、报告、纠正和保检测、保护和修改，对错误的诊断、报告、纠正和保护，以及对输入数据的正确性检查、报告和纠错等方护，以及对输入数据的正确性检查、报告和纠错等方面的能力。面的能力。2024/7/2317 第五章 界面设计 5.1.4 5.1.4 用户界面设计的工作用户界面设计的工作 包包括括界界面面需需求求分分析析、输输入入设设计计、输输出出设设计计、屏屏幕幕界面设计和编写用户手册等工作，见下图。界面设计和编写用户手册等工作，见下图。图图 输入输出界面设计的工作输入输出界面设计的工作 2024/7/2318 第五章 界面设计 5.2 5.2 界面需求分析界面需求分析 界界面面需需求求分分析析是是从从人人机机交交互互处处理理的的角角度度，对对人人机机交交互互处处理理过过程程所所反反映映的的系系统统功功能能和和信信息息的的交交互互处处理理需需求求、界界面面的的分分布布、人人机机交交互互方方式式、人人机机交交互互流流程程、输输入入输输出出设设备备及及工工作作性性质质和和用用户户特特征征等等方方面面所所做的分析工作。做的分析工作。界界面面需需求求分分析析的的依依据据是是系系统统需需求求文文档档。界界面面需需求求分分析析是是用用户户界界面面设设计计工工作作的的基基础础，其其包包含含的的工工作作见下图。见下图。2024/7/2319 第五章 界面设计图图 界面分析的工作界面分析的工作 2024/7/2320 第五章 界面设计 1)1)交互需求分析交互需求分析 收集、分析、整理信息系统和用户之间所存在的人收集、分析、整理信息系统和用户之间所存在的人 机交互处理的需要和内容；机交互处理的需要和内容；分析的主要依据是系统需求文档；分析的主要依据是系统需求文档；分析用例图和顺序图中参与者与系统交互的内容；分析用例图和顺序图中参与者与系统交互的内容；用对话设计的形式描述出交互需求。用对话设计的形式描述出交互需求。2)2)界面分布分析界面分布分析 从总体上确定信息系统中各节点的类型、构成和分从总体上确定信息系统中各节点的类型、构成和分 布情况，设计的所有用户界面将来就要分布在这些布情况，设计的所有用户界面将来就要分布在这些 节点上。节点上。主要依据是系统结构设计中的系统节点分布。主要依据是系统结构设计中的系统节点分布。2024/7/2321 第五章 界面设计 3)3)交互方式分析交互方式分析 确定信息系统各个节点所采用的人机交互方确定信息系统各个节点所采用的人机交互方 式。式。有联机、脱机和混合交互方式。有联机、脱机和混合交互方式。对采用混合方式的节点还要确定具体的联机方对采用混合方式的节点还要确定具体的联机方 式处理和脱机方式处理的分工和时间分配。式处理和脱机方式处理的分工和时间分配。2024/7/2322 第五章 界面设计 4)4)交互流程分析交互流程分析 交互流程指人机交互过程的顺序程式；交互流程指人机交互过程的顺序程式；交互流程分为固定流程和随机流程两种形式；交互流程分为固定流程和随机流程两种形式；交互流程分析可以在对话设计的基础上进行，每交互流程分析可以在对话设计的基础上进行，每 一个对话设计本身就已经描述了人机交互的过程一个对话设计本身就已经描述了人机交互的过程 和顺序，但对话设计只是描述一个个单一功能的和顺序，但对话设计只是描述一个个单一功能的 交互过程，没有反映具有复合功能的完整业务的交互过程，没有反映具有复合功能的完整业务的 交互流程。因此需要我们从完整的业务处理过程交互流程。因此需要我们从完整的业务处理过程 的需要出发，设计出所有交互的固定流程。的需要出发，设计出所有交互的固定流程。2024/7/2323 第五章 界面设计 5)5)输入输出设备分析输入输出设备分析 各各节节点点上上的的输输入入输输出出设设备备的的类类型型、性性能能进进行行分分析析。因因为为交交互互处处理理工工作作最最后后就就要要落落实实到到各各个个具具体体的的输输入入输输出出设设备备上上，交交互互处处理理所所采采用用的的设设备备性性能能会会加加强强或或制制约约输入输出效果。例如：输入输出效果。例如：在字符终端上就显示不出图形；在字符终端上就显示不出图形；激激光光打打印印机机虽虽然然具具有有很很高高的的打打印印质质量量，但但打打印印速速度不高度不高;CCDCCD手手持持式式条条形形码码扫扫描描仪仪比比笔笔式式条条形形码码扫扫描描仪仪的的识识别率高。别率高。2024/7/2324 第五章 界面设计 6)6)用户分析用户分析 对对用用户户类类型型及及其其喜喜好好、习习惯惯等等特特征征进进行行认认真真分分析析，以设计出满足用户需要的用户界面。以设计出满足用户需要的用户界面。把用户分为：把用户分为：外行型外行型 初学型初学型 熟练型熟练型 专家型专家型 根据不同的用户类型进行界面设计。根据不同的用户类型进行界面设计。例如例如:驾校电脑的键盘就多种多样。驾校电脑的键盘就多种多样。2024/7/2325 第五章 界面设计 5.3 5.3 输入设计输入设计 信息系统输入设计信息系统输入设计是从输入角度，通过对输入设是从输入角度，通过对输入设备、输入方式、输入内容、输入形式、输入编码、输备、输入方式、输入内容、输入形式、输入编码、输入安全控制等方面的分析研究，确定出可行的输入设入安全控制等方面的分析研究，确定出可行的输入设计方案。计方案。目的目的是根据信息系统目标和用户的特点，确定出是根据信息系统目标和用户的特点，确定出使用户满意的输入设计方案。输入设计与输出设计有使用户满意的输入设计方案。输入设计与输出设计有密切的联系，需要综合考虑。密切的联系，需要综合考虑。2024/7/2326 第五章 界面设计 5.3.1 5.3.1 输入方式设计输入方式设计 1)1)输入方式的概念和形式输入方式的概念和形式 概念：概念：输输入入方方式式是是指指在在向向信信息息系系统统输输入入数数据据的的过过程程中中所所采用的策略和形式。采用的策略和形式。形式：形式：批输入、联机输入和混合输入三种方式。批输入、联机输入和混合输入三种方式。2024/7/2327 第五章 界面设计 2)2)输入方式设计输入方式设计 (1)(1)批输入方式批输入方式 概念：概念：批输入方式也叫脱机输入方式，它是指组织一批数批输入方式也叫脱机输入方式，它是指组织一批数 据并集中输入到系统之中的输入方式。据并集中输入到系统之中的输入方式。设计步骤：设计步骤：收集一组相关数据；收集一组相关数据；把收集到的数据先存放到磁带、磁盘等电子媒体上。把收集到的数据先存放到磁带、磁盘等电子媒体上。把电子媒体上的一组数据成批输入到系统之中。把电子媒体上的一组数据成批输入到系统之中。2024/7/2328 第五章 界面设计 (2)(2)联机输入方式联机输入方式 联机输入方式是在业务处理过程中，边输入数据联机输入方式是在业务处理过程中，边输入数据边处理数据的一种数据输入方式。学生食堂售饭系统边处理数据的一种数据输入方式。学生食堂售饭系统数据输入就采用联机输入方式，数据输入和卖饭业务数据输入就采用联机输入方式，数据输入和卖饭业务是同时进行的。是同时进行的。(3)(3)混合输入方式混合输入方式 是是批批输输入入和和联联机机输输入入相相结结合合的的方方式式。超超市市售售货货系系统统就就采采用用混混合合方方式式。结结账账台台采采用用联联机机方方式式，每每天天在在确确定的时候定的时候POSPOS机再成批地把数据发送到中心数据库中。机再成批地把数据发送到中心数据库中。2024/7/2329 第五章 界面设计 5.3.2 5.3.2 输入表单设计输入表单设计 输入表单设计应考虑以下几个方面：输入表单设计应考虑以下几个方面：内内容容的的完完整整性性：把把本本用用例例或或本本界界面面的的输输入入数数据据全全部包括在所设计的表单之中；部包括在所设计的表单之中；数数据据的的一一致致性性：表表单单中中不不应应该该出出现现冗冗余余数数据据或或派派生的数据；生的数据；规规范范合合理理性性：表表单单格格式式应应该该简简单单、规规范范，符符合合用用户习惯。户习惯。下图是书店信息系统中的图书订单表单格式。下图是书店信息系统中的图书订单表单格式。2024/7/2330 第五章 界面设计图图 书店信息系统的图书订单书店信息系统的图书订单 2024/7/2331 第五章 界面设计 5.3.3 5.3.3 数据编码数据编码 1)1)数据编码的概念和作用数据编码的概念和作用 概念：概念：数据编码是由字母、数字或特殊字符组成的数据编码是由字母、数字或特殊字符组成的 一组编码序列，是用来标记和描述信息系统一组编码序列，是用来标记和描述信息系统 中的有关事物的，简称编码。电话号码、学中的有关事物的，简称编码。电话号码、学 生编号、产品编码、银行账户编码、信用卡生编号、产品编码、银行账户编码、信用卡 编码、车辆编号、汽车牌照号等都是数据编编码、车辆编号、汽车牌照号等都是数据编 码。码。作用：作用：提高数据输入的效率和惟一性。提高数据输入的效率和惟一性。类型：类型：顺序码、特征码、类型码和混合码四种类顺序码、特征码、类型码和混合码四种类 型。型。2024/7/2332 第五章 界面设计 2)2)数据编码的类型数据编码的类型 顺序码顺序码 按按照照事事物物的的时时间间顺顺序序所所进进行行的的编编码码。如如，某某学学生生编编码是码是“00001233240000123324”，表示该生报到顺序是第，表示该生报到顺序是第123324123324个。个。特征码特征码 特特征征码码是是按按照照事事物物的的某某一一方方面面的的固固有有特特征征所所具具有有的的顺顺序序进进行行的的编编码码。如如，按按照照学学生生名名字字的的汉汉语语拼拼音音顺顺序序对对学号编码。学号编码。顺顺序序码码基基于于事事物物发发生生的的时时间间顺顺序序，特特征征码码按按照照事事物物固有特征进行编码。固有特征进行编码。2024/7/2333 第五章 界面设计 类型码类型码 类类型型码码是是对对一一组组具具有有相相同同特特性性的的事事物物赋赋予予的的统统一一编编码码。例例如如，服服装装商商店店要要按按照照不不同同的的尺尺码码、款款式式、颜颜色色、种种类类来来标标记记服服装装，像像35303530的的蓝蓝牛牛仔仔裤裤、35313531的的蓝蓝牛牛仔仔裤裤等等。可可以以给给35303530的的蓝蓝牛牛仔仔裤裤赋赋予予101101编编码码，给给35313531的蓝牛仔裤赋予的蓝牛仔裤赋予102102编码。编码。混合码混合码 混合码是可以表示事物多种特征的编码。身份证号混合码是可以表示事物多种特征的编码。身份证号就是混合码，它可以反映一个人所在的省、县、乡，出就是混合码，它可以反映一个人所在的省、县、乡，出生日期，性别以及在同一个乡中的顺序编码号等特征。生日期，性别以及在同一个乡中的顺序编码号等特征。通常企业编码、汽车车辆编码、产品编码都是混合码。通常企业编码、汽车车辆编码、产品编码都是混合码。2024/7/2334 第五章 界面设计 5.3.4 5.3.4 输入安全性设计输入安全性设计 1)1)输入安全性涉及的因素输入安全性涉及的因素 输输入入设设备备、输输入入数数据据、输输入入规规程程、输输入入权权限限、输输入入人人员员都都会会影影响响输输入入的的安安全全性性，因因此此，输输入入安安全全性性应应该该考考虑多方面的因素。虑多方面的因素。2)2)输入数据正确性检查输入数据正确性检查 输输入入数数据据正正确确性性检检查查是是输输入入安安全全性性的的一一方方面面内内容容。数据检查由人工和系统两方面承担。数据检查由人工和系统两方面承担。人人工工检检查查是是指指在在输输入入数数据据之之前前，由由检检查查人人员员对对要要输输入入的的数数据据进进行行检检查查。要要求求对对采采集集和和整整理理的的数数据据认认真真进进行行核对检查，以保证数据的正确性。核对检查，以保证数据的正确性。2024/7/2335 第五章 界面设计 自自动动检检查查：通通过过系系统统中中设设计计的的输输入入数数据据错错误误检检查查程程序对输入的数据自动进行正确性检查。序对输入的数据自动进行正确性检查。例例如如，为为了了保保证证人人员员档档案案数数据据中中邮邮政政编编码码的的正正确确性性，可可以以在在系系统统中中装装配配一一个个国国家家和和地地区区邮邮政政编编码码数数据据库库，把把输输入入的的每每一一个个人人的的邮邮政政编编码码和和地地区区与与数数据据库库中中正正确确的的邮邮政政编编码码进进行行对对照照检检查查，这这样样就就能能够够保保证证人人员员邮邮政政编编码码的的正确性。正确性。注注意意：保保证证输输入入正正确确性性一一方方面面要要由由系系统统来来进进行行检检查查，但但更更需需要要输输入入人人员员认认真真而而仔仔细细的的检检查查，因因为为信信息息系系统统不不能能自自动动检检查查出出所所有有输输入入问问题题。例例如如，智智能能化化再再高高的的系系统统也不可能知道一个人的名字是也不可能知道一个人的名字是“赵蓝赵蓝”而不是而不是“赵晓赵晓”。2024/7/2336 第五章 界面设计 2)2)输入数据检查技术输入数据检查技术 校验数位校验数位 校验数位常常被用在对银行信用卡、存款账户、校验数位常常被用在对银行信用卡、存款账户、盘存物品号、客户和会员账户的检查。其含义是通过盘存物品号、客户和会员账户的检查。其含义是通过一种算法对原编码进行计算得出一个数字，然后把这一种算法对原编码进行计算得出一个数字，然后把这个数字与原编码结合起来组成输入编码，并对输入编个数字与原编码结合起来组成输入编码，并对输入编码按照给定的算法进行检查。码按照给定的算法进行检查。2024/7/2337 第五章 界面设计 相关检查相关检查 相相关关检检查查的的含含义义是是用用事事物物两两个个或或多多个个相相关关属属性性来来检检查查输输入入数数据据。例例如如，城城市市与与国国家家，城城市市与与省省，地地区区与与它它的的邮邮政政编编码码等等。通通常常，一一个个城城市市肯肯定定属属于于一一个个确确定定的的国国家家和和省省，而而一一个个国国家家或或省省(地地区区)也也有有它它确确定定的的邮邮政政编编码码。通通过过对对事事物物相相关关属属性性进进行行检检查查，可可以以提提高高输入数据的正确性。输入数据的正确性。2024/7/2338 第五章 界面设计 界限检查界限检查 界界限限和和范范围围检检查查一一般般用用于于数数字字型型输输入入数数据据。界界限限包包括括下下界界和和上上界界，输输入入必必须须大大于于或或等等于于下下界界，而而小小于于或或等等于于上上界界。例例如如，输输入入数数据据的的下下界界是是1 1，上上界界是是1010，则则输输入入数数据据应应该该大大于于或或等等于于1 1，小小于于或或等等于于1010。有有时时可可以以省省略略下下界界或或上上界界，这这样样输输入入的的数数据据的的自自由由度度会会更大一些。例如，大于更大一些。例如，大于0 0作为下界，而没有上界。作为下界，而没有上界。2024/7/2339 第五章 界面设计 完整性检查完整性检查 完完整整性性检检查查用用来来保保证证输输入入数数据据的的完完整整性性，以以避避免免在在输输入入过过程程中中漏漏掉掉必必要要的的输输入入数数据据项项。例例如如，人人员员档档案案数数据据包包括括姓姓名名、住住址址、城城市市、国国家家、邮邮政政编编码码等等数数据据，完完整整性性检检查查就就要要检检查查人人员员档档案案数数据据是是否否已已经经完完整整地输入了这些数据项。地输入了这些数据项。2024/7/2340 第五章 界面设计小结：小结：当设计系统输入的时候，系统开发人员必须完成当设计系统输入的时候，系统开发人员必须完成四个任务：四个任务：确定将要用作输入的设备和机制。确定将要用作输入的设备和机制。确定所有的系统输入，并制定一个包括所有数据确定所有的系统输入，并制定一个包括所有数据 内容的列表。内容的列表。对于每个系统输入，确定哪些控制是必需的。对于每个系统输入，确定哪些控制是必需的。设计和规范电子表单及其它输入。设计和规范电子表单及其它输入。2024/7/2341 第五章 界面设计 5.4 5.4 输出设计输出设计 输出设计概念：信息系统输出设计是从信息输出输出设计概念：信息系统输出设计是从信息输出角度，通过对输出设备、输出内容、输出界面、输出角度，通过对输出设备、输出内容、输出界面、输出控制等方面的分析研究，确定出可行的输出设计方案。控制等方面的分析研究，确定出可行的输出设计方案。输出设计与输入设计有密切的联系。输出设计与输入设计有密切的联系。信息的输出途径：屏幕输出、报表输出和其它途信息的输出途径：屏幕输出、报表输出和其它途径输出。径输出。屏幕输出又可分为文本输出、图表输出、图形图屏幕输出又可分为文本输出、图表输出、图形图像输出和音频输出等形式。屏幕输出又可通过屏幕界像输出和音频输出等形式。屏幕输出又可通过屏幕界面的方式来组织。面的方式来组织。2024/7/2342 第五章 界面设计 5.4.1 5.4.1 输出信息的类型及区别输出信息的类型及区别 1)1)输出信息系统类型输出信息系统类型 内部信息内部信息 内内部部信信息息是是由由信信息息系系统统所所属属的的组组织织内内部部人人员员使使用用的的信信息息。例例如如，教教师师用用的的学学生生名名册册，销销售售人人员员看看到到的的销售报表等都属于内部信息。销售报表等都属于内部信息。外部信息外部信息 外外部部信信息息是是由由信信息息系系统统所所属属的的组组织织外外部部人人员员使使用用的的信信息息。例例如如，企企业业向向上上级级主主管管部部门门上上报报的的各各种种统统计计报表就属于外部信息。报表就属于外部信息。2024/7/2343 第五章 界面设计 2)2)内外部信息的区别内外部信息的区别 内部信息具有机密性，只限于组织内部。内部信息具有机密性，只限于组织内部。外部信息的输出形式应该比内部信息规范。因外部信息的输出形式应该比内部信息规范。因 为外部信息是向组织外部提供的，其表示形式为外部信息是向组织外部提供的，其表示形式 应该精细、讲究。例如，采用高质量的激光或应该精细、讲究。例如，采用高质量的激光或 彩色打印机输出，在报表上打印出企业商标，彩色打印机输出，在报表上打印出企业商标，用规则的带网格线的报表输出信息，使用阴影用规则的带网格线的报表输出信息，使用阴影 和加框等方法以提高输出效果等。和加框等方法以提高输出效果等。2024/7/2344 第五章 界面设计 5.4.2 5.4.2 输出报表输出报表 1)1)明细表明细表 明细表用来反映在确定的时间范围内事务活动的明细表用来反映在确定的时间范围内事务活动的详实情况，它强调对信息反映的详实性。详实情况，它强调对信息反映的详实性。下图的下图的学生选修课程明细表学生选修课程明细表反映赵兰等同学反映赵兰等同学20022002年第年第2 2学期每一门课程的选修情况。在明细表中学期每一门课程的选修情况。在明细表中也会出现一些冗余信息和汇总信息。也会出现一些冗余信息和汇总信息。2024/7/2345 第五章 界面设计图图 明细表明细表 学号姓名课程周学时节次345225612赵兰C语言42345225612赵兰计算机组成原理41345225613李晓数据结构62345225613李晓计算机组成原理41345225614张木C语言42345225614张木计算机组成原理41学生选修课程明细表学生选修课程明细表2002年第2学期打印日期：2002.92024/7/2346 第五章 界面设计 2)2)汇总表汇总表 汇汇总总表表反反映映业业务务活活动动的的综综合合信信息息。下下图图的的课课程程汇汇总总表表反反映映20022002年年第第2 2学学期期各各门门课课程程学学时时的的汇汇总总情情况况，这这个个报报表表是是在在学学生生选选修修课课程程明明细细表表的的基基础础上上，对课程明细信息汇总得到的。对课程明细信息汇总得到的。组组织织中中的的不不同同人人员员对对汇汇总总信信息息有有不不同同的的要要求求，一一般般在在信信息息系系统统开开发发阶阶段段很很难难设设计计出出用用户户需需要要的的所所有有汇汇总总表表，实实际际上上很很多多汇汇总总表表是是在在系系统统运运行行过过程程中中根根据据用用户户的的需需要要临临时时生生成成的的。因因此此，信信息息系系统统应应该该提提供供由由用用户自己设计汇总表格式，并提取汇总数据的功能。户自己设计汇总表格式，并提取汇总数据的功能。2024/7/2347 第五章 界面设计图图 汇总表汇总表 课程号课程名周学时总学时周数Act102会计电算化36020Bio101计算机导论44010Chm102管理学44812Mis111人机工程35418课程汇总表课程汇总表2002年第2学期打印日期：2002.92024/7/2348 第五章 界面设计 3)3)分析表分析表 分分析析表表反反映映信信息息的的对对比比和和分分析析情情况况。根根据据报报表表中中信信息息的的详详细细程程度度，可可以以分分为为明明细细分分析析表表和和汇汇总总分分析析表表两两种种形形式式，但但一一般般以以汇汇总总分分析析表表见见多多。下下图图是是一一张张分分析析表表，反反映映20012001年年与与20022002年年某某企企业业债债务务和和资资本本的的增增减减分析情况。分析情况。2024/7/2349 第五章 界面设计项目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图图 分析表分析表 2024/7/2350 第五章 界面设计 4)4)历史表历史表 历历史史表表用用来来反反映映业业务务活活动动的的历历史史记记录录。历历史史表表并并不不是是一一种种单单一一的的报报表表类类型型，它它可可以以采采用用明明细细表表、汇汇总总表表或或分分析析表表的的形形式式来来反反映映历历史史信信息息。在在历历史史表表中中主主要要反映的是过去的信息。反映的是过去的信息。2024/7/2351 第五章 界面设计 5.4.3 5.4.3 输出图表输出图表 1)1)散点图散点图 散散点点图图用用来来表表现现数数据据变变化化趋趋势势和和规规律律，见见下下图图。企企业业管管理理通通常常用用散散点点图图反反映映业业务务过过程程的的历历史史数数据据，并并预测业务未来的变化趋势。预测业务未来的变化趋势。图图 散点图散点图2024/7/2352 第五章 界面设计 2)2)折线图折线图 折折线线图图用用来来反反映映一一定定时时间间区区间间内内数数据据变变化化的的波波动动情情况况，见见下下图图。折折线线图图也也可可以以表表现现数数据据的的变变化化趋趋势势，但但与与散散点点图图的的区区别别在在于于折折线线图图增增加加了了时时间间维维数数，因因此此，它能够表现出数据随时间变化的趋势。它能够表现出数据随时间变化的趋势。折折线线图图可可以以用用来来比比较较在在相相同同时时间间范范围围内内，两两个个或或多多个个事事件件的的变变化化情情况况。它它可可以以表表现现产产品品销销售售业业务务、销销售售人人员员的的销销售售活活动动、学学生生对对课课程程的的登登记记情情况况等等业业务务活活动。动。需需要要注注意意的的是是，折折线线图图中中X X轴轴一一般般用用来来表表示示时时间间，而而Y Y轴表示业务值。轴表示业务值。2024/7/2353 第五章 界面设计图图 折线图折线图2024/7/2354 第五章 界面设计 3)3)条形图条形图 条条形形图图用用来来表表现现各各分分量量之之间间的的关关联联关关系系和和比比例例关关系系。按按照照图图中中的的条条棒棒的的方方向向，可可以以把把条条形形图图分分为为水水平平条形图和垂直条形图。条形图和垂直条形图。水水平平条条形形图图用用来来对对相相同同时时间间区区间间内内的的不不同同项项目目进进行行比比较较，而而垂垂直直条条形形图图用用来来比比较较不不同同时时间间区区间间中中同同一一项目的情况，下图是垂直条形图的例子。项目的情况，下图是垂直条形图的例子。条条形形图图的的缺缺点点是是不不能能反反映映相相同同时时间间区区间间中中所所有有项项目的合计和不同时间区间中同一项目的合计。目的合计和不同时间区间中同一项目的合计。2024/7/2355 第五章 界面设计图图 条形图条形图 2024/7/2356 第五章 界面设计 4)4)饼图饼图 饼饼图图通通过过圆圆和和多多个个扇扇面面来来表表示示整整体体和和部部分分以以及及各各部分在整体中所占的比例，见下图。部分在整体中所占的比例，见下图。饼饼图图也也可可以以设设计计成成多多种种不不同同的的形形式式，如如可可以以设设计计成二维结构，也可以设计成三维结构。成二维结构，也可以设计成三维结构。为为了了突突出出其其中中某某一一部部分分或或多多个个部部分分，可可以以在在图图中中突突出出某某一一个个扇扇形形或或多多个个扇扇形形。另另外外，在在每每一一个个扇扇形形中中也可以标出所表示的比例数字。也可以标出所表示的比例数字。2024/7/2357 第五章 界面设计图图 饼图饼图2024/7/2358 第五章 界面设计小结：小结：输出设计的任务实现下列四个目标：输出设计的任务实现下列四个目标：确定每个输出类型。确定每个输出类型。为应用设计所要求的特定输出做一个列表。为应用设计所要求的特定输出做一个列表。提供必要的控制来保护输出中提供的信息。提供必要的控制来保护输出中提供的信息。设计和规范报表格式。设计和规范报表格式。2024/7/2359 第五章 界面设计 5.5 5.5 屏幕界面设计屏幕界面设计 5.5.1 5.5.1 屏幕界面设计的准则屏幕界面设计的准则 Ben ShneidermanBen Shneiderman的八项基本准则。的八项基本准则。图图 用户界面设计的八项准则用户界面设计的八项准则2024/7/2360 第五章 界面设计 尽量保持一致性尽量保持一致性 一致性的含义：一致性的含义：是所设计界面的按键、窗口格式、色彩、界面布是所设计界面的按键、窗口格式、色彩、界面布局等在整个系统中始终应该保持一致。局等在整个系统中始终应该保持一致。一致性的作用：一致性的作用：一致性是人习惯的需要，人惯于用已经形成一致性是人习惯的需要，人惯于用已经形成 的习惯来进行观察和行动。的习惯来进行观察和行动。一致性既可以保持界面的规整、简洁，又可一致性既可以保持界面的规整、简洁，又可 以减轻人们学习和使用信息系统的负担。以减轻人们学习和使用信息系统的负担。2024/7/2361 第五章 界面设计 为熟练用户提供快捷键为熟练用户提供快捷键 快捷键能够提高系统的操作速度。快捷键能够提高系统的操作速度。初学者：提供丰富的联机帮助和界面说明，并更多初学者：提供丰富的联机帮助和界面说明，并更多 地使用菜单和选项；地使用菜单和选项；熟练用户：提供快捷键。过多的操作界面反而会熟练用户：提供快捷键。过多的操作界面反而会 增加操作量，降低使用效率。增加操作量，降低使用效率。2024/7/2362 第五章 界面设计 提供有效反馈提供有效反馈 系系统统应应该该对对用用户户的的每每一一个个操操作作都都给给出出反反馈馈信信息息，以以让让用用户户了了解解系系统统对对用用户户操操作作的的确确认认。及及时时的的反反馈馈会会提提高高用用户户的注意力，增强用户使用系统的兴趣。的注意力，增强用户使用系统的兴趣。设计完整的对话过程设计完整的对话过程 设设计计的的对对话话过过程程应应该该完完整整，有有开开始始、中中间间处处理理和和结结束束部部分分，因因为为人人处处理理每每一一个个业业务务都都是是一一个个完完整整的的过过程程。但但是是在业务处理过程中应该提供例外处理功能。在业务处理过程中应该提供例外处理功能。2024/7/2363 第五章 界面设计 提供简单的错误处理机制提供简单的错误处理机制 界界面面设设计计应应提提供供对对用用户户错错误误的的处处理理功功能能，并并能能够够检检查查、提提示示、纠纠正正用用户户出出现现的的常常见见错错误误。否否则则，所所设设计的系统将是一个不健壮的系统。计的系统将是一个不健壮的系统。允许撤消动作允许撤消动作 对用户的一些错误或试探性动作应该允许用户在对用户的一些错误或试探性动作应该允许用户在操作过程中自动撤除，这符合人们日常试探性和往复操作过程中自动撤除，这符合人们日常试探性和往复性的工作习惯。人们在从事一项工作的过程中，经常性的工作习惯。人们在从事一项工作的过程中，经常会做出一些试探动作，或不自觉地犯错，撤消这些动会做出一些试探动作，或不自觉地犯错，撤消这些动作并重新进行符合用户的工作习惯。作并重新进行符合用户的工作习惯。2024/7/2364 第五章 界面设计 提供控制的内部轨迹提供控制的内部轨迹 系系统统随随时时把把控控制制的的内内部部轨轨迹迹提提示示给给用用户户，用用户户会会感感觉觉到到自自己己一一直直在在控控制制着着系系统统，最最起起码码能能够够了了解解系系统统的的工工作作过过程程。这这样样会会增增加加用用户户使使用用系系统统的的亲亲和和感感。如如:操作导航等。操作导航等。减少短期记忆负担减少短期记忆负担 心心理理学学规规律律发发现现，人人在在同同一一时时间间只只能能记记忆忆7 7条条信信息息。系系统统界界面面设设计计中中应应该该尽尽量量减减少少人人的的记记忆忆负负担担。可可通过信息提示、反馈等方式减轻对人记忆信息的要求。通过信息提示、反馈等方式减轻对人记忆信息的要求。2024/7/2365 第五章 界面设计 5.5.2 5.5.2 图形屏幕界面图形屏幕界面 图图形形屏屏幕幕界界面面也也叫叫图图形形用用户户界界面面(GUI)(GUI)，它它主主要要由窗口、菜单和控件三要素构成。由窗口、菜单和控件三要素构成。1)1)界面框架界面框架(Frame)(Frame)界面框架：是一个屏幕界面的总构架，所有屏幕控界面框架：是一个屏幕界面的总构架，所有屏幕控件都建立在界面框架之中。件都建立在界面框架之中。界面框架形式：界面框架形式：单文档界面：是指在同一时间只能打开一个文档单文档界面：是指在同一时间只能打开一个文档的用户界面。在的用户界面。在SDISDI方式下，如果要打开另外一个文方式下，如果要打开另外一个文档，需要先关闭当前打开的文档。档，需要先关闭当前打开的文档。2024/7/2366 第五章 界面设计 多多文文档档界界面面：是是指指允允许许在在同同一一屏屏幕幕界界面面上上同同时时打打开开多多个个文文档档的的用用户户界界面面。每每一一个个文文档档都都显显示示在在自自己己的的文文档档窗窗口口中中，并并且且可可以以在在不不同同文文档档之之间间进进行行切切换换。Microsoft Microsoft WordWord、Microsoft Microsoft ExcelExcel、Visual Visual BasicBasic、DelphiDelphi等都采用多文档界面方式工作。等都采用多文档界面方式工作。2024/7/2367 第五章 界面设计 2)2)窗口窗口 窗窗口口的的概概念念：窗窗口口(Window)(Window)也也叫叫窗窗体体，是是屏屏幕幕界界面面上上带带有有边边界界的的矩矩形形区区域域，用用户户通通过过窗窗口口与与系系统统进进行行交互处理。交互处理。2024/7/2368 第五章 界面设计 窗口的作用：可以把窗口视为虚拟屏幕，而把显窗口的作用：可以把窗口视为虚拟屏幕，而把显示器屏幕看成物理屏幕。虚拟屏幕一般比物理屏幕小，示器屏幕看成物理屏幕。虚拟屏幕一般比物理屏幕小，并且在同一个物理屏幕上可以同时显示多个窗口。在并且在同一个物理屏幕上可以同时显示多个窗口。在窗口上只能同时显示用户需要的一部分信息，可以采窗口上只能同时显示用户需要的一部分信息，可以采用窗口滚动技术看到整个用户空间的全貌。用窗口滚动技术看到整个用户空间的全貌。窗口的属性：窗口标题、大小、位置、颜色、图窗口的属性：窗口标题、大小、位置、颜色、图标、最大化和最小化等。滚动条、工具条等。标、最大化和最小化等。滚动条、工具条等。窗窗口口的的类类型型：注注册册窗窗口口、主主控控窗窗口口、数数据据处处理理窗窗口、事务处理窗口和信息查询窗口等类型。口、事务处理窗口和信息查询窗口等类型。2024/7/2369 第五章 界面设计 3)3)菜单菜单 菜菜单单的的概概念念：菜菜单单(Menu)(Menu)是是由由系系统统显显示示给给用用户户的的一一种种可可选选项项目目的的列列表表,用用户户可可以以从从中中选选择择一一项项要要做做的的工工作作。菜菜单单是是通通俗俗名名称称，其其规规范范名名称称是是选选单单(“全全国国自自然然科科学学名词审定委员会名词审定委员会”19941994年定年定)。菜单的形式：下拉式菜单，弹出式菜单。菜单的形式：下拉式菜单，弹出式菜单。2024/7/2370 第五章 界面设计 1)1)下拉式菜单下拉式菜单 概概念念：下下拉拉式式菜菜单单是是一一种种应应用用于于主主控控界界面面的的菜菜单单类型，被用来描述系统的功能结构。类型，被用来描述系统的功能结构。结构：两层。结构：两层。第第一一层层：主主菜菜单单，各各选选项项名名水水平平排排成成一一行行被被放放在窗口最上方的一个带形区域中。在窗口最上方的一个带形区域中。第第二二层层：子子菜菜单单，一一个个子子菜菜单单隶隶属属一一个个主主菜菜单单项项。垂垂直直方方向向排排列列，放放置置在在其其对对应应的的主主菜菜单单项项的的下下方方。平平常常各各个个子子菜菜单单被被隐隐藏藏起起来来，只只有有当当单单击击主主菜菜单单项项时时，对对应应的的子子菜菜单单才才被被弹弹出出。每每次次只只能能显显示示被被选选中中主主菜菜单单项项的子菜单。下图是的子菜单。下图是Microsoft WordMicrosoft Word的下拉式菜单。的下拉式菜单。2024/7/2371 第五章 界面设计图图 Microsoft WordMicrosoft Word的下拉式菜单的下拉式菜单 2024/7/2372 第五章 界面设计 2)2)弹出式菜单弹出式菜单 弹弹出出式式菜菜单单是是垂垂直直排排列列功功能能选选项项的的矩矩形形框框，可可被被下下拉拉式式菜菜单单或或其其它它窗窗口口功功能能选选项项驱驱动动弹弹出出，因因此此被被称称为弹出式菜单。为弹出式菜单。弹弹出出式式菜菜单单可可以以是是单单层层结结构构或或多多层层结结构构，位位置置可可以根据用户操作或当时的操作环境确定。以根据用户操作或当时的操作环境确定。下下图图是是在在Windows Windows XPXP下下按按鼠鼠标标右右键键所所弹弹出出的的一一个个弹出式菜单。弹出式菜单。2024/7/2373 第五章 界面设计图图 在在Windows XPWindows XP下按鼠标右键所弹出的菜单下按鼠标右键所弹出的菜单2024/7/2374 第五章 界面设计 4)4)控件控件 控控件件的的概概念念：控控件件(Component)(Component)是是图图形形用用户户界界面面对对除除窗窗口口和和菜菜单单之之外外的的所所有有界界面面构构件件的的总总称称，有有些些书书籍把窗口和菜单也归到控件之中。籍把窗口和菜单也归到控件之中。控控件件的的作作用用：通通过过在在界界面面中中设设置置菜菜单单或或各各种种不不同同的的控控件件，构构成成完完成成确确定定功功能能的的人人机机交交互互界界面面。在在前前端端开开发发平平台台中中，提提供供了了大大量量可可以以自自动动生生成成的的控控件件，程程序序员员可可以以利利用用系系统统提提供供的的各各种种控控件件，设设计计出出所所需需要要的的人人机交互界面。机交互界面。窗口及控件见下图。窗口及控件见下图。2024/7/2375 第五章 界面设计图图 窗口及控件窗口及控件 2024/7/2376 第五章 界面设计 标签标签(Label)(Label)标标签签用用来来在在窗窗口口中中显显示示一一段段不不能能编编辑辑的的文文本本。使使用用标标签签，可可以以对对文文本本框框、列列表表框框等等控控件件进进行行解解释释或或描描述述，也也可可在在窗窗口口中中输输出出一一段段说说明明性性文文字字信信息息，还还可可向向用户输出提示、出错等信息。用户输出提示、出错等信息。文本框文本框(TextBox)(TextBox)文文本本框框是是用用来来接接收收用用户户输输入入信信息息的的正正文文编编辑辑区区域域，用用户户可可以以在在文文本本框框中中的的光光标标位位置置输输入入信信息息。文文本本框框可可以以分分为为单单行行和和多多行行，输输入入内内容容超超出出编编辑辑框框宽宽度度时时，可可以自动滚动。以自动滚动。2024/7/2377 第五章 界面设计 列表框列表框(ListBox)(ListBox)列列表表框框是是向向用用户户提提供供功功能能、信信息息或或参参数数的的选选项项列列表。表。进进入入列列表表框框后后，光光条条显显示示在在列列表表框框的的第第一一个个选选项项上上面面，用用户户可可以以把把光光条条移移动动到到所所要要选选择择的的选选项项上上。当当列列表表框框中中的的选选项项超超过过列列表表框框的的长长度度时时，列列表表框框上上会会显显示滚动条，可通过按滚动条来移动选项。示滚动条，可通过按滚动条来移动选项。滚滚动动条条可可以以设设计计成成上上下下方方式式、左左右右方方式式或或上上下下左左右方式，一般为单列的上下滚动方式。右方式，一般为单列的上下滚动方式。2024/7/2378 第五章 界面设计 滚动条滚动条(ScrollBar)(ScrollBar)通通过过滚滚动动条条可可以以实实现现应应用用程程序序中中输输出出信信息息的的水水平平或垂直滚动，以方便地浏览和显示大量信息。或垂直滚动，以方便地浏览和显示大量信息。滚滚动动条条分分为为水水平平滚滚动动条条和和垂垂直直滚滚动动条条两两种种类类型型。一一般般在在列列表表框框、文文本本框框中中的的控控件件会会自自带带滚滚动动条条。滚滚动动条条控控件件主主要要应应用用于于那那些些不不能能自自动动提提供供滚滚动动条条的的控控件件或或应用界面，以实现信息的滚动输出。应用界面，以实现信息的滚动输出。2024/7/2379 第五章 界面设计 按钮按钮(Button)(Button)按按钮钮是是在在屏屏幕幕上上显显示示的的小小矩矩形形框框，通通过过单单击击按按钮钮可可以以触触发发确确定定的的功功能能操操作作。例例如如，单单击击“OKOK”按按钮钮可可以以对对当当前前操操作作进进行行确确认认；单单击击“CancelCancel”按按钮钮则则忽忽略略或或放放弃弃当前操作；而单击当前操作；而单击“HelpHelp”按钮可以触发联机帮助功能。按钮可以触发联机帮助功能。单选按钮单选按钮(RadioButton)(RadioButton)单单选选按按钮钮用用来来实实现现从从多多项项选选项项中中，选选且且仅仅选选择择一一项项的的应应用用。一一个个单单选选按按钮钮表表示示一一个个选选项项，用用小小圆圆圈圈表表示示，在圆圈中带小点的单选按钮表示当前要选择的选项。在圆圈中带小点的单选按钮表示当前要选择的选项。2024/7/2380 第五章 界面设计 复选框复选框(CheckBox)(CheckBox)复复选选框框表表示示对对某某个个选选项项是是否否选选择择。复复选选框框用用一一个个小小方方框框表表示示。如如果果选选中中复复选选框框所所表表示示的的选选项项，则则复复选选框中显示一个小对号，没有选中不显示对号。框中显示一个小对号，没有选中不显示对号。上上面面是是在在图图形形用用户户界界面面中中常常用用的的7 7个个控控件件,一一般般客客户户端端开开发发平平台台都都提提供供了了大大量量丰丰富富的的控控件件，程程序序员员可可以以利利用用这这些些控控件件设