TOPCARES－CDIO教育理念在界面应用技术课程教学中的应用

□ 赵志弘 焦庆伟

CDIO高等工程教育模式是由4所著名大学提出的一种现代高科技工程教育理念。TOPCARES－CDIO将一体化教育作为核心理念，从这种程度上打破了传统教育模式。在以TOPCARES－CDIO为核心的教学改革中，学校要求在教学课程增加一些实践项目，让学生在这些实践项目中循序渐进地掌握八大核心能力。包括促进团队的和谐合作能力、跨文化开放性、关注员工自身素质发展、随时掌握客户伙伴的想法、追求持续改善、成为价值的道德规范、推动卓越运营、敏锐战略决策。软件中的界面设计要将信息统一、模块划分和交互引导有效结合起来，是将文字、图形、背景色彩或图案及交互设计在一定的空间界面内聚集在一起，主要的设计过程包括需求分析、信息架构设计、界面布局模式应用、界面元素布局模式应用、视觉及交互设计过程。本文以教学过程中的“学院新生报到助手”项目开发为例，分析教学过程中所处的各个阶段。

一、用户研究阶段

确立功能。界面设计的中心是“以人为中心设计”，好的界面设计并非始于图片，而是始于对人的理解。在设计之初，教师应该告诉学生用户研究的方法，即工作观察和情境访谈、调查问卷、用户模型/人物角色、焦点小组/焦点团体、焦点群众。在课程中我们应该讲解每种方法具体如何使用，学生根据自己的项目使用对象的特征选择具体方法进行研究。如“报到助手”通过采用用户访谈方法分析出项目应具有预报名、用户查询录取信息、统计新生报名信息、注册、修改密码、找回密码、登录等功能。

二、信息架构阶段

信息架构如同建筑物的架构一般，影响身陷其环境中的人们:优良的架构，可以让使用者更加便利地存取资料、快速掌握主要内容;不好的信息架构，将使人如同身陷于迷宫中，失去方向。“信息架构”包含以下过程:架构设计，决定网站或应用中信息单元的大小(信息粒度);决定组织方式，将组件组合成有意义而且各有自己的特点;类别，有时又称为逻辑分类、归类，给这些所产生出来的每一个类别一个合适的名称。

三、界面布局模式的应用

界面布局是网页设计中重要的设计引导规划环节，在此过程中学生可以根据自己的项目主题进行页面布局，进行页面布局可以从以下几个方面入手。

(一)合理的视觉层次。应该能让用户看出该页面所要表达的信息结构，我们应该从页面布局中进行呈现。各页面元素的相对重要性，各页面元素之间的关系。在视觉层次方面重点关注模块的大小，模块的对齐方式，紧密与留白大小。

(二)视觉流。视觉流可以用来在用户扫描页面的时候跟踪用户的视线，良好的页面设计上只会有几个焦点，好的视觉层次结构会利用焦点来引导视线。从以下几个方面创建良好的视觉流。一是暗示线路，使用暗示线路将页面上的元素串在一起，这样视线就可以顺着这条视觉线往下阅读。二是行动号召，将行动号召放在希望用户最先看到的文字下面。如果不在乎用户是否看到文字，也可以将行动号召放在空白的地方。可以将网页布局分为:“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、海报型布局、标题文本型布局等。

四、界面元素布局模式应用

软件的界面元素一般有:导航、列表、动作与命令、树、表格与其他信息图形、表单与控件。下面仅以导航元素如何在课程中开展教学，学生可以结合用户研究与信息架构阶段得出的结果进行导航设计。在这个环节可以介绍导航的设计模式有清楚的入口点、菜单页面、金字塔、模态面板、深度链接状态、逃生舱、胖菜单、页脚站点地图、面包屑层级结构等模式。学生了解每个模式怎么应用后，很容易根据自己的项目选择合适的导航模式，如“报道助手”项目采用了清楚的入口点模式。从总体来说，页面元素布局要考虑很多因素，包括文本、图片，这些放在后面视觉层次阐述。

五、视觉层次及交互设计阶段的实施

在界面设计过程中，大家普遍认同界面上的内容最重要，但是能够在一瞬间抓住用户眼球的是外观。在这个环节，要让学生明白可用性与美观性在界面上是不冲突的，我们能够同时拥有美感与功能性。具体可以从以下五个方面做好视觉设计:一是传播产品理念。二是简洁大方。三是页面层级风格一致。四是主题突出。五是防止页面偏幼稚化。

在这一环节重点强调页面中主题色、辅助色、点睛色的选择，根据经验这三者的比例应该控制在75%，20%，5%。其次就是字体的大小应该控制在三种，图片的展示也应该保证清晰可见。从界面层级关系来说，首界面、二级界面、三级界面应该保持风格一致。在交互设计阶段，界面交互是用户与软件的对话，交互主要包括视觉上交互和行为功能交互。常见的视觉上的交互形态有表单、导航条、搜索栏和按钮等。这些重要元素都应该在页面中的突出位置或者黄金分割点位置，这样才能捕获人们的视觉重心。因而，在元素布局阶段，主要考虑页面元素的位置摆放，争取做到人性化的理念要求。在开展的项目教学中，学生主要考虑外部设计，排放位置等因素;导航条应该设计在明显的位置，能更好地发挥导引作用;搜索栏可以使搜索更加便利，所以要把它放置在显眼的位置。

六、技术实施

在整个项目教学过程中采用AXURE软件进行模型制作，根据项目的思维导图制作界面框架，然后根据需求在框架中添加文字、图片、视频等元素。该软件同时可以完成高级交互功能。

七、运行阶段

通过AXURE软件制作好界面之后，需要通过浏览器预览，或者可以将其输出Html文件进行预览，可以方面地在他人电脑上进行展示。

八、结语

随着用户对软件界面的要求质量越来越高，界面应用技术这门课程也就成为软件工程专业的必修课。学院采取CDIO工程教育模式教学，六个教学思想刚好可以回答为什么需要在课程中引入项目教学。在整个界面开发过程中，我们仍然按照软件开发的过程进行教学。从而也进一步加深了学生对软件开发过程的了解。学生通过项目开发确实掌握了软件界面工具的使用，从而为实际工作打下坚实的基础。

［1］刘石，李婷婷．网页设计中的版式设计——CDIO模式下以项目为导向的网页设计课程教学实践［J］．艺术科技，2012

［2］查建中．论“做中学”战略下的CDIO模式［J］．高等工程教育研究，2008，3:1 ～9

［3］郑荣茂．基于 CDIO的移动应用专业实验教学改革［J］．韶关学院学报·自然科学2008，8(33):109～112