□ 趙志弘 焦慶偉

CDIO高等工程教育模式是由4所著名大學(xué)提出的一種現(xiàn)代高科技工程教育理念。TOPCARES－CDIO將一體化教育作為核心理念，從這種程度上打破了傳統(tǒng)教育模式。在以TOPCARES－CDIO為核心的教學(xué)改革中，學(xué)校要求在教學(xué)課程增加一些實(shí)踐項(xiàng)目，讓學(xué)生在這些實(shí)踐項(xiàng)目中循序漸進(jìn)地掌握八大核心能力。包括促進(jìn)團(tuán)隊(duì)的和諧合作能力、跨文化開(kāi)放性、關(guān)注員工自身素質(zhì)發(fā)展、隨時(shí)掌握客戶伙伴的想法、追求持續(xù)改善、成為價(jià)值的道德規(guī)范、推動(dòng)卓越運(yùn)營(yíng)、敏銳戰(zhàn)略決策。軟件中的界面設(shè)計(jì)要將信息統(tǒng)一、模塊劃分和交互引導(dǎo)有效結(jié)合起來(lái)，是將文字、圖形、背景色彩或圖案及交互設(shè)計(jì)在一定的空間界面內(nèi)聚集在一起，主要的設(shè)計(jì)過(guò)程包括需求分析、信息架構(gòu)設(shè)計(jì)、界面布局模式應(yīng)用、界面元素布局模式應(yīng)用、視覺(jué)及交互設(shè)計(jì)過(guò)程。本文以教學(xué)過(guò)程中的“學(xué)院新生報(bào)到助手”項(xiàng)目開(kāi)發(fā)為例，分析教學(xué)過(guò)程中所處的各個(gè)階段。

一、用戶研究階段

確立功能。界面設(shè)計(jì)的中心是“以人為中心設(shè)計(jì)”，好的界面設(shè)計(jì)并非始于圖片，而是始于對(duì)人的理解。在設(shè)計(jì)之初，教師應(yīng)該告訴學(xué)生用戶研究的方法，即工作觀察和情境訪談、調(diào)查問(wèn)卷、用戶模型/人物角色、焦點(diǎn)小組/焦點(diǎn)團(tuán)體、焦點(diǎn)群眾。在課程中我們應(yīng)該講解每種方法具體如何使用，學(xué)生根據(jù)自己的項(xiàng)目使用對(duì)象的特征選擇具體方法進(jìn)行研究。如“報(bào)到助手”通過(guò)采用用戶訪談方法分析出項(xiàng)目應(yīng)具有預(yù)報(bào)名、用戶查詢錄取信息、統(tǒng)計(jì)新生報(bào)名信息、注冊(cè)、修改密碼、找回密碼、登錄等功能。

二、信息架構(gòu)階段

信息架構(gòu)如同建筑物的架構(gòu)一般，影響身陷其環(huán)境中的人們:優(yōu)良的架構(gòu)，可以讓使用者更加便利地存取資料、快速掌握主要內(nèi)容;不好的信息架構(gòu)，將使人如同身陷于迷宮中，失去方向?！靶畔⒓軜?gòu)”包含以下過(guò)程:架構(gòu)設(shè)計(jì)，決定網(wǎng)站或應(yīng)用中信息單元的大小(信息粒度);決定組織方式，將組件組合成有意義而且各有自己的特點(diǎn);類別，有時(shí)又稱為邏輯分類、歸類，給這些所產(chǎn)生出來(lái)的每一個(gè)類別一個(gè)合適的名稱。

三、界面布局模式的應(yīng)用

界面布局是網(wǎng)頁(yè)設(shè)計(jì)中重要的設(shè)計(jì)引導(dǎo)規(guī)劃環(huán)節(jié)，在此過(guò)程中學(xué)生可以根據(jù)自己的項(xiàng)目主題進(jìn)行頁(yè)面布局，進(jìn)行頁(yè)面布局可以從以下幾個(gè)方面入手。

(一)合理的視覺(jué)層次。應(yīng)該能讓用戶看出該頁(yè)面所要表達(dá)的信息結(jié)構(gòu)，我們應(yīng)該從頁(yè)面布局中進(jìn)行呈現(xiàn)。各頁(yè)面元素的相對(duì)重要性，各頁(yè)面元素之間的關(guān)系。在視覺(jué)層次方面重點(diǎn)關(guān)注模塊的大小，模塊的對(duì)齊方式，緊密與留白大小。

(二)視覺(jué)流。視覺(jué)流可以用來(lái)在用戶掃描頁(yè)面的時(shí)候跟蹤用戶的視線，良好的頁(yè)面設(shè)計(jì)上只會(huì)有幾個(gè)焦點(diǎn)，好的視覺(jué)層次結(jié)構(gòu)會(huì)利用焦點(diǎn)來(lái)引導(dǎo)視線。從以下幾個(gè)方面創(chuàng)建良好的視覺(jué)流。一是暗示線路，使用暗示線路將頁(yè)面上的元素串在一起，這樣視線就可以順著這條視覺(jué)線往下閱讀。二是行動(dòng)號(hào)召，將行動(dòng)號(hào)召放在希望用戶最先看到的文字下面。如果不在乎用戶是否看到文字，也可以將行動(dòng)號(hào)召放在空白的地方?？梢詫⒕W(wǎng)頁(yè)布局分為:“國(guó)”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、海報(bào)型布局、標(biāo)題文本型布局等。

四、界面元素布局模式應(yīng)用

