摘 要：網(wǎng)頁(yè)界面動(dòng)效設(shè)計(jì)的應(yīng)用有助于用戶(hù)對(duì)網(wǎng)頁(yè)界面操作的學(xué)習(xí)、理解和使用。本文針對(duì)網(wǎng)頁(yè)界面交互動(dòng)效設(shè)計(jì)的教學(xué)環(huán)節(jié)進(jìn)行了探索和研究，目的在于研究網(wǎng)頁(yè)動(dòng)效設(shè)計(jì)如何在視覺(jué)規(guī)范的框架下展開(kāi)。以網(wǎng)站交互功能的層級(jí)為參照，制定與之匹配的不同視覺(jué)權(quán)重的動(dòng)效設(shè)計(jì)方案，能有效地發(fā)揮動(dòng)效對(duì)交互的演示和詮釋作用，通過(guò)教學(xué)過(guò)程中對(duì)基本設(shè)計(jì)方法的研討、講解和實(shí)踐訓(xùn)練，使學(xué)生對(duì)網(wǎng)頁(yè)界面設(shè)計(jì)中如何使用戶(hù)互動(dòng)體驗(yàn)更加感性、高效和愉快的認(rèn)知更加深刻。

關(guān)鍵詞：網(wǎng)頁(yè)視覺(jué)規(guī)范;動(dòng)效設(shè)計(jì);形象識(shí)別;用戶(hù)體驗(yàn);課堂研討

1 動(dòng)效設(shè)計(jì)教學(xué)在網(wǎng)頁(yè)界面設(shè)計(jì)課程教學(xué)中的必要性

界面的核心是交互，而動(dòng)效是對(duì)當(dāng)前交互狀態(tài)的一種更有效的注解，其本身糅合了視覺(jué)、觸覺(jué)和聽(tīng)覺(jué)3種人類(lèi)接收信息的主要途徑來(lái)傳遞信息，是一種更具吸引力的交互展示方式。動(dòng)效提升了網(wǎng)站系統(tǒng)交互的易用性，提高了網(wǎng)頁(yè)交互的用戶(hù)體驗(yàn)質(zhì)量，是網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)重要且關(guān)鍵的一個(gè)組成部分。

動(dòng)效在早期的網(wǎng)頁(yè)界面設(shè)計(jì)中，是網(wǎng)頁(yè)設(shè)計(jì)與制作從業(yè)人員發(fā)現(xiàn)的一種能增加界面交互操作趣味性的額外工作，在移動(dòng)端界面設(shè)計(jì)行業(yè)興起后，動(dòng)效成為包括網(wǎng)頁(yè)在內(nèi)的界面設(shè)計(jì)方案中的一種標(biāo)準(zhǔn)配置，也是界面相關(guān)專(zhuān)業(yè)課程的重要組成部分，同時(shí)也是專(zhuān)業(yè)教學(xué)中實(shí)踐價(jià)值的體現(xiàn)。

2 動(dòng)效設(shè)計(jì)的授課內(nèi)容安排

授課內(nèi)容，包括研討議題的設(shè)置、實(shí)踐案例的選擇等方面，在當(dāng)前包括網(wǎng)頁(yè)界面在內(nèi)的界面設(shè)計(jì)教學(xué)內(nèi)容中，動(dòng)效設(shè)計(jì)教學(xué)的內(nèi)容主要涉及動(dòng)效設(shè)計(jì)方法和動(dòng)效制作工具等方面。網(wǎng)頁(yè)界面的動(dòng)效設(shè)計(jì)，相對(duì)于APP、游戲等界面設(shè)計(jì)中的動(dòng)效設(shè)計(jì)，在使用場(chǎng)景、視覺(jué)形式、限制因素等方面有所不同。網(wǎng)頁(yè)界面的空間相對(duì)于其他界面類(lèi)型，視覺(jué)設(shè)計(jì)空間相對(duì)充足，操作環(huán)境更加單一，對(duì)于動(dòng)效的需求也更加靈活。

2.1 動(dòng)效的使用場(chǎng)景

