后疫情時代UI界面設計混合式教學研究與實踐

周俏

摘? 要? 由于疫情原因，很多課程由線下搬到了線上，線上+線下混合式教學即將成為一種新的教學常態(tài)。對于一些計算機實踐操作類的課程如何混合式教學，促進學生自主、泛在、個性化學習，是一件頗具挑戰(zhàn)的任務。圍繞UI界面設計課程，對其線上與線下結(jié)合的混合式教學改革以及實踐展開深入分析與研究，希望為相關教學提供參考與借鑒。

關鍵詞? 平面設計；UI界面設計；混合式教學

中圖分類號：G652? ? 文獻標識碼：B

文章編號：1671-489X（2023）13-0124-04

1? UI界面設計課程概述

UI即User Interface（用戶界面）的簡稱。用戶界面設計作為屏幕產(chǎn)品最重要的組成部分，是指用戶和特定系統(tǒng)進行互動過程的集中展現(xiàn)。UI界面設計因為其傳播媒介、互動狀態(tài)和呈現(xiàn)效果與平面設計門類有很大的不同，所以，UI界面設計的學習和課程教學具有一定的獨立性。

“UI界面設計”作為一門新興學科，是一門集技術與藝術于一體的基礎學科，課程的設置面向職業(yè)崗位要求，職業(yè)崗位針對性較強，涉及較強的專業(yè)技能。

這門課程屬于計算機應用技術專業(yè)——平面設計發(fā)展方向的一門專業(yè)必修課，具有很強的應用實踐性，主要面向移動互聯(lián)網(wǎng)平臺基礎上的各種產(chǎn)品界面設計以及開發(fā)。由于本課程方向的人才需求旺盛，具有極其廣闊的就業(yè)前景。

筆者所在學校的UI界面設計課程在第二學年第二學期開設，學生經(jīng)過一年半時間的學習，對于平面設計的相關基礎理論和技術已經(jīng)有所了解和掌握。課時為4學時/周，16周完成，共計64學時。

2? 三維教學目標分析

這門課程的有效學習，能夠促進學生互聯(lián)網(wǎng)產(chǎn)品設計思維能力的有效提升，讓學生掌握關于制作設計手機界面的基本能力，全面掌握關于界面設計開發(fā)的基本原理，熟悉界面設計的基本規(guī)范以及正確流程；讓學生能夠正確使用有關軟件進行圖標繪制，制作界面的基本效果圖等；讓學生能夠正確運用Axure軟件實現(xiàn)原型開發(fā)與交互設計，從而可以制作設計出完整系統(tǒng)化的移動界面設計的基本方案，以此有效勝任關于用戶體驗、視覺設計以及交互設計等方面的工作崗位需求。

2.1? 知識目標

1）了解UI基本理論；

2）了解用戶體驗；

3）了解界面設計開發(fā)的原理；

4）掌握界面設計的規(guī)范流程；

5）掌握圖標、控件的繪制以及界面效果圖的制作；

6）知道切圖和標注；

7）學會使用Axure軟件進行原型開發(fā)及交互設計；

8）熟悉產(chǎn)品提案方法技巧等[1]。

2.2? 技能目標

1）掌握常見按鈕設計方法和質(zhì)感表現(xiàn)技術；

2）能獨立完成一套華為手機主題圖標的設計；

3）能小組合作設計出一套手機端完整移動互聯(lián)網(wǎng)產(chǎn)品；

4）能舉一反三、獨立完成一定難度的設計任務。

2.3? 情感與態(tài)度目標

1）培養(yǎng)學生團隊協(xié)作意識，相互協(xié)作能力；

2）注重學生良好的表達能力的養(yǎng)成；

3）培養(yǎng)學生的工作、學習的主動性；

4）培養(yǎng)學生精益求精，不斷創(chuàng)新的工匠精神；

5）培養(yǎng)學生良好的審美意識，提高學生的藝術修養(yǎng)。

3? 教學內(nèi)容分析

本課程依據(jù)課程教材、教學大綱，根據(jù)《深圳市交互界面開發(fā)專項職業(yè)能力考核規(guī)范》和UI設計工作的基礎流程，即“結(jié)構(gòu)設計—視覺設計—交互設計”，以培養(yǎng)學生熟練設計UI界面及各元素（圖標、控件等）的能力為主線，讓學生熟悉UI界面設計的前期以及后期的各項工作內(nèi)容，具體包括流程圖設計以及交互設計等。將教學內(nèi)容按照理論、案例教學、綜合實訓三大模塊分為：UI理論、流程圖設計等10個章節(jié)。教學內(nèi)容之間的關系，具體如圖1所示。

