第6章-详细设计-1

回顾:软件设计的步骤通常，设计阶段的工作分成两步总体设计——着重解决程序模块的设计问题和全局数据设计问题考虑如何把软件系统划分成若干个模块决定各模块的接口，即模块间的相互关系模块之间传递的信息详细设计(也称为程序设计)——决定每个模块内部的具体算法,用户界面设计。设计完成以后，要进行必要的阶段评审，使设计中发生的问题能够及时发现并得到解决，而不致将其带到开发的后期，造成更大的危害2/3/20230DFD=外部实体+加工+数据存储+数据流；设计：DFD转换外部实体角色、外部软件/硬件系统；加工SC中的“模块”数据存储数据库、文件数据流接口数据设计回顾:结构化设计2/3/20231加工SC中的“模块”教材购销系统

销售采购

取书打印发票购书申请开交款单缺书登记通知到书售书统计缺书汇总

邮购处理进书登记顶层DFD图0层DFD图2/3/20232软件工程

第六章详细设计2/3/20233本章学习目标掌握详细设计的过程了解界面设计的原则掌握详细设计的工具流程图盒图PAD图PDL了解McCode程序复杂度度量方法2/3/20234本章要点一、详细设计的概述

二、人机界面设计三、结构程序设计四、过程设计工具五、案例讲解六、程序复杂度度量2/3/20235详细设计概述总体设计与详细设计的差异软件设计的输入是《需求分析规格说明书》，输出是《总体设计说明书》和《详细设计说明书》。总体设计的主要目的，是按某种设计方法，将软件系统分解为多个子系统，再将子系统分解为多个模块或部件，并将系统所有的功能合理地分配到模块或部件中去。

详细设计是面向程序员的，它的主要目的，是按某种设计方法，将软件系统的模块或部件，进行编程实现设计，用以指导程序人员编写代码，形成模块或部件的实现蓝图。

2/3/20236详细设计概述详细设计阶段的目的与任务详细设计的目的:为软件结构图(SC)中的每一个模块确定采用的算法和模块内数据结构，用某种选定的表达工具给出清晰的描述。详细设计阶段的主要任务为每一模块确定算法确定每一模块使用的数据结构确定模块的外部接口和用户界面为每一模块设计一组测试用例为每一模块设计一组测试用例2/3/20237详细设计概述详细设计并不是具体地编程序，而是已经细化成很容易从中产生程序的图纸。即详细设计是设计出程序的“蓝图”。在编码阶段程序员可以把这个“蓝图”（描述）直接翻译成用某种程序设计语言书写的程序。因此详细设计的结果基本决定了最终程序的质量。

考虑程序代码的质量时必须注意，程序的“读者”有两个，那就是计算机和人。

2/3/20238详细设计概述模块的算法设计应当详细到什么程度？由于现代的软件开发工具越来越先进，模块的详细设计和编程可以很好地融合一起，而且效率相当高，有些开发工具甚至具有代码自动生成的功能。所以模块设计究竟要详细到什么地步，应当视问题复杂性以及所采用的开发工具而定。一般地，只要确定了每个模块的主要接口、数据结构与算法，能够清楚地指导模块编程即可。总之，不必花太多时间用于设计模块的细节。2/3/20239详细设计概述详细设计的过程根据概要设计的结果对各个模块内部实现进行规划（包括算法、局部数据结构）。根据设计结果产生详细设计文档。评审:对处理过程的算法和数据库的物理结构都要评审。2/3/202310本章要点一、详细设计的概述

二、人机界面设计三、结构程序设计四、过程设计工具五、案例讲解六、程序复杂度度量2/3/202311提问什么时候开始设计界面？谁参加设计？如何根据总体设计结果来设计界面？2/3/202312人机界面设计人机界面的设计质量，直接影响用户对软件产品的评价，从而影响软件产品的竞争力和寿命，因此，必须对人机界面设计给予足够重视。近年来，人机界面在系统中所占的比例越来越大，在个别系统中人机界面的设计工作量甚至占总设计量的一半以上。重要啊！！2/3/202313用户界面在软件体系结构中的位置数据服务模块用户界面模块商业服务模块数据库人机界面设计2/3/202314用户界面的基本类型

