技術(shù)報(bào)告基于交互設(shè)計(jì)的網(wǎng)頁設(shè)計(jì)制作課程體系改革

1、計(jì)劃類別 項(xiàng)目編號 項(xiàng)目技術(shù)報(bào)告課題名稱 項(xiàng)目主持人 承擔(dān)單位 題目：基于交互設(shè)計(jì)的網(wǎng)頁設(shè)計(jì)與制作課程體系改革在產(chǎn)品為王的互聯(lián)網(wǎng)時(shí)代，網(wǎng)頁設(shè)計(jì)與制作課程內(nèi)容不能只限于網(wǎng)頁技術(shù)的教學(xué)，也要求更多考慮用戶體驗(yàn)，融入交互設(shè)計(jì)的思想和方法進(jìn)行改革。筆者對交互設(shè)計(jì)理念做了基本的介紹，根據(jù)職業(yè)技術(shù)教育的特點(diǎn)重新設(shè)定了網(wǎng)頁設(shè)計(jì)與制作的課程目標(biāo)，提出模塊化、鏈條化、交互化和產(chǎn)品階段化的多個(gè)優(yōu)化教學(xué)體系的措施，并從用戶體驗(yàn)、交互設(shè)計(jì)角度對原有教學(xué)模式進(jìn)行創(chuàng)設(shè)情境、啟發(fā)思考、小組協(xié)作等方面的調(diào)整，對教學(xué)方法、教學(xué)評價(jià)也作了針對性的補(bǔ)充。關(guān)鍵詞：交互設(shè)計(jì)；網(wǎng)頁設(shè)計(jì)與制作；課程體系改革Abstract：The pro

2、duct is most important in the Internet era，so the content of the webpage design and making course cant 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 basi

3、c 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 perspecti

4、ve 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 reform1 引言（I

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

6、部在關(guān)于深化職業(yè)教育教學(xué)改革全面提高人才培養(yǎng)質(zhì)量的若干意見中指出，“推進(jìn)專業(yè)課程內(nèi)容適應(yīng)經(jīng)濟(jì)發(fā)展、產(chǎn)業(yè)升級和技術(shù)進(jìn)步需要”。當(dāng)下所處的互聯(lián)網(wǎng)時(shí)代，其本質(zhì)特征包括“用戶中心”和“萬物交互”，體現(xiàn)在市場上，即為通行的用戶為王、體驗(yàn)為王、產(chǎn)品為王的內(nèi)在規(guī)律。因此，網(wǎng)頁產(chǎn)品開發(fā)需要針對用戶隱藏在行為背后的數(shù)據(jù)和邏輯基礎(chǔ)上進(jìn)行交互式開發(fā)，網(wǎng)頁設(shè)計(jì)與制作人才的培養(yǎng)，也應(yīng)該以交互設(shè)計(jì)理念為引領(lǐng)，實(shí)現(xiàn)與互聯(lián)網(wǎng)行業(yè)崗位需求相呼應(yīng)的培養(yǎng)策略，對現(xiàn)有不匹配市場發(fā)展網(wǎng)頁設(shè)計(jì)與制作的課程體系進(jìn)行教學(xué)改革。2 交互設(shè)計(jì)理論體系和產(chǎn)品開發(fā)（Interaction designtheory system and produc

7、t development）2.1 交互設(shè)計(jì)理論體系交互設(shè)計(jì)，又稱互動(dòng)設(shè)計(jì)（英文Interaction Design，縮寫IxD或者IaD），是以用戶為中心，研究某些人在特定的場景下與不同的設(shè)備產(chǎn)生行為的交互過程1。從實(shí)踐層面看，早期的設(shè)計(jì)強(qiáng)調(diào)美感，多指的是工業(yè)產(chǎn)品的外觀或者是計(jì)算機(jī)軟件的界面設(shè)計(jì)。20世紀(jì)90年代后，交互設(shè)計(jì)逐步從界面拓展開來，強(qiáng)調(diào)計(jì)算機(jī)對于人的反饋交互作用。交互系統(tǒng)設(shè)計(jì)的目標(biāo)可以從“可用性”和“用戶體驗(yàn)”兩個(gè)層面上進(jìn)行分析，關(guān)注以人為本的用戶需求。相比較而言，視覺設(shè)計(jì)是讓產(chǎn)品更具有視覺美感（包括信息傳達(dá)），功能設(shè)計(jì)是讓產(chǎn)品擁有更加準(zhǔn)備和豐富的功能，交互設(shè)計(jì)是讓產(chǎn)品更符合人的

