廣州市輕工職業(yè)學(xué)校 梁瑞齡

一、引言

工學(xué)結(jié)合課程的內(nèi)涵是以工作過程系統(tǒng)化課程為基本，突出以學(xué)生為主體，工作(學(xué)習(xí))過程符合人的職業(yè)成長規(guī)律，源自于職業(yè)崗位，內(nèi)容、要求和環(huán)境具有真實(shí)性、全面性和學(xué)習(xí)性，結(jié)構(gòu)完整遵循系統(tǒng)化原則。其基本特征是：工作中學(xué)習(xí)，工學(xué)一體化，實(shí)現(xiàn)學(xué)習(xí)者綜合職業(yè)能力的培養(yǎng)。本文以《UI設(shè)計(jì)與實(shí)操》課程實(shí)踐模式，探討基于工學(xué)結(jié)合的校內(nèi)課程實(shí)施方式方法。

二、開展UI課程的前期準(zhǔn)備

工學(xué)結(jié)合課程具備以下兩個(gè)特征：(1)工學(xué)結(jié)合課程的載體是綜合性的“典型工作任務(wù)”；(2)工學(xué)結(jié)合課程的實(shí)施,要讓學(xué)生親自經(jīng)歷結(jié)構(gòu)完整的工作過程。目前廣州市中職學(xué)校計(jì)算機(jī)專業(yè)普遍開設(shè)了圖像制作、網(wǎng)頁設(shè)計(jì)的課程，大部分以單個(gè)案例教學(xué)法教學(xué)法為主，學(xué)習(xí)任務(wù)隨意性較大，有時(shí)為了一些簡單的知識點(diǎn)，設(shè)計(jì)出一個(gè)項(xiàng)目。學(xué)生缺失了在一個(gè)職業(yè)活動情境中，參與具有結(jié)構(gòu)完整的工作過程,包括計(jì)劃、實(shí)施以及工作成果檢查評價(jià)等步驟。筆者在參加發(fā)改委推行的雙師型培訓(xùn)過程中，得到去企業(yè)實(shí)習(xí)和交流的機(jī)會，參與了2010年亞運(yùn)會O/S內(nèi)部系統(tǒng)界面設(shè)計(jì)，與及南沙區(qū)黃閣鎮(zhèn)政府OA辦公系統(tǒng)UI設(shè)計(jì)的工作，意識到以往網(wǎng)頁設(shè)計(jì)、圖像制作課程單個(gè)知識點(diǎn)的案例教學(xué)法，不利于學(xué)生全面了解企業(yè)的工作模式，缺乏和用戶的有效溝通，造成參加工作后學(xué)校的知識點(diǎn)與工作崗位要求脫節(jié)，于是筆者編寫了《UI設(shè)計(jì)與實(shí)操》的校內(nèi)教程，并向?qū)W校申請?jiān)鲈O(shè)該課程，從用戶需求分析開始，到書寫UI(用戶界面)規(guī)范，建立用戶界面執(zhí)行準(zhǔn)則、設(shè)計(jì)準(zhǔn)則，最后具體實(shí)現(xiàn)應(yīng)用實(shí)例，使學(xué)生在課堂中親自經(jīng)歷結(jié)構(gòu)完整的工作過程。

三、基于工學(xué)結(jié)合的課程標(biāo)準(zhǔn)

課程標(biāo)準(zhǔn)需要根據(jù)專業(yè)培養(yǎng)目標(biāo)，期望學(xué)生達(dá)到的知識、能力的基本要求而制定，是編寫教材、進(jìn)行教學(xué)任務(wù)、評價(jià)的依據(jù)。筆者根據(jù)當(dāng)前企業(yè)的崗位情況，將理論知識、素質(zhì)培訓(xùn)、實(shí)際操作技能進(jìn)行整合。

