高職院校UI交互設(shè)計(jì)課程教學(xué)內(nèi)容創(chuàng)新與探索

馬金立 黃宇瀟

摘要：科技的不斷進(jìn)步與人們?nèi)找嬖鲩L(zhǎng)的需求，對(duì)于高職院校UI交互設(shè)計(jì)人才的培養(yǎng)工作也提出新的要求。UI交互設(shè)計(jì)人才需掌握更多軟件及理論知識(shí)而非僅停留在理論階段，同時(shí)更多的應(yīng)將理論通過(guò)軟件實(shí)踐并運(yùn)用于實(shí)際。本文基于科技快速發(fā)展的時(shí)代及數(shù)字媒體技術(shù)大發(fā)展的背景，對(duì)高職院校培養(yǎng)UI交互設(shè)計(jì)類人才的教學(xué)內(nèi)容與方法進(jìn)行探索并在探索中尋求創(chuàng)新。提出以用戶調(diào)研及多種軟件教學(xué)為主導(dǎo)，以理論教學(xué)為輔的教學(xué)方法是實(shí)現(xiàn)高職院校培養(yǎng)學(xué)生技能和理論知識(shí)互相結(jié)合的一種有效教學(xué)方法并在教學(xué)中引導(dǎo)學(xué)生形成創(chuàng)新創(chuàng)意思維。

關(guān)鍵詞：UI交互設(shè)計(jì)，創(chuàng)新思維，高職院校，探索

一、UI交互設(shè)計(jì)概述：

UI即為用戶界面（User interface），UI交互設(shè)計(jì)（UI interaction design）是指對(duì)軟件的人機(jī)交互和操作邏輯以及界面美觀的整體設(shè)計(jì)，其主要目的是為了使得軟件操作簡(jiǎn)單便捷，界面美觀以及具有鮮明特點(diǎn)。“以用戶體驗(yàn)為主要導(dǎo)向“是整個(gè)UI行業(yè)的核心理念。

二、當(dāng)前UI交互設(shè)計(jì)師的需求

UI交互設(shè)計(jì)師，不僅僅從事美術(shù)繪畫，更需要對(duì)軟件使用者，使用環(huán)境，使用方式進(jìn)行定位，并最終為軟件用戶服務(wù)。設(shè)計(jì)從工作內(nèi)容上來(lái)說(shuō)分為3大類，即研究工具，研究人與界面的關(guān)系，研究人。與之相應(yīng)，UI交互設(shè)計(jì)師的職能大體包括四大方面：一是圖形設(shè)計(jì)，即傳統(tǒng)意義上上的美工，承擔(dān)軟件產(chǎn)品的界面設(shè)計(jì)。二是交互設(shè)計(jì)，主要在于設(shè)計(jì)軟件的操作流程;樹(shù)狀結(jié)構(gòu)，操作規(guī)范等。一個(gè)軟件產(chǎn)品在編碼之前需要做的就是交互設(shè)計(jì)，并確立交互模型和交互規(guī)范。三是用戶測(cè)試/研究，其目的在于測(cè)試交互設(shè)計(jì)的合理性及圖形設(shè)計(jì)的美觀性，主要通過(guò)以目標(biāo)用戶文件的形式衡量UI設(shè)計(jì)的合理性。四是UI界面動(dòng)效設(shè)計(jì)，旨在為客戶和老板和程序員等提供動(dòng)態(tài)效果的展示，使得產(chǎn)品可以更好的宣傳也使得在于程序員溝通中可以更好的演示所需效果以使得后期編程達(dá)到預(yù)期。

三、探索高職院校UI交互設(shè)計(jì)課程的教學(xué)內(nèi)容創(chuàng)新

3.1 傳統(tǒng)高職院校UI交互設(shè)計(jì)課程的教學(xué)內(nèi)容。