8、使用要求，更加有效地完成產(chǎn)品作用2。交互設(shè)計(jì)是依據(jù)人的行為進(jìn)行設(shè)計(jì)，尤其是使用產(chǎn)品的行為。基本的要素有三：用戶Who，給誰用的；目標(biāo)Why，為什么做；行為How，怎么做。我們可以通過一個(gè)網(wǎng)易網(wǎng)頁產(chǎn)品設(shè)計(jì)與制作的基本流程來說明交互設(shè)計(jì)過程，說明如下：用戶：網(wǎng)易用戶，開發(fā)者對網(wǎng)易產(chǎn)品的用戶進(jìn)行相關(guān)研究。目標(biāo)：網(wǎng)易用戶想要獲取更加豐富的應(yīng)用產(chǎn)品，開發(fā)者的產(chǎn)品頁面支持用戶實(shí)現(xiàn)目標(biāo)。行為：用戶根據(jù)自身的心理和習(xí)慣進(jìn)行頁面瀏覽，設(shè)計(jì)者以用戶的瀏覽行為根據(jù)進(jìn)行網(wǎng)頁產(chǎn)品設(shè)計(jì)和制作。以下是網(wǎng)易應(yīng)用市場首頁的交互設(shè)計(jì)流程圖：步驟1：網(wǎng)頁布局，依據(jù)用戶的需求和心理把它歸納為四個(gè)區(qū)塊；endprint步驟2：根據(jù)布局

9、層次框架確定繼續(xù)將每個(gè)區(qū)塊細(xì)化為細(xì)節(jié)線框圖（即為交互原型）；步驟3：視覺設(shè)計(jì)完成后的用戶界面（UI）圖。其中步驟1的作用尤其關(guān)鍵，這是頁面設(shè)計(jì)的基礎(chǔ)，是頁面信息架構(gòu)。此外，還有很多方法可幫助我們來分析用戶的行為，包括流程圖、泳道圖、頁面流、站點(diǎn)地圖、線框圖、目標(biāo)元素圖、用戶路徑圖、信息架構(gòu)圖等。后續(xù)還要通過前端交互技術(shù)實(shí)現(xiàn)頁面產(chǎn)品的界面和功能。2.2 基于交互設(shè)計(jì)的網(wǎng)頁產(chǎn)品開發(fā)早期的網(wǎng)頁產(chǎn)品制作流程相對簡單，主要注重界面設(shè)計(jì)和功能實(shí)現(xiàn)，而交互設(shè)計(jì)理念引領(lǐng)下的網(wǎng)頁產(chǎn)品開發(fā)始終以用戶體驗(yàn)為中心，以用戶行為為研究目標(biāo)，遵從交互設(shè)計(jì)的規(guī)律去開發(fā)。（1）開發(fā)流程（2）崗位說明說明：與流程相對應(yīng)的是各個(gè)不

10、同技能的崗位。不過中小企業(yè)的作業(yè)流程相對沒有那么細(xì)分，可能出現(xiàn)一個(gè)崗位負(fù)責(zé)幾個(gè)崗位的工作，一般來說，一個(gè)互聯(lián)網(wǎng)產(chǎn)品開發(fā)的基本團(tuán)隊(duì)?wèi)?yīng)該包含產(chǎn)品經(jīng)理（或含交互設(shè)計(jì)師）、UI設(shè)計(jì)師（或含交互設(shè)計(jì)師），前端工程師，后臺開發(fā)師等基本崗位。3 基于交互設(shè)計(jì)的網(wǎng)頁設(shè)計(jì)與制作課程體系改革（Based on the interaction design of web pagedesign and facture course system reform）3.1 重定教學(xué)目標(biāo)根據(jù)職業(yè)教育學(xué)生的特點(diǎn)，網(wǎng)頁產(chǎn)品設(shè)計(jì)與制作課程的教學(xué)內(nèi)容和教學(xué)體系當(dāng)中應(yīng)該化繁就簡，摒棄對于學(xué)生來說難度過大的崗位和內(nèi)容。比如組織協(xié)調(diào)能力市