4? 立體化課程資源建設

具備高速上網(wǎng)、廣播教學功能的多媒體機房的選用，實現(xiàn)全面調(diào)動、全員動手，體驗“創(chuàng)作之旅”線下課程的快樂。把課堂建在實訓室，將理論課堂以及實踐場地進行有機結(jié)合，促進學生職業(yè)體驗的有效豐富。

當前已進入“互聯(lián)網(wǎng)+”時代，尤其對于UI界面設計這樣走在移動互聯(lián)前端的課程來說，傳統(tǒng)單一的紙質(zhì)教材大部分都落后于時下的熱點，不足以滿足企業(yè)對專業(yè)人才培養(yǎng)的創(chuàng)新需求。所以，紙質(zhì)教材之外，還可建立立體化的課程資源，除了包含基本的課件、教學視頻等資源，還可以加入行業(yè)熱點、拓展素材、技能考證等內(nèi)容。將課程資源信息化、數(shù)字化，有利于實現(xiàn)信息共享，滿足學生在線學習的需求，從而提高教學質(zhì)量。

如網(wǎng)上MOOC課程，自制微課或網(wǎng)絡下載微視頻，結(jié)合任務導學案，供學生做課前自學，課中演示，課后復習。

4.1? 愛慕課

如“移動界面設計”“UI版式設計”“基礎線性和剪影化icon的制作方法”“移動UI設計基礎入門”“移動端APP UI設計入門與實戰(zhàn)”等短小的UI小課程，這類視頻都出自一線UI設計師之手，為學生提供了豐富的學習資源。不過，遺憾之處是，有些進階課程是收費的。

4.2? 中國大學MOOC

如“界面設計”“移動軟件UI設計”“UI設計”“UI及交互設計”等，這些課程的設置系統(tǒng)科學，符合學生定位。

4.3? 其他資源鏈接

如優(yōu)設UI、嗶哩嗶哩、UI設計的集合、飛特UIdesign、像素范等。

5? 混合式教學策略

在線教學有四個明顯的不足：

1）信息維度比較單一；

2）學習環(huán)境難以營造；

3）課堂監(jiān)督手段不足；

4）學員容易產(chǎn)生疲勞感[2]。

根據(jù)UI界面設計課程的特點，安排約30%的教學學時實施學生線上自主學習，線上教學內(nèi)容分配側(cè)重于理論知識的學習，可以由教師講授，也可以讓學生課前收集信息，線上進行討論或匯報。教師應當合理轉(zhuǎn)變工作重心，由個人講解教授轉(zhuǎn)變?yōu)檎n堂活動的組織以及實施。線下教學內(nèi)容在分配時應當著重針對實踐操作應用能力的鍛煉和培養(yǎng)。堅持以技法為基礎，以設計思想為教學目標。讓學員在“繪圖”的同時，更懂得如何把控設計、引導用戶、包裝產(chǎn)品。

5.1? 項目化教學

教學開展過程中，教師應當重視學生實操能力的有效培育，通過項目化教學的實施，以學生為核心主體，以教師為重要主導，通過工作任務激發(fā)學生參與學習的熱情，調(diào)動學生潛在的成就動機。界面UI設計課在整個教學的過程中，運用啟發(fā)、引導和實踐的方式，通過對造型設計基礎知識點的逐步講解和實例繪制教授創(chuàng)作，訓練學生的相互配合能力，培養(yǎng)學生的職業(yè)道德、團隊協(xié)作意識以及良好的審美意識，提高學生的藝術修養(yǎng)，培養(yǎng)學生主動思考、分析問題、自主探究學習、團隊協(xié)作、自主獲取知識、創(chuàng)新思維、結(jié)構(gòu)分析、欣賞以及感悟等綜合能力素養(yǎng)。

通過10個章節(jié)和1個綜合實訓、13個項目、30多個小任務進行學習，培養(yǎng)學生。以第7章 “UI控件設計”和“綜合實訓+提案展示”為例，進行項目和任務分解，如表1所示。

5.2? 每日APP分享

學生按照學號順序，安排課前的5分鐘APP分享，進行“每日APP分享”。通過該環(huán)節(jié)的設置，學生形成了一種習慣，在使用APP的同時，從使用者角度分析用戶體驗，也從設計師的角度去理解和分析APP的界面設計與交互。學生在不斷提升審美水平的過程中，也提升了自主分析思考的意識，增強了發(fā)現(xiàn)和解決實際問題的能力。如發(fā)現(xiàn)釘釘沒有上課點名的功能（雖然釘釘官方改進了）。這5分鐘，也給同學們提供了上臺展示和講解的機會。