動(dòng)效在網(wǎng)頁(yè)中的需求，除了交互層面的剛需外，還有趣味性等層面的需求?；ヂ?lián)網(wǎng)剛興起時(shí)，正是互聯(lián)網(wǎng)用戶(hù)適應(yīng)網(wǎng)頁(yè)交互模式的習(xí)慣定型階段，此時(shí)對(duì)于動(dòng)效的需求并沒(méi)有得到充分的體現(xiàn)，在互聯(lián)網(wǎng)技術(shù)急速發(fā)展的今天，對(duì)網(wǎng)頁(yè)交互動(dòng)效提出了更高的要求和期待，作為后來(lái)者的APP等移動(dòng)端的動(dòng)效場(chǎng)景應(yīng)用，更多地反向影響了網(wǎng)頁(yè)的交互動(dòng)態(tài)設(shè)計(jì)，網(wǎng)頁(yè)交互動(dòng)效使用場(chǎng)景的定位也更加精準(zhǔn)。

2.2 交互構(gòu)成與布局的整體性

整個(gè)網(wǎng)頁(yè)或者整個(gè)功能業(yè)務(wù)流程頁(yè)面作為一個(gè)需要整體，各個(gè)部分必須履行好每個(gè)零件該有的功能。網(wǎng)頁(yè)上的不同功能有著不同的權(quán)重定位，對(duì)應(yīng)著不同精彩程度的動(dòng)效細(xì)節(jié)和形態(tài)。精確合理的權(quán)重定位，需要科學(xué)地分析頁(yè)面各處不同交互功能重要性的相對(duì)關(guān)系，對(duì)于不同的交互功能區(qū)域根據(jù)交互功能的重要程度進(jìn)行對(duì)應(yīng)的動(dòng)效原型的推定。

2.3 動(dòng)效與交互表達(dá)需求相匹配

德國(guó)拉班認(rèn)為，任何運(yùn)動(dòng)都是由重力（輕或重）、時(shí)間（快或慢）、空間（收縮或延伸）和流暢度（限制或自由）4種因素構(gòu)成的。[1]視覺(jué)傳達(dá)專(zhuān)業(yè)學(xué)生并沒(méi)有專(zhuān)門(mén)的關(guān)于熟悉動(dòng)畫(huà)運(yùn)動(dòng)規(guī)律的專(zhuān)業(yè)課程，因?yàn)檎n時(shí)等因素的限制，只能通過(guò)案例素材中運(yùn)動(dòng)的4種要素來(lái)分析和獲取動(dòng)效運(yùn)動(dòng)規(guī)律的關(guān)鍵幀形態(tài)，根據(jù)細(xì)節(jié)取舍的需要，調(diào)整中間過(guò)程幀的密度和強(qiáng)度，重點(diǎn)在于對(duì)形態(tài)模擬的把握，影響動(dòng)效運(yùn)動(dòng)規(guī)律合適程度的因素主要有空間視角、對(duì)象形態(tài)的概括程度以及細(xì)節(jié)的取舍等，保證動(dòng)效的設(shè)計(jì)方案與交互功能表達(dá)需求的匹配度。

3 研討模式下動(dòng)效設(shè)計(jì)案例的教學(xué)組織與實(shí)施

3.1 設(shè)計(jì)教學(xué)中研討模式的實(shí)施背景

視覺(jué)傳達(dá)設(shè)計(jì)專(zhuān)業(yè)的專(zhuān)業(yè)課程課堂教學(xué)形式一般都會(huì)有案例實(shí)踐環(huán)節(jié)的存在，有某種程度上的應(yīng)用實(shí)踐，但缺乏對(duì)實(shí)際應(yīng)用、思維方法的研究以及學(xué)生原創(chuàng)意識(shí)與原創(chuàng)動(dòng)力的培養(yǎng)。在高考高錄取率的背景下，班級(jí)人數(shù)遠(yuǎn)遠(yuǎn)超出當(dāng)年設(shè)計(jì)教育所倡導(dǎo)的師生高頻交流互動(dòng)啟發(fā)并維持質(zhì)量、深度和廣度，以及當(dāng)下課堂的思想交流活動(dòng)等教育方式所能承載的數(shù)量。同時(shí)，在生源質(zhì)量參差不齊的背景下，原有的精耕細(xì)作的設(shè)計(jì)教育教學(xué)方式，已經(jīng)無(wú)法解決新的問(wèn)題。

3.2 基于研討模式的動(dòng)效設(shè)計(jì)課堂的教學(xué)設(shè)計(jì)