11、場敏感程度要求過高的產(chǎn)品經(jīng)理，開發(fā)難度較大的后臺開發(fā)。而應(yīng)該著眼于網(wǎng)頁產(chǎn)品的前端實(shí)現(xiàn)，特別是應(yīng)以網(wǎng)頁前端的實(shí)現(xiàn)作為網(wǎng)頁產(chǎn)品設(shè)計(jì)與制作課程的主要內(nèi)容。網(wǎng)頁設(shè)計(jì)與制作是計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)的核心課程，實(shí)踐性較強(qiáng)。在早期，本課程以圖形圖像處理技術(shù)為前導(dǎo)課程，著力培養(yǎng)學(xué)生在網(wǎng)頁素材搜集、網(wǎng)站布局和規(guī)劃、網(wǎng)頁元素制作、腳本代碼編寫、網(wǎng)站發(fā)布等方面的知識和技能。在交互設(shè)計(jì)理念引入到網(wǎng)頁產(chǎn)品開發(fā)過程之后，更應(yīng)該從職業(yè)技術(shù)教育的特點(diǎn)出發(fā)，以行業(yè)的發(fā)展現(xiàn)狀為依據(jù)，以培養(yǎng)學(xué)生實(shí)際動(dòng)手能力為目標(biāo)，使學(xué)生具有前端交互實(shí)現(xiàn)的核心能力，同時(shí)兼具用戶需求研究、交互原型設(shè)計(jì)、網(wǎng)頁界面設(shè)計(jì)的輔助能力，并培養(yǎng)學(xué)生團(tuán)隊(duì)協(xié)作能力、溝通

12、能力、分析解決問題能力和產(chǎn)品開發(fā)實(shí)施能力，同時(shí)也為后續(xù)課程動(dòng)態(tài)網(wǎng)頁制作的學(xué)習(xí)奠定基礎(chǔ)3。課程目標(biāo)包括：理解用戶對于網(wǎng)頁產(chǎn)品的使用需求，并據(jù)此制作網(wǎng)頁產(chǎn)品交互原型；掌握Photoshop、Dreanweaver等軟件處理和組織網(wǎng)頁界面素材的方法；熟練運(yùn)用網(wǎng)頁腳本語言實(shí)施網(wǎng)頁交互的使用方法；培養(yǎng)學(xué)生獨(dú)立思考能力及創(chuàng)新能力。3.2 優(yōu)化課程體系以往的課程教學(xué)內(nèi)容頂層設(shè)計(jì)過于簡化，把所有網(wǎng)頁設(shè)計(jì)與制作相關(guān)的內(nèi)容，諸如計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)、圖形圖像處理、動(dòng)畫基礎(chǔ)都放在一起進(jìn)行教學(xué)，試圖以一門課來包含所有的技術(shù)，解決所有的問題，這并不符合當(dāng)下的行業(yè)要求。在交互設(shè)計(jì)理念引領(lǐng)，網(wǎng)頁產(chǎn)品開發(fā)導(dǎo)向的課程體系當(dāng)中，應(yīng)該注

13、重課程的精細(xì)分工、邏輯聯(lián)系和用戶體驗(yàn)。（1）課程內(nèi)容模塊化網(wǎng)頁產(chǎn)品的交互設(shè)計(jì)流程包含了六個(gè)環(huán)節(jié)和六個(gè)崗位，可以根據(jù)職教學(xué)生長于操作弱于理論的特點(diǎn)，簡化為交互設(shè)計(jì)、UI設(shè)計(jì)、前端實(shí)現(xiàn)三個(gè)崗位，課程內(nèi)容也相應(yīng)分為相互支持的三個(gè)模塊：交互設(shè)計(jì)、界面設(shè)計(jì)、程序設(shè)計(jì)，這樣就把較為散亂的課程內(nèi)容清晰化：交互設(shè)計(jì)注重用戶行為和體驗(yàn)，提高產(chǎn)品的有效使用程度；界面設(shè)計(jì)專注于視覺設(shè)計(jì)與美觀度，無須兼顧去實(shí)現(xiàn)頁面及動(dòng)效；程序設(shè)計(jì)則專注于HTML源碼和JS腳本的基本開發(fā)，不必涉及工具軟件的過度依賴?；诮换ピO(shè)計(jì)理念的課程模塊化之后邊界清晰，各有所長，易于教學(xué)4。（2）課程環(huán)節(jié)鏈條化交互設(shè)計(jì)理念引領(lǐng)的網(wǎng)頁產(chǎn)品開發(fā)，其工

