【文档说明】[软件工程]CH05-详细设计.pptx，共(65)页，3.340 MB，由精品优选上传

转载请保留链接：https://www.ichengzhen.cn/view-290295.html

以下为本文档部分文字说明：

ComputerScience&Technology2023/7/261软件工程软件工程刘迎春软件工程ComputerScience&Technology2023/7/262第5章详细设计5.1详细设计的任务与内容5.2详细设计工具5.3

人机界面设计问题定义可行性研究可行否？否是需求分析终止项目概要设计计划时期详细设计ComputerScience&Technology2023/7/2635.1详细设计的任务与内容详细设计的任务，是对总体设计阶段划分出的每个模块进行明确的算法描述。模块的内部过程描述就是模块内

部的算法设计。1.详细设计的意义:有无正确的软件详细设计描述，对软件开发人员来说，直接影响到他们的程序正确性和编程效率详细设计描述对于软件测试和维护人员也是重要的文档，使得他们不需要阅读程序代码，就能了解模块内部的程序结构Com

puterScience&Technology2023/7/2642.详细设计的内容程序描述功能性能输入项输出项算法流程逻辑接口存储分配ComputerScience&Technology2023/7/2655.2详细设计工具在过程设计阶段，要决定各个

模块的实现算法，并精确地表达这些算法。表达过程规格说明的工具叫做详细设计工具。图形工具表格工具语言工具ComputerScience&Technology2023/7/2665.2.1程序流程图程序流程图也称为程序框图，程序流程图使用的基本控制结构是:ComputerScience

&Technology2023/7/267程序流程图的标准符号(a)选择（分支）；(b)注释；(c)预先定义的处理；(d)多分支；(e)开始或停止；(f)准备；(g)循环上界限；(h)循环下界限(a)(b)(c)(d)(e)(f)(g)(h)Compute

rScience&Technology2023/7/268循环的标准符号注解的使用ComputerScience&Technology2023/7/269多出口判断ComputerScience&Technology2023/7/2610程序流程图的特点和缺点程序流程图中的箭头

代表控制流对控制流程的描绘很直观，便于初学者掌握缺点:程序流程图本质上不是逐步求精的好工具，它诱使程序员过早地考虑程序的控制流程，而不去考虑程序的全局结构。程序流程图中用箭头代表控制流，因此程序员不受任何约束，可以完全不顾结构程序设计的精神

，随意转移控制。ComputerScience&Technology2023/7/26115.2.2N-S图N-S图也叫做盒图。五种基本控制结构由五种图形构件表示。第一个任务第二个任务第三个任务循环条件DO-WHILE部分AFT条件FELSE分支THEN

分支CASE条件FF值1F值2F值nF…DO-UNTIL部分循环条件(a)顺序(b)分支(c)多路分支(d)DO-WHILE循环(e)DO-UNTIL循环(f)调用子程序AComputerScience&Technology2023/7/2612N-S图的嵌套定义形式ComputerScie

nce&Technology2023/7/2613N-S图的特点和缺点一个特定控制结构的作用域明确不可能任意转移控制很容易确定局部和全程数据的作用域很容易表现嵌套关系，也可以表示模块的层次结构盒图没有箭头，因此

不允许随意转移控制。坚持使用盒图作为详细设计的工具，可以使程序员逐步养成用结构化的方式思考问题和解决问题的习惯。缺点:复杂逻辑情况下,难以布局ComputerScience&Technology2023/7/26145.2.3问题分析图(PAD)PAD也设置了五种基本控制

结构的图式，并允许递归使用PAD图所描绘的程序结构十分清晰。图中最左面的竖线是程序的主线，即第一层结构。随着程序层次的增加，PAD图逐渐向右延伸，每增加一个层次，图形向右扩展一条竖线PAD图中竖线的总条数就是程序的层次数ComputerScience&Te

chnology2023/7/2615PAD基本结构ComputerScience&Technology2023/7/2616对应于增量型循环结构fori:=n1ton2stepn3do在PAD中有相应的循环控制结构

PAD的扩充控制结构ComputerScience&Technology2023/7/2617PAD的特点PAD图是二维树形结构的图形，程序从图中最左竖线上端的结点开始执行，自上而下，从左向右顺序执行，遍历所有结点用