（1）結(jié)合動(dòng)效設(shè)計(jì)教學(xué)的內(nèi)容特點(diǎn)調(diào)整課程的教學(xué)設(shè)計(jì)。湖南師范大學(xué)郭漢民教授總結(jié)了“研討式五步教學(xué)法”，即將一門(mén)課程的教學(xué)分為五個(gè)步驟，五個(gè)步驟環(huán)環(huán)相扣，逐步遞進(jìn)，每一步都是后一步的必要準(zhǔn)備，也是其前一步的自然延伸。[2]這五個(gè)步驟分別是：指導(dǎo)選題、獨(dú)立探索、小組交流、大班講評(píng)、成果總結(jié)。[1]在本門(mén)課程中，根據(jù)動(dòng)效內(nèi)容的特點(diǎn)和教學(xué)的側(cè)重點(diǎn)，歸納為四個(gè)方面，由“設(shè)計(jì)/提出問(wèn)題、探索解決方案、舉一反三的應(yīng)用、思考總結(jié)與鞏固”組成。

動(dòng)效設(shè)計(jì)的課堂教學(xué)內(nèi)容，本質(zhì)是應(yīng)用跨學(xué)科技能和知識(shí)去綜合解決問(wèn)題，單獨(dú)強(qiáng)調(diào)動(dòng)效設(shè)計(jì)的某個(gè)方面，都會(huì)讓動(dòng)效設(shè)計(jì)方案偏離目標(biāo)導(dǎo)向。教學(xué)設(shè)計(jì)的重點(diǎn)在于對(duì)研討模式前的教學(xué)案例的選擇、實(shí)踐項(xiàng)目的設(shè)定以及對(duì)應(yīng)的研討主題的設(shè)置，并就學(xué)生在參與研討的過(guò)程中可能會(huì)出現(xiàn)的問(wèn)題進(jìn)行反復(fù)推理、調(diào)整、實(shí)踐、總結(jié)的循環(huán)改進(jìn)，這是一個(gè)長(zhǎng)期的過(guò)程。

（2）用問(wèn)題引導(dǎo)學(xué)生對(duì)設(shè)計(jì)方法的應(yīng)用與把握。動(dòng)效設(shè)計(jì)方法的目的，并不是只針對(duì)動(dòng)效本身的設(shè)計(jì)，而是針對(duì)動(dòng)效的方式、效果和強(qiáng)度選擇一種恰到好處的方案去實(shí)現(xiàn)動(dòng)效設(shè)計(jì)的初衷。動(dòng)效的設(shè)計(jì)方案包括動(dòng)效的定位，動(dòng)效定位的分析依據(jù)包括交互功能的權(quán)重、頁(yè)面視覺(jué)效果以及交互的功能性視覺(jué)聯(lián)想關(guān)聯(lián)程度等方面。

動(dòng)效的制作、動(dòng)效的規(guī)范化與模塊化處理三個(gè)方面，每個(gè)方面都必須設(shè)置問(wèn)題引導(dǎo)學(xué)生解決，在解決的過(guò)程中加深對(duì)設(shè)計(jì)方法的理解和感悟。

3.3 關(guān)于動(dòng)效設(shè)計(jì)的課堂研討關(guān)鍵點(diǎn)思考

（1）動(dòng)效設(shè)計(jì)與交互功能關(guān)系的教學(xué)思考。通過(guò)案例研討分析，加深學(xué)生對(duì)“以目的為導(dǎo)向”設(shè)計(jì)方法重要性的認(rèn)知，理解“以目的為導(dǎo)向”是網(wǎng)頁(yè)界面設(shè)計(jì)的基本思路和課堂案例實(shí)踐的指導(dǎo)原則。任何視覺(jué)效果、動(dòng)效效果的設(shè)計(jì)都是圍繞著交互功能進(jìn)行布置和統(tǒng)籌的，在教學(xué)中，需要時(shí)刻讓學(xué)生知道這些設(shè)計(jì)的目的，修正設(shè)計(jì)方案中的冗余裝飾或者過(guò)度設(shè)計(jì)，始終堅(jiān)持功能決定形式的基本設(shè)計(jì)思路。