5.3? 小組合作，商業(yè)化案例，“零距離”仿照企業(yè)進行項目式提案

由于實際的UI設計工作具有很強的綜合性和設計性要求，一方面要培養(yǎng)學生的綜合素質(zhì)，提升設計能力，另一方面要讓學生能夠借助團隊合作完成系統(tǒng)性的綜合項目。

日常課堂教學中，會預留20分鐘用于組內(nèi)成員相互探討交流。在課程后階段，更是一個綜合的項目，以組長為項目經(jīng)理的身份，帶著整個團隊，完成一個綜合項目。學生針對工作崗位職責有了全面深入的了解，也增強了學生團隊協(xié)作的綜合能力。

5.4? 巧借各類設計競賽，增強學生實踐能力

UI界面設計課程具有很強的實踐性要求，因此，僅僅憑借理論教學無法實現(xiàn)目標，所以，在進行UI界面設計實踐過程中，教師應當重視引導學生主動參加不同的設計競賽活動，以此提升自身的專業(yè)能力，為其未來適應社會發(fā)展打好基礎。比如有關手機主題設計類的競賽活動、靳埭強設計獎等等，這些都屬于較為常見的一些設計類專業(yè)競賽[3]。同時，為了鼓勵學生參加各類比賽，學校在該門課程開設的第二年，在平面設計大賽中，增加了一個設計選題：APP概念界面設計。讓學生能學有所得，做有所“展”。

5.5? 校企合作，學生分方向進行見習（UI項目組）

UI項目組校企合作信息如表2所示。

6? 教學評價

在學生評價環(huán)節(jié)，注重過程性評價（平時作業(yè)大匯總）和總結(jié)性評價（期末考核）結(jié)合。結(jié)合其他的評價方法，如職業(yè)資格認證等級評價、筆試、專業(yè)技能大賽、定崗見習等。注意加強教學過程質(zhì)量的科學合理監(jiān)督與控制，優(yōu)化改革傳統(tǒng)的教學評價指標以及方法[3]。

本課程的學生成績評定，主要通過考查進行，課程總成績包含平時作業(yè)以及期末考核成績，以百分制計。

其中平時成績占比為50%（態(tài)度紀律占比為10%，學生平時作品成績的平均分占比為40%），另外期末考核成績占比為50%（期末小組合作項目作業(yè)，占比為30%，作品匯總占比為20%）。例如，其中的期末項目小組作業(yè)為：以小組為單位進行APP界面概念設計，每個小組交一個綜合項目的作品，成績占30%。具體考查學生對所學知識的實踐應用能力、團隊協(xié)作能力以及綜合設計能力等。

6.1? 期末項目：APP界面設計

1）提案PPT：包含產(chǎn)品定義、競品分析、主要功能、產(chǎn)品原型等部分。

2）產(chǎn)品原型文檔：能制作產(chǎn)品原型（線稿）。

3）產(chǎn)品界面設計：Icon設計、主要界面設計。

4）設計規(guī)范文檔。

具體考核標準見表3。

6.2? 平時作品大匯總

在期末臨近時，要求學生將自己平時完成的作業(yè)進行優(yōu)化，并整理成一個作品集。

當然除了教師布置的作業(yè)外，鼓勵學生在整個學期圍繞UI界面進行作品臨摹或創(chuàng)意。整個整理和收集過程，是一個復習匯總的過程，也是學生回憶和體驗成功的過程。

從一個最小的圖標開始，到完整的APP界面設計，學生是一個滿滿的收獲過程，也為學生將來就業(yè)提供了作品集。

7? 參考文獻

[1] 沈九美，朱長永，王哲，等.南通理工學院“界面設計”[EB/OL].（2020-02-29）[2022-12-05].https：//www.icourse163.org/course/ZLVC-1454223177.

[2] 雷菁.高職UI界面設計課程教學實踐探索[J].現(xiàn)代信息科技，2019（4）：96-97.

[3] 教育部職業(yè)教育與成人教育司.關于征求對《教育部關于職業(yè)院校專業(yè)人才培養(yǎng)方案制訂工作的指導意見》意見的函[A/OL].（2017-12-07）[2022-12-05].http：//www.moe.gov.cn/s78/A07/A07_sjhj/201712/t20171207_320877.html.