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

面向对象分析与设计主讲教师：孔磊面向对象分析与设计主讲教师：孔磊上节回顾上次课学习了人机交互部分的设计概念人机界面的设计准则人机交互部分的分析与设计方法本次课将继续学习人机交互部分的设计上节回顾上次课学习了人机交互部分的设计概念第12课人机交互部分的设计

–设计实例设计模板1界面类设计2设计实例

3第12课人机交互部分的设计–设计实例设计模板1界面类设计1.设计模板模板是已经做好的框架，可用于快速开发界面，使用时只需将模板原有的图片、文字等替换成自己的内容。我们的实例是网络应用程序，界面主要是以HTML方式的网页形式。因此，我们采用的设计模板是网页的设计模板。1.设计模板模板是已经做好的框架，可用于快速开发界面，使用时1.设计模板（续）为什么要先考虑设计模板再考虑界面设计类呢？系统包含的用例（功能）很多，如果只有一个用例，则是否采用设计模板无所谓，但如果有很多用例，对于用户来说，应采用统一的风格呈现于用户面前。更重要的是，页面之间的导航。1.设计模板（续）为什么要先考虑设计模板再考虑界面设计类呢？1.设计模板（续）设计模板需要的技能：1）美工无论是页面的布局、色彩的搭配、字体的选择都需要一定的美工功底。2）制图在纸上或脑海中有了美工效果，下面是将结果呈现在计算机上，可选择的工具为PS、Firework、Flash等。3）静态网页设计图片做出来后，并不能直接呈现在网页上，所以需要使用HTML进行相应的网页设计，动画效果还需要掌握一定的javascript。4）动态网页设计要实现与用户的交互，掌握一门动态语言必不可少，可选择的有ASP、PHP、JSP、JQuery、Java和ASP.NET。1.设计模板（续）设计模板需要的技能：1.设计模板（续）对于没有经验的学习者，模仿是较理想的学习途径。可参考其他的同类的软件进行模仿。1.设计模板（续）对于没有经验的学习者，模仿是较理想的学习途1.设计模板（续）下面来看一些优秀的界面设计：金蝶1.设计模板（续）下面来看一些优秀的界面设计：金蝶1.设计模板（续）下面来看一些优秀的界面设计：金蝶1.设计模板（续）下面来看一些优秀的界面设计：金蝶1.设计模板（续）下面来看一些优秀的界面设计：致远G61.设计模板（续）下面来看一些优秀的界面设计：致远G61.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：2.界面类设计1）确定界面类中要描述的是哪些信息2）确定这些信息使用什么界面类元素进行设计3）使用类图描述界面类的完整设计过程2.界面类设计1）确定界面类中要描述的是哪些信息2.界面类设计（续）1）确定界面类中要描述的是哪些信息可以参考用例图、类图和顺序图，确定界面类要完成的目标是什么，用类图中哪些元素可以描述，动态行为是什么。2.界面类设计（续）1）确定界面类中要描述的是哪些信息2.界面类设计（续）2）确定这些信息使用什么界面类元素进行设计根据程序设计的经验，确定使用何种元素描述设计结果，其过程可能需要反复迭代。主要界面类元素根据具体的程序设计语言和环境确定。比如标签类、文本框类、按钮类等。2.界面类设计（续）2）确定这些信息使用什么界面类元素进行设2.界面类设计（续）实例分析：2.界面类设计（续）实例分析：2.界面类设计（续）3）使用类图描述界面类的完整设计过程将界面类中各设计元素用类图进行描述，完成整个设计过程2.界面类设计（续）3）使用类图描述界面类的完整设计过程3.设计实例以提出用人申请用例为例：1）设计模板2）设计界面类3.设计实例以提出用人申请用例为例：3.设计实例（续）1）设计模板我们的实例是整个系统中的其中一个用例，所有用例都完成后应采用统一的模板，便于用户进行操作执行功能。设计模板是富有创造力的过程对于初次学习的同学，建议模仿学习。3.设计实例（续）1）设计模板3.设计实例（续）1）设计模板的布局标题导航工作区3.设计实例（续）1）设计模板的布局标题导航工作区3.设计实例（续）1）设计模板预想界面3.设计实例（续）1）设计模板预想界面3.设计实例（续）2）设计界面类确定界面类中要描述的是哪些信息提出用人申请整个过程呈现给用户的界面，主要是提交招聘需求申报表的内容确定这些信息使用什么界面类元素进行设计提交-按钮；其他描述招聘需求申报表的信息可使用对应的界面类元素实现使用类图描述界面类的完整设计过程3.设计实例（续）2）设计界面类3.设计实例（续）招聘需求申报表涉及的类：3.设计实例（续）招聘需求申报表涉及的类：设计界面类草图申请部门Department填报日期SubmissionDate标签类下拉列表框类标签类日期选择类……学历AcademicQualification标签类下拉列表框类……专业素质要求ProfessionalRequirement标签类多行文本框类………………设计界面类草图申请部门Department填报日期Submi3.设计实例（续）界面类设计结果3.设计实例（续）界面类设计结果课程小结1设计模板2界面类设计3人机交互部分设计实例课程小结1设计模板2界面类设计3人机交互部分设计实例面向对象的分析与设计TryYourBest!面向对象的分析与设计TryYourBest!www.t面向对象分析与设计主讲教师：孔磊面向对象分析与设计主讲教师：孔磊上节回顾上次课学习了人机交互部分的设计概念人机界面的设计准则人机交互部分的分析与设计方法本次课将继续学习人机交互部分的设计上节回顾上次课学习了人机交互部分的设计概念第12课人机交互部分的设计