與UI課程相關(guān)的工作崗位有UI設(shè)計(jì)師、網(wǎng)頁制作WEB前端開發(fā)、手機(jī)應(yīng)用程序美工、游戲界面設(shè)計(jì)、淘寶美工等等，本課程面向的是中等職業(yè)學(xué)校二年級學(xué)生，他們已經(jīng)在前期學(xué)習(xí)過《圖像制作》、《網(wǎng)頁設(shè)計(jì)》的課程，同時(shí)在學(xué)習(xí)《FLASH二維動畫設(shè)計(jì)》。UI設(shè)計(jì)課程主要介紹有關(guān)網(wǎng)站、手機(jī)等操作系統(tǒng)用戶界面的設(shè)計(jì)，通過色彩、構(gòu)圖等各種技巧，培養(yǎng)學(xué)生對圖標(biāo)、logo、菜單、banner的設(shè)計(jì)能力，提高學(xué)生對素材的原創(chuàng)能力，筆者結(jié)合自己社會專業(yè)的社會實(shí)踐把教學(xué)環(huán)節(jié)設(shè)計(jì)為幾個(gè)典型的工作任務(wù)：大運(yùn)會住宿安排系統(tǒng)界面設(shè)計(jì)、汽車網(wǎng)站主頁面設(shè)計(jì)，家居網(wǎng)站主頁面設(shè)計(jì)等。再在里面劃分為客戶需求分析，UI規(guī)范文檔制定，UI界面具體構(gòu)造等幾個(gè)子任務(wù)，使學(xué)生參與從客戶需求，訂單生產(chǎn)出發(fā)，到整個(gè)項(xiàng)目完成的完整工作過程，具有較強(qiáng)的操作性和時(shí)效性。

表1 工作項(xiàng)目綜合評價(jià)表

四、基于工學(xué)結(jié)合的UI課程的典型工作任務(wù)

(一)企業(yè)調(diào)研

通過筆者在廣州智聯(lián)公司實(shí)習(xí)期間，了解到企業(yè)基于互聯(lián)網(wǎng)B/S模式以及基于客戶端C/S模式的UI設(shè)計(jì)流程，大概分為需求分析、項(xiàng)目細(xì)化、項(xiàng)目構(gòu)建三個(gè)階段，其中項(xiàng)目構(gòu)建階段分為：(1)UI設(shè)計(jì)人員與界面制作人員共同合作，制作出前端界面并規(guī)范UI 文檔；(2)界面制作人員與技術(shù)人員共同合作，完成前端界面制作與及后臺技術(shù)實(shí)現(xiàn)。對于UI課程教學(xué)而言，主要關(guān)注需求分析階段、項(xiàng)目細(xì)化階段與及構(gòu)建階段中的與界面設(shè)計(jì)人員合作部分(部分小型公司UI設(shè)計(jì)人員兼任界面制作)。

(二)工作任務(wù)

下文以“深圳大運(yùn)會住宿安排管理系統(tǒng)”的界面提練為典型工作任務(wù)，作為工學(xué)結(jié)合的教材并實(shí)施教學(xué)，工作流程如圖1所示。

(三)工作任務(wù)分析

大運(yùn)會住宿安排管理系統(tǒng)是基于WEB B/S模式下使用的內(nèi)部系統(tǒng)，界面設(shè)計(jì)功能區(qū)包括住宿規(guī)則管理、住宿計(jì)劃安排管理、入住退房跟蹤管理、訪客通行管理。同時(shí)要求能與交通計(jì)劃管理、基本信息管理、系統(tǒng)管理幾個(gè)大功能模塊進(jìn)行訪問對接。要求UI設(shè)計(jì)遵循易用性、規(guī)范性、合理性、一致性、美觀性的幾個(gè)原則。

(四)教學(xué)分析

在整個(gè)教學(xué)實(shí)施過程中，學(xué)生是學(xué)習(xí)過程的主體，教師是學(xué)習(xí)的引導(dǎo)者。教師在學(xué)生編寫需求分析文檔、建立界面交互模型，以及編寫《UI規(guī)范文檔》的時(shí)候進(jìn)行指導(dǎo)，重點(diǎn)對以下幾方面進(jìn)行把關(guān)：

1.易用性：(1)用戶獲取信息的鏈接深度不易過深，應(yīng)提供合理的快捷入口按鈕或快捷搜索功能；(2)完成同一功能或任務(wù)的表單元素，按鈕等放在集中位置，減少鼠標(biāo)移動的距離。(3)復(fù)選框和選項(xiàng)框要有默認(rèn)選項(xiàng)，按選擇機(jī)率的高低而先后排列，并支持Tab選擇。

