基于交互設計的網頁設計與制作課程體系改革

李鑫

摘 要：在產品為王的互聯網時代，網頁設計與制作課程內容不能只限于網頁技術的教學，也要求更多考慮用戶體驗，融入交互設計的思想和方法進行改革。筆者對交互設計理念做了基本的介紹，根據職業技術教育的特點重新設定了《網頁設計與制作》的課程目標，提出模塊化、鏈條化、交互化和產品階段化的多個優化教學體系的措施，并從用戶體驗、交互設計角度對原有教學模式進行創設情境、啟發思考、小組協作等方面的調整，對教學方法、教學評價也作了針對性的補充。

關鍵詞：交互設計；網頁設計與制作；課程體系改革

中圖分類號：TP311.5 文獻標識碼：A

Abstract：The product is most important in the Internet era，so the content of the webpage design and making course can't be limited to web technology.User experience should be given more consideration and interaction design thoughts and methods should be integrated to reform the teaching.The paper introduces the basic concept of interaction design，resets the course objectives of Webpage design and making according to the characteristics of vocational and technical education，and puts forward several teaching system optimization measures，including modularization，chaining，interaction and staging.From the perspective of user experience and interaction design，the paper reforms the teaching model in situation creation，thinking inspiration，group collaboration，and also makes specific supplement on teaching methods and teaching evaluation.

Keywords：interaction design；web design and making；course system reform

1 引言（Introduction）

近年來中國持續速度發展，特別是互聯網行業的突飛猛進，應用市場已然處于國際發達國家水平，對互聯網產品開發人員的需求也供不應求，面向信息產業的職業教育的市場不斷看好。從前程無憂、中華英才、智聯招聘等知名招聘網站反饋的計算機人才崗位需求調查顯示，網頁設計與制作的職業人才依然緊缺。與此同時，經歷原始開發、批量生產之后，網頁產品的制作技術進入了精耕細作階段，行業分工已經高度成熟和細化，原來由個體就能完成的網頁設計與制作工作，現在已經遠遠不能滿足市場對產品質量的要求。另一方面，高度競爭也帶來產品出現同質化、過?；那闆r，表現在產品從界面到操作的嚴重雷同等多個方面。

2015年8月教育部在《關于深化職業教育教學改革全面提高人才培養質量的若干意見》中指出，“推進專業課程內容適應經濟發展、產業升級和技術進步需要”。當下所處的互聯網時代，其本質特征包括“用戶中心”和“萬物交互”，體現在市場上，即為通行的用戶為王、體驗為王、產品為王的內在規律。因此，網頁產品開發需要針對用戶隱藏在行為背后的數據和邏輯基礎上進行交互式開發，網頁設計與制作人才的培養，也應該以交互設計理念為引領，實現與互聯網行業崗位需求相呼應的培養策略，對現有不匹配市場發展網頁設計與制作的課程體系進行教學改革。

2 交互設計理論體系和產品開發（Interaction design

theory system and product development）

2.1 交互設計理論體系

交互設計，又稱互動設計（英文Interaction Design，縮寫IxD或者IaD），是以用戶為中心，研究某些人在特定的場景下與不同的設備產生行為的交互過程[1]。從實踐層面看，早期的設計強調美感，多指的是工業產品的外觀或者是計算機軟件的界面設計。20世紀90年代后，交互設計逐步從界面拓展開來，強調計算機對于人的反饋交互作用。交互系統設計的目標可以從“可用性”和“用戶體驗”兩個層面上進行分析，關注以人為本的用戶需求。相比較而言，視覺設計是讓產品更具有視覺美感（包括信息傳達），功能設計是讓產品擁有更加準備和豐富的功能，交互設計是讓產品更符合人的使用要求，更加有效地完成產品作用[2]。

交互設計是依據人的行為進行設計，尤其是使用產品的行為?；镜囊赜腥河脩簟猈ho，給誰用的；目標—Why，為什么做；行為—How，怎么做。我們可以通過一個網易網頁產品設計與制作的基本流程來說明交互設計過程，說明如下：

用戶：網易用戶，開發者對網易產品的用戶進行相關研究。

目標：網易用戶想要獲取更加豐富的應用產品，開發者的產品頁面支持用戶實現目標。

行為：用戶根據自身的心理和習慣進行頁面瀏覽，設計者以用戶的瀏覽行為根據進行網頁產品設計和制作。

以下是網易應用市場首頁的交互設計流程圖：

步驟1：網頁布局，依據用戶的需求和心理把它歸納為四個區塊；endprint

步驟2：根據布局層次框架確定繼續將每個區塊細化為細節線框圖（即為交互原型）；

步驟3：視覺設計完成后的用戶界面（UI）圖。

其中步驟1的作用尤其關鍵，這是頁面設計的基礎，是頁面信息架構。此外，還有很多方法可幫助我們來分析用戶的行為，包括流程圖、泳道圖、頁面流、站點地圖、線框圖、目標元素圖、用戶路徑圖、信息架構圖等。后續還要通過前端交互技術實現頁面產品的界面和功能。