14、作過程具有高度的邏輯相關(guān)性，每個(gè)環(huán)節(jié)都緊密相關(guān)，有著前后銜接的關(guān)系。需求分析、交互設(shè)計(jì)、UI設(shè)計(jì)、前端實(shí)現(xiàn)、后臺開發(fā)、測試與反饋是一個(gè)邏輯嚴(yán)密，依次進(jìn)行的開發(fā)過程，反映在課程內(nèi)容的邏輯性上，應(yīng)該在講授前端實(shí)現(xiàn)的內(nèi)容之前，對交互設(shè)計(jì)和界面設(shè)計(jì)有相應(yīng)基礎(chǔ)，體現(xiàn)在課程之間的相關(guān)性上，如果條件允許，也應(yīng)該把交互設(shè)計(jì)、UI設(shè)計(jì)、前端開發(fā)三門課程設(shè)置為相互的前導(dǎo)課和后續(xù)課。（3）課程過程交互化交互設(shè)計(jì)理念以用戶體驗(yàn)為中心，產(chǎn)品開發(fā)的考核標(biāo)準(zhǔn)是產(chǎn)品本身的有用性。從需要分析到測試與反饋環(huán)節(jié)，都以用戶的感受為評判標(biāo)準(zhǔn)。早期網(wǎng)頁產(chǎn)品只注重技術(shù)開發(fā)實(shí)現(xiàn)產(chǎn)品功能，界面設(shè)計(jì)也有設(shè)計(jì)師個(gè)人的藝術(shù)審美標(biāo)準(zhǔn)，在交互設(shè)計(jì)理念看

15、來都是不完整的產(chǎn)品設(shè)計(jì)和開發(fā)，都沒有完全消除開發(fā)者本人的視角，沒有做到以獨(dú)立客觀的用戶視角作為開發(fā)依據(jù)。因此在交互設(shè)計(jì)理念引領(lǐng)的網(wǎng)頁設(shè)計(jì)與制作課程體系，每一個(gè)環(huán)節(jié)都需要從用戶體驗(yàn)角度，從產(chǎn)品之外去和社會互動(dòng)。（4）產(chǎn)品形態(tài)階段化網(wǎng)頁產(chǎn)品的設(shè)計(jì)與制作，根據(jù)用戶要求和技術(shù)基礎(chǔ)的不同，可以分為不同層次的產(chǎn)品形態(tài)。通過產(chǎn)品形態(tài)來組織教學(xué)內(nèi)容，也是交互設(shè)計(jì)理念指導(dǎo)網(wǎng)頁設(shè)計(jì)與制作課程教學(xué)的成果形式，是更加符合市場現(xiàn)狀的一個(gè)例證。一般來說，網(wǎng)頁產(chǎn)品可以分為初級形態(tài)、中級形態(tài)和高級形態(tài)。初級形態(tài)是只有元素呈現(xiàn)，但無布局的網(wǎng)頁產(chǎn)品。學(xué)生根據(jù)用戶的基本要求，利用HTML標(biāo)記的認(rèn)知和應(yīng)用，插入各種豐富多彩的網(wǎng)頁元素

16、，用戶能夠單純從內(nèi)容上感受網(wǎng)頁的基本功能。通過個(gè)人主頁等作品的練習(xí)和開發(fā)可以熟悉初級網(wǎng)頁產(chǎn)品形態(tài)。中級形態(tài)是進(jìn)一步滿足用戶的美觀要求，將網(wǎng)頁上的各種元素組織起來，達(dá)到邏輯清晰、美觀大方的產(chǎn)品風(fēng)格。這就要求學(xué)生能夠通過DIV+CSS對網(wǎng)頁元素實(shí)施層布局，同時(shí)美化頁面效果。通過公司主頁等作品的練習(xí)和開發(fā)可以熟悉中級網(wǎng)頁產(chǎn)品形態(tài)。高級形態(tài)是用戶除了內(nèi)容豐富和界面美觀的需求之外，還需要和網(wǎng)頁元素進(jìn)行操作互動(dòng)，以便更加深入了解和使用網(wǎng)頁產(chǎn)品。這就需要學(xué)生先期掌握一定的語言基礎(chǔ)，學(xué)習(xí)掌握J(rèn)ava Script腳本語言，實(shí)現(xiàn)網(wǎng)頁互動(dòng)的效果，如客戶端驗(yàn)證和頁面特效制作。通過媒體網(wǎng)站等作品的練習(xí)和開發(fā)可以熟悉高