軟件的界面元素一般有:導(dǎo)航、列表、動(dòng)作與命令、樹(shù)、表格與其他信息圖形、表單與控件。下面僅以導(dǎo)航元素如何在課程中開(kāi)展教學(xué)，學(xué)生可以結(jié)合用戶研究與信息架構(gòu)階段得出的結(jié)果進(jìn)行導(dǎo)航設(shè)計(jì)。在這個(gè)環(huán)節(jié)可以介紹導(dǎo)航的設(shè)計(jì)模式有清楚的入口點(diǎn)、菜單頁(yè)面、金字塔、模態(tài)面板、深度鏈接狀態(tài)、逃生艙、胖菜單、頁(yè)腳站點(diǎn)地圖、面包屑層級(jí)結(jié)構(gòu)等模式。學(xué)生了解每個(gè)模式怎么應(yīng)用后，很容易根據(jù)自己的項(xiàng)目選擇合適的導(dǎo)航模式，如“報(bào)道助手”項(xiàng)目采用了清楚的入口點(diǎn)模式。從總體來(lái)說(shuō)，頁(yè)面元素布局要考慮很多因素，包括文本、圖片，這些放在后面視覺(jué)層次闡述。

五、視覺(jué)層次及交互設(shè)計(jì)階段的實(shí)施

在界面設(shè)計(jì)過(guò)程中，大家普遍認(rèn)同界面上的內(nèi)容最重要，但是能夠在一瞬間抓住用戶眼球的是外觀。在這個(gè)環(huán)節(jié)，要讓學(xué)生明白可用性與美觀性在界面上是不沖突的，我們能夠同時(shí)擁有美感與功能性。具體可以從以下五個(gè)方面做好視覺(jué)設(shè)計(jì):一是傳播產(chǎn)品理念。二是簡(jiǎn)潔大方。三是頁(yè)面層級(jí)風(fēng)格一致。四是主題突出。五是防止頁(yè)面偏幼稚化。

在這一環(huán)節(jié)重點(diǎn)強(qiáng)調(diào)頁(yè)面中主題色、輔助色、點(diǎn)睛色的選擇，根據(jù)經(jīng)驗(yàn)這三者的比例應(yīng)該控制在75%，20%，5%。其次就是字體的大小應(yīng)該控制在三種，圖片的展示也應(yīng)該保證清晰可見(jiàn)。從界面層級(jí)關(guān)系來(lái)說(shuō)，首界面、二級(jí)界面、三級(jí)界面應(yīng)該保持風(fēng)格一致。在交互設(shè)計(jì)階段，界面交互是用戶與軟件的對(duì)話，交互主要包括視覺(jué)上交互和行為功能交互。常見(jiàn)的視覺(jué)上的交互形態(tài)有表單、導(dǎo)航條、搜索欄和按鈕等。這些重要元素都應(yīng)該在頁(yè)面中的突出位置或者黃金分割點(diǎn)位置，這樣才能捕獲人們的視覺(jué)重心。因而，在元素布局階段，主要考慮頁(yè)面元素的位置擺放，爭(zhēng)取做到人性化的理念要求。在開(kāi)展的項(xiàng)目教學(xué)中，學(xué)生主要考慮外部設(shè)計(jì)，排放位置等因素;導(dǎo)航條應(yīng)該設(shè)計(jì)在明顯的位置，能更好地發(fā)揮導(dǎo)引作用;搜索欄可以使搜索更加便利，所以要把它放置在顯眼的位置。

六、技術(shù)實(shí)施

在整個(gè)項(xiàng)目教學(xué)過(guò)程中采用AXURE軟件進(jìn)行模型制作，根據(jù)項(xiàng)目的思維導(dǎo)圖制作界面框架，然后根據(jù)需求在框架中添加文字、圖片、視頻等元素。該軟件同時(shí)可以完成高級(jí)交互功能。

七、運(yùn)行階段

通過(guò)AXURE軟件制作好界面之后，需要通過(guò)瀏覽器預(yù)覽，或者可以將其輸出Html文件進(jìn)行預(yù)覽，可以方面地在他人電腦上進(jìn)行展示。

八、結(jié)語(yǔ)

隨著用戶對(duì)軟件界面的要求質(zhì)量越來(lái)越高，界面應(yīng)用技術(shù)這門課程也就成為軟件工程專業(yè)的必修課。學(xué)院采取CDIO工程教育模式教學(xué)，六個(gè)教學(xué)思想剛好可以回答為什么需要在課程中引入項(xiàng)目教學(xué)。在整個(gè)界面開(kāi)發(fā)過(guò)程中，我們?nèi)匀话凑哲浖_(kāi)發(fā)的過(guò)程進(jìn)行教學(xué)。從而也進(jìn)一步加深了學(xué)生對(duì)軟件開(kāi)發(fā)過(guò)程的了解。學(xué)生通過(guò)項(xiàng)目開(kāi)發(fā)確實(shí)掌握了軟件界面工具的使用，從而為實(shí)際工作打下堅(jiān)實(shí)的基礎(chǔ)。

［1］劉石，李婷婷．網(wǎng)頁(yè)設(shè)計(jì)中的版式設(shè)計(jì)——CDIO模式下以項(xiàng)目為導(dǎo)向的網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)實(shí)踐［J］．藝術(shù)科技，2012

［2］查建中．論“做中學(xué)”戰(zhàn)略下的CDIO模式［J］．高等工程教育研究，2008，3:1 ～9

［3］鄭榮茂．基于 CDIO的移動(dòng)應(yīng)用專業(yè)實(shí)驗(yàn)教學(xué)改革［J］．韶關(guān)學(xué)院學(xué)報(bào)·自然科學(xué)2008，8(33):109～112