網頁交互界面的動效設計教學探索研究

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

關鍵詞：網頁視覺規范;動效設計;形象識別;用戶體驗;課堂研討

1 動效設計教學在網頁界面設計課程教學中的必要性

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

動效在早期的網頁界面設計中，是網頁設計與制作從業人員發現的一種能增加界面交互操作趣味性的額外工作，在移動端界面設計行業興起后，動效成為包括網頁在內的界面設計方案中的一種標準配置，也是界面相關專業課程的重要組成部分，同時也是專業教學中實踐價值的體現。

2 動效設計的授課內容安排

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

2.1 動效的使用場景

動效在網頁中的需求，除了交互層面的剛需外，還有趣味性等層面的需求?；ヂ摼W剛興起時，正是互聯網用戶適應網頁交互模式的習慣定型階段，此時對于動效的需求并沒有得到充分的體現，在互聯網技術急速發展的今天，對網頁交互動效提出了更高的要求和期待，作為后來者的APP等移動端的動效場景應用，更多地反向影響了網頁的交互動態設計，網頁交互動效使用場景的定位也更加精準。

2.2 交互構成與布局的整體性

整個網頁或者整個功能業務流程頁面作為一個需要整體，各個部分必須履行好每個零件該有的功能。網頁上的不同功能有著不同的權重定位，對應著不同精彩程度的動效細節和形態。精確合理的權重定位，需要科學地分析頁面各處不同交互功能重要性的相對關系，對于不同的交互功能區域根據交互功能的重要程度進行對應的動效原型的推定。

2.3 動效與交互表達需求相匹配

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

3 研討模式下動效設計案例的教學組織與實施

3.1 設計教學中研討模式的實施背景

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

3.2 基于研討模式的動效設計課堂的教學設計

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

動效設計的課堂教學內容，本質是應用跨學科技能和知識去綜合解決問題，單獨強調動效設計的某個方面，都會讓動效設計方案偏離目標導向。教學設計的重點在于對研討模式前的教學案例的選擇、實踐項目的設定以及對應的研討主題的設置，并就學生在參與研討的過程中可能會出現的問題進行反復推理、調整、實踐、總結的循環改進，這是一個長期的過程。

（2）用問題引導學生對設計方法的應用與把握。動效設計方法的目的，并不是只針對動效本身的設計，而是針對動效的方式、效果和強度選擇一種恰到好處的方案去實現動效設計的初衷。動效的設計方案包括動效的定位，動效定位的分析依據包括交互功能的權重、頁面視覺效果以及交互的功能性視覺聯想關聯程度等方面。

動效的制作、動效的規范化與模塊化處理三個方面，每個方面都必須設置問題引導學生解決，在解決的過程中加深對設計方法的理解和感悟。

3.3 關于動效設計的課堂研討關鍵點思考

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

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

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

4 結語

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

參考文獻：

[1] 馬薇.研討式教學法在機電專業本科學生畢業設計中的應用[J].教育探索，2010（5）：80-82.

[2] 渠芳，連承波.講授式教學法與研討式教學法在石油地質專業本科畢業設計中的應用[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] 許鈺偉.移動應用界面動效易用性研究[J].設計藝術與理論，2016（6）：60-61.

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