PAD图表现程序逻辑，易读、易懂、易记ComputerScience&Technology2023/7/2618示例ComputerScience&Technology2023/7/2619示例ComputerScience&Technology2023/7/2620PAD描述的示例Com

puterScience&Technology2023/7/2621自动化工具VISIO其他实例ComputerScience&Technology2023/7/26225.3人机界面设计软件的任务是由用户在提供给用户的虚拟工作

环境中来完成,用户所面对的虚拟工作环境就是人机界面用户承担需要创造、判断和探索的任务，而计算机承担重复检查、计算和数据处理的任务人机界面设计是软件设计的重要内容。ComputerScience&Technology概念区分（1）用户体验：U

E◼用户体验并不是指产品本身是如何工作的，而是指产品如何和外界联系并发挥作用，也就是人们如何“接触“或者“使用”它。（2）交互：用户通过某种方式发出指令，且系统对此作出相应的反应◼交互设计是关于创建新的用户体验的问题，目的在于增强和扩充人们的工作、通信及交互方式，使他们能够更加有效地进

行日常工作和学习。ComputerScience&TechnologyUI设计（3）UserInterfaceDesign◼用户界面设计，在很大程度上就是在探讨如何让产品的界面更加具有可用性，如何让用户有更良好的体验。这是

一种优化后的界面，通过这种界面，用户能更方面地完成任务，获得良好的感觉。◼例如：一个按钮的设计，美工设计考虑如何好看，而用户界面设计师则考虑按钮如何摆放，上面显示什么文字，甚至到底要不要这个按钮的问题

。ComputerScience&TechnologyUI设计的重要性用户能够正确、高效的完成任务，取决于软件所提供的工作环境在应有的功能和性能基础上，人机界面在完成用户任务，用户形成使用软件的感受中起到非常重要的作用。软件用户界面设计要综合考虑“易用性设计”、“艺术设计”和“技术

实现”2023/7/2625ComputerScience&Technology各种对话框好的差的ComputerScience&TechnologyUI设计常见问题界面措辞含糊，甚至有错别字。连简单的消息框都设计不好，可能存在文不对题的语病。界面布局混乱，缺乏逻辑，凡是

能放的东西都堆集上去，让用户不知从何下手。没有防错处理，不对用户输入的数据进行检验，不根据用户的权限自动隐藏或者禁用某些功能。执行破坏性的操作之前，不提醒用户确认。总之，如果用户执行了错误的操作，那他活该。不提供进度条、动画来反映正在进行的比较耗时间的过程，对于重要的操作

也不返回结果，让用户干着急。ComputerScience&Technology2023/7/26285.3.1人机界面应具备的特性输入和输出信息是与用户的使用直接相关的。输入和输出的方式和格式应当尽可能方便用户的使用。一定要避免因设计不当给用户带来的麻烦。因此，在软件需求分析阶段

和设计阶段，就应基本确定输入和输出的风格。系统能否被用户接受，有时就取决于输入和输出的风格。ComputerScience&Technology5.3.1人机界面应具备的特性1.界面适合于展现功能◼软件的功

能需要通过用户界面来展现。用户界面一定要适合于软件的功能，这是最基本的要求。如果用户无法通过这个界面来使用软件，“易用性”根本就无从谈起。例如，对于一个三维建模软件而言，必须具备通过鼠标对模型进行旋转、移动、缩

放等操作功能◼“用户界面适合于展现功能”是首要的设计原则，它提醒设计者不要片面追求界面外观漂亮而导致华而不实。ComputerScience&Technology2.界面适合于用户群体◼一个软件产品可能有许多类型的用户，例如有些用户对计算机比较外行，有一些用户可能是计算机的行家。在设计用户界面

时应当尽可能多地了解不同类型用户的使用习惯和水平，努力使不同类型用户在操作软件的时候感觉不到困难和麻烦。（理想境界）◼如果不能使所有类型的用户都感到满意，那么重点满足以下类型的用户：“主流用户”，“有影响力的用户”算法的可隐可显性用户可以根据需要制定和修改界面方式Computer

