软件工程第62章课件

第六章详细设计(第二部分)（主讲刘志镜教授）2004年7月6日西安西安电子科技大学课程第六章详细设计

6.8界面设计的一般准则

人--机界面设计离不开设计者的经验以及文献中介绍的经验。下面分别从三个方面介绍由这些经验形成的一般准则。

6.8.1一般交互

（1）注意一致性用固定的格式来构造菜单选项、命令输入、数据显示和其他人一机界面所包含的功能。第六章详细设计（2）提供有意义的反馈向用户提供视觉和听觉上的反馈以使其确信在用户和界面之间建立了双向通信。（3）对任何不同寻常的破坏性操作要求确认如果用户请求删除文件，或表示要覆盖早些信息，或要求终止一个程序，应显示一条类似于“Areyousure…”的确认信息。

（4）允许大多数操作的方便退回UNDO或REVERSE功能为最终用户节省大量时间。在所有交互应用场合都应该有退回功能。

第六章详细设计

（5）减少操作中必须记忆的信息量不应要求用户记住后继操作中重用的大量数字或名字。应减少记忆的信息量。

（6）尽量提高对话、动作和思维效率击键次数应尽可能少，设计屏幕布局时应考虑鼠标在两个选取点间必须移动的距离，不应让用户遇到百思不得其解的问题。（7）容忍错误系统应有在用户造成会使系统瘫痪的错误时的自我保护能力。

第六章详细设计（8）经功能将活动分类及控功能组织屏幕布局下拉式菜单的主要好处是它具有按类型组织命令的能力。从本质上讲，设计会应力求将相关命令和操作都“粘在一起”。

（9）提供上下文有关的帮助设施上下文有关的帮助设施可使用户在与当前正执行的操作有关的主题中进行选择．从而减少用户获取帮助的时间并增加界面友好性。（10）采用简单动词或动词短语给命令命名长的命令名不仅难以辨认和记忆．而且可能不必要地挤占菜单空间。因此，应尽量采用简短的命令。第六章详细设计6.8.2信息显示

如果人一机界面的显示信息不完整、不明确或不具智能，应用软件就无法真正满足用户的要求。信息可用多种方式显示：用正文、图像和声音；通过定位、移动和缩放；采用色彩、变形等。以下准则集中于信息显示方面。

（1）只显示当前上下文有关的信息用户不必通过外层数据、菜单和图像以获得与某项系统功能有关的信息。

（2）不要使用户置身于大量的数据中采用一种明了的表达方式．以利于用户迅速接受信息。尽量用图像或图表代替成篇的表格。第六章详细设计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是模块规模的上限．

6.10.2

Hasltead法

见教材P106页,然后接下面的例子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．110

CONTINUE9．GE．120

CONTINUE10GOTO101RETURNn1=10;N1=28END第六章详细设计第六章详细设计

SQRT的源程序SQRT程序的操作数

编号操作数

数

SUGROTINESORT(X,N)1X6DIMENSIONX(N)2I5

IF(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=22

10

CONTINUE

20

CONTINUERETURNEND第六章详细设计

(1)

程序长度:H=n1log2n1+n2log2n2

(2)

程序容量:V=Nlog2(n1+n2)N=N1+N2V表示了程序所需信息(位)的容量

(3)

语言级别:L=(2/n1)*(n2/N2)(4)

程序工作量:E=V/L

(5)

程序潜在错误量:B=(N1+N2)log2(n1+n2)/3000n1：不同运算符（包括关键字）的个数；

n2：不同操作符（包括变量与常数）的个数；

例如：一个程序对75个数据库项共访问1300次,对150操作符共使用1200次,代入上式得:B=(1300+1200)log2(75+150)/3000=6.5(即6-7个错