交互設(shè)計(jì)在《網(wǎng)頁(yè)設(shè)計(jì)》課程中的作用研究

花 晶

（安徽工程大學(xué) 藝術(shù)學(xué)院，安徽 蕪湖 241000）

交互設(shè)計(jì)在《網(wǎng)頁(yè)設(shè)計(jì)》課程中的作用研究

花 晶

（安徽工程大學(xué) 藝術(shù)學(xué)院，安徽 蕪湖 241000）

現(xiàn)在互聯(lián)網(wǎng)的發(fā)展沖擊著人們生活的個(gè)個(gè)角落，近幾年我國(guó)也在大力倡導(dǎo)“互聯(lián)網(wǎng)+”的思維方式，在此背景下作為高等藝術(shù)院校的專業(yè)課程《網(wǎng)頁(yè)設(shè)計(jì)》課程就顯得尤為重要.由于時(shí)代及技術(shù)的更新，現(xiàn)在互聯(lián)網(wǎng)也從非移動(dòng)端轉(zhuǎn)向?yàn)橐苿?dòng)端，網(wǎng)絡(luò)信息傳遞操作模式也從早期的B2B轉(zhuǎn)向了C2O，人們從早期的互聯(lián)網(wǎng)信息的直接索取，到現(xiàn)在的與互聯(lián)網(wǎng)信息平臺(tái)的交互，互聯(lián)網(wǎng)思維已經(jīng)發(fā)生了翻天覆地的變化.而作為研究互聯(lián)網(wǎng)平臺(tái)與用戶體驗(yàn)之間關(guān)系的交互設(shè)計(jì)，應(yīng)該是作為《網(wǎng)頁(yè)設(shè)計(jì)》課程中的重要一部分.本論文就是從教學(xué)對(duì)象、教學(xué)目標(biāo)、教學(xué)方法等角度論證如今交互設(shè)計(jì)在《網(wǎng)頁(yè)設(shè)計(jì)》課程中的重要作用.

網(wǎng)頁(yè)設(shè)計(jì)課程；交互設(shè)計(jì)；移動(dòng)端互聯(lián)網(wǎng)平臺(tái)

隨著“互聯(lián)網(wǎng)+”的思想提出，互聯(lián)網(wǎng)的發(fā)展、計(jì)算機(jī)技術(shù)、多媒體技術(shù)的有著更加迅猛的發(fā)展，人們對(duì)于網(wǎng)站有著越來(lái)越強(qiáng)的認(rèn)識(shí)，人們也越來(lái)越依賴于互聯(lián)網(wǎng)世界，那么社會(huì)對(duì)于網(wǎng)頁(yè)設(shè)計(jì)的人才也有著越來(lái)越多的需求.因此高校教育過(guò)程中加強(qiáng)網(wǎng)頁(yè)設(shè)計(jì)的課程教學(xué)，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)的人才培養(yǎng)具有十分重要的意義.在高等藝術(shù)院校中，《網(wǎng)頁(yè)設(shè)計(jì)》的課程設(shè)計(jì)中，我們對(duì)于培養(yǎng)目的有著明確定位，主要是為社會(huì)輸送合格的網(wǎng)頁(yè)設(shè)計(jì)人才.網(wǎng)頁(yè)設(shè)計(jì)課程的教學(xué)目標(biāo)是使學(xué)生掌握網(wǎng)站的構(gòu)建以及網(wǎng)頁(yè)的頁(yè)面設(shè)計(jì)，熟練應(yīng)用DREAMWAVE、PHOTSHOP等軟件完成網(wǎng)站的開(kāi)發(fā)與設(shè)計(jì).而本人在藝術(shù)學(xué)院里從事多年的專業(yè)教學(xué)工作，主要教授方向是視覺(jué)傳達(dá)專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)課程，面對(duì)的授課對(duì)象為視覺(jué)傳達(dá)專業(yè)大二、大三的學(xué)生.所以本文所闡述有關(guān)課程的觀點(diǎn)主要是針對(duì)這部分人群.而隨著互聯(lián)網(wǎng)對(duì)于我們生活的逐步影響，無(wú)論是針對(duì)移動(dòng)端還是非移動(dòng)端的互聯(lián)網(wǎng)，人們對(duì)于互聯(lián)網(wǎng)界面的功能及視覺(jué)的質(zhì)量要求也越來(lái)越高.現(xiàn)在移動(dòng)端互聯(lián)網(wǎng)在大力發(fā)展，特別是“互聯(lián)網(wǎng)+”思想的提出，結(jié)合云計(jì)算、大數(shù)據(jù)、物聯(lián)網(wǎng)等融合.人與界面之間的互動(dòng)性、人與界面的交互體驗(yàn)等都成為判斷好的網(wǎng)站的標(biāo)準(zhǔn).所以，在《網(wǎng)頁(yè)設(shè)計(jì)》課程中應(yīng)對(duì)交互設(shè)計(jì)這一部分內(nèi)容有所體現(xiàn).

