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

花 晶

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

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

花 晶

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

〔2〕黃本亮.交互設(shè)計(jì)的語義層面[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）