傳統(tǒng)數(shù)字媒體專業(yè)課程中的UI交互設(shè)計(jì)課程涵蓋圖像界面設(shè)計(jì)（GUI），傳統(tǒng)美術(shù)設(shè)計(jì)（AUI），web界面設(shè)計(jì)（WUI）和移動(dòng)設(shè)備界面設(shè)計(jì)（MUI）。由此可見(jiàn)傳統(tǒng)UI交互設(shè)計(jì)課程直接教導(dǎo)學(xué)生UI界面設(shè)計(jì)，而忽視了交互設(shè)計(jì)，使得課程成為了平面設(shè)計(jì)類專業(yè)課程而非數(shù)字媒體類專業(yè)課程。學(xué)生所掌握的沒(méi)有交互設(shè)計(jì)的軟件技能部分而僅為平面設(shè)計(jì)的軟件技能部分。部分?jǐn)?shù)字媒體專業(yè)課程中的UI交互設(shè)計(jì)則新增教導(dǎo)Axure rp軟件制作動(dòng)效，以更好的符合市場(chǎng)需求。

然而隨著科技的日新月異，傳統(tǒng)的以平面界面設(shè)計(jì)為主，以Axure rp 制作動(dòng)效和平面設(shè)計(jì)軟件為輔的教學(xué)內(nèi)容已經(jīng)無(wú)法滿足目前市場(chǎng)的需求。

3.2 高職院校UI交互設(shè)計(jì)課程的創(chuàng)新探索

在傳統(tǒng)高職院校的UI交互設(shè)計(jì)課程中加入前期用戶調(diào)研，中期用戶調(diào)研，后期用戶調(diào)研，將調(diào)研貫穿整個(gè)設(shè)計(jì)和課程中，使得學(xué)生的設(shè)計(jì)可以更好的符合用戶需求也使得學(xué)生掌握適應(yīng)企業(yè)對(duì)于UI交互設(shè)計(jì)師所需掌握的用戶測(cè)試/研究的要求。前期調(diào)研即用戶畫像與用戶定位調(diào)研，旨在定位app的功能等，目的在于為做低保真原型圖奠定基礎(chǔ);中期調(diào)研即app界面布局，界面顏色，交互方式調(diào)研，旨在為做中保真原型圖和基礎(chǔ)動(dòng)效奠定基礎(chǔ);后期調(diào)研即app交互效果和方式的調(diào)研，旨在為最后制作高保真原型圖和完善app最后動(dòng)效提供數(shù)據(jù)支持。

學(xué)生到此應(yīng)已具備圖形設(shè)計(jì)和用戶測(cè)試/研究的能力，但還需增加交互設(shè)計(jì)和UI東西設(shè)計(jì)能力。在傳統(tǒng)高職院校UI交互設(shè)計(jì)課程中僅有Axure rp軟件的學(xué)習(xí)，這顯然不夠，應(yīng)在此基礎(chǔ)上添加教導(dǎo)學(xué)生使用sketch 軟件制作app圖標(biāo)與logo;使用adobe xd或principle完善app動(dòng)效;使用墨刀快速制作app低保真原型圖，并使用Axure rp或AI，PS，CDR制作不同界面的流程圖（例如：?jiǎn)?dòng)登入注冊(cè)頁(yè)流程圖，一級(jí)頁(yè)面流程圖，二級(jí)頁(yè)面流程圖，設(shè)置頁(yè)面流程圖等）。

以上是軟件技能的掌握，然而學(xué)生的思想也需要?jiǎng)?chuàng)新。高職院校學(xué)生的創(chuàng)新能力較弱，掌握大量技能但思維停滯在抄襲參考階段。為此，應(yīng)加強(qiáng)學(xué)生創(chuàng)意思維的鍛煉。首先，放射性思維和多向思維，給予學(xué)生自由發(fā)揮的機(jī)會(huì)，學(xué)生可自由選題并制作屬于自己的app，而不是教師指定題目或給予模版，學(xué)生可圍繞一個(gè)中心，在與之相關(guān)的領(lǐng)域內(nèi)尋找一切有關(guān)的信息，學(xué)生也可不同角度看待自己的app。其次，換元思維，學(xué)生進(jìn)行單人和小組頭腦風(fēng)暴，用以交換思維，開(kāi)闊學(xué)生的思維，可使得學(xué)生發(fā)現(xiàn)自我思維之外的創(chuàng)意，為app的功能和界面創(chuàng)新提供支持。最后，教師給予學(xué)生部分優(yōu)秀案例參考，這可使得學(xué)生將自我思維與優(yōu)秀產(chǎn)品案例給予的靈感相互融合，技能與實(shí)踐相結(jié)合。

