網(wǎng)頁交互界面的動效設(shè)計(jì)教學(xué)探索研究

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

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

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

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

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

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

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

2.1 動效的使用場景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 結(jié)語

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

參考文獻(xiàn)：

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

[2] 渠芳，連承波.講授式教學(xué)法與研討式教學(xué)法在石油地質(zhì)專業(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] 許鈺偉.移動應(yīng)用界面動效易用性研究[J].設(shè)計(jì)藝術(shù)與理論，2016（6）：60-61.

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