1 交互設(shè)計(jì)的概念

交互設(shè)計(jì)作為研究方向是源于20世紀(jì)60年代，是以人機(jī)交互的形式出現(xiàn).主要研究的對(duì)象是人與界面之間的關(guān)系.當(dāng)上個(gè)世紀(jì)80年代計(jì)算機(jī)應(yīng)用技術(shù)的盛行，也使人們更加關(guān)注于人與計(jì)算機(jī)界面之間的關(guān)系.唐納德·諾曼更多地從心理學(xué)角度關(guān)注了交互設(shè)計(jì)的標(biāo)準(zhǔn)語(yǔ)匯.他提出，設(shè)計(jì)一個(gè)有效的界面，必須始于分析一個(gè)人想要做什么，而不是始于屏幕應(yīng)該顯示什么的一個(gè)隱喻或者一種觀念[1].那么，交互設(shè)計(jì)實(shí)質(zhì)上就是直接把人類的行為作為設(shè)計(jì)對(duì)象.交互設(shè)計(jì)作為一門(mén)學(xué)科，發(fā)展自己的語(yǔ)匯是必不可少的.從人機(jī)交互的技術(shù)層面看，交互設(shè)計(jì)側(cè)重于人與計(jì)算機(jī)的交互方式如何用軟硬件技術(shù)來(lái)實(shí)現(xiàn)，那么交互過(guò)程是一個(gè)輸入和輸出的過(guò)程，人通過(guò)人機(jī)界面向計(jì)算機(jī)輸入指令，計(jì)算機(jī)經(jīng)過(guò)處理后把輸出的結(jié)果呈現(xiàn)給用戶[2].人類行為作為交互性內(nèi)涵的最基本層次，決定了交互性的本質(zhì)是人的動(dòng)作，這種動(dòng)作行為包含人和人之間的、人和交互物之間的互動(dòng).[3]目前，互聯(lián)網(wǎng)是處于一個(gè)快速發(fā)展時(shí)期，互聯(lián)網(wǎng)也將不同的專業(yè)領(lǐng)域融合在一起，就網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)已經(jīng)不僅僅是頁(yè)面中的色彩、文字、排版、鏈接等元素組合而成的.而是要將設(shè)計(jì)心理、設(shè)計(jì)方法、交互設(shè)計(jì)等不同的領(lǐng)域相互融會(huì)貫通.特別是現(xiàn)在，從人與互聯(lián)網(wǎng)客戶端的偶爾關(guān)聯(lián)，到如今人與互聯(lián)網(wǎng)移動(dòng)客戶端的時(shí)時(shí)關(guān)注，人與界面之間的行為關(guān)系已經(jīng)成為一種非常重要的行為關(guān)系.所以我們?cè)谘芯坎W(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候應(yīng)該加強(qiáng)對(duì)這方面的認(rèn)識(shí).

2 《網(wǎng)頁(yè)設(shè)計(jì)》課程的介紹

本文《網(wǎng)頁(yè)設(shè)計(jì)》課程主要指高等藝術(shù)院校內(nèi)的專業(yè)課程.那么《網(wǎng)頁(yè)設(shè)計(jì)》課程是一門(mén)以網(wǎng)絡(luò)為媒介的，結(jié)合平面設(shè)計(jì)、版面設(shè)計(jì)、動(dòng)畫(huà)設(shè)計(jì)、交互設(shè)計(jì)等多方面基本要素的藝術(shù)學(xué)院專業(yè)課程.《網(wǎng)頁(yè)設(shè)計(jì)》課程培養(yǎng)目標(biāo)是為了培養(yǎng)學(xué)生的能夠適合互聯(lián)網(wǎng)的發(fā)展和多媒體技術(shù)的迅猛發(fā)展，通過(guò)網(wǎng)站的站點(diǎn)平臺(tái)設(shè)計(jì)出優(yōu)秀的網(wǎng)頁(yè)頁(yè)面，從而能夠傳遞出正確的設(shè)計(jì)意圖.但現(xiàn)在對(duì)于從互聯(lián)網(wǎng)端到移動(dòng)互聯(lián)網(wǎng)端革命性的發(fā)展，《網(wǎng)頁(yè)設(shè)計(jì)》課程應(yīng)對(duì)技術(shù)的發(fā)展、社會(huì)的發(fā)展有所調(diào)整.我們對(duì)于《網(wǎng)頁(yè)設(shè)計(jì)》課程的安排主要從教學(xué)策略、教學(xué)目標(biāo)、以及考核標(biāo)準(zhǔn)等幾個(gè)方面考慮.首先，教學(xué)策略主要就是指對(duì)于教學(xué)目標(biāo)以及整個(gè)教學(xué)過(guò)程中的程序、方法、形式和媒介等因素的總體性的考慮.也就是說(shuō)在整個(gè)教學(xué)過(guò)程中考慮到學(xué)生的情況、考慮到教學(xué)硬件環(huán)境，從而采用最適合的教學(xué)手段以及方法.在高等院校中的《網(wǎng)頁(yè)設(shè)計(jì)》課程，所面對(duì)的是大二、大三的學(xué)生有一定的專業(yè)基礎(chǔ)，完全被動(dòng)式的教學(xué)方式是不適合的.我們要采用的是主動(dòng)教學(xué)與被動(dòng)教學(xué)相結(jié)合的方式.網(wǎng)頁(yè)設(shè)計(jì)課程的知識(shí)體系相對(duì)來(lái)講比較復(fù)雜，在教學(xué)過(guò)程中需幫助學(xué)生建立有效的知識(shí)框架，然后用引導(dǎo)的方式使學(xué)生能夠通過(guò)自主學(xué)習(xí)達(dá)成學(xué)習(xí)目標(biāo).同時(shí)，也可以很好地培養(yǎng)學(xué)生的個(gè)人的想象力和創(chuàng)造力.再者，我們需要建立相應(yīng)的教學(xué)目標(biāo)，而作為網(wǎng)頁(yè)設(shè)計(jì)課程的教學(xué)目標(biāo)就是培養(yǎng)學(xué)生成為具有較高的思想理論素養(yǎng)和藝術(shù)類網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)作研究能力的高素質(zhì)藝術(shù)設(shè)計(jì)人才.通過(guò)啟迪學(xué)生的審美意識(shí)，提高學(xué)生敏銳的觀察力與感受力、延伸和發(fā)展學(xué)生的設(shè)計(jì)創(chuàng)作個(gè)性；通過(guò)培養(yǎng)學(xué)生的想象能力，激發(fā)學(xué)生的設(shè)計(jì)靈感.圍繞基本目標(biāo)，以勇于探索，不斷創(chuàng)新的精神.最后，針對(duì)網(wǎng)頁(yè)設(shè)計(jì)課程我們需要建立相應(yīng)的考核標(biāo)準(zhǔn)，即：通過(guò)本門(mén)課程的學(xué)習(xí)與制作，使學(xué)生在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域具備自學(xué)鉆研能力，能夠運(yùn)用制作網(wǎng)頁(yè)，獨(dú)立完成靜態(tài)網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)作品.該作品要達(dá)到：（1）整體設(shè)計(jì)風(fēng)格統(tǒng)一、主題突出，頁(yè)面效果具有較強(qiáng)的視覺(jué)沖擊力，整個(gè)設(shè)計(jì)具有親和力.（2）網(wǎng)頁(yè)功能明確，欄目設(shè)計(jì)合理.（3）層次清晰，網(wǎng)站結(jié)構(gòu)明確.

