基于工學結合的UI設計與實操課程實踐模式探究

廣州市輕工職業學校 梁瑞齡

一、引言

工學結合課程的內涵是以工作過程系統化課程為基本，突出以學生為主體，工作(學習)過程符合人的職業成長規律，源自于職業崗位，內容、要求和環境具有真實性、全面性和學習性，結構完整遵循系統化原則。其基本特征是：工作中學習，工學一體化，實現學習者綜合職業能力的培養。本文以《UI設計與實操》課程實踐模式，探討基于工學結合的校內課程實施方式方法。

二、開展UI課程的前期準備

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

三、基于工學結合的課程標準

課程標準需要根據專業培養目標，期望學生達到的知識、能力的基本要求而制定，是編寫教材、進行教學任務、評價的依據。筆者根據當前企業的崗位情況，將理論知識、素質培訓、實際操作技能進行整合。

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

表1 工作項目綜合評價表

四、基于工學結合的UI課程的典型工作任務

(一)企業調研

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

(二)工作任務

下文以“深圳大運會住宿安排管理系統”的界面提練為典型工作任務，作為工學結合的教材并實施教學，工作流程如圖1所示。

(三)工作任務分析

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

(四)教學分析

在整個教學實施過程中，學生是學習過程的主體，教師是學習的引導者。教師在學生編寫需求分析文檔、建立界面交互模型，以及編寫《UI規范文檔》的時候進行指導，重點對以下幾方面進行把關：

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

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

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

4.獨特性：WEB應用軟件界面設計應能體現出軟件所屬行業，用戶群等特征。在框架符合規范的情況下，設計具有自己獨特風格的界面尤為重要。

(五)工作過程設計

1.啟動階段

學生了解產品整體需求；了解用戶UI需求，整理UI規范；參考產品需求以及UI規范來整理《UI需求分析文檔》。

2.細化階段

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

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

3.構造階段

學生根據交互演示設計效果圖，皮膚，界面布局，圖標元素并與界面制作人員完善并確立UI規范文檔等。教師對學生制定的UI規范進行講評并修正。

以下為構造階段的幾個步驟實例：

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

圖2 通用布局規范

(2)色彩規范。軟件系統整體色調選擇，參考大運會會徽的標準色彩使用規范以及網頁配色原則，通過對會徽五基色的延展應用，搭配出符合大運會信息化系列軟件系統一致性的視覺感。

本規范提供三套配色方案，橙，藍，綠供設計師選擇；色彩的具體應用可根據各WEB應用軟件系統需求，應用范圍，用戶群等相關因素也可由UI設計師根據配色方案思路自由發揮，創意。

(3)表格數據展示區規范

表格適用于表單數據的展現，視覺效果設計應該以為數據展現服務的原則。分表table，表頭thead，表主體tbody，表尾tfoot。設計效果應以深色淺色來區分各表區域的屬性與權重。邊框線，背景顏色應符合主體色調一致，同時區別于不同類別數據的顯示，以及利于用戶閱讀表數據可以采用隔行換色來提高數據可讀性，增加用戶體驗度。

表格風格如圖3所示：

圖3

基于UI規范，制作出具體化的控件和頁面。UI系統應用實例示范如圖4所示。

圖4

(六)工作任務總結與評價

針對學生的成果和學習過程進行評價和總結，可以安排以下幾個環節：(1)學生成果展示；(2)學生自我評價和總結；(3)教師根據本項工作任務的完成情況進行評估與總結，評價方式見表1所示。

五、教學反思與改進

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

在教學過程中，筆者在制定課程評價方案時遇到了較多困難，因為該課程的作品評價主觀性較強，同時應以客戶滿意度為最大權重的評價標準，雖然制定了“表1工作項目綜合評價表”，仍然感到不能準確評價這次工學結合的教學效果，還需要學校加強企業的合作，把更多的企業訂單帶到課堂教學中來，同時聘請專家、企業工程師研究該課程的評價體系，做到更高效促進工學結合在中職教育中的發展。

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

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

[3]汝宇林.基于工作過程的“工學結合課程”課程解讀與實踐[J].蘭州石化職業技術學院學報,2009,3.