四、 探索高職院校UI交互設(shè)計(jì)課程的教學(xué)步驟創(chuàng)新

通過(guò)高職院校UI交互設(shè)計(jì)課程的內(nèi)容創(chuàng)新高職院校UI交互設(shè)計(jì)課程的教學(xué)步驟。

（一）第一應(yīng)為定位app，首先進(jìn)行初期調(diào)研尋找市場(chǎng)和用戶痛點(diǎn)并構(gòu)思最初app的主題并在之后從用戶年齡，用戶喜好，用戶習(xí)慣等方面進(jìn)行初期用戶調(diào)研，以此為作為用戶畫像的理論數(shù)據(jù)支撐再而成為app構(gòu)思和低保真原型圖制作的理論數(shù)據(jù)支持。在這階段的理論教學(xué)部分主要針對(duì)用戶對(duì)象和用戶心理的研究，在實(shí)踐教學(xué)部分主要針對(duì)用戶體驗(yàn)的研究實(shí)踐教學(xué)，側(cè)重點(diǎn)在于市場(chǎng)和用戶需求的調(diào)研。

（二）第二應(yīng)為app構(gòu)思和低保真原型圖制作以及Logo制作以及Slogan的制作，并在低保真原型圖制作完成后進(jìn)行中期調(diào)研，主要調(diào)研用戶對(duì)頁(yè)面布局;頁(yè)面顏色;app功能的喜好程度和建議。這一階段的理論教學(xué)部分針對(duì)字體，內(nèi)容以及頁(yè)面布局做出初步設(shè)計(jì)，實(shí)踐軟件教學(xué)主要應(yīng)以墨刀，Axure rp以及AI，PS，CDR等制作頁(yè)面低保真原型圖和logo。

（三）第三應(yīng)為app中保真原型圖制作以及中后期用戶調(diào)研。旨在讓學(xué)生基本完成app界面設(shè)計(jì)并開(kāi)始著手進(jìn)行中后期調(diào)研。在中后期調(diào)研中，主要調(diào)研用戶對(duì)于動(dòng)效的喜好與習(xí)慣，以及app界面仍需修改的部分，為后期制作高保真app奠定基礎(chǔ)。這部分的理論教學(xué)側(cè)重于用戶心理和習(xí)慣研究，實(shí)踐教學(xué)部分以AI，PS軟件為主的界面設(shè)計(jì)。

（四）第四，學(xué)生可開(kāi)始進(jìn)行app界面設(shè)計(jì)的最后完善以及app動(dòng)效的設(shè)計(jì)。這部分重點(diǎn)在于動(dòng)效軟件的設(shè)計(jì)，教導(dǎo)學(xué)生使用Axure rp;Aodbe Xd;Principle軟件制作app的UIj交互動(dòng)效，以此用以較好展示其app的效果與交互樣式。在完成app高保真制作后，將其app通過(guò)Axure rp;Adobe Xd;Principle軟件的共享功能（手機(jī)，電腦共享）分享給用戶，并讓用戶在體驗(yàn)中反饋意見(jiàn)與建議，學(xué)生以此進(jìn)行最后的后期用戶調(diào)研，收集用戶相關(guān)數(shù)據(jù)，如：交互樣式，交互效果等，并以此數(shù)據(jù)進(jìn)行修改，最后完成課程。

（五）項(xiàng)目評(píng)價(jià)