从用户角度出发，用户界面设计的类型主要有问题描述语言，数据表格、图形与图标、菜单、对话框及窗口等。每一种类型都有不同的特点和性能。讨论以下类型：菜单、图象、对话框和窗口。人机界面设计2/3/2023151、菜单（menu）

按照显示方式正文菜单、图标菜单、正文和图标混合菜单，如“开始”菜单。按屏幕位置和操作风格固定位置、浮动位置（弹出）、下拉式、嵌入式混合菜单固定及下拉菜单固定菜单下拉菜单人机界面设计用户界面的基本类型2/3/2023162、图像在用户界面中，加入丰富多彩的画面，将能够更加形象地为用户提供有用的信息，以达到可视化的目的。主要的处理操作有：图像的隐蔽和再现、屏幕滚动和图案显示、动画等。用户界面的基本类型人机界面设计2/3/2023173、对话框对话框是在需要时，显示在屏幕上一个矩形区域内的图形和正文信息。通过对话，实现系统和用户之间的通信。对话框显示的方式与弹出式菜单类似，即瞬时弹出。同时，系统还应将对话框所覆盖的原图像进行保存，以便在对话结束后能立即恢复。有三种对话形式：必须回答式无需回答式警告式必须回答式对话框

无需回答式对话框

警告式对话框用户界面的基本类型人机界面设计2/3/2023184、窗口（window）图形学中称为视图区（Viewport），视为虚拟屏幕。一个实用窗口，可包含部件：

菜单区（menubar）图标区（iconbar）标题区（titlebar）移动区（movebar）大小区（sizebar）退出区（quitbar）用户工作区（user’sworkbar）横向滚动区（horizontalscrollbar）纵向滚动区（verticalscrollbar）人机界面设计用户界面的基本类型2/3/2023194、窗口（window）

下图描述了一个包括多个部件的窗口.标题区图标区大小区退出区菜单区滚动区菜单工作区2/3/202320人机界面设计什么是好的用户界面通俗地讲，用户界面“好不好”主要看它是否“容易使用”和“美观”。易用性是指用户使用软件的容易程度。现代人的生活节奏快，干啥事都想图个方便。谁都不乐意掏钱买很难用的东西，所以把易用性作为用户界面的重要属性对待无可非议。2/3/202321用户界面的易用性包括：可行性（使用有效果）有效性（工作效率高，避免繁琐操作）安全性（能安全使用）易学性（易于学习）易记性（使用方法便于记忆）人机界面设计2/3/202322不要把你的想法强加给用户！2/3/202323人机界面设计界面设计原则1、置于用户控制之下：对用户操作给出恰当的反应，并帮助用户完成工作。2、减少用户的记忆负担：系统应“记住”有关信息，通过默认项、快捷方式或界面视觉减少用户的记忆负担。3、保持界面的一致性2/3/202324人机界面设计（UI设计）如何设计界面？从总体结构图开始设计界面首先考虑用户如何进这些模块。最简单的想法是：设计一个菜单，然后从菜单分别进入这些模块。用户特征分析原型设计2/3/202325用户特征分析外行型初学型熟练型专家型人机界面设计图书馆借阅室人员的工作界面？2/3/202326原型设计人机界面设计2/3/202327多层次菜单型目前网站界面都属于这类菜单模式。它的特点是：进入主界面后，有一个包含多层功能调用的菜单。无论是C/S结构的界面，还是B/S结构的界面，这类菜单普遍适用。人机界面设计（UI设计）2/3/202328多层次菜单型2/3/202329一览无余型菜单这类菜单适合普通大众，无须专门训练2/3/202330业务向导型这类比较复杂，是主流软件常用的设计方式2/3/202331界面设计举例借阅证办理界面１、确定屏幕数据元素从需求、表设计、界面设计三个方面２、确定屏幕功能区域３、制定防止出错策略2/3/202332字段名意义类型长度要求备注xm姓名varchar8notnull

*bh借书证编号varchar9notnull如TT0111111,TT01单位编号blrq办理日期datetime

notnullszbj所在班级varchar16nullnl年龄integer