17、級網(wǎng)頁產(chǎn)品形態(tài)。endprint（網(wǎng)頁）產(chǎn)品設(shè)計(jì)與制作課程體系模塊化、鏈條化、交互化、產(chǎn)品階段化的關(guān)系可以整理如圖3所示。making course system3.3 改革教學(xué)模式以交互設(shè)計(jì)為導(dǎo)向的網(wǎng)頁設(shè)計(jì)與制作課程教學(xué)，將圍繞用戶體驗(yàn)為中心展開。因此，采用探究性教學(xué)模式較為合適，通過網(wǎng)頁產(chǎn)品使用的情境創(chuàng)設(shè)、啟發(fā)思考、小組探究的方式組織學(xué)生積極研究用戶感受，深度感受開發(fā)者職能，對于網(wǎng)頁產(chǎn)品的設(shè)計(jì)與開發(fā)課程體系具有較高的重要性和可行性。（1）創(chuàng)設(shè)情境：探究式模式的教學(xué)要求圍繞用戶為中心的網(wǎng)頁產(chǎn)品開發(fā)為教學(xué)出發(fā)點(diǎn)，教師通過問題、任務(wù)等多種形式，創(chuàng)設(shè)與此學(xué)習(xí)場景相關(guān)的學(xué)習(xí)情境，引導(dǎo)學(xué)生進(jìn)行目標(biāo)導(dǎo)向

18、的學(xué)習(xí)。（2）啟發(fā)思考：教學(xué)對象確定后，需要向?qū)W生提出緊密圍繞目標(biāo)對象，引起學(xué)生深思的問題，比如用戶中心的網(wǎng)頁產(chǎn)品通過哪些行為來體現(xiàn)？這也便于學(xué)生圍繞問題去探究。（3）自主（或小組）探究：在問題的牽引下，教師、學(xué)生、信息技術(shù)相互作用，教師引導(dǎo)、支持，學(xué)生主動(dòng)積極學(xué)習(xí)，同時(shí)信息技術(shù)成為認(rèn)知工具，形成對于網(wǎng)頁產(chǎn)品中用戶行為邏輯的自主或小組探究，這也是探究教學(xué)模式中的關(guān)鍵環(huán)節(jié)。（4）協(xié)作交流：學(xué)生經(jīng)過認(rèn)真自主探究后，進(jìn)而進(jìn)行高質(zhì)量的協(xié)作交流，教師組織協(xié)調(diào)這一過程。經(jīng)過這一環(huán)節(jié)，學(xué)生對于隱藏在用戶行為背后的心理將會有更加深入的了解。探究性教學(xué)模式當(dāng)中，學(xué)生在教師的指導(dǎo)下，“自主”設(shè)立網(wǎng)頁產(chǎn)品開發(fā)的目標(biāo)，通過調(diào)查“探究”網(wǎng)頁產(chǎn)品內(nèi)在的用戶行為邏輯，形成產(chǎn)品交互原型，“合作”完成網(wǎng)頁產(chǎn)品的用戶界面和前端實(shí)現(xiàn)，從而地達(dá)到課程中關(guān)于認(rèn)知目標(biāo)與能力目標(biāo)的綜合要求。3.4 豐富教學(xué)方法（1）任務(wù)驅(qū)動(dòng)法：課程體系結(jié)構(gòu)以網(wǎng)頁產(chǎn)品的設(shè)計(jì)與制作任務(wù)為主線，根據(jù)學(xué)生的理解程度布置網(wǎng)頁產(chǎn)品設(shè)計(jì)與制作的細(xì)分學(xué)習(xí)任務(wù)，學(xué)生自己動(dòng)手獨(dú)立完成學(xué)習(xí)任務(wù)，