3 交互設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)課程中的作用與課程設(shè)置

作為藝術(shù)設(shè)計(jì)相關(guān)專業(yè)的一門(mén)主干專業(yè)必修課，網(wǎng)頁(yè)設(shè)計(jì)課程一般的總學(xué)時(shí)為64學(xué)時(shí).一門(mén)課程的課程設(shè)置包括這門(mén)課的內(nèi)容設(shè)置和課堂環(huán)節(jié)設(shè)置兩個(gè)方面.作為高校藝術(shù)學(xué)院的專業(yè)課程，在課程環(huán)節(jié)設(shè)置中首先要考慮課程目的以及培養(yǎng)對(duì)象特征.本課程作為高等院校藝術(shù)學(xué)院的專業(yè)課程，其課程目的是以培養(yǎng)學(xué)生網(wǎng)站建立與欣賞的基礎(chǔ)上能與現(xiàn)有的就業(yè)市場(chǎng)需求之間解決供求問(wèn)題.所以本課程應(yīng)時(shí)刻與市場(chǎng)的變化保持緊密聯(lián)系，在內(nèi)容設(shè)置方面更應(yīng)隨著外部環(huán)境的變化而變化，與社會(huì)、科技的發(fā)展保持一致.

作為高等院校的藝術(shù)專業(yè)所教授的網(wǎng)頁(yè)設(shè)計(jì)課程，主要是以創(chuàng)意、構(gòu)思、構(gòu)成元素、版面設(shè)計(jì)、色彩取向、設(shè)計(jì)風(fēng)格等統(tǒng)一表現(xiàn)在一起的頁(yè)面設(shè)計(jì).主要培養(yǎng)對(duì)于網(wǎng)頁(yè)的視覺(jué)界面設(shè)計(jì)，突出網(wǎng)頁(yè)的審美性能以及頁(yè)面信息傳遞的準(zhǔn)確性.我們對(duì)這類網(wǎng)頁(yè)類型稱之為“靜態(tài)網(wǎng)頁(yè)”.“靜態(tài)網(wǎng)頁(yè)”，就是在網(wǎng)站設(shè)計(jì)中，純粹HTML格式的網(wǎng)頁(yè)，那么早期的網(wǎng)站也主要是以靜態(tài)網(wǎng)頁(yè)制作為主的.靜態(tài)網(wǎng)頁(yè)相對(duì)于動(dòng)態(tài)網(wǎng)頁(yè)而言，是沒(méi)有后臺(tái)數(shù)據(jù)庫(kù)、不含程序和不可交互的網(wǎng)頁(yè).一般看來(lái)，是編寫(xiě)什么頁(yè)面就顯示什么頁(yè)面，不會(huì)有改變.通常的這種“靜態(tài)網(wǎng)頁(yè)”著重點(diǎn)是信息的傳遞，和頁(yè)面的視覺(jué)表現(xiàn).但由于互聯(lián)網(wǎng)視覺(jué)的發(fā)展，人們?cè)跒g覽無(wú)論移動(dòng)端網(wǎng)頁(yè)還是非移動(dòng)端網(wǎng)頁(yè)，更趨于對(duì)于頁(yè)面的交互感、以及頁(yè)面的用戶體驗(yàn)對(duì)之的反饋.所以我們?cè)诮虒W(xué)內(nèi)容上也要體現(xiàn)其發(fā)展的特點(diǎn)，我們?cè)谥贫ń虒W(xué)內(nèi)容時(shí)要精密的和市場(chǎng)的變化相結(jié)合，以市場(chǎng)指導(dǎo)教學(xué)內(nèi)容的更新，并能夠使教學(xué)促進(jìn)市場(chǎng)發(fā)展.作為藝術(shù)學(xué)院的專業(yè)課程《網(wǎng)頁(yè)設(shè)計(jì)》課程的內(nèi)容設(shè)置主要為：（1）網(wǎng)頁(yè)的基本概念.（2）網(wǎng)頁(yè)視覺(jué)元素分析（網(wǎng)頁(yè)色彩分析、網(wǎng)頁(yè)文本分析、網(wǎng)頁(yè)布局分析、網(wǎng)頁(yè)對(duì)媒體元素分析）.（3）站點(diǎn)制作概述.（4）網(wǎng)頁(yè)頁(yè)面制作.（5）實(shí)踐指導(dǎo).網(wǎng)頁(yè)的基本概念教學(xué)環(huán)節(jié)主要通過(guò)基本概念的講述，讓學(xué)生能理解網(wǎng)頁(yè)及網(wǎng)站之間的聯(lián)系與區(qū)別，并通過(guò)大量市場(chǎng)上已有的網(wǎng)站的案例，讓學(xué)生能全面理解網(wǎng)頁(yè)、網(wǎng)站、市場(chǎng)、人類需要等整體大框架.在網(wǎng)頁(yè)視覺(jué)元素分析教學(xué)環(huán)節(jié)，主要是通過(guò)對(duì)色彩、文本、布局、多媒體這四種元素分別講述，讓學(xué)生能夠從視覺(jué)語(yǔ)言的角度來(lái)理解網(wǎng)頁(yè)頁(yè)面的視覺(jué)信息傳達(dá).在站點(diǎn)制作概述教學(xué)環(huán)節(jié)，主要通過(guò)“WWW”萬(wàn)維網(wǎng)的基本概念來(lái)讓學(xué)生理解互聯(lián)網(wǎng)工作的基本原理，并通過(guò)實(shí)例演示講述站點(diǎn)的建立.網(wǎng)頁(yè)頁(yè)面制作教學(xué)環(huán)節(jié)，主要的內(nèi)容為（1）HTML語(yǔ)言的講解.（2）PHOTOSHOP前期效果處理的講解.（3）DREAMWEAVER頁(yè)面建立軟件的講解等組成本章節(jié)內(nèi)容.實(shí)踐環(huán)節(jié)教學(xué)內(nèi)容主要通過(guò)一個(gè)課題，來(lái)引導(dǎo)學(xué)生建立一組靜態(tài)頁(yè)面，通過(guò)實(shí)踐環(huán)節(jié)教學(xué)內(nèi)容使學(xué)生能更好地、更完整地理解網(wǎng)頁(yè)設(shè)計(jì)這門(mén)課.