Science&Technology3.界面容易被用户理解用户界面中的所有元素都不能出现错误文字，也没有令人费解（例如二义性、逻辑混乱）的文字。用户界面设计人员绝对不能对界面上的文字马马虎虎，措词必须“正确、准确”。图标按钮的含义一定要直观明了，最好给

图标加文字说明，防止用户误解。所有的界面元素应当提供充分而必要的提示，例如当鼠标移动到工具条上的某个图标按钮时，应当在该图标旁边出现功能提示。界面结构能够清晰地反映工作流程。文字信息和界面布局尽

量和用户群体的使用习惯相匹配。对于复杂的用户界面而言，最好提供界面“向导”，及时让用户知道自己在界面结构中所处的位置。ComputerScience&Technology3.界面容易被用户理解-2➢“地址”两字让人费解，让人搞不清楚是住址，还是http网址？搜索一个名字行不行？➢“试

一试，浏览器地址栏中也可以直接搜索”这句话有点多余，用户不知道究竟从哪里搜索ComputerScience&Technology3.界面容易被用户理解-设计一个优秀的向导式界面ComputerScience&Technolo

gy4.一致性和个性化◼“用户界面风格一致”的最大好处就是能够减少用户的记忆量、减少出错几率，并且迅速积累操作经验。◼同一类型软件的用户界面应当有一定程度的相似性。例如Microsoft公司的Office家族里有Word、Excel、PowerPoint、Outlook等软件，这些软件提供的“

复制、剪切、粘贴”功能的操作方式都是相同的。◼反之，软件习惯于设置F1键为帮助热键，如果某个设计者别出心裁地让F1键成为软件终止的热键，那么在用户渴望得到帮助而伸手击F1键的一刹那，他的工作就此完蛋。相信这个用户会被这另类的F1气疯了。ComputerScience&Techn

ology个性化与一致性的矛盾对于一些非常注重安全性的商业软件（如银行软件）而言，用户界面的“一致性”要比“个性化”重要得多，因为一致的用户界面可以减少用户出错的几率。例如，国内所有银行的自动取款机的用户界面都

是非常相似的，谁也不会设计一些新花样玩玩。而对于非严格系统的应用软件而言，有个性化的界面自然比泯然于众的界面更具有吸引力。尤其是娱乐领域的软件，用户更加喜欢有个性的甚至是颠覆传统的用户界面。设计人员应当根据

软件的需求以及广大用户的喜好，在使用户界面具备必要的“一致性”的前提下，突出该软件的“个性”。不仅让用户使用起来方便，而且对软件留下深刻的印象。ComputerScience&Technology示例分

析IE的Toolbar按钮一般不会有下拉菜单（与流行软件的界面元素不一致）。如果要下拉菜单的话，应该加“下拉”标记。“清理”和“修复”含有立即执行、并且会改动用户计算机设置的含义，用户担心点击“清理”和“修复”按钮将出现不期望的操作。Compute

rScience&Technology5.及时反馈操作信息◼及时反馈信息很重要，至少要让用户心里有数，知道该任务处理得怎么样了，有什么样的结果。◼当用户进行某项操作后，如果过了一会儿（几秒钟）用户界面一点反应都没有，这将使用户感到迷茫和不安，因为

他不知道是自己操作错了还是软件死机了。ComputerScience&Technology示例分析专业软件一般都要提供反馈操作信息的窗口区域ComputerScience&Technology各种对话框好的差的ComputerScience&Technol

ogy6.防错和出错处理◼用户在使用软件的过程中，不可避免地会出现一些错误的操作。倘若用户不小心输入了错误的数据、或者错误地删除了有用的数据，而软件傻乎乎地、将错就错地执行了，那么用户肯定很恼火，以后就不敢

放心地使用软件。◼在设计用户界面时必须考虑防错处理，目的是让用户不必为避免犯错误而提心吊胆、小心翼翼地操作。ComputerScience&Technology6.防错和出错处理-2◼常见的防错处理措施有：对输入数据进行校验

。对于在某些情况下不应该使用的菜单项和命令按钮，应当将其“失效”（变成灰色，可见但不可操作）或者“隐藏”。执行破坏性的操作之前，应当获得用户的确认。例如用户删除一个文件时，应当弹出对话框：“真的要删除该文件吗”，当用户确认后才真正删除文件。尽量提供Undo功能，用户可以撤销刚才的

