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