软件工程教案--补充-用户界面设计2012.ppt

,软件工程-补充用户界面、输入和输出设计,用户界面、输入和输出设计,学习目标：（1）掌握系统设计的基本知识,了解系统设计的过程；（2）了解用户界面设计的基本任务； 熟悉用户界面设计的10个要素。（3）掌握常用的控件使用及常用的窗体设计模式。（4）熟悉输入输出设计。,提 纲,1 用户界面设计2 输出设计3 输入设计4小结,1 用户界面设计,背景：信息系统是一个人机技术系统，因此，存在人和机器的互动过程(Human Machine Interaction，HMI)，在HMI中存在一个通常所说的界面(Interface)/窗口(Windows)。从心理学角度看，界面可分为感觉系统(视觉、触觉、听觉等)和情感系统两个层次。定义：软件的用户界面其实质就是屏幕中的一个窗口或区域(狭义的看)。广义的看，还包括其它的输入、输出和包装表面，是软件产品的重要组成部分。关联学科：软件界面设计是一个复杂的、有不同学科参与的项目，包括心理学、工程设计学、语言学、美学。,1.1 用户界面设计概述,1.1 用户界面设计概述,用户界面的基础是人机交互基本原理，人机交互（HCI，human-computer interaction）描述的是计算机与使用计算机来执行任务的人之间的关系。,从广义上看，用户界面包括将信息输入系统以及以屏幕或打印报告形式获得输出所需的所有通信和说明。,系统设计员的任务是为各种应用程序定制界面， 主要目标是创建容易学习和使用的用户友好界面。,屏幕是一种特殊的界面，屏幕就是用户与系统的界面，即人和机器的接口。其它界面还有打印机、报表、文档、图形等内容。用户界面设计的原则界面处于用户的控制下减少用户的操作与记忆负担尽量保持界面的一致性为熟练用户提供快捷键提供有效反馈设计完整的对话过程提供简单的错误处理机制允许撤销动作提供控制的内部轨迹减少短期记忆负担,系统用户类型专业用户：指那些有计算机使用经验的用户。专业用户往往更看重信息系统的功能，而不太注意屏幕设计的合理性。普通用户：即没有计算机使用经验、甚至没有使用过计算机的用户。普通用户不仅仅看重信息系统能够完成什么样的功能，更看重如何操作信息系统。,1.1 用户界面设计概述,整洁、明了，但不简洁,美观、大气,美观、符合日常办公需要，但画面稍显杂乱,花哨、不平衡,凌乱、不清楚,简洁、美观,不美观、不清楚,美观、但不简洁,实用、但不简洁,形象、直观,1.2 用户界面的10个设计要素,用户界面的合适性是指界面与软件功能相融洽的程度。软件的功能需要通过用户界面来展现。毫无疑问，用户界面一定要适合于软件的功能，这是最基本的要求。如果用户无法通过这个界面来使用软件，“易用性”根本无从谈起。,1 用户界面适合于软件的功能（合适性）,例如，对于一个三维建模软件而言，如果用户不能使用鼠标对模型进行旋转、移动、缩放等操作，那么这个用户界面就不适合该软件的功能。如果不改进用户界面的话，即使软件的内核功能很强（如算法很先进），这个软件也很难得到用户的认可。,“用户界面适合于软件的功能”是首要的设计原则，它提醒设计者不要片面追求界面外观漂亮而导致华而不实。,1.2 用户界面的10个设计要素,如果用户很难理解界面的意图，那么他使用起来肯定很费劲。所以“容易理解”是“容易使用”的前提条件。以下一些措施可以提高用户界面的可理解性： 用户界面中的所有元素都不能出现错误文字，也没有令人 费解（例如二义性、逻辑混乱）的文字。 图标按钮的含义一定要直观明了，最好给图标加文字说 明（或提供充分而必要的提示），防止用户误解。,2 容易理解,P256 仅有一个按钮有明显的含义,界面结构能够清晰地反映工作流程，以使用户按部就班地操作,文字信息和界面布局尽量和用户群体的使用习惯相匹配。,职工人事信息卡录入,对于复杂的用户界面而言，最好提供界面“向导”，及时让用户知道自己在界面结构中所处的位置。例如对于基于Web的应用软件，应该在界面上显示“当前位置”，否则用户容易在众多的页面中迷失方向。,1.2 用户界面的10个设计要素,当用户进行某项操作后，如果过了一会儿（几秒种）用户界面一点反映都没有，这将使用户感到迷茫和不安，因为他不知道是自己操作错了还是软件死机了。所以及时反馈信息很重要，至少要让用户心里有数，知道该任务处理得怎么样了，有什么样的结果。对于一些重要的事务，当处理完成后，应当及时反馈给用户。,3 及时反馈信息,保存读者借阅信息,若保存成功,如果某些事务处理不能提供进度等数据，那么至少要给出提示信息如“正在处理，请等待”。最好是提供合适的动画，如下图所示，让用户明白软件正在干活，没有死机。,1.2 用户界面的10个设计要素,用户在使用软件的过程中，不可避免地会出现一些错误的操作。倘若用户不小心输入了错误的数据，或者错误地删除了有用的数据，而软件傻乎乎地、将错就错地执行了，那么用户肯定很恼火，以后就不敢放心地使用软件。在设计用户界面时必须考虑防错处理，目的是让用户不必为避免犯错而提心吊胆，小心翼翼地操作。,4 防错处理,常见的防错处理措施有： 提供对输入数据进行检验的功能。如果用户输入错误的数据，软件应当识别错误并且提示错误。,若图书的入库数量=0，则单击“增加”按钮时将进行提示,对于在某些情况下不应该使用的菜单项和命令按钮，应当将其“失效”（变成灰色，可见但不可操作）或者“隐蔽”。例如：对于某些管理软件，不同的用户有不同的操作权限。如果低权限的用户登录到系统，那些仅供高级权限用户使用的功能应当被隐蔽，或者将其“失效”。,执行破坏性的操作之前，应当获得用户确认。例如用户删除一行内容时，应当弹出对话框：“真的要删除当前行吗？”，当用户确认后才真正删除该行的内容。,1.2 用户界面的10个设计要素,风格一致有两方面的含义： （1）在一个软件的用户界面中，同类的界面元素应当有相同的视感和相同的操作方式，例如命令按钮是最常见的界面元素，所有命令按钮的形状、色彩以及对鼠标的响应方式都是一致的。 （2）同一领域软件的用户界面应当有一定程度的相似性。例如Microsoft公司的Office家族里有Word、Excel等软件，这些软件提供的“复制、剪切、粘贴”功能的操作方式都是相同的。,5 风格一致和必要的个性化,对于用户界面而言，风格一致的最大好处就是能够减少用户的记忆量、减少出错几率，并且迅速积累操作经验。所以熟悉Word软件的人基本上不用翻阅手册就能使用Office家族的其他软件。,而对于一些应用软件而言，有个性化的界面自然比泯然于众的界面更具有吸引力。尤其是娱乐领域的软件，用户更加喜欢有个性的甚至是颠覆传统的用户界面，下图是极具个性化的用户界面示例。,1.2 用户界面的10个设计要素,首先，界面的总体布局应当有一定的逻辑性，最好能够与工 作流程吻合。界面设计人员只有仔细地分析软件的需求，才 能提取对界面有价值的信息。,6 合理的布局,其次，窗口（或页面）上的界面元素的布局应当整齐清爽。界面元素应当在水平或者垂直方向对齐，行、列的间距保持一致。,所有项目（控件）对齐,控件组间隔推荐7个对话框基本单位,按钮以及控件间的间隔推荐4个对话框基本单位,7个对话框基本单位,按钮以及编辑框类控件高度推荐21个对话框基本单位,1.2 用户界面的10个设计要素,应当限制一帧屏幕的色彩数目，因为人们在观察屏幕的时候很难同时记住多种色彩。应当根据对象的重要性来选择颜色，重要的对象应当用醒目的色彩表示。使用颜色的时候应当保持一致性，例如错误提示信息用红色表示。在表达信息时，不要过分依赖颜色，因为有些用户可能色盲或色弱。,7 合理的色彩,1.2 用户界面的10个设计要素,一个软件产品可能有许多类型的用户，例如有些用户对计算机比较外行，有一些用户可能是计算机的行家。在设计用户界面时应当尽可能多地了解用户的使用习惯和水平，努力使用户在操作软件的时候感觉不到差异和麻烦。为了达到这个目标，一般需要提供多种操作途径以适应各种水平的用户。,8 适应用户群体,例如使用Windows下的资源管理器，对于一个初学者来说，他 愿意使用鼠标和菜单一步一步地操作；而对于技术专家而言， 他也许更愿意使用热键来获取更高的效率。,提供多种操作方式：使用鼠标；使用快捷键 Alt + S（Save）,1.2 用户界面的10个设计要素,使用菜单方式（2个操作步骤）,使用图标按钮方式（1个操作步骤）,9 最少操作步骤（最高效率）,设计用户界面时应当尽可能地替用户着想，用户应当用最少 的操作步骤完成某项操作任务，获得最高的使用效率。,尽管减少一个操作步骤而完成任务节约的时间微乎其微（可能只有几秒钟），但是用户的感觉反差却会很强烈。业界流传“多1个步骤，流失10%的用户”。界面设计师要深入分析软件的业务流程、用户使用习惯才能设计出最少的操作步骤。,1.2 用户界面的10个设计要素,复用就是指“利用现成的东西”，被复用的对象可以是有形的物体，也可以是无形的知识成果。复用有利于提高质量、提高生产率和降低成本。由经验可知，在开发应用软件时，大部分的内容是成熟的，只有小部分内容是创新的。一般地可以相信成熟的东西总是比较可靠的（即具有高质量），而大量成熟的工作可以通过复用来快速实现（即具有高生产率）。,10 可重用,参阅观点：用户总是对的，即使有错，也是系统的错，用户没错安装：用户有权要求易安装、卸载软件和硬件，且无负面影响一致：用户有权要求系统按照需求/要求精确运行说明：为方便理解、使用和维护系统，用户有权得到说明资料控制：用户有权要求系统是可控的，且获得准确的响应反馈：用户有权知道系统对系统执行的任务和完成的进度的清楚、可理解和正确的信息依赖性：用户有权要求成功使用软件和硬件所需的所有系统需求都能清楚地通知用户范围：用户有权知道系统的边界和系统的能力局限性帮助：用户面临问题时，有权与技术支持交流并得到成熟的有用的响应可用性：用户是系统的主任，能自然和直接使用系统,IBM的人机界面设计观点：用户10项权益,1用户界面设计,1.3 用户界面控件,基于组件的开发（Component Based Development）,Grid表格控件,1.对话框,允许用户输入与系统将执行任务有关的信息，是联系用户与系统的通道。,其父类为Form,一般没有最大/最小按钮,不显示最大按钮,不显示最小按钮,对话框通常是一种模式窗体。,窗体常用的方法,被调用的窗体类 窗体实例 = new 被调用的窗体类();,窗体实例.Show(); /或ShowDialog();,private void cmdShow_Click(object sender, System.EventArgs e)frmA A = new frmA();A.ShowDialog(); /对话框通常以模式显示,2.文本框,显示消息并允许用户输入数据。,3.列表框,显示用户可以选择的选项列表,4.下拉列表框,public class clsPerson private string _Name = ; public string Name get return this._Name; set this._Name = value; public int Age = 0; ,怎样获取用户选择的项目呢？,clsPerson b = null;/取得当前的选中的索引号int index = this.listBox1.SelectedIndex; /取出其中的内容，要进行类型转换b = (clsPerson)this.listBox1.Itemsindex;,clsPerson b = null;/取出其中的内容，要进行类型转换b = (clsPerson)this.listBox1.SelectedItem;,5.单选按钮,单选按钮代表一组选项中的一个选择，用户一次只能选择一项，被选中的选项显示为黑点。把单选按钮组合在一起，给它们创建一个逻辑单元，此时可以使用GroupBox控件。,GroupBox控件,6.复选框,复选框用来从一组选项中选择一个或多个选项，被选中的选项用复选标志或X表示。,WinForms 中的常用控件,可视化界面组件统称为控件,System.Windows.Forms.Control,控件常用的属性 C#入门经典 第14章 P332,控件常用的属性 C#入门经典 第14章 P332,控件常用的事件 C#入门经典 第14章 P335,1 用户界面设计,1.4 常用的用户界面模式,主界面设计是用户界面设计中最重要也是最难的工作。 良好的软件主界面有如下特性：用户很容易理解界面的意图，基本上无需翻阅手册和询问 别人所有用户很容易理解界面的意图，元素的布局合理，符合 逻辑，符合工作流程，操作方式符合大众用户的习惯，具有 高度一致性主界面清晰美观，用户不会厌烦,1.主界面设计,1.4 常用的用户界面模式,Windows客户端软件的主界面模式是非常成功的，这种模式已经被世界上大多数的计算机用户接纳。Windows客户端软件的主界面一般有5个区域：,（1）菜单区,（2）工具栏区,（5）状态信息区,（4）工作区,速达3000软件的主界面示例,Java Look and Feel GuidlinesSun1999，第93页中关于 基本窗体的定义：（即MDI中的子窗体） 基本窗体是用户与数据或者文档进行交互的主要地方，一个应用程序可以使用任意多个基本窗体，它们可以被独立地打开、关闭、最小化或者调整大小。,2.基本窗体设计,1）基础数据窗体2）业务录入窗体3）报表查询窗体,1.4 常用的用户界面模式,设置系统的基础数据的窗体，如部门信息、供应商资料、客户资料信息设置窗体等等。,1.4 常用的用户界面模式,“物料”信息设置,进行基本业务资料设置的窗体 ，如采购订单的录入、凭证的录入等等。,1.4 常用的用户界面模式,1.4 常用的用户界面模式,进行信息查询的窗体 ，如明细账的查询、进货信息的查询等等。,1.4 常用的用户界面模式,标题,Java Look and Feel GuidlinesSun1999，第93页中 关于基本对话框的定义： 对话框是一个用来提供支持的窗体，它依赖于一个基本窗体（或者其他的次级窗体）。在对话框中，用户可以查看和提供基本窗体的动作或者对象的附加信息。,3.对话框设计,1.4 常用的用户界面模式,新增对话框,为什么在设计阶段是先设计输出，再设计输入？,2 输出设计,输出设计的目的是为各级管理人员正确及时地提供所需要的信息。因此，首先根据进行输出设计，再根据输出所应获得的信息来进行输入设计，更能反映管理者和用户对信息的需求。,2 输出设计,系统输出的形式是多种多样的，例如作为其它系统的输入、打印的报表、屏幕显示和数据文件（Word文件、Excel文件等）等。信息系统的最终目的是为了使用户得到所需要的信息。因此输出设计应满足正确性、有效性、及时性、简洁明了及易于阅读和理解等要求。,2.1 输出设计的原则,2 输出设计,1)输出的目的是什么？2)谁需要这些信息？为什么需要这些信息？怎样使用这些信息？3)需要包含哪些特殊的信息?4)输出是打印、在屏幕显示还是两者都要？5)何时提供信息？需要经常更新信息吗？6)存在安全或者机密性问题吗？,2.2 输出设计的内容,提供给用户的信息要进行格式设计。输出格式要满足使用者的 要求和习惯，达到格式清晰、美观、易于阅读和理解的要求。,在表示事物的趋势、多方面因素的比较等方面有较大优势。,直方图,长裙,外套,大衣,洋装,圆饼图,曲线图,报表是最常用的一种输出形式。一般由表头、表体和表尾组成。,细节报告为每个记录产生一行或多行输出，打印输出的每一行叫做细节行。,细节行,细节报告的另一种形式为分组报告，它提供了更多的信息。,按 商店号 进行分组,分组汇总,全部汇总,异常报告仅仅显示那些满足特定要求或条件的记录。如本异常报告只显示那些有加班情况的雇员信息，而不是列出所有雇员的信息。,总结报告仅仅显示一些汇总信息而忽略细节信息。一般地，中高层管理者使用的报告比低层雇员使用的报告要包括较少的细节。,在输出设计上应尽量保持输出流内容和格式的统一性。 同一内容的输出，对于显示器、打印机、文本文件和数据库文件应具有一致的形式。,尽量利用原系统的输出格式，如果要修改，应与相关部门协 商。输出表格要考虑系统发展的需要。,“输入的是垃圾，输出的必然是垃圾”Garbage in, garbage out,3 输入设计,有正确的输入才有正确的输出输入界面是系统与用户交流的纽带在正确的前提下，应做到输入方法简单、迅速、经 济、方便。输入设计的目标是确保输入数据的质量、准确性和 适时性。,3 输入设计,输入设计主要决定怎样获取数据并输入系统。数据获取（Data Capture）使用自动或手动操作设备来识 别数据，并将其转化成计算机可读的形式。 如右图数据输入（Data Entry）是手动输入数据到信息系统的整 个过程，通常以键击或鼠标单击方式输入。,3 输入设计,3 输入设计,控制输入量：仅输入必要的数据。不输入系统不需要的数据。输入量越小，出错的机会越少，花费的时间越少，数据的一致性越好。,减少输入延迟：输入数据的速度往往成为提高信息系统运行效率的瓶颈，为减少延迟，可采用周转文件、批量输入等方式。,减少输入错误：输入设计中应采用多种输入校验方法和有效性验证技术，减少输入错误。见P267,避免额外步骤：在输入设计时，应尽量避免不必要的输入步骤，当步骤不能省略时，应仔细验证现有步骤是否完备、高效。,输入过程尽量简化：输入设计在为用户提供纠错和输入校验的同时，必须保证输入过程简单易用，不能因为查错、纠错而使输入复杂化，增加用户负担。,3.1 输入设计的原则,控制输入量,减少输入延迟,减少输入错误,避免额外步骤,输入过程尽量简化,3 输入设计,目前常用的输入设备有以下几种:,1、读卡机,2、键盘-磁盘输入装置,3、光电阅读器,3.2 数据输入设备的选择,手持扫描仪,4、终端输入,5、声音识别仪,3.2 数据输入设备的选择,3 输入设计,3.3 输入检验,数据获取过程中发生的错误，如原始凭证丢失、填写不准确、凭证传递延误等，这些主要依靠建立严格的管理制度来解决。输入数据阶段产生的错误，如录入员的错读、漏读、误操作等原因引起的数据错误。对这类错误，可以采用数据验证检查（Data Validation Check）来解决。数据验证检查通过测试数据，丢弃任何不满足指定条件数据的方式，提高了输入质量。,（1）顺序检查：当数据应该以某种预定义的顺序输入时使用顺序检查。例如，用户必须按数字顺序输入工作订单，那么无序的订单数字表明出现了错误。（2）存在性检查：例如，如果雇员记录需要身份证号，直到输入合适的值时，存在性检查才允许用户保存记录。（3）数据类型检查：数据类型检查是为了确保数据项与需要的数据类型相符。例如，不能在数量字段输入字符等。,3.3 输入检验,（4）范围检查：范围检查是为了检查数据项是否落在指定的最大最小值之间。例如，如商品的单价规定在50元至1000元范围内，若检查出存在超出此范围的数据，则出错。当验证检查包括最大或最小值时（但不是两个都包括），则称为限制性检查。例如，付款数必须要大于0。（5）合理性检查：例如，输入付款数为0.05和50,000,000.00都会通过简单的限制性检查，但两个数值看起来反常（1个太小而另1个则太大），系统会使用合理性检查要求录入人员进行确认。,3.3 输入检验,（6）有效性检查：用来检查数据项必须具有某些值。例如，如果存货系统有20个有效的产品分类，则任何与其中一个分类不相符的输入项在该检查下不会通过。输入值必须参考其他值，这种类型的检查称为参考完整性检查（参考数据设计）。（7）组合性检查：它检查两个或两个以上的字段，当一起考虑时保证它们是一致或合理的。尽管包含在组合性检查之内的所有字段可能会通过各自的有效性检查，但字段值的组合可能是不一致或不合理的。例如，订单超过100或者更多时才会有折扣，如果一个订单输入为30同时还有折扣输入项，则该组合是无效的。,3.3 输入检验,（8）批量控制：它用来控制批量输入总数，还可以检查数据项如记录和数字字段的总数。,如上图中总金额要等于各笔分录金额的汇总。,3.3 输入检验,3 输入设计,输入数据的记录格式要便于操作人员录入，又要便于填表人员、现场工作人员填写。设计输入格式的原则是: 1）屏幕设计要充分考虑用户需求。 2）设计的界面表单布局应当尽量与源文档布局一致。 3）设计时应注意使录入窗口简洁明了。,3.4 输入格式的设计,格式简单、直观、易用程序实现。适用于输入数据项不多的情况,符合人们日常习惯，受欢迎。但要注意和安排屏幕，尽量与数据载体的格式一样，输入操作会觉得亲切自如，不易出错。,全屏幕编辑功能，即在屏幕上造出一张与数据库文件相