2.2 基于交互設計的網頁產品開發

早期的網頁產品制作流程相對簡單，主要注重界面設計和功能實現，而交互設計理念引領下的網頁產品開發始終以用戶體驗為中心，以用戶行為為研究目標，遵從交互設計的規律去開發。

（1）開發流程

（2）崗位說明

說明：與流程相對應的是各個不同技能的崗位。不過中小企業的作業流程相對沒有那么細分，可能出現一個崗位負責幾個崗位的工作，一般來說，一個互聯網產品開發的基本團隊應該包含產品經理（或含交互設計師）、UI設計師（或含交互設計師），前端工程師，后臺開發師等基本崗位。

3 基于交互設計的網頁設計與制作課程體系改革

（Based on the interaction design of web page

design and facture course system reform）

3.1 重定教學目標

根據職業教育學生的特點，網頁產品設計與制作課程的教學內容和教學體系當中應該化繁就簡，摒棄對于學生來說難度過大的崗位和內容。比如組織協調能力市場敏感程度要求過高的產品經理，開發難度較大的后臺開發。而應該著眼于網頁產品的前端實現，特別是應以網頁前端的實現作為網頁產品設計與制作課程的主要內容。

《網頁設計與制作》是計算機應用技術專業的核心課程，實踐性較強。在早期，本課程以圖形圖像處理技術為前導課程，著力培養學生在網頁素材搜集、網站布局和規劃、網頁元素制作、腳本代碼編寫、網站發布等方面的知識和技能。在交互設計理念引入到網頁產品開發過程之后，更應該從職業技術教育的特點出發，以行業的發展現狀為依據，以培養學生實際動手能力為目標，使學生具有前端交互實現的核心能力，同時兼具用戶需求研究、交互原型設計、網頁界面設計的輔助能力，并培養學生團隊協作能力、溝通能力、分析解決問題能力和產品開發實施能力，同時也為后續課程《動態網頁制作》的學習奠定基礎[3]。

課程目標包括：①理解用戶對于網頁產品的使用需求，并據此制作網頁產品交互原型；②掌握Photoshop、Dreanweaver等軟件處理和組織網頁界面素材的方法；③熟練運用網頁腳本語言實施網頁交互的使用方法；④培養學生獨立思考能力及創新能力。

3.2 優化課程體系

以往的課程教學內容頂層設計過于簡化，把所有網頁設計與制作相關的內容，諸如計算機網絡技術、圖形圖像處理、動畫基礎……都放在一起進行教學，試圖以一門課來包含所有的技術，解決所有的問題，這并不符合當下的行業要求。在交互設計理念引領，網頁產品開發導向的課程體系當中，應該注重課程的精細分工、邏輯聯系和用戶體驗。

（1）課程內容模塊化

網頁產品的交互設計流程包含了六個環節和六個崗位，可以根據職教學生長于操作弱于理論的特點，簡化為交互設計、UI設計、前端實現三個崗位，課程內容也相應分為相互支持的三個模塊：交互設計、界面設計、程序設計，這樣就把較為散亂的課程內容清晰化：交互設計注重用戶行為和體驗，提高產品的有效使用程度；界面設計專注于視覺設計與美觀度，無須兼顧去實現頁面及動效；程序設計則專注于HTML源碼和JS腳本的基本開發，不必涉及工具軟件的過度依賴?；诮换ピO計理念的課程模塊化之后邊界清晰，各有所長，易于教學[4]。

（2）課程環節鏈條化

交互設計理念引領的網頁產品開發，其工作過程具有高度的邏輯相關性，每個環節都緊密相關，有著前后銜接的關系。需求分析、交互設計、UI設計、前端實現、后臺開發、測試與反饋是一個邏輯嚴密，依次進行的開發過程，反映在課程內容的邏輯性上，應該在講授前端實現的內容之前，對交互設計和界面設計有相應基礎，體現在課程之間的相關性上，如果條件允許，也應該把交互設計、UI設計、前端開發三門課程設置為相互的前導課和后續課。

（3）課程過程交互化

交互設計理念以用戶體驗為中心，產品開發的考核標準是產品本身的有用性。從需要分析到測試與反饋環節，都以用戶的感受為評判標準。早期網頁產品只注重技術開發實現產品功能，界面設計也有設計師個人的藝術審美標準，在交互設計理念看來都是不完整的產品設計和開發，都沒有完全消除開發者本人的視角，沒有做到以獨立客觀的用戶視角作為開發依據。因此在交互設計理念引領的網頁設計與制作課程體系，每一個環節都需要從用戶體驗角度，從產品之外去和社會互動。

（4）產品形態階段化