項(xiàng)目完成后，學(xué)生以個(gè)人為單位展示各自的app界面設(shè)計(jì);動(dòng)效設(shè)計(jì);設(shè)計(jì)理念;用戶調(diào)研報(bào)告，結(jié)論等，讓同學(xué)們相互欣賞彼此作品，并發(fā)表自我建議和意見(jiàn)，進(jìn)而進(jìn)行評(píng)分。學(xué)生的學(xué)習(xí)評(píng)價(jià)以完成項(xiàng)目的情況為依據(jù)，具體分為二級(jí)考核：學(xué)生互評(píng)，教師總評(píng)。除此之外，還可邀請(qǐng)企業(yè)UI交互設(shè)計(jì)從業(yè)人員或高管參評(píng)。綜合兩或三個(gè)評(píng)定情況來(lái)確定每一名學(xué)生的學(xué)習(xí)評(píng)價(jià)。課程考核中引入企業(yè)標(biāo)準(zhǔn)，實(shí)現(xiàn)與用人單位的需求零距離對(duì)接。

（六）比賽與企業(yè)實(shí)踐

項(xiàng)目評(píng)價(jià)完后，可鼓勵(lì)學(xué)生將所設(shè)計(jì)app運(yùn)用Principle，Adobe Xd， Adobe Ae等軟件將app制作成視頻并參與UI交互設(shè)計(jì)app類比賽或?qū)pp界面單獨(dú)參加比賽，用以鼓勵(lì)學(xué)生在設(shè)計(jì)中可以更好將思維與設(shè)計(jì)的融入實(shí)踐同時(shí)提升學(xué)生對(duì)于項(xiàng)目設(shè)計(jì)的積極性與專注性。除此之外，嘗試引入企業(yè)標(biāo)準(zhǔn)與所需將學(xué)生的app與用人單位的需求實(shí)現(xiàn)零距離對(duì)接，使學(xué)生在設(shè)計(jì)中了解和學(xué)習(xí)工作的標(biāo)準(zhǔn)與要求，在畢業(yè)后更好的融入工作環(huán)境和需求中。

五、實(shí)施成效

以用戶調(diào)研及多種軟件教學(xué)為主導(dǎo)，以理論教學(xué)為輔的教學(xué)方法在數(shù)字媒體技術(shù)專業(yè)課程中，可以使得學(xué)生將他們?cè)谡n堂上所學(xué)的知識(shí)較好的在實(shí)戰(zhàn)中運(yùn)用并較好的了解市場(chǎng)和用戶的需求。這是適應(yīng)以“就業(yè)為導(dǎo)向，以服務(wù)為宗旨，走產(chǎn)學(xué)研結(jié)合道路”所探索出的一條全新的且切實(shí)可行的教學(xué)途徑。學(xué)生在自我項(xiàng)目設(shè)計(jì)執(zhí)行過(guò)程中不斷鍛煉他們的專業(yè)技能和學(xué)習(xí)調(diào)研能力，積累實(shí)戰(zhàn)經(jīng)驗(yàn)，使他們將更加符合企業(yè)對(duì)UI交互從業(yè)人員的需求。

六、總結(jié)與思考

以用戶調(diào)研及多種軟件教學(xué)為主導(dǎo)，以理論教學(xué)為輔的教學(xué)方法是實(shí)現(xiàn)高職院校培養(yǎng)學(xué)生技能和理論知識(shí)互相結(jié)合的一種有效教學(xué)方法。對(duì)于學(xué)校，要深入挖掘產(chǎn)學(xué)研相結(jié)合的長(zhǎng)效機(jī)制，積極鼓勵(lì)培養(yǎng)雙師型人才隊(duì)伍，加強(qiáng)校企合作，切實(shí)提高UI交互設(shè)計(jì)從業(yè)人才的培養(yǎng)質(zhì)量。

參考文獻(xiàn)：

[1] 張哿.UI交互設(shè)計(jì)流程的探索與教學(xué)實(shí)踐 [N] .科技論壇. 2016-09-28

[2] 張軍.網(wǎng)頁(yè)設(shè)計(jì)課程中關(guān)于UI設(shè)計(jì)教學(xué)的探索體會(huì)[N].湖北美術(shù)學(xué)院學(xué)報(bào)期刊. 2009-11-4