nullxb性别char(2)2null‘男’/‘女’根据调研资料直接设计某些表，满足第三范式2/3/202333必须输入，不输入无法保存必须输入，编号有要求，为了快捷输入，要求号码可以自动增加性别是固定选择项目用listbox是否需要维护一个部门选择项？这个CheckBox是因为应付有些图书馆号码是随机或者以另外的规则产生的如果借书证信息来自学籍管理系统，可以导入想看看已经输入的借书证，可以从这里看有些图书馆，有老的系统，搞了这个选择，默认不会打勾2/3/202334该界面设计有什么缺点？2/3/202335Web界面的设计特征：设计以功能为主形象明确，容易接受形式简洁Web界面的设计工具：基于HTML：HTML和CSS相结合脚本语言:例如JSP，快速确认输入、制作简单动画等。使用脚本语言，一般先在HTML文档开始时进行声明。

人机界面设计（UI设计）2/3/202336本章要点一、详细设计的概述

二、人机界面设计三、结构程序设计四、过程设计工具五、案例讲解六、程序复杂度度量2/3/202337结构化程序设计对于过程设计采用的典型方法是结构化程序设计(SP)方法。结构程序设计技术可以保证了每个模块功能的正确实现，也让设计出的处理过程简明易懂。2/3/202338“结构化”起源：对GOTO的认识结构化程序设计(SP)方法，最早是由E.W.Dijkstra在20世纪60年代中期提出的。1965年，他在一次会议上指出：“可以从高级语言中取消GOTO语句”，“程序的质量与程序中所包含的GOTO语句的数量成反比”。结构化程序设计2/3/202339举例--三个数中找出最小数程序1if(A<B)goto120；if(B<C)goto110；100write(C)；goto140；110write(B)；goto140；120if(A<C)goto130；goto100；130write(A)；140end程序2if(A<B)and(A<C)thenwrite(A)elseif(A≥B)and(B<C)thenwrite(B)elsewrite(C)endifendif结构化程序设计2/3/202340“结构化”起源：对GOTO的认识1966年Bohm和Jacopini证明了，只用三种基本的控制结构就能实现任何单入口单出口的程序。这三种基本的控制结构是“顺序”、“选择”和“循环”。1972年IBM公司的Mills进一步提出，程序应该只有一个入口和一个出口，从而补充了结构程序设计的规则。结构化程序设计2/3/202341结构程序设计定义结构程序设计的经典定义如下所述：“如果一个程序的代码块仅仅通过顺序、选择和循环这3种基本控制结构进行连接，并且每个代码块(控制结构）只有一个入口和一个出口，则称这个程序是结构化的。”

2/3/202342三种基本的控制结构顺序结构，先执行A再执行BIF_THEN_ELSE型选择（分支）结构DO_WHILE型循环结构：

结构化程序设计2/3/202343为了实际使用方便起见，常常还允许使用DO_CASE型多分支结构和DO_UNTIL型循环结构。其他常用的控制结构结构化程序设计2/3/202344

这三种基本结构就可以实现任何单入口单出口的程序。但为了使用方便，还允许有DO_UNTIL和DO_CASE两种控制结构。有时为了提前从循环中跳出，还允许有BREAK结构。我们称只允许使用三种基本结构的为经典的结构化程序设计;除三种基本结构外，还可用DO_UNTIL和DO_CASE的为扩展的结构程序设计;若再加上BREAK则称为修正的结构程序设计。结构化程序设计2/3/202345abX1X2X7X4X3X5ifedcjTFFFTT举例：指出所有的基本程序结构选择当循环多分支直到循环2/3/202346……

for(a=1,b=1;a<=100,a++){if(b>=20)break;if(b%3==1){b+=3;continue;}b-=5;}……a<=100FTb>=20b%3==1b+=3a++b-=5TFFTa=0,b=1单入口

M1单出口举例2/3/202347A<BA,B,CB<CA<C打印BFTFTTF打印C打印A……

If(A.LT.B)goto120If(B.LT.C)goto110100write(6,*)Cgoto140110write(6,*)Bgoto140120If(A.LT.C)goto130goto100130write(6,*)A140continue

-----单入口多出口结构

M2举例2/3/202348举例例：非结构化到结构化2/3/202349结构程序设计除满足结构程序设计原则外，下列是结构程序设计的目标：著名的“清晰第一，效率第二”已成为当今主导的程序设计风格“先求清楚后求快”“保持程序简单以求快”“写清楚——不要为‘效率’牺牲清晰”2/3/202350本章要点一、详细设计的概述

二、界面设计三、结构程序设计四、过程设计工具五、案例讲解六、程序复杂度度量2/3/202351过程设计的工具描述程序处理过程的工具称为过程设计工具，它们可以分为图形、表格、和语言3类。不论是哪类工具，对它们的基本要求都是能提供对设计的无歧义的描述。即：应该能指明控制流程、处理功能、数据组织，以及其他方面的实现细节，从而在编码阶段能把对设计的描述直接翻译成程序代码。描述工具程序流程图N-S图PAD图判定表判定树PDL伪代码2/3/202352程序流程图:也称为程序框图，它使用五种基本控制结构：过程设计的工具2/3/202353程序流程图中常用的符号程序流程图过程设计的工具2/3/2023541、循环符号的使用循环名进入循环条件循环体循环名

i=1,100S=S+i

i

S=0S=S+iS=0,i=1i>100i=i+1

F

T循环体-----循环流程符号的使用过程设计的工具程序流程图2/3/202355

判断有一个入口，但也允许有多个可选出口A:B

A=B

A<BA>BX=?x=1x=2x=3x=4X=?=1=2=3=4=5

-----多出口判断流程符号的使用过程设计的工具程序流程图2/3/202356使用程序流程图，描述并打印N的阶乘举例2/3/202357程序流程图从20世纪40年代末到70年代中期，程序流程图一直是软件设计的主要工具。

优点：便于掌握缺点：它不是逐步求精的好工具。程序员可以随意转移。程序流程图不易表示数据结构。2/3/202358将下面给出的伪码转换为流程图 voidroot(floatroot1,floatroot2){i=1;j=0;while(i<=10){ 输入一元二次方程的系数a,b,c; p=b*b–4*a*c; if(p<0)输出“方程i无实数根”; elseif(p>0)求出根并输出; if(p==0){ 求出重根并输出; j=j+1; } i=i+1;

}输出重根的方程的个数j;}课堂练习2/3/202359出于要有一种不允许违背结构程序设计精神的图形工具的考虑，Nassi和Shneiderman提出了盒图，又称为N-S图。它有下述特点：

(1)功能域(即，一个特定控制结构的作用域)明确，可以从盒图上一眼就看出来。

(2)不可能任意转移控制。

(3)很容易确定局部和全程数据的作用域。

(4)很容易表现嵌套关系，也可以表示模块的层次结构。盒图(N_S图)过程设计的工具2/3/202360顺序结构块1块2块3块4条件TFthen块1else块2选择结构Do_while部分当循环条件当型循环Do_until部分直到循环条件直到型循环A调用子程序ACase条件case1块1case2块2多分支选择结构case3块3值1值2值3过程设计的工具盒图(N_S图):N-S图对五种基本控制结构，由五种图形构件表示。2/3/202361过程设计的工具2/3/202362举例--将下列伪代码转换成盒图S1;if(x>5)thenS2elseS3;while(y<0)S4;S5;ifu>0then{S6;while(k>5)S7;}S8;

S1FT

x>5S3S2y<0S4

S5

FT

u>0S6

k>5S7

S82/3/202363将下面给出的伪码转换为N-S图。 voidroot(floatroot1,floatroot2){i=1;j=0;while(i<=10){ 输入一元二次方程的系数a,b,c; p=b*b–4*a*c; if(p<0)输出“方程i无实数根”; elseif(p>0)求出根并输出; if(p==0){ 求出重根并输出; j=j+1; } i=i+1;

}输出重根的方程的个数j;}课堂练习2/3/202364【解答】i=1;j=0;while(i<=10)输入a,b,c;计算p=b2

-4ac;p<0?输出“方程i”无实根求出根并输出p>0?p==0?求出重根并输出;j=j+1;i=i+1;输出重根的方程个数iFTTTFF

(1)N-S图2/3/202365PAD图--ProblemAnalysisDiagramPAD图由日本日立公司1973年发明以后，已得到一定程度的推广。它用二维树形结构的图来表示程序的控制流，将这种图翻译成程序代码比较容易。它即克服了传统的流程图不能清晰表现程序结构的缺点，又不像N-S图那样受到把全部程序约束在一个方框内的限制，这就是其