2.合理性：(1)網(wǎng)頁標(biāo)準(zhǔn)色原則上不超過兩種，如果有兩種，其中一種為標(biāo)準(zhǔn)色，另一種為標(biāo)準(zhǔn)輔助色。(2)頁面導(dǎo)航條清晰明了、突出，層級分明。

3.一致性：如在字體、標(biāo)簽風(fēng)格、顏色、術(shù)語、顯示錯(cuò)誤信息等方面確保一致，要求所有頁面要在普屏(1024*768)，寬屏1280*800，高分屏(1600x1200)等幾種分辨率下運(yùn)行通過。

4.獨(dú)特性：WEB應(yīng)用軟件界面設(shè)計(jì)應(yīng)能體現(xiàn)出軟件所屬行業(yè)，用戶群等特征。在框架符合規(guī)范的情況下，設(shè)計(jì)具有自己獨(dú)特風(fēng)格的界面尤為重要。

(五)工作過程設(shè)計(jì)

1.啟動階段

學(xué)生了解產(chǎn)品整體需求；了解用戶UI需求，整理UI規(guī)范；參考產(chǎn)品需求以及UI規(guī)范來整理《UI需求分析文檔》。

2.細(xì)化階段

學(xué)生根據(jù)《UI需求分析文檔》做交互模型，讓用戶能直觀的了解界面間的邏輯關(guān)系，來確認(rèn)設(shè)計(jì)的可行性(即界面層次的交互演示)。

使用性測試階段可把學(xué)生按4-5人分組設(shè)置為多角色，依照交互演示來進(jìn)行體驗(yàn)測試，如普通目標(biāo)用戶角色、研究角色、需求角色和開發(fā)人員角色來評審邏輯關(guān)系的合理性，包括使用合理性和設(shè)計(jì)合理性，教師審定并檢查界面規(guī)范方案并總結(jié)。

3.構(gòu)造階段

學(xué)生根據(jù)交互演示設(shè)計(jì)效果圖，皮膚，界面布局，圖標(biāo)元素并與界面制作人員完善并確立UI規(guī)范文檔等。教師對學(xué)生制定的UI規(guī)范進(jìn)行講評并修正。

以下為構(gòu)造階段的幾個(gè)步驟實(shí)例：

(1)通用布局規(guī)范，如圖2所示，此種布局結(jié)構(gòu)特點(diǎn)是功能模塊劃分清晰，主次分明，適合目錄式數(shù)據(jù)結(jié)構(gòu)的展現(xiàn)與操作，同時(shí)也是行業(yè)內(nèi)最常用的一種布局結(jié)構(gòu)，也符合大眾一般的操作習(xí)慣。但是需要注意的是，這種結(jié)構(gòu)布局會因各模塊內(nèi)大量數(shù)據(jù)信息展示，由于屏幕分析率和瀏覽器的不確定性，使得網(wǎng)頁可視長度會撐得很長，而出現(xiàn)多處滾動條，這種界面會降低對用戶瀏覽操作的體驗(yàn)?；诖?，在這里規(guī)定整個(gè)BODY區(qū)統(tǒng)一自適應(yīng)屏幕寬/高度，固定一些靜態(tài)的操作模塊區(qū)，其它區(qū)數(shù)據(jù)內(nèi)容過多可處理成出現(xiàn)局部滾動條即可。

圖2 通用布局規(guī)范

(2)色彩規(guī)范。軟件系統(tǒng)整體色調(diào)選擇，參考大運(yùn)會會徽的標(biāo)準(zhǔn)色彩使用規(guī)范以及網(wǎng)頁配色原則，通過對會徽五基色的延展應(yīng)用，搭配出符合大運(yùn)會信息化系列軟件系統(tǒng)一致性的視覺感。

本規(guī)范提供三套配色方案，橙，藍(lán)，綠供設(shè)計(jì)師選擇；色彩的具體應(yīng)用可根據(jù)各WEB應(yīng)用軟件系統(tǒng)需求，應(yīng)用范圍，用戶群等相關(guān)因素也可由UI設(shè)計(jì)師根據(jù)配色方案思路自由發(fā)揮，創(chuàng)意。

