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面向对象的分析与设计