網頁產品的設計與制作，根據用戶要求和技術基礎的不同，可以分為不同層次的產品形態。通過產品形態來組織教學內容，也是交互設計理念指導網頁設計與制作課程教學的成果形式，是更加符合市場現狀的一個例證。一般來說，網頁產品可以分為初級形態、中級形態和高級形態。初級形態是只有元素呈現，但無布局的網頁產品。學生根據用戶的基本要求，利用HTML標記的認知和應用，插入各種豐富多彩的網頁元素，用戶能夠單純從內容上感受網頁的基本功能。通過個人主頁等作品的練習和開發可以熟悉初級網頁產品形態。中級形態是進一步滿足用戶的美觀要求，將網頁上的各種元素組織起來，達到邏輯清晰、美觀大方的產品風格。這就要求學生能夠通過DIV+CSS對網頁元素實施層布局，同時美化頁面效果。通過公司主頁等作品的練習和開發可以熟悉中級網頁產品形態。高級形態是用戶除了內容豐富和界面美觀的需求之外，還需要和網頁元素進行操作互動，以便更加深入了解和使用網頁產品。這就需要學生先期掌握一定的語言基礎，學習掌握Java Script腳本語言，實現網頁互動的效果，如客戶端驗證和頁面特效制作。通過媒體網站等作品的練習和開發可以熟悉高級網頁產品形態。endprint

（網頁）產品設計與制作課程體系模塊化、鏈條化、交互化、產品階段化的關系可以整理如圖3所示。

making course system

3.3 改革教學模式

以交互設計為導向的網頁設計與制作課程教學，將圍繞用戶體驗為中心展開。因此，采用探究性教學模式較為合適，通過網頁產品使用的情境創設、啟發思考、小組探究的方式組織學生積極研究用戶感受，深度感受開發者職能，對于網頁產品的設計與開發課程體系具有較高的重要性和可行性。

（1）創設情境：探究式模式的教學要求圍繞用戶為中心的網頁產品開發為教學出發點，教師通過問題、任務等多種形式，創設與此學習場景相關的學習情境，引導學生進行目標導向的學習。

（2）啟發思考：教學對象確定后，需要向學生提出緊密圍繞目標對象，引起學生深思的問題，比如用戶中心的網頁產品通過哪些行為來體現？這也便于學生圍繞問題去探究。

（3）自主（或小組）探究：在問題的牽引下，教師、學生、信息技術相互作用，教師引導、支持，學生主動積極學習，同時信息技術成為認知工具，形成對于網頁產品中用戶行為邏輯的自主或小組探究，這也是探究教學模式中的關鍵環節。

（4）協作交流：學生經過認真自主探究后，進而進行高質量的協作交流，教師組織協調這一過程。經過這一環節，學生對于隱藏在用戶行為背后的心理將會有更加深入的了解。

探究性教學模式當中，學生在教師的指導下，“自主”設立網頁產品開發的目標，通過調查“探究”網頁產品內在的用戶行為邏輯，形成產品交互原型，“合作”完成網頁產品的用戶界面和前端實現，從而地達到課程中關于認知目標與能力目標的綜合要求。

3.4 豐富教學方法

（1）任務驅動法：課程體系結構以網頁產品的設計與制作任務為主線，根據學生的理解程度布置網頁產品設計與制作的細分學習任務，學生自己動手獨立完成學習任務，使知識得到提升。

（2）角色扮演法：教學過程中，讓學生扮演實際項目開發流程當中的不同角色，以分工合作的方式理解崗位和完成任務，并且在考核方式中實施學生互評，使學生充分體驗不同流程崗位的樂趣。

3.5 完善學習評價

在學習評價上采用過程性評價和結果性評價，在這兩種評價當中，除了常規評價方法之外，還可采用基于用戶中心

的學生互評和用戶評價。學生互評有利每一次小組探究之后

對于共同用戶目標和行為的理解達成一致。用戶評價則是在產品成型之后通過收集用戶的使用形成意見，從而對學習的成果進行反饋和調整。

4 結論（Conclusion）

職教的教學改革目標在于深化課程改革，努力形成就業導向的課程體系。我們依據產業現狀，從勞動力市場分析和職業崗位分析入手，積極推進多種模式的課程改革，確立以能力為本位的教學指導思想，提出了基于交互設計的網頁設計與制作課程改革思路。這一課程體系的全面改革，對于緊貼崗位實際工作過程，更新課程內容，調整課程結構，深化多種模式的職教課程改革，做有益探索。

參考文獻（References）

[1] 百度百科：交互設計[OL]http：//baike.baidu.com/item/交互設計/7769950.

[2] 彭莉，張道軍，高好良.《網頁設計與網站建設》課程教學改革與實踐[J].軟件導刊，2013（02）：170-172.

[3] 鐘志賢.面向知識時代的教學設計框架——促進學習者發展[M].北京：中國社會科學出版社，2006.

[4] 由芳.交互設計——設計思維與實踐[M].上海：電子工業出版社，2017.

作者簡介：

李 鑫（1987-），女，碩士，講師.研究領域：Web開發.endprint