操作。ComputerScience&Technology7.最少步骤、最高效率◼设计用户界面时应当尽可能地替用户着想，用户应当用最少的操作步骤完成某项操作任务，获得最高的使用效率。（手机充值，超级女声）◼尽管

减少一个操作步骤而完成任务所节约的时间微乎其微（可能只有几秒钟），但是用户的感觉反差却很强烈。ComputerScience&Technology8.合理的布局◼首先，界面的总体布局应当有一定的逻辑性，最好能够与工作流程

吻合。◼其次，窗口（或页面）上的界面元素的布局应当整齐清爽。界面元素应当在水平或者垂直方向对齐，行、列的间距保持一致。窗体的尺寸要合适，界面元素不应放得太满，边界处需要留有一定的空间，也不可过于宽松，显得零乱。界面元素需要一致的对齐

方式，以避免参差不齐的视觉效果。同类的界面元素尽量保持大小一致，起码要保证高度或宽度的一致（例如命令按钮）。逻辑相关的元素要就近放置，便于用户操作。要善于利用窗体和界面元素的空白，以及分割用的线条。Computer

Science&Technology9.合理的色彩◼相比于布局，设计合理的色彩就困难多了，因为色彩的组合千变万化，并且人们对颜色的喜好也极不相同。例如，人们对黑色的理解差异很大。◼一般规律：如果不是为了显示真实感的图形和图像，那么应当限制一帧屏幕的色彩数目，因为人们在观察屏幕的

时候很难同时记住多种色彩。ComputerScience&Technology9.合理的色彩-2◼一般规律：应当根据对象的重要性来选择颜色，重要的对象应当用醒目的色彩表示。使用颜色的时候应当保持一致性，例如错误提示信息用红色表示，正常信息用绿色表示，

那么切勿乱用红色和绿色。在表达信息时，不要过分依赖颜色，因为有些用户可能色盲或色弱。ComputerScience&Technology10.国际化软件的国际化是大势所趋。为了能够更好地适应国内和国际市场，在设计用户界面的时候应当充分考虑语

言和文化的差异。尽可能使用标准的图解方式和国际通行的语言，要求简单易懂，易于翻译，方便不同母语的用户。翻译文字要地道，要符合本地习惯，不能硬翻译，否则太不专业。MSNMessenger在发送文件的时候，出现如下图所示的提示“传输：2407KB还未

完成”。明显是汉语中的病句，居然出现在微软的产品中，显然是硬翻译英文Messenger的结果。正确的翻译应该是“文件正在传输，剩余2407KB”。ComputerScience&Technology10.国际化

特别要留意下列元素的国际化问题：◼字体、提示信息、在线帮助。◼货币、度量单位。◼日期格式（如MM/DD/YY、Year-MM-DD等格式）。◼人的名字、电话号码、通信地址。◼图标、标签。◼阅读顺序或习惯ComputerScience&Technology202

3/7/2648典型界面ComputerScience&Technology2023/7/26496种智能手机界面ComputerScience&Technology2023/7/2650手机操作系统比较ComputerScience&Technology202

3/7/2651WP7系统七大功能亮点-1启动屏幕WindowsPhone7的启动屏幕把对手机用户最重要的应用和功能放在前台，让应用明确而容易操作。ComputerScience&Technology2023

/7/2652WP7系统七大功能亮点-2用户中心用户中心针对人们当今交流的方式而生，带来了朋友们的Facebook状态更新、各种联系信息和电话号码。在这里，用户可以回应朋友们的SNS信息或是直接发送短信。ComputerScience&Technology20

23/7/2653WP7系统七大功能亮点-3游戏中心：集成XboxLIVE游戏中心不仅仅是一个游戏的文件夹，这是一个能访问游戏、寻找新游戏和连接朋友们的地方。它延展了XboxLIVE社交游戏体验，并提供了只有WindowsPhone7才有的移动游戏感受。Computer

Science&Technology2023/7/2654WP7系统七大功能亮点-4ComputerScience&Technology2023/7/2655WP7系统七大功能亮点-5照片中心WindowsPhone7包含一个独立的相机按钮，即使手机处于锁定状态也可以使用，帮助用户抓住