《網(wǎng)頁(yè)設(shè)計(jì)》課程的教學(xué)任務(wù)是為了實(shí)現(xiàn)教學(xué)目標(biāo)而設(shè)定的，我們?cè)谥贫ń虒W(xué)任務(wù)時(shí)，是需要根據(jù)教學(xué)對(duì)象的學(xué)習(xí)能力及特征來(lái)確定范圍和深度的.筆者對(duì)于教學(xué)任務(wù)采取了層次設(shè)計(jì)的方式，可以使不同的教學(xué)對(duì)象根據(jù)自身能力來(lái)接受相應(yīng)的學(xué)習(xí)內(nèi)容，從而達(dá)到最終的教學(xué)目標(biāo).教學(xué)任務(wù)（1）：具有一定的網(wǎng)站鑒賞能力以及網(wǎng)頁(yè)頁(yè)面的鑒賞能力.教學(xué)任務(wù)（2）：掌握網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)的基本要素：文字、圖像、表格等并能利用PS軟件做出頁(yè)面草圖.教學(xué)任務(wù)（3）：了解基本的HTML語(yǔ)言，并熟悉HTML頁(yè)面.教學(xué)任務(wù)（4）：能夠建立站點(diǎn)，并完成10個(gè)頁(yè)面的超級(jí)鏈接，能夠建立網(wǎng)站的樹(shù)狀模型圖.教學(xué)任務(wù)（5）：利用DIV+CSS，構(gòu)建頁(yè)面框架，豐富頁(yè)面內(nèi)容.教學(xué)任務(wù)（6）：根據(jù)不同主題網(wǎng)站的要求，獨(dú)立完成企業(yè)網(wǎng)站設(shè)計(jì)制作.