–设计实例设计模板1界面类设计2设计实例

3第12课人机交互部分的设计–设计实例设计模板1界面类设计1.设计模板模板是已经做好的框架，可用于快速开发界面，使用时只需将模板原有的图片、文字等替换成自己的内容。我们的实例是网络应用程序，界面主要是以HTML方式的网页形式。因此，我们采用的设计模板是网页的设计模板。1.设计模板模板是已经做好的框架，可用于快速开发界面，使用时1.设计模板（续）为什么要先考虑设计模板再考虑界面设计类呢？系统包含的用例（功能）很多，如果只有一个用例，则是否采用设计模板无所谓，但如果有很多用例，对于用户来说，应采用统一的风格呈现于用户面前。更重要的是，页面之间的导航。1.设计模板（续）为什么要先考虑设计模板再考虑界面设计类呢？1.设计模板（续）设计模板需要的技能：1）美工无论是页面的布局、色彩的搭配、字体的选择都需要一定的美工功底。2）制图在纸上或脑海中有了美工效果，下面是将结果呈现在计算机上，可选择的工具为PS、Firework、Flash等。3）静态网页设计图片做出来后，并不能直接呈现在网页上，所以需要使用HTML进行相应的网页设计，动画效果还需要掌握一定的javascript。4）动态网页设计要实现与用户的交互，掌握一门动态语言必不可少，可选择的有ASP、PHP、JSP、JQuery、Java和ASP.NET。1.设计模板（续）设计模板需要的技能：1.设计模板（续）对于没有经验的学习者，模仿是较理想的学习途径。可参考其他的同类的软件进行模仿。1.设计模板（续）对于没有经验的学习者，模仿是较理想的学习途1.设计模板（续）下面来看一些优秀的界面设计：金蝶1.设计模板（续）下面来看一些优秀的界面设计：金蝶1.设计模板（续）下面来看一些优秀的界面设计：金蝶1.设计模板（续）下面来看一些优秀的界面设计：金蝶1.设计模板（续）下面来看一些优秀的界面设计：致远G61.设计模板（续）下面来看一些优秀的界面设计：致远G61.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：1.设计模板（续）以下是一些常见的网页设计模板：2.界面类设计1）确定界面类中要描述的是哪些信息2）确定这些信息使用什么界面类元素进行设计3）使用类图描述界面类的完整设计过程2.界面类设计1）确定界面类中要描述的是哪些信息2.界面类设计（续）1）确定界面类中要描述的是哪些信息可以参考用例图、类图和顺序图，确定界面类要完成的目标是什么，用类图中哪些元素可以描述，动态行为是什么。2.界面类设计（续）1）确定界面类中要描述的是哪些信息2.界面类设计（续）2）确定这些信息使用什么界面类元素进行设计根据程序设计的经验，确定使用何种元素描述设计结果，其过程可能需要反复迭代。主要界面类元素根据具体的程序设计语言和环境确定。比如标签类、文本框类、按钮类等。2.界面类设计（续）2）确定这些信息使用什么界面类元素进行设2.界面类设计（续）实例分析：2.界面类设计（续）实例分析：2.界面类设计（续）3）使用类图描述界面类的完整设计过程将界面类中各设计元素用类图进行描述，完成整个设计过程2.界面类设计（续）3）使用类图描述界面类的完整设计过程3.设计实例以提出用人申请用例为例：1）设计模板2）设计界面类3.设计实例以提出用人申请用例为例：3.设计实例（续）1）设计模板我们的实例是整个系统中的其中一个用例，所有用例都完成后应采用统一的模板，便于用户进行操作执行功能。设计模板是富有创造力的过程对于初次学习的同学，建议模仿学习。3.设计实例（续）1）设计模板3.设计实例（续）1）设计模板的布局标题导航工作区3.设计实例（续）1）设计模板的布局标题导航工作区3.设计实例（续）1）设计模板预想界面3.设计实例（续）1）设计模板预想界面3.设计实例（续）2）设计界面类确定界面类中要描述的是哪些信息提出用人申请整个过程呈现给用户的界面，主要是提交招聘需求申报表的内容确定这些信息使用什么界面类元素进行设计提交-按钮；其他描述招聘需求申报表的信息可使用对应的界面类元素实现使用类图描述界面类的完整设计过程3.设计实例（续）2）设计界面类3.设计实例（续）招聘需求申报表涉及的类：3.设计实例（续）招聘需求申报表涉及的类：设计界面类草图申请部门Department填报日期SubmissionDate标签类下拉列表框类标签类日期选择类……学历AcademicQu