面向对象分析与设计(卓越计划)312-第12课-人机交互部分的设计-–设计实例课件.ppt

1、LOGO面向对象分析与设计面向对象分析与设计主讲教师：孔磊主讲教师：孔磊LOGO上节回顾v上次课学习了人机交互部分的设计概念v人机界面的设计准则v人机交互部分的分析与设计方法v本次课将继续学习人机交互部分的设计LOGO第12课 人机交互部分的设计人机交互部分的设计 设计实例设计模板1 1界面类设计2 2设计实例 3 3LOGO1.设计模板v模板是已经做好的框架，可用于快速开发界面，使用时只需将模板原有的图片、文字等替换成自己的内容。v我们的实例是网络应用程序，界面主要是以HTML方式的网页形式。因此，我们采用的设计模板是网页的设计模板。LOGO1.设计模板（续）v为什么要先考虑设计模板再考虑界

2、面设计类呢？v系统包含的用例（功能）很多，如果只有一个用例，则是否采用设计模板无所谓，但如果有很多用例，对于用户来说，应采用统一的风格呈现于用户面前。更重要的是，页面之间的导航。LOGO1.设计模板（续）v 设计模板需要的技能：v 1）美工v 无论是页面的布局、色彩的搭配、字体的选择都需要一定的美工功底。v 2）制图v 在纸上或脑海中有了美工效果，下面是将结果呈现在计算机上，可选择的工具为PS、Firework、Flash等。v 3）静态网页设计v 图片做出来后，并不能直接呈现在网页上，所以需要使用HTML进行相应的网页设计，动画效果还需要掌握一定的javascript。v 4）动态网页设计v

3、 要实现与用户的交互，掌握一门动态语言必不可少，可选择的有ASP、PHP、JSP、JQuery、Java和ASP.NET。LOGO1.设计模板（续）v对于没有经验的学习者，模仿是较理想的学习途径。v可参考其他的同类的软件进行模仿。LOGO1.设计模板（续）v下面来看一些优秀的界面设计：金蝶LOGO1.设计模板（续）v下面来看一些优秀的界面设计：金蝶LOGO1.设计模板（续）v下面来看一些优秀的界面设计：致远G6LOGO1.设计模板（续）v以下是一些常见的网页设计模板：LOGO1.设计模板（续）v以下是一些常见的网页设计模板：LOGO1.设计模板（续）v以下是一些常见的网页设计模板：LOGO1.

4、设计模板（续）v以下是一些常见的网页设计模板：LOGO1.设计模板（续）v以下是一些常见的网页设计模板：LOGO2.界面类设计v1）确定界面类中要描述的是哪些信息v2）确定这些信息使用什么界面类元素进行设计v3）使用类图描述界面类的完整设计过程LOGO2.界面类设计（续）v1）确定界面类中要描述的是哪些信息v可以参考用例图、类图和顺序图，确定界面类要完成的目标是什么，用类图中哪些元素可以描述，动态行为是什么。LOGO2.界面类设计（续）v2）确定这些信息使用什么界面类元素进行设计v根据程序设计的经验，确定使用何种元素描述设计结果，其过程可能需要反复迭代。v主要界面类元素根据具体的程序设计语言和

5、环境确定。比如标签类、文本框类、按钮类等。LOGO2.界面类设计（续）v实例分析：LOGO2.界面类设计（续）v3）使用类图描述界面类的完整设计过程v将界面类中各设计元素用类图进行描述，完成整个设计过程LOGO3.设计实例v以提出用人申请用例为例：v1）设计模板v2）设计界面类LOGO3.设计实例（续）v1）设计模板v我们的实例是整个系统中的其中一个用例，所有用例都完成后应采用统一的模板，便于用户进行操作执行功能。v设计模板是富有创造力的过程v对于初次学习的同学，建议模仿学习。LOGO3.设计实例（续）v1）设计模板的布局标题导航工作区LOGO3.设计实例（续）v1）设计模板预想界面LOGO3

6、.设计实例（续）v2）设计界面类v确定界面类中要描述的是哪些信息v提出用人申请整个过程呈现给用户的界面，主要是提交招聘需求申报表的内容v确定这些信息使用什么界面类元素进行设计v提交-按钮；其他描述招聘需求申报表的信息可使用对应的界面类元素实现v使用类图描述界面类的完整设计过程LOGO3.设计实例（续）v招聘需求申报表涉及的类：LOGOv设计界面类草图申请部门Department填报日期SubmissionDate标签类下拉列表框类标签类日期选择类学历AcademicQualification标签类下拉列表框类专业素质要求ProfessionalRequirement标签类多行文本框类LOGO3.设计实例（续）v界面类设计结果LOGO课程小结1设计模板2界面类设计3人机交互部分设计实例LOGO面向对象的分析与设计