（2）動(dòng)效視覺(jué)與網(wǎng)頁(yè)視覺(jué)規(guī)范關(guān)系的教學(xué)思考。用問(wèn)題引導(dǎo)學(xué)生思考網(wǎng)頁(yè)視覺(jué)規(guī)范和動(dòng)效設(shè)計(jì)之間的關(guān)系，有助于學(xué)生針對(duì)規(guī)范和設(shè)計(jì)自由之間的關(guān)系，保持足夠獨(dú)立和有深度的思考能力。保持設(shè)計(jì)的一致性原則可以有效地傳遞信息，方便用戶(hù)學(xué)習(xí)和減少用戶(hù)的記憶負(fù)擔(dān)。[2]動(dòng)效作為圍繞交互功能而具備實(shí)際價(jià)值的事物，首要的因素是動(dòng)效能被視覺(jué)感知，進(jìn)而引發(fā)運(yùn)動(dòng)的聯(lián)想，增進(jìn)交互體驗(yàn)的深度與廣度。

動(dòng)效是網(wǎng)站或者網(wǎng)站所屬機(jī)構(gòu)視覺(jué)識(shí)別體系的一個(gè)組成部分，同時(shí)動(dòng)效的使用場(chǎng)景具有非常大的靈活性，在具體實(shí)踐中又表現(xiàn)出很大的自由度，將動(dòng)效設(shè)計(jì)方案以一種有效的視覺(jué)規(guī)則納入網(wǎng)頁(yè)或者界面視覺(jué)的規(guī)范體系中，是網(wǎng)頁(yè)交互動(dòng)效設(shè)計(jì)的一種趨勢(shì)，教學(xué)中應(yīng)該通過(guò)設(shè)計(jì)案例，強(qiáng)調(diào)在多途徑感官同感方面有成體系的平衡方法和原則，以模塊化的方式滿(mǎn)足不同功能交互層級(jí)表達(dá)組合，以及網(wǎng)頁(yè)界面動(dòng)效應(yīng)用的規(guī)范化需求。

4 結(jié)語(yǔ)

研討模式介入動(dòng)效設(shè)計(jì)教學(xué)環(huán)節(jié)中，有助于通過(guò)對(duì)動(dòng)效的設(shè)計(jì)實(shí)踐，培養(yǎng)學(xué)生綜合分析問(wèn)題、制定實(shí)施方案的執(zhí)行能力。動(dòng)效設(shè)計(jì)雖然設(shè)計(jì)的是動(dòng)效效果，但動(dòng)效設(shè)計(jì)的定位是以交互需求為根本展開(kāi)的活動(dòng)，動(dòng)效本身是一種富有狀態(tài)變化的網(wǎng)頁(yè)效果，在研討模式的教學(xué)實(shí)踐中，對(duì)動(dòng)效設(shè)計(jì)流程每個(gè)環(huán)節(jié)的思考、分析和決策都能在課堂研討活動(dòng)中使學(xué)生充分地參與進(jìn)來(lái)，對(duì)設(shè)計(jì)方法的理解認(rèn)知與應(yīng)用感悟以及教學(xué)質(zhì)量得到提升，同時(shí)也激發(fā)了學(xué)生積極創(chuàng)新并主動(dòng)去創(chuàng)造內(nèi)容的積極性。

參考文獻(xiàn)：

[1] 馬薇.研討式教學(xué)法在機(jī)電專(zhuān)業(yè)本科學(xué)生畢業(yè)設(shè)計(jì)中的應(yīng)用[J].教育探索，2010（5）：80-82.

[2] 渠芳，連承波.講授式教學(xué)法與研討式教學(xué)法在石油地質(zhì)專(zhuān)業(yè)本科畢業(yè)設(shè)計(jì)中的應(yīng)用[J].黑龍江教育，2011（9）：86-88.

[3] SANTOS L，DIAS J . Laban Movement Analysis Towards Be-havior Patterns[J]. Emerging Trends in Technological Innova-tion，2010（14）：187-194.

[4] 許鈺偉.移動(dòng)應(yīng)用界面動(dòng)效易用性研究[J].設(shè)計(jì)藝術(shù)與理論，2016（6）：60-61.

作者簡(jiǎn)介：熊科軍（1982—），男，湖南常德人，講師，湖南文理學(xué)院藝術(shù)學(xué)院專(zhuān)任教師，研究方向：信息的視覺(jué)與交互設(shè)計(jì)。