(3)表格數(shù)據(jù)展示區(qū)規(guī)范

表格適用于表單數(shù)據(jù)的展現(xiàn)，視覺效果設(shè)計(jì)應(yīng)該以為數(shù)據(jù)展現(xiàn)服務(wù)的原則。分表table，表頭thead，表主體tbody，表尾tfoot。設(shè)計(jì)效果應(yīng)以深色淺色來區(qū)分各表區(qū)域的屬性與權(quán)重。邊框線，背景顏色應(yīng)符合主體色調(diào)一致，同時(shí)區(qū)別于不同類別數(shù)據(jù)的顯示，以及利于用戶閱讀表數(shù)據(jù)可以采用隔行換色來提高數(shù)據(jù)可讀性，增加用戶體驗(yàn)度。

表格風(fēng)格如圖3所示：

圖3

基于UI規(guī)范，制作出具體化的控件和頁面。UI系統(tǒng)應(yīng)用實(shí)例示范如圖4所示。

圖4

(六)工作任務(wù)總結(jié)與評價(jià)

針對學(xué)生的成果和學(xué)習(xí)過程進(jìn)行評價(jià)和總結(jié)，可以安排以下幾個(gè)環(huán)節(jié)：(1)學(xué)生成果展示；(2)學(xué)生自我評價(jià)和總結(jié)；(3)教師根據(jù)本項(xiàng)工作任務(wù)的完成情況進(jìn)行評估與總結(jié)，評價(jià)方式見表1所示。

五、教學(xué)反思與改進(jìn)

《UI設(shè)計(jì)與實(shí)操》課程是一個(gè)較新的課程嘗試，目前市面上未有適合中職類教學(xué)的教材，故此，筆者結(jié)合本專業(yè)的情況，編寫適合中職學(xué)生的教材。本課程的特色是：(1)本課程以工學(xué)結(jié)合課程的要求進(jìn)行開發(fā)，結(jié)合中職學(xué)生的實(shí)際設(shè)計(jì)能力，把企業(yè)中的實(shí)際工作項(xiàng)目，提練成典型工作任務(wù)，并以理論實(shí)踐一體化的教學(xué)模式加以實(shí)施。(2)提倡學(xué)生注重用戶感受，分析不同客戶對使用界面的習(xí)慣不同，引入企業(yè)的界面規(guī)范手冊，把以往的完成一項(xiàng)界面設(shè)計(jì)項(xiàng)目，轉(zhuǎn)換為完成一份客戶訂制的合同，讓學(xué)生體驗(yàn)整個(gè)從訂單到完成項(xiàng)目的完整的過程。(3)作為前端網(wǎng)頁設(shè)計(jì)課程的延伸，為學(xué)生以后在從事界面設(shè)計(jì)的職業(yè)生涯打下較好基礎(chǔ)。

在教學(xué)過程中，筆者在制定課程評價(jià)方案時(shí)遇到了較多困難，因?yàn)樵撜n程的作品評價(jià)主觀性較強(qiáng)，同時(shí)應(yīng)以客戶滿意度為最大權(quán)重的評價(jià)標(biāo)準(zhǔn)，雖然制定了“表1工作項(xiàng)目綜合評價(jià)表”，仍然感到不能準(zhǔn)確評價(jià)這次工學(xué)結(jié)合的教學(xué)效果，還需要學(xué)校加強(qiáng)企業(yè)的合作，把更多的企業(yè)訂單帶到課堂教學(xué)中來，同時(shí)聘請專家、企業(yè)工程師研究該課程的評價(jià)體系，做到更高效促進(jìn)工學(xué)結(jié)合在中職教育中的發(fā)展。

[1]趙志群.職業(yè)教育工學(xué)結(jié)合課程的兩個(gè)基本特征[J].教育與職業(yè),2007,10下(30).

[2]孟源北.廣州市中等職業(yè)教育“工學(xué)結(jié)合課程”剖析[J].中國職業(yè)技術(shù)教育,2011(08).

[3]汝宇林.基于工作過程的“工學(xué)結(jié)合課程”課程解讀與實(shí)踐[J].蘭州石化職業(yè)技術(shù)學(xué)院學(xué)報(bào),2009,3.