后疫情時代UI界面設(shè)計(jì)混合式教學(xué)研究與實(shí)踐

周俏

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

關(guān)鍵詞? 平面設(shè)計(jì)；UI界面設(shè)計(jì)；混合式教學(xué)

中圖分類號：G652? ? 文獻(xiàn)標(biāo)識碼：B

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

1? UI界面設(shè)計(jì)課程概述

UI即User Interface（用戶界面）的簡稱。用戶界面設(shè)計(jì)作為屏幕產(chǎn)品最重要的組成部分，是指用戶和特定系統(tǒng)進(jìn)行互動過程的集中展現(xiàn)。UI界面設(shè)計(jì)因?yàn)槠鋫鞑ッ浇椤⒒訝顟B(tài)和呈現(xiàn)效果與平面設(shè)計(jì)門類有很大的不同，所以，UI界面設(shè)計(jì)的學(xué)習(xí)和課程教學(xué)具有一定的獨(dú)立性。

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

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

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

2? 三維教學(xué)目標(biāo)分析

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

2.1? 知識目標(biāo)

1）了解UI基本理論；

2）了解用戶體驗(yàn)；

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

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

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

6）知道切圖和標(biāo)注；

7）學(xué)會使用Axure軟件進(jìn)行原型開發(fā)及交互設(shè)計(jì)；

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

2.2? 技能目標(biāo)

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

2）能獨(dú)立完成一套華為手機(jī)主題圖標(biāo)的設(shè)計(jì)；

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

4）能舉一反三、獨(dú)立完成一定難度的設(shè)計(jì)任務(wù)。

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

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

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

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

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

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

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

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

4? 立體化課程資源建設(shè)

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

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

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

4.1? 愛慕課

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

4.2? 中國大學(xué)MOOC

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

4.3? 其他資源鏈接

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

5? 混合式教學(xué)策略

在線教學(xué)有四個明顯的不足：

1）信息維度比較單一；

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

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

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

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

5.1? 項(xiàng)目化教學(xué)

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

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

5.2? 每日APP分享

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

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

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

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

5.4? 巧借各類設(shè)計(jì)競賽，增強(qiáng)學(xué)生實(shí)踐能力

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

5.5? 校企合作，學(xué)生分方向進(jìn)行見習(xí)（UI項(xiàng)目組）

UI項(xiàng)目組校企合作信息如表2所示。

6? 教學(xué)評價(jià)

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

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

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

6.1? 期末項(xiàng)目：APP界面設(shè)計(jì)

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

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

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

4）設(shè)計(jì)規(guī)范文檔。

具體考核標(biāo)準(zhǔn)見表3。

6.2? 平時作品大匯總

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

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

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

7? 參考文獻(xiàn)

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

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

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