关键瞬间。WindowsPhone还让分享照片变得更简单，通过照片中心可以分享和评论自己与别人的照片。ComputerScience&Technology2023/7/2656WP7系统七大功能亮点-6音视频中心把所有的媒体放在一个地方，包括歌曲

、视频和广播。用户可以听调频广播或是从互联网上下载、聆听音乐。Zune市场也是这个体验的一部分，让用户在移动时也可以了解最新的歌曲、电影，并和朋友们分享。ComputerScience&Technology202

3/7/2657WP7系统七大功能亮点-7本地搜索WindowsPhone7带来了整合的必应搜索体验，内置GPS和必应地图。本地搜索可以迅速提供相关场所的电脑号码、价格、评价和位置。用户可以选择驾车或是徒步路线，观看街景图像和实时交通状况。Comput

erScience&TechnologyWP82023/7/2658ComputerScience&Technology2023/7/2659ComputerScience&Technology2023/7/2660智能手机操作界面分析切换效果Touch和Gesture重

力感应滑动切换遮罩弹出渐入渐出闪屏Zoominzoomouttouchstart:手指放在屏幕上时触发touchend:手指离开屏幕时触发touchmove:手指在屏幕上移动时触发touchcancel:取消Touch事件(这个貌似是

系统触发的)gesturestart:开始手势事件gestureend:停止手势事件gesturechange:改变手势事件ComputerScience&Technology2023/7/2661交互设计五大关键素养-1高超的沟通技能最难

的部分是关于人和管理的，是文化成分。杀手级界面设计要能实现，得说服团队所有人。工作目的就是要能在团队里建立起一种以用户体验为中心的文化，在团队的整个研发过程中，用户体验始终处于指导地位，引导大家做出真正符合市场/用户需求的产品。不会沟通，就会失败；不能说服，就会失败

；不愿倾听，还是会失败。ComputerScience&Technology2023/7/2662交互设计五大关键素养-2了解认知科学只有充分了解人类心灵的能力上限和薄弱之处，才能做出最优的设计和决

策。这些基础知识至关重要，能帮助了解文化和语言背后更深层次的意涵。短时记忆（short-termmemory）能存储多少内容？注意焦点（locusofattention）有哪些特性？从有序列表中选择条目需要多久？习惯如何影响设计？ComputerScien

ce&Technology2023/7/2663交互设计五大关键素养-3学会编程，再菜鸟都比不会好在设计师（设计者）与工程师（实现者）组成团队里，同理心是最关键的要素。没有同理心，实现者不关心设计如何，而设计者也不会讲究实际。如果一家公司的团队纠结于specs和

code之间，来回折腾，颠过来倒过去地搞，说明团队缺乏同理心，设计者与实现者无法相互理解。把设计与实现划清绝对的界线是可怕的。设计-编码者和编码-设计者组成团队才是最优化的配置。ComputerScience&Technology2023/

7/2664交互设计五大关键素养-4创作、创作、再创作伟大的设计师总是不停地做设计。伟大的设计师会纠结于电梯里令人迷惑的按钮布局和ATM机上不妥当的按钮标签。他们会就此拍照、写博客，反复琢磨。如果你不喜欢搞创作做设计，那你根本就不该进入这个行当。你得投入千千万万个小时的

亲身实践，才可能在领域里占有你自己的一席之地。你是在为大家做设计，你得深入了解大家，深入生活。应该有大把小的创意项目，有些完成了的，有些失败了并从中获益匪浅的，还有弃置的。如果没有，说明你没走上身为

设计师的正道。ComputerScience&Technology2023/7/2665交互设计五大关键素养-5学习图美设计软件的外表同样重要。外表影响着可用性。外表不是全部，但却是最显著的东西。交互设计师应该学一学字体样式排版，学一学Swissgridsystem，掌握技巧

，让设计脱颖而出——即使这意味着在一开始不得不模仿别人的风格。作为交互设计师身处“卖想法”的行业。不幸的是，杰出的想法会因为丑陋的草图而被冷落。要想在竞争中崭露头角，你需要学习，成为一名足够好的图美设计师。