6章详细设计 第二部分 西安电子科技大学 软件工程教学课件

第六章详细设计 第二部分 西安电子科技大学课程 第六章详细设计 6 8界面设计的一般准则人 机界面设计离不开设计者的经验以及文献中介绍的经验 下面分别从三个方面介绍由这些经验形成的一般准则 6 8 1一般交互 1 注意一致性用固定的格式来构造菜单选项 命令输入 数据显示和其他人一机界面所包含的功能 第六章详细设计 2 提供有意义的反馈向用户提供视觉和听觉上的反馈以使其确信在用户和界面之间建立了双向通信 3 对任何不同寻常的破坏性操作要求确认如果用户请求删除文件 或表示要覆盖早些信息 或要求终止一个程序 应显示一条类似于 Areyousure 的确认信息 4 允许大多数操作的方便退回UNDO或REVERSE功能为最终用户节省大量时间 在所有交互应用场合都应该有退回功能 第六章详细设计 5 减少操作中必须记忆的信息量不应要求用户记住后继操作中重用的大量数字或名字 应减少记忆的信息量 6 尽量提高对话 动作和思维效率击键次数应尽可能少 设计屏幕布局时应考虑鼠标在两个选取点间必须移动的距离 不应让用户遇到百思不得其解的问题 7 容忍错误系统应有在用户造成会使系统瘫痪的错误时的自我保护能力 第六章详细设计 8 经功能将活动分类及控功能组织屏幕布局下拉式菜单的主要好处是它具有按类型组织命令的能力 从本质上讲 设计会应力求将相关命令和操作都 粘在一起 9 提供上下文有关的帮助设施上下文有关的帮助设施可使用户在与当前正执行的操作有关的主题中进行选择 从而减少用户获取帮助的时间并增加界面友好性 10 采用简单动词或动词短语给命令命名长的命令名不仅难以辨认和记忆 而且可能不必要地挤占菜单空间 因此 应尽量采用简短的命令 第六章详细设计 6 8 2信息显示如果人一机界面的显示信息不完整 不明确或不具智能 应用软件就无法真正满足用户的要求 信息可用多种方式显示 用正文 图像和声音 通过定位 移动和缩放 采用色彩 变形等 以下准则集中于信息显示方面 1 只显示当前上下文有关的信息用户不必通过外层数据 菜单和图像以获得与某项系统功能有关的信息 2 不要使用户置身于大量的数据中采用一种明了的表达方式 以利于用户迅速接受信息 尽量用图像或图表代替成篇的表格 第六章详细设计 3 使用一致的标记 标准的缩写和隐含的颜色显示信息的含义应不依赖于外界的信息源就能一目了然 4 允许用户保持可视化的上下相关性如果图像按比例放大和缩小 原始图像则一直缩小显示在屏幕角上 以使用户了解正观察的图像部分在原始图像中的相对位置 5 生成有意义的出错信息交互式系统应以用户可理解的术语提供出错信息 并伴随听觉和视觉效果 这类信息除报错和发警告外 还应向用户提供一些纠正错误的建议并指明错误的潜在危害 以使用户能够进行相应检查以确信这些危害没有发生或真正发生时采取相应补救措施 第六章详细设计 6 采用大小写 行首缩进和正文分组人一机界面产生的大部分信息是正文的 正文的布局和格式对用户掌握信息的难易程度具有较大的影响 7 尽可能用窗口来划分不同类型的信息窗口能使用户很容易地收到不同种类的信息 8 采用 模拟 显示方式有些信息若采用 模拟 显示方式 更容易被理解 例如 用数字显示炼油厂的潜藏罐压不如采用温度计式的显示方式表示得直观 9 合理利用显示屏的可用空间当采用多窗口时 应保证至少显示每个窗口的一部分 另外 选择显示屏时应考虑能否容纳要显示的应用软件 第六章详细设计 6 8 3数据输入用户的大部分时间都花在选取命令 键入数据以及其他的系统输入上 在许多应用场合 键盘仍是主要的输入介质 但鼠标 数字化仪甚至语音识别系统等高效手段正不断涌现并迅猛发展 下面给出数据输入的一般准则 1 尽量减少用户的输入动作可采用鼠标选取预先定义的输入 用 滑动刻度 指定某一范围的输入数据 用 宏 来代表复杂的输入数据集合 2 保证信息显示与数据输入的一致性显示的视觉特征应在输入域中体现出来 并在应用程序执行过程中保证输入域与显示特征的一致性 第六章详细设计 3 允许用户定制输入人一机界面应允许熟练用户建立或取消带有某些警告信息和动作确认的定制命令 4 交互方式应符合用户要求交互方式既要灵活 又要与用户的输入要求符合 不同类型的用户有不同的输入习惯 选择交互方式时要考虑到这一点 5 屏蔽掉在当前动作的上下文中不适用的命令这条准则可防止用户试图使用可能导致错误的动作 第六章详细设计 6 让用户控制交互的流程用户应可以跳过不必要的操作 改变动作次序或不退出程序就从错误状态中恢复出来 7 为所有的输入动作提供帮助 8 去掉画蛇添足的输入尽量采用缺省值 不要让用户输入本可自动生成或通过计算得出的数据 第六章详细设计 6 9色彩在程序界面中的应用软件界面色彩斑斓给人以赏心悦目之感 色彩在用户界面中使用使得人机界面更加直观 生动 赋予魅力 堪称软件中的 化妆品 目前在彩显上可以有16K种 256种 16K增强 24位色等多种模式以16色为例 它有黑 蓝 亮蓝 亮青 亮绿 亮橙 亮红 亮白 棕 青 灰 绿 橙 红 白和黄 面对众多的颜色 软件设计人员在设计自己的用户界面时要恰当地选择好颜色并非易事 为此 经过仔细研究 总结如下 第六章详细设计 6 9 1颜色的基础知识一 色彩原理物体表面色彩的形成取决与三个方面 光源的照射 物体本身反射一定的色光 环境与空间对物体色彩的影响 光源色 由各种光源发出的光 光波的长短 强弱 比例性质的不同形成了不同的色光 称为光源色 物体色 物体色本身不发光 它是光源色经过物体的吸收反射 反映到视觉中的光色感觉 我们把这些本身不发光的的色彩统称为物体色 第六章详细设计 我们知道 人们视为 可见 的光可以分解为从蓝色到红色的一个渐进的彩虹光谱带 还见过 也许还用过 色环 色环显示如何通过混合两种或更多颜色来生成特定的颜色 色环实质上就是在彩色光谱中所见的长条形的色彩序列 只是将首尾连接在一起 使红色连接到另一端的紫色 第六章详细设计 色环通常包括12种不同的颜色 如图所示 虽然画家对色环和颜色理论的重要方面已十分了解 但我们当中的一些程序员却可能不十分清楚 这种理解上的不足会把事情弄得一团糟 按照定义 基色是最基本的颜色 通过按一定的比例混合基色可以产生任何其它颜色 为了识别基色 首先需要确切知道使用的是何种媒介 您可能在小学里学到基色有红 黄 蓝 但现在我们大多是用红 绿 蓝作为基色进行颜色显示 第六章详细设计 三色组 第六章详细设计 第六章详细设计 第六章详细设计 第六章详细设计 利用对比对比是两种相邻颜色之间感觉到的区别 由于白色和黑色不是真正的颜色 它们被说成是表现了非彩色的对比度 黑色和白色也表现了最强烈的对比 色环中的互补色表现出大的彩色对比度 人眼对非彩色的对比度比对彩色的对比度更敏感 这就是在您增加压缩系数时 jpg压缩算法先除去彩色信息而后再除去黑白信息的原因 黑色与白色 非彩色的对比条 第六章详细设计 每个人都明白 白色背景下的黑色文本最容易观看 这是您看到的大多数印刷材料都是白背景下的黑色文本的部分原因 同样地 黑底白字的对比度也很强 但阅读起来比较困难 因为黑色给人感觉比白色沉重 有鉴于此 请尽量少用 高对比度颜色组合 互补色组合 使用蓝色的单色对比条 第六章详细设计 分列的互补色组合 在背景图像上的文本 修改后的颜色组合 第六章详细设计 色彩调和两种或两种以上的色彩合理搭配 产生统一和谐的效果 称为色彩调和 同种色的调和相同色相 不同明度和纯度的色彩调和 方法为 使之产生循序的渐进 在明度 纯度的变化上 形成强弱 高低的对比 以弥补同色调和的单调感 类似色的调和以色相接近的某类色彩 如红与橙 蓝与紫等的调和 称为类似色的调和 类似色的调和主要靠类似色之间的共同色来产生作用 对比色的调和以色相相对或色性相对的某类色彩 如红与绿 黄与紫 蓝与橙的调和 调和方法有 选用一种对比色将其纯度提高或降低另一种对比色的纯度 在对比色之间插入分割色 金 银 黑 白 灰等 采用双方面积大小不同的处理方法 以达到对比中的和谐 是对比色之间具有类似色的关系 也可起到调和的作用 第六章详细设计 色彩的象征各种色彩的象征 红色 热情 活泼 热闹 革命 温暖 幸福 吉祥 危险 橙色 光明 华丽 兴奋 甜蜜 快乐 黄色 明朗 愉快 高贵 希望 发展 注 绿色 新鲜 平静 安逸 和平 柔和 青春 安全 理想 蓝色 深远 永恒 沉静 理智 诚实 寒冷 紫色 优雅 高贵 魅力 自傲 轻率 白色 纯洁 纯真 朴素 神圣 明快 柔弱 虚无 灰色 谦虚 平凡 沉默 中庸 寂寞 忧郁 消极 黑色 崇高 严肃 刚健 坚实 粗莽 沉默 黑暗 罪恶 恐怖 绝望 死亡 第六章详细设计 6 9 2色彩的连续一致性在一个系统中 对特定意义的代表色使用时 应注意前后一致性 避免出现紊乱 常规界面中 黑色常用于题目 题头或边框 上面谈到的原则在DOS系统中是十分准确的 到了Windows9x平台上略有些差别 请大家自己归纳总结一下 如果已用亮红色表示 错误警告信息 那么就不宜用类似的色彩处理其他的正常信息 要注意使用懂得色彩不宜贪多 否则会使画面显得杂乱无章 频繁地改变色彩对操作者的眼睛会带来刺激和不适 所以 如果基色已用完就不要在更改 一般情况 使用的色彩中不宜超过四种 第六章详细设计 6 9 3色彩的位置研究表明 人的眼睛对各种色彩的喜厌并非一视同仁 同一颜色 由于不同也会使眼睛有不同的感觉 比如 红色和绿色放在显示器正中就显得生动亲切 而处于显示器边缘时 效果差一些 蓝色是一种十分理想的背景色 但不适合做正文颜色 6 9 4色彩的组合使用所谓色彩组合是指正文的色彩与背景色及边框色彩的搭配 协调的色彩组合可增加用户界面的友好性 同时还能减轻视觉的疲劳感 尽量不要使用 红 绿 红 蓝 绿 蓝等这样的组合 因为这样的组合会使字迹模糊难辨 易使人头晕目眩 第六章详细设计 软件界面设计示例 第六章详细设计 第六章详细设计 有一种技巧是借鉴国外软件的色彩搭配 对用户界面的设计将会有受益匪浅的感觉 6 9 5界面设计的种类与方法的研究界面设计技术涉及的知识面较多 不单单是计算机方面 它还涉及到诸如美学 心理学 美术 装饰等方面的知识 下面从界面的种类及模式加以论述 1 界面设计种类为减轻用户视觉的疲劳 给人们以清新爽目的感觉 使那些长时间工作的人们保持一种良好的工作状态 一般情况 界面设计在画面上应是清晰 悦目 色彩不易太多 第六章详细设计 国际上 在界面设计中 一般较多为四种颜色 主色彩主要选用深蓝 浅蓝 深灰 浅灰白等几种颜色 而界面上的字使用亮白或黑这种组合既能给人一种层次感 又不会使画面紊乱 而且界面的字清晰易辨 界面设计大体上分为二种 工程化界面和人文界面工程化界面是技术人员比较熟悉的类似开发平台的界面 象VF会自动生成界面 人文界面是针对家庭应用软件开发的 如家政管理 游戏等 这两种类型的界面是比较容易界定 但不能混用 人文界面采用拟人及虚拟显示的手法来设计界面 使用户有十分的亲切感 特别适合不懂计算机人员的使用与操作 而工程界面常用于行业软件 企业软件等专业软件中 在风格上与人文界面有着本质上区别 第六章详细设计 2 界面生成模式与方法在界面生成模式中有下列几种 界面生成模式字符模式界面按纽式界面图符模式界面图标式界面浏览器模式界面工具栏式界面混合模式界面目前 混合模式较多 具体格式如下 第一行采用下拉式菜单 第二行采用工具按纽 第三行采用地址通讯栏当然界面有中 西文之分 中文界面生成方法在许多论文中有论述 在此就不再讨论了 第六章详细设计 软件界面设计示例 第六章详细设计 软件界面设计示例 第六章详细设计 软件界面设计示例 第六章详细设计 软件界面设计示例 第六章详细设计 软件界面设计示例 第六章详细设计 第六章详细设计 软件界面设计示例 第六章详细设计 软件界面设计示例 第六章详细设计 软件界面设计示例 第六章详细设计 软件界面设计示例 第六章详细设计 软件界面设计示例 第六章详细设计 软件界面设计示例 第六章详细设计 软件界面设计示例 第六章详细设计 软件界面设计示例 第六章详细设计 6 10程序复杂程度的定量度量定量度量方法 可把程序的复杂程度乘以适当常数即可估算出 软件中故障的数量以及软件开发需要用的工作量 它可以比较出两个不同设计或两种不同算法的优劣 有两种常用的方法 6 10 1McCabe方法 McCabe根据程序图来确定 1 环形复杂度的计算方法在一个强连同图的有向图中线性无关环的个数由下面的公式给出V G m n p强连同图是指从图中任一个节点出发都可到达所有其他节点 用McCabe方法度量得出的结果称为程序的环形复杂度 它等于强连通图的程序图中线性无关的有向环的个数 2 环形复杂度的用途实践表明V G 10 V G 10是模块规模的上限 第六章详细设计 第一步 画出控制流图流程图用来描述程序控制结构 可将流程图映射到一个相应的流图 假设流程图的菱形决定框中不包含复合条件 在流图中 每一个圆 称为流图的结点 代表一个或多个语句 一个处理方框序列和一个菱形决测框可被映射为一个结点 流图中的箭头 称为边或连接 代表控制流 类似于流程图中的箭头 一条边必须终止于一个结点 即使该结点并不代表任何语句 例如 if else then结构 由边和结点限定的范围称为区域 计算区域时应包括图外部的范围 第六章详细设计 第二步 计算圈复杂度圈复杂度是一种为程序逻辑复杂性提供定量测度的软件度量 将该度量用于计算程序的基本的独立路径数目 为确保所有语句至少执行一次的测试数量的上界 独立路径必须包含一条在定义之前不曾用到的边 有以下三种方法计算圈复杂度 流图中区域的数量对应于环型的复杂性 给定流图G的圈复杂度V G 定义为V G E N 2 E是流图中边的数量 N是流图中结点的数量 给定流图G的圈复杂度V G 定义为V G P 1 P是流图G中判定结点的数量 第六章详细设计 本例中环形复杂度为4 第六章详细设计 6 10 2halstead方法halstead方法是一种程序复杂度度量方法 halstead度量方法不仅仅度量了程序长度 还描述了程序的最小实现和实际实现之间的关系 并据此阐释程序语言的等级高低 它以程序中出现的操作符和操作数为计数对象 以它们的出现次数作为计数目标来测算程序容量和工作量 任意程序 总是由操作符和操作数通过有限次的组合连缀而成 的符号表词汇量n n1 n2 n1 惟一操作数数量 n2 惟一操作符数量 设N1是 中出现的所有操作数 N2是程序中出现的所有操作符 度量指标如下 程序长度N N1 N2halstead预测长度H n1log2n1 n2log2n2 Halstead法的例子SQRT源程序 SQRT程序的操作符SUGROTINESORT X N n1操作符数DIMENSIONX N 1语句7IF N LT 2 RETURN2数组下标 6DO201 2 N3 5DO10J 1 I4IFC 2IF X I GE X J GOTO105DO2SAVE X I 6 2X I X J 7程序结束1X J SAVE8 LT 110CONTINUE9 GE 120CONTINUE10GOTO101RETURNn1 10 N1 28END 第六章详细设计 第六章详细设计 SQRT的源程序SQRT程序的操作数编号操作数数SUGROTINESORT X N 1X6DIMENSIONX N 2I5IF N LT 2 RETURN3J4DO20I 2 N4N2DO10J 1 I522IF X I GE X J GOTO106SAVE2SAVE X I 711X I X J X J SAVEn2 7 N2 2210CONTINUE20CONTINUERETURNEND 第六章详细设计 1 程序长度 H n1log2n1 n2log2n2 2 程序容量 V Nlog2 n1 n2 N N1 N2V表示了程序所需信息 位