這樣的課程內(nèi)容設(shè)置是比較成熟的，相比較而言也是完整的.但作為高等院校的專業(yè)課程，應(yīng)該是緊隨時(shí)代及市場(chǎng)的發(fā)展.網(wǎng)頁(yè)設(shè)計(jì)課程亦是如此.互聯(lián)網(wǎng)事業(yè)的發(fā)展在短短幾十年間從未停止變革的腳步.近幾年互聯(lián)網(wǎng)事業(yè)的發(fā)展從非移動(dòng)端到如今移動(dòng)端互聯(lián)網(wǎng)的如火如荼，交互設(shè)計(jì)的出現(xiàn)更是為現(xiàn)在的網(wǎng)站建立和App建立添加了人機(jī)之間的互動(dòng)性.也可以說(shuō)交互設(shè)計(jì)是現(xiàn)如今互聯(lián)網(wǎng)事業(yè)中不可缺失的一部分，交互設(shè)計(jì)也影響著互聯(lián)網(wǎng)的發(fā)展.而網(wǎng)頁(yè)設(shè)計(jì)課程對(duì)于交互設(shè)計(jì)這部分內(nèi)容的融入，在一些高等藝術(shù)院校中的網(wǎng)頁(yè)設(shè)計(jì)課程有體現(xiàn)，但并不充分，而有些院校的網(wǎng)頁(yè)設(shè)計(jì)課程中完全沒(méi)有體現(xiàn)交互設(shè)計(jì)，也有些院校是將交互設(shè)計(jì)作為一門(mén)單獨(dú)的課程，這樣并不能很好地與網(wǎng)頁(yè)設(shè)計(jì)課程做銜接.

筆者認(rèn)為現(xiàn)在對(duì)于網(wǎng)頁(yè)設(shè)計(jì)課程的課程設(shè)計(jì)中應(yīng)把交互設(shè)計(jì)納入網(wǎng)頁(yè)設(shè)計(jì)課程中作為課程中一個(gè)章節(jié)，并通過(guò)相應(yīng)的教學(xué)設(shè)計(jì)及教學(xué)手段分別從概念、案例、內(nèi)容、實(shí)踐等方面在網(wǎng)頁(yè)設(shè)計(jì)的課程中系統(tǒng)的、完整的體現(xiàn).

〔1〕黃奮鳴.新媒體與西方數(shù)碼藝術(shù)理論[M].上海：學(xué)林出版社，2009．

〔2〕黃本亮.交互設(shè)計(jì)的語(yǔ)義層面[J].包裝工程，2013（01）：38.

〔3〕王峰.數(shù)字化城市公共藝術(shù)交互性內(nèi)涵研究[J].包裝工程，2010，31（24）：124.

G434

A

1673-260X（2017）12-0033-02

2017-09-04

2016年度安徽省高等教育提升計(jì)劃科學(xué)研究一般項(xiàng)目（TSSK2016B12）