1、第 章 界面设计第第9 9章章 详细设计下详细设计下界面设计界面设计第 章 界面设计 概述概述 输入设计输入设计 输出设计输出设计 屏幕界面设计屏幕界面设计本章内容本章内容第 章 界面设计1 概概 述述 1.1 人机界面的概念人机界面的概念 人机界面人机界面(HMI，Human-Machine Interface)，是人是人与机器进行交互的操作方式与机器进行交互的操作方式,即用户与机器相互传递信即用户与机器相互传递信息的媒介息的媒介,其中包括输入和输出，人机界面也叫用户界其中包括输入和输出，人机界面也叫用户界面。面。第 章 界面设计 1.2 人机界面的要素人机界面的要素 人机界面人机界面是在人
2、机系统中，人与机器的软件和硬是在人机系统中，人与机器的软件和硬件交汇的接口。件交汇的接口。软件人机界面人硬件第 章 界面设计 1.3 对人机界面的理解对人机界面的理解 1 1 开发者对人机界面的理解开发者对人机界面的理解 人机界面是信息系统与用户的交流渠道，是系统向用人机界面是信息系统与用户的交流渠道，是系统向用户展示功能的界面，是开发工作的一个方面。户展示功能的界面，是开发工作的一个方面。第 章 界面设计系统与用系统与用户交互的户交互的渠道渠道展现系统展现系统功能的手功能的手段段信息系统信息系统开发的一开发的一项工作项工作开发者看到的人机界面开发者看到的人机界面:第 章 界面设计 2 2 用
3、户对用户对人机界面的理解人机界面的理解 人机界面的物理特征人机界面的物理特征 用户首先感受到的用户界面是键盘、鼠标、触摸屏、打用户首先感受到的用户界面是键盘、鼠标、触摸屏、打印机等物理设备，对用户界面形成这些直观的物理印象特印机等物理设备，对用户界面形成这些直观的物理印象特征。征。办公桌椅，键盘，办公桌椅，键盘，鼠标，打印机，触鼠标，打印机，触摸屏，手册，书面摸屏，手册，书面表格等表格等第 章 界面设计 2 2 用户对用户对人机界面的理解人机界面的理解 人机界面的感知特征人机界面的感知特征 用户通过界面看到、听到、触摸到的所有东西（物理设用户通过界面看到、听到、触摸到的所有东西（物理设备除外）
4、。备除外）。窗口、菜单、对话窗口、菜单、对话框、按纽，直线、框、按纽，直线、图形，颜色，语言图形，颜色，语言等等第 章 界面设计 2 2 用户对用户对人机界面的理解人机界面的理解 人机界面的概念特征人机界面的概念特征 界面所表现的领域空间中的概念内容和软件空间的内容。界面所表现的领域空间中的概念内容和软件空间的内容。例如，客户、产品、订单、修改、打印、双击键盘。例如，客户、产品、订单、修改、打印、双击键盘。客户、产品、订单、客户、产品、订单、添加、删除、双击、添加、删除、双击、修改等修改等第 章 界面设计 用户看到的用户看到的人机界面人机界面:人机界面也就是信息系统的全部人机界面也就是信息系统
5、的全部!客户、产品、订客户、产品、订单、添加、删除、单、添加、删除、双击、修改等双击、修改等办公桌椅，键盘，鼠办公桌椅，键盘，鼠标，打印机，触摸屏，标，打印机，触摸屏，手册，书面表格等手册，书面表格等窗口、菜单、对话窗口、菜单、对话框、按纽，直线、框、按纽，直线、图形，颜色，语言图形，颜色，语言等等物理特征物理特征感知特征感知特征概念特征概念特征第 章 界面设计 1.4 人机界面研究涉及的知识领域人机界面研究涉及的知识领域 社会心理学人机界面媒体认知心理学语言学人类学生理学工程学图形艺术计算机科学第 章 界面设计 1.5 人机界面的发展人机界面的发展 1命令语言界面命令语言界面 命命令令语语言
6、言界界面面是是从从字字符符显显示示终终端端出出现现到到2020世世纪纪100100年年代中期人机交互界面的主要形式。代中期人机交互界面的主要形式。第 章 界面设计 1.5 人机界面的发展人机界面的发展 2菜单界面菜单界面 菜菜单单界界面面是是通通过过菜菜单单选选项项来来选选择择完完成成的的功功能能的的一一种种人机交互界面。人机交互界面。第 章 界面设计 3 3图形用户界面图形用户界面 图形用户界面图形用户界面GUIGUI（Graphics User InterfaceGraphics User Interface）被称为第二代用户界面，也是目前人机交互采用的主被称为第二代用户界面，也是目前人机
7、交互采用的主要人机界面方式。要人机界面方式。第 章 界面设计 4 4多通道用户界面多通道用户界面 多多通通道道用用户户界界面面是是虚虚拟拟现现实实技技术术带带来来的的未未来来人人机机界面交互形式。界面交互形式。用用户户可可以以使使用用自自然然的的交交互互方方式式，如如语语音音、手手势势、眼神、表情、指点等与系统进行协作工作。眼神、表情、指点等与系统进行协作工作。第 章 界面设计第 章 界面设计 1.6 用户界面设计的工作用户界面设计的工作 包包括括界界面面需需求求分分析析、输输入入设设计计、输输出出设设计计、屏屏幕幕界面设计和编写用户手册等工作，见下图。界面设计和编写用户手册等工作，见下图。第
8、 章 界面设计 2 输入设计输入设计 信息系统输入设计信息系统输入设计是从输入角度，通过对是从输入角度，通过对输入设输入设备备、输入方式输入方式、输入内容输入内容、输入形式输入形式、输入编码输入编码、输输入安全控制入安全控制等方面的分析研究，确定出可行的输入设等方面的分析研究，确定出可行的输入设计方案。计方案。目的目的是根据信息系统目标和用户的特点，确定出是根据信息系统目标和用户的特点，确定出使用户满意的输入设计方案。输入设计与输出设计有使用户满意的输入设计方案。输入设计与输出设计有密切的联系，需要综合考虑。密切的联系，需要综合考虑。第 章 界面设计 2.1 输入方式设计输入方式设计 1.1.
9、输入方式的概念和形式输入方式的概念和形式 概概念念：输输入入方方式式是是指指在在向向信信息息系系统统输输入入数数据据的的过过程中所采用的策略和形式。程中所采用的策略和形式。形式：形式：批输入、联机输入和混合输入三种方式。批输入、联机输入和混合输入三种方式。第 章 界面设计 2.2.输入方式设计输入方式设计 (1)批输入方式批输入方式 概概念念：批批输输入入方方式式也也叫叫脱脱机机输输入入方方式式，它它是是指指组组织一批数据并集中输入到系统之中的输入方式。织一批数据并集中输入到系统之中的输入方式。输入步骤：输入步骤：收集一组相关数据；收集一组相关数据；把收集到的数据先存把收集到的数据先存放到磁带
10、、磁盘等电子媒体上。放到磁带、磁盘等电子媒体上。把电子媒体上的一把电子媒体上的一组数据成批输入到系统之中。组数据成批输入到系统之中。第 章 界面设计 (2)(2)联机输入方式联机输入方式 联机输入方式是在业务处理过程中，边输入数据边联机输入方式是在业务处理过程中，边输入数据边处理数据的一种数据输入方式。学生食堂售饭系统数处理数据的一种数据输入方式。学生食堂售饭系统数据输入就采用联机输入方式，数据输入和卖饭业务是据输入就采用联机输入方式，数据输入和卖饭业务是同时进行的。同时进行的。第 章 界面设计 (3)(3)混合输入方式混合输入方式 是是批批输输入入和和联联机机输输入入相相结结合合的的方方式式
11、。超超市市售售货货系系统统就就采采用用混混合合方方式式。结结账账台台采采用用联联机机方方式式，每每天天在在确确定的时候定的时候POSPOS机再成批地把数据发送到中心数据库中。机再成批地把数据发送到中心数据库中。第 章 界面设计 2.2 数据编码数据编码 1.1.数据编码的概念和作用数据编码的概念和作用 概概念念：数数据据编编码码是是由由字字母母、数数字字或或特特殊殊字字符符组组成成的的一一组组编编码码序序列列，是是用用来来标标记记和和描描述述信信息息系系统统中中的的有有关关事事物物的的，简简称称编编码码。电电话话号号码码、学学生生编编号号、产产品品编编码码、银银行行账账户户编编码码、信信用用卡
12、卡编编码码、车车辆辆编编号号、汽汽车车牌牌照号等都是数据编码。照号等都是数据编码。作用：作用：提高数据输入的效率和惟一性。提高数据输入的效率和惟一性。类型：类型：顺序码、特征码、类型码和混合码四种类型。顺序码、特征码、类型码和混合码四种类型。第 章 界面设计 2.2.数据编码的类型数据编码的类型 顺序码顺序码 按照事物的时间顺序所进行的编码。按照事物的时间顺序所进行的编码。如，学生编码：如，学生编码：0000123324；商品编码：商品编码：001234；入库单编码：入库单编码：323324。第 章 界面设计 特征码特征码 特特征征码码是是按按照照事事物物的的某某一一方方面面的的固固有有特特征
13、征所所具具有有的的顺顺序序进进行行的的编编码码。顺顺序序码码基基于于事事物物发发生生的的时时间间顺顺序序，特征码按照事物固有特征进行编码。特征码按照事物固有特征进行编码。如，张小青：如，张小青：ZHIXIAOQING 王文意：王文意：WANGWENYI第 章 界面设计 类型码类型码 类类型型码码是是对对一一组组具具有有相相同同特特性性的的事事物物赋赋予予的的统统一一编编码码。例如，例如，3530的蓝牛仔裤：的蓝牛仔裤：101；3531的蓝牛仔裤：的蓝牛仔裤：102；41#鞋：鞋：201；42#鞋：鞋：202。第 章 界面设计 混合码混合码 混合码混合码是可以表示事物多种特征的编码。身份证是可以
14、表示事物多种特征的编码。身份证号就是混合码，它可以反映一个人所在的省、县、乡，号就是混合码，它可以反映一个人所在的省、县、乡，出生日期，性别以及在同一个乡中的顺序编码号等特出生日期，性别以及在同一个乡中的顺序编码号等特征。通常企业编码、汽车车辆编码、产品编码都是混征。通常企业编码、汽车车辆编码、产品编码都是混合码。合码。顺序码，男性出生日期乡县市省610123631212887第 章 界面设计 3 输输 出出 设设 计计 输出设计概念：输出设计概念：信息系统输出设计是从信息输出信息系统输出设计是从信息输出角度，通过对输出设备、输出内容、输出界面、输出角度，通过对输出设备、输出内容、输出界面、输
15、出控制等方面的分析研究，确定出可行的输出设计方案。控制等方面的分析研究，确定出可行的输出设计方案。输出设计与输入设计有密切的联系。输出设计与输入设计有密切的联系。信息的输出途径：信息的输出途径：屏幕输出屏幕输出、报表输出报表输出和和其它途其它途径输出径输出。屏幕输出又可分为屏幕输出又可分为文本输出文本输出、图表输出图表输出、图形图像图形图像输出输出和和音频输出音频输出等形式。屏幕输出又可通过屏幕界面等形式。屏幕输出又可通过屏幕界面的方式来组织。的方式来组织。第 章 界面设计 3.1 输出报表输出报表 1 1明细表明细表 明细表明细表用来反映在确定的时间范围内事务活动的用来反映在确定的时间范围内
16、事务活动的详实情况，它强调对信息反映的详实性。详实情况，它强调对信息反映的详实性。学号姓名课 程周学时节次345225612赵兰C语言42345225612赵兰计算机组成原理41345225613李晓数据结构62345225613李晓计算机组成原理41345225614张木C语言42345225614张木计算机组成原理41学生选修课程明细表2002年第2学期 打印日期：2007.9第 章 界面设计 2 2汇总表汇总表 汇总表汇总表反映业务活动的综合信息。反映业务活动的综合信息。第 章 界面设计 3 3分析表分析表 分析表分析表反映信息的对比和分析情况。反映信息的对比和分析情况。图.6 分析表
17、第 章 界面设计 3.2 输出图表输出图表 1 1散点图散点图 散散点点图图用用来来表表现现数数据据变变化化趋趋势势和和规规律律，见见图图 .7.7。企企业业管管理理通通常常用用散散点点图图反反映映业业务务过过程程的的历历史史数数据据，并并预预测业务未来的变化趋势。测业务未来的变化趋势。图.7 散点图 第 章 界面设计 2 2折线图折线图 折折线线图图用用来来反反映映一一定定时时间间区区间间内内数数据据变变化化的的波波动动情况，见图情况，见图 .8.8。折线图也可以表现数据的变化趋势。折线图也可以表现数据的变化趋势。第 章 界面设计 3 3条形图条形图 条形图条形图用来表现各分量之间的关联关系
18、和比例关系。用来表现各分量之间的关联关系和比例关系。第 章 界面设计 4 4饼图饼图 饼饼图图通通过过圆圆和和多多个个扇扇面面来来表表示示整整体体和和部部分分以以及及各各部分在整体中所占的比例，见图部分在整体中所占的比例，见图 .。第 章 界面设计 4 屏幕界面设计屏幕界面设计 4.1 屏幕界面设计的准则屏幕界面设计的准则 Ben ShneidermanBen Shneiderman的八项基本准则。的八项基本准则。图.11 用户界面设计的八项准则第 章 界面设计 1、尽量保持一致性尽量保持一致性 一致性的含义：一致性的含义：是所设计界面的是所设计界面的按键按键、窗口窗口、色色彩彩、界面布局界面
19、布局、界面风格界面风格等在整个系统中始终应该保等在整个系统中始终应该保持一致。持一致。第 章 界面设计 一致性的内容：一致性的内容：按键的一致性：系统定义的按键含义应该一致。按键的一致性：系统定义的按键含义应该一致。例如：复制例如：复制:ctrl-C 剪切剪切:ctrl-X 粘切粘切:ctrl-V 第 章 界面设计 一致性的内容：一致性的内容：窗口的一致性：窗口的格式，定义，布局一致。窗口的一致性：窗口的格式，定义，布局一致。第 章 界面设计 一致性的内容：一致性的内容：色彩的一致性：在不同界面中色彩的含义一致。色彩的一致性：在不同界面中色彩的含义一致。第 章 界面设计 一致性的内容：一致性的
20、内容：界面布局的一致性：界面的布局应该一致。界面布局的一致性：界面的布局应该一致。第 章 界面设计 一致性的内容：一致性的内容：界面风格的一致性：界面的风格保持一致。界面风格的一致性：界面的风格保持一致。第 章 界面设计 一致性的内容：一致性的内容：界面风格的一致性：界面的风格保持一致。界面风格的一致性：界面的风格保持一致。第 章 界面设计 2、为熟练用户提供快捷键为熟练用户提供快捷键 初初学学者者：提提供供丰丰富富的的联联机机帮帮助助和和界界面面说说明明，并并更更多地使用菜单和选项；多地使用菜单和选项；第 章 界面设计 2、为熟练用户提供快捷键为熟练用户提供快捷键 熟熟练练用用户户：提提供供
21、快快捷捷键键。过过多多的的操操作作界界面面反反而而会增加操作量，降低使用效率。会增加操作量，降低使用效率。例如：例如：新建新建：ctrl+N;ctrl+N;打开打开：ctrl+O;ctrl+O;打印打印：ctrl+P;ctrl+P;保存保存：ctrl+S ctrl+S 第 章 界面设计 3、提供有效反馈提供有效反馈 系系统统应应该该对对用用户户的的每每一一个个操操作作都都给给出出反反馈馈信信息息，以以让让用用户户了了解解系系统统对对用用户户操操作作的的确确认认。及及时时的的反反馈馈会会提提高高用用户户的注意力，增强用户使用系统的兴趣。的注意力，增强用户使用系统的兴趣。例如：在复制时系统给出提示
22、：例如：在复制时系统给出提示：第 章 界面设计 4 4、设计完整的对话过程、设计完整的对话过程 设设计计的的对对话话过过程程应应该该完完整整，有有开开始始、中中间间处处理理和和结结束束部部分分，因因为为人人处处理理每每一一个个业业务务都都是是一一个个完完整整的的过过程程。但但是是在业务处理过程中应该提供例外处理功能。在业务处理过程中应该提供例外处理功能。对话的内容：包括输入的内容和输出的内容；对话的内容：包括输入的内容和输出的内容；对话的步骤；对话的步骤；例外处理。例外处理。第 章 界面设计例如例如 售书处理对话售书处理对话售书员：用扫描仪扫描三本书的图书编号9787111108481，978
23、7111108481和 9787030099402。输入购买册数：1，1，1。输入折扣率：0.9,0.9,0.8。系统：在屏幕上显示出这两种书的图书信息：书号、图书名称、作者、出版 社、单价、册数，以及价格合计。售书员：点击“开书单”按纽。系统：显示图书销售单预览窗口。售书员：选择“打印”按钮。系统：提示用户等待，启动打印机打印图书销售单，书单打印完成之后，自动 消除提示窗口。售书员：选择“收款售书”按钮。系统：弹出收款售书窗口，准备接收书款。售书员：输入书款金额。系统：提示找零。售书员：选择“确定“按钮。系统：售书处理结束，返回准备下一次售出处理。第 章 界面设计 5、提供简单的错误处理机制
24、提供简单的错误处理机制 界界面面设设计计应应提提供供对对用用户户错错误误的的处处理理功功能能，并并能能够够检检查查、提提示示、纠纠正正用用户户出出现现的的常常见见错错误误。否否则则，所所设设计的系统将是一个不健壮的系统。计的系统将是一个不健壮的系统。例如：范围检查：超出范围给予报告；例如：范围检查：超出范围给予报告；类型检查：类型出错给予报告；类型检查：类型出错给予报告；相相关关性性检检查查：相相关关的的数数据据出出错错给予报告；给予报告；一一致致性性检检查查：数数据据出出现现不不一一致致问题报告。问题报告。第 章 界面设计 6、允许撤消动作允许撤消动作 对用户的一些错误或试探性动作应该允许用
25、户在对用户的一些错误或试探性动作应该允许用户在操作过程中自动撤除。人们在从事一项工作的过程中，操作过程中自动撤除。人们在从事一项工作的过程中，经常会做出一些试探动作，或不自觉地犯错，撤消这经常会做出一些试探动作，或不自觉地犯错，撤消这些动作并重新进行符合用户的工作习惯。些动作并重新进行符合用户的工作习惯。第 章 界面设计 7 7、提供控制的内部轨迹、提供控制的内部轨迹 系系统统随随时时把把控控制制的的内内部部轨轨迹迹提提示示给给用用户户，用用户户会会感感觉觉到到自自己己一一直直在在控控制制着着系系统统，最最起起码码能能够够了了解解系系统统的工作过程。这样会增加用户使用系统的亲和感。的工作过程。
26、这样会增加用户使用系统的亲和感。第 章 界面设计 8、减少短期记忆负担减少短期记忆负担 短短期期记记忆忆指指在在头头脑脑中中储储存存1 1分分钟钟左左右右的的记记忆忆,心心理理学规律发现学规律发现:1)1)人短期没有复述人短期没有复述,18,18秒后回忆的正确率仅在秒后回忆的正确率仅在15%;15%;2)2)人短期记忆的容量为人短期记忆的容量为7 72。第 章 界面设计 系统界面设计中应该尽量减少人的记忆负担系统界面设计中应该尽量减少人的记忆负担,通过通过:记忆量不大于记忆量不大于7 7;信息分组信息分组;信息赋予一定意义信息赋予一定意义;拉长屏幕之间的切换时间拉长屏幕之间的切换时间;信息提示
27、信息提示 及时反馈及时反馈 等方式增强记忆效果。等方式增强记忆效果。第 章 界面设计 4.2 图形屏幕界面图形屏幕界面 图图形形屏屏幕幕界界面面也也叫叫图图形形用用户户界界面面(GUI)(GUI)，它它主主要要由由窗口窗口、菜单菜单和和控件控件三要素构成。三要素构成。1 1界面框架界面框架(Frame)(Frame)界面框架：界面框架：是一个屏幕界面的总构架，所有屏幕是一个屏幕界面的总构架，所有屏幕控件都建立在界面框架之中。控件都建立在界面框架之中。第 章 界面设计 2 2窗口窗口 窗窗口口的的概概念念：窗窗口口(Window)(Window)也也叫叫窗窗体体，是是屏屏幕幕界界面面上上带带有有
28、边边界界的的矩矩形形区区域域，用用户户通通过过窗窗口口与与系系统统进进行交互处理。行交互处理。第 章 界面设计 3 3菜单菜单 菜菜单单的的概概念念：菜菜单单(Menu)(Menu)是是由由系系统统显显示示给给用用户户的的一一种种可可选选项项目目的的列列表表,用用户户可可以以从从中中选择一项要做的工作。选择一项要做的工作。菜菜单单的的形形式式：下下拉拉式式菜菜单单，弹出式菜单。弹出式菜单。第 章 界面设计 4 4控件控件 控控件件(Component)(Component)是是图图形形用用户户界界面面对对除除窗窗口口和和菜菜单单之之外外的的所所有有界界面面构构件件的的总总称称，有有些些图图书书
29、把把窗窗口口和和菜菜单单也归到控件之中。也归到控件之中。第 章 界面设计标签标签文本框文本框列表框列表框滚动条滚动条按钮按钮单选按钮单选按钮复选框复选框第 章 界面设计 4.3 屏幕界面结构设计屏幕界面结构设计 1 1屏幕界面结构的含义屏幕界面结构的含义 概概念念：屏屏幕幕界界面面结结构构是是由由信信息息系系统统用用户户界界面面中中的的所所有有屏屏幕幕界界面面构构成成的的结结构构框框架架。一一个个信信息息系系统统完完整整的的用用户界面可能由几百幅到几千幅屏幕界面构成。户界面可能由几百幅到几千幅屏幕界面构成。第 章 界面设计图.15 书务系统的屏幕界面结构 第 章 界面设计 2 2信息系统需求结
30、构决定屏幕界面结构信息系统需求结构决定屏幕界面结构 屏幕界面结构主要根据信息系统需求结构来确定屏幕界面结构主要根据信息系统需求结构来确定.小区物业系统需求结构第 章 界面设计 小区物业系统屏幕界面结构小区物业系统屏幕界面结构:第 章 界面设计 3 3下拉菜单在屏幕界面结构中的作用下拉菜单在屏幕界面结构中的作用 下下拉拉式式菜菜单单反反映映系系统统的的总总体体功功能能，通通过过菜菜单单中中的的各各个个选选项项可可以以把把屏屏幕幕切切换换到到下下一一级级屏屏幕幕界界面面，所所以以下下拉拉式式菜菜单是总体屏幕界面结构的核心。单是总体屏幕界面结构的核心。菜菜单单设设计计的的方方法法很很简简单单，现现在
31、在所所有有可可视视化化工工具具都都提提供了十分方便的菜单设计的功能。供了十分方便的菜单设计的功能。第 章 界面设计图 “图书销售”的下拉菜单“图书销售图书销售”节点的下拉菜单界面节点的下拉菜单界面:案例分析案例分析 第 章 界面设计 4.4 对话设计对话设计 1 1对话过程对话过程 对对话话过过程程：用用户户与与信信息息系系统统之之间间的的交交互互过过程程。用用户户要要通通过过信信息息系系统统完完成成一一个个完完整整功功能能，就就需需要要与与系系统统发生一次对话过程。发生一次对话过程。一一个个用用例例功功能能的的实实现现过过程程就就是是用用户户与与系系统统的的一一次次对对话话过过程程。在在对对
32、话话过过程程中中，用用户户向向系系统统提提出出要要求求，系系统给予应答。统给予应答。下面给出“售书处理”用例中，售书员和收款员分别通过各自图书销售管理节点和结算节点与书店信息系统的对话过程。第 章 界面设计 当前条件：当前条件：售书员售书员:在在“售书处理售书处理”屏幕界面；屏幕界面；收款员收款员:在在“收书款收书款”屏幕界面。屏幕界面。读者读者:系统分析与设计系统分析与设计两本两本,书号书号:9787111108481 软件工程技术概论软件工程技术概论 一本一本,书号书号:9787030099402案例分析案例分析 “售书处理售书处理”的对话过程的对话过程第 章 界面设计对话一：对话一：销售
33、图书节点销售图书节点:售书员与系统的对话售书员与系统的对话售售 书书 员员：用用 扫扫 描描 仪仪 扫扫 描描 三三 本本 书书 的的 图图 书书 编编 号号 97871111084819787111108481、97871111084819787111108481和和97870300994029787030099402。系系统统：在在屏屏幕幕上上显显示示出出这这两两种种书书的的图图书书信信息息，包包括括图图书书编编号号、图图书书名称、作者、出版社、单价、出版日期、册数，以及价格合计。名称、作者、出版社、单价、出版日期、册数，以及价格合计。售书员：售书员：点击点击“开书单开书单”按钮。按钮。系
34、系统统：弹弹出出窗窗口口，提提示示用用户户等等待待，当当前前正正在在打打印印书书单单，启启动动打打印印机机，打印出三联书单。书单打印完成之后，自动消除提示窗口。打印出三联书单。书单打印完成之后，自动消除提示窗口。注：注：售书员把三联书单交给读者，让读者在收款柜台交书款。售书员把三联书单交给读者，让读者在收款柜台交书款。(a)“售书处理”对话一案例分析案例分析 第 章 界面设计对话二：结算节点对话二：结算节点:收款员与系统的对话收款员与系统的对话收款员：收款员：输入书单号。输入书单号。系系统统：显显示示该该书书单单信信息息，包包括括每每一一种种图图书书的的图图书书编编号号、图图书书名名称称、作作
35、者者、出出版版社社、单单价价、出出版版日日期期、册册数数，以以及及书书单单图图书书的的价价格格合合计。计。收款员：收款员：收读者的书款，并按收读者的书款，并按“书款书款”按钮。按钮。注注：收收款款员员给给自自己己留留一一联联书书单单，并并给给另另外外两两联联书书单单上上盖盖章章，然然后后把书单交给读者，让读者回到售书员处持书单领书。把书单交给读者，让读者回到售书员处持书单领书。(b)“售书处理”对话二第 章 界面设计对话三：销售图书节点对话三：销售图书节点:售书员与系统的对话售书员与系统的对话(继续继续)售书员：售书员：输入书单号。输入书单号。系系统统：显显示示书书单单信信息息，包包括括每每一
36、一种种图图书书的的图图书书编编号号、图图书书名名称称、作作者者、出出版版社社、单单价价、出出版版日日期期、册册数数，以以及及书书单单图图书书的的价价格格合合计计。特别显示特别显示“书款已交书款已交”。售书员：售书员：按按“售出图书售出图书”按钮。按钮。注注：售售书书员员给给自自己己留留存存一一联联书书单单，给给读读者者一一联联书书单单，并并给给图图书书上上盖盖章，把图书交给读者，本次售书结束。章，把图书交给读者，本次售书结束。(c)“售书处理”对话三案例分析案例分析 第 章 界面设计 2 2对话界面设计对话界面设计 对话界面对话界面：能够实现一个用例对话过程的一组屏能够实现一个用例对话过程的一
37、组屏幕界面称为对话界面。幕界面称为对话界面。对话界面设计：对话界面设计：需要根据用例的对话要求，设计需要根据用例的对话要求，设计出一组能够满足用例功能需要，并具有友好界面风格的出一组能够满足用例功能需要，并具有友好界面风格的屏幕界面。屏幕界面。下图是下图是“售书处理售书处理”用例对话过程的对话界面。首用例对话过程的对话界面。首先进入先进入“售书处理售书处理”界面，接收待售图书的书号和册数，界面，接收待售图书的书号和册数，接收完后，按接收完后，按“开书单开书单”按钮，则在按钮，则在“售书处理售书处理”界面界面上弹出一个小窗口，显示上弹出一个小窗口，显示“正在打印书单，请等正在打印书单，请等”。第
38、 章 界面设计图 “售书处理”对话界面 案例分析案例分析 第 章 界面设计图“收书款”对话界面 案例分析案例分析 第 章 界面设计 4.5 屏幕界面布局和风格设计屏幕界面布局和风格设计 1 1 屏幕界面布局设计屏幕界面布局设计 屏幕界面布局设计的原则屏幕界面布局设计的原则 实实用用：正正确确地地反反映映这这个个界界面面要要显显示示内内容容的的设设计计要要求。求。美观美观：具有美感具有美感,能够吸引人。能够吸引人。特点特点：具有独特风格。：具有独特风格。第 章 界面设计 4.5 屏幕界面布局和风格设计屏幕界面布局和风格设计 2 2 屏幕界面风格设计屏幕界面风格设计 屏屏幕幕界界面面风风格格是是在
39、在不不同同的的屏屏幕幕界界面面设设计计中中所所表表现现出出来来的的艺艺术术特特色色和和个个性性。不不同同的的设设计计组组织织和和人人员员在在长长期期的屏幕界面设计过程中，会形成各自的风格。的屏幕界面设计过程中，会形成各自的风格。第 章 界面设计第 章 界面设计第 章 界面设计第 章 界面设计第 章 界面设计第 章 界面设计第 章 界面设计 4.6不同类型屏幕界面的设计不同类型屏幕界面的设计 1 1 注册界面设计注册界面设计 注注册册界界面面：是是进进行行人人员员身身份份、口口令令、安安全全等等级级、职职责责设设置置和和检检查查的的交交互互界界面面。在在初初次次进进入入系系统统时时，一一般般先先
40、展示注册界面。展示注册界面。第 章 界面设计 2 2主控界面设计主控界面设计 主控界面构成：主控界面构成：下下拉拉菜菜单单：主主控控界界面面的的核核心心构构件件，反反映映系系统统的的整整体体功能。功能。快快捷捷图图标标：点点击击这这些些图图标标可可以以启启动动系系统统的的一一些些常常用用功能。功能。主主工工作作区区：在在下下拉拉菜菜单单下下面面，用用于于信信息息显显示示、数数据据处理或事务处理。也可能是一个显示标志信息的空白区。处理或事务处理。也可能是一个显示标志信息的空白区。状态行：状态行：显示系统的工作状态，一般在底行。显示系统的工作状态，一般在底行。第 章 界面设计第 章 界面设计 4
41、4数据处理界面设计数据处理界面设计 数数据据处处理理界界面面：是是对对数数据据进进行行输输入入、修修改改、删删除除、检检索索、统统计计的的屏屏幕幕界界面面。数数据据处处理理界界面面除除了了能能够够完完成成一一般般数数据据处处理理功功能能之之外外，还还可可以以实实现现对对数数据据库库中中的的数数据进行插入、删除、更新、检索等操作。据进行插入、删除、更新、检索等操作。设设计计人人员员可可以以根根据据数数据据处处理理的的具具体体要要求求，运运用用各各种控件设计出具有不同格式和风格的数据处理界面。种控件设计出具有不同格式和风格的数据处理界面。下图是一个系统的数据处理界面。下图是一个系统的数据处理界面。
42、第 章 界面设计第 章 界面设计 5 5事务处理界面设计事务处理界面设计 事务处理界面：事务处理界面：是人和信息系统之间进行事是人和信息系统之间进行事务处理的交互界面。用户在事务处理界面中可以务处理的交互界面。用户在事务处理界面中可以驱动一个事务处理功能，信息系统也可能向用户驱动一个事务处理功能，信息系统也可能向用户提供一定的反馈信息。因为事务处理的多样化，提供一定的反馈信息。因为事务处理的多样化，决定了事务处理界面的格式和内容将是风格各异、决定了事务处理界面的格式和内容将是风格各异、五花八门五花八门。第 章 界面设计第 章 界面设计 6 6信息查询界面设计信息查询界面设计 信信息息查查询询界
43、界面面：是是提提供供信信息息的的检检索索、查查询询和和统统计计输输出出的的人人机机界界面面。用用户户可可以以在在查查询询界界面面中中指指定定查查询询条条件件，信信息息系系统统根根据据给给定定的的查查询询条条件件进进行行信信息息查查询询，并并把把查查询询的的结结果果在在查查询询界界面面中中按按照照预预先先设设计计的的格格式式输输出出。根根据据查查询询条条件件，可可以以将将信信息息查查询询分分为为单单条条件件查查询询和和多多条条件件组组合合查查询询；根根据据信信息息检检索索的的范范围围，可可以以将将信信息息查查询分为单数据库查询和多数据库关联查询。询分为单数据库查询和多数据库关联查询。第 章 界面设计
