交互動(dòng)畫式網(wǎng)站設(shè)計(jì)與應(yīng)用

吳 晴，史啟新（安徽工程大學(xué)，安徽 蕪湖 241000）

?

交互動(dòng)畫式網(wǎng)站設(shè)計(jì)與應(yīng)用

吳 晴，史啟新
（安徽工程大學(xué)，安徽 蕪湖 241000）

摘 要：基于信息化時(shí)代背景下，網(wǎng)絡(luò)的普及性應(yīng)用以及多媒體技術(shù)的不斷發(fā)展促使交互動(dòng)畫逐漸成為了網(wǎng)絡(luò)傳播的一大主流形式。通過對圖像、聲音以及視頻等的整合處理，能夠以多樣化的表現(xiàn)形式來實(shí)現(xiàn)產(chǎn)品信息的個(gè)性化且高效化傳遞，并強(qiáng)化感官上的刺激以吸引消費(fèi)者的注意力，強(qiáng)化產(chǎn)品營銷的效果。本文首先闡述了交互動(dòng)畫網(wǎng)站的具體設(shè)計(jì)，其次針對交互動(dòng)畫網(wǎng)站設(shè)計(jì)的具體應(yīng)用進(jìn)行分析，以供參考。

關(guān)鍵詞：交互動(dòng)畫；網(wǎng)站設(shè)計(jì)；應(yīng)用探討

計(jì)算機(jī)動(dòng)畫作為一種全新的交互動(dòng)畫形式，隨著互聯(lián)網(wǎng)應(yīng)用技術(shù)的不斷發(fā)展而逐漸成為了一種全新的網(wǎng)絡(luò)信息傳播方式，交互動(dòng)畫利用多媒體技術(shù)的下的Java等技術(shù)手段，通過對聲音以及視頻圖片的整合來實(shí)現(xiàn)人與動(dòng)畫間的交互性［1］。

1　基于交互動(dòng)畫的網(wǎng)站設(shè)計(jì)

1.1設(shè)計(jì)的原則

第一，信息的準(zhǔn)確傳達(dá)性。第二，人性化。第三，適合傳播的途徑。第四，將藝術(shù)性融入到設(shè)計(jì)的目的性中［2］。

1.2設(shè)計(jì)的思路

本交互動(dòng)畫設(shè)計(jì)以服裝主題網(wǎng)站為例，在實(shí)際設(shè)計(jì)的過程中，基于這一類型的網(wǎng)站所涉及到的產(chǎn)品類型較多，通過需要明確主次，定位主打服裝以強(qiáng)化宣傳效果，以設(shè)計(jì)內(nèi)容為出發(fā)點(diǎn)，需要明確如下三個(gè)部分的設(shè)計(jì)：第一，要從整體出發(fā)，實(shí)現(xiàn)網(wǎng)站頁面的規(guī)劃設(shè)計(jì)。需要針對店鋪的基本信息、產(chǎn)品的類型、服飾的分類以及搭配等進(jìn)行頁面構(gòu)架，明確網(wǎng)站頁面的特色，凸顯出自身的風(fēng)格特色。第二，單個(gè)物品的展示設(shè)計(jì)。以交互動(dòng)畫形式來展現(xiàn)單個(gè)物品，通過真實(shí)互動(dòng)來確保瀏覽者真實(shí)且全面的了解產(chǎn)品。第三，實(shí)現(xiàn)頁面交互動(dòng)畫設(shè)計(jì)，包括首頁與各級(jí)頁面。

1.3設(shè)計(jì)的實(shí)現(xiàn)

第一，整體規(guī)劃設(shè)計(jì)的實(shí)現(xiàn)。指的是實(shí)現(xiàn)網(wǎng)站的頁面構(gòu)架的規(guī)劃，具體落實(shí)的過程中，需要實(shí)現(xiàn)風(fēng)格的設(shè)計(jì)以及具體背景顏色等的填充，進(jìn)而實(shí)現(xiàn)網(wǎng)站頁面的個(gè)性化設(shè)計(jì)。在實(shí)際設(shè)計(jì)的過程中采用 CorelDraw/Photoshop等軟件來進(jìn)行設(shè)計(jì)，在定位交互設(shè)計(jì)平臺(tái)的基礎(chǔ)上，需要首先頁面的元素的手繪設(shè)計(jì)，以此為參照通過相應(yīng)設(shè)計(jì)元件來實(shí)現(xiàn)效果的設(shè)計(jì)，以構(gòu)建出設(shè)計(jì)藍(lán)圖。完成之后需要以Jpeg等文件格式來實(shí)現(xiàn)保存，其中PNG保存格式下背景進(jìn)行透明處理，相應(yīng)像素與分辨率要符合全屏顯示之需。第二，單個(gè)物品設(shè)計(jì)的實(shí)現(xiàn)。在落實(shí)這一交互設(shè)計(jì)內(nèi)容的過程中，一般可以采用三維建模的方式亦或者是二維全景圖拍攝的方法來進(jìn)行，在此基礎(chǔ)上來實(shí)現(xiàn)二維與三維形式的交互設(shè)計(jì)，相應(yīng)設(shè)計(jì)軟件可采用 3ds max/VR Toolbox等軟件進(jìn)行設(shè)計(jì)，在分類處理、調(diào)整后實(shí)現(xiàn)效果圖的輸出。具體設(shè)計(jì)步驟［3］為：首先，在3ds max中進(jìn)行建模處理，實(shí)現(xiàn)對文件大小的有效控制，在此基礎(chǔ)上，以Cult 3D來實(shí)現(xiàn)3D格式的輸出，并加入相應(yīng)的互動(dòng)形式，進(jìn)而到處相應(yīng)的播放文件進(jìn)行壓縮處理，為發(fā)布應(yīng)用奠定基礎(chǔ)。其次，以二維圖片進(jìn)行三維動(dòng)畫拼接的過程中，需要在相應(yīng)的刻度旋轉(zhuǎn)平臺(tái)上按照每十度一張凸顯來進(jìn)行圖片采集，導(dǎo)入后以相應(yīng)的修圖軟件進(jìn)行圖片處理，并轉(zhuǎn)化成相應(yīng)像素下的文件格式，在此基礎(chǔ)上以VR軟件來實(shí)現(xiàn)全景的拼接，進(jìn)而制作成影視動(dòng)畫形式下的互動(dòng)動(dòng)畫。最后，頁面設(shè)計(jì)。包括首頁以及各級(jí)頁面的交互動(dòng)畫設(shè)計(jì)，這一設(shè)計(jì)是凸顯整個(gè)網(wǎng)站風(fēng)格的關(guān)鍵所在，需要以用戶體驗(yàn)需求為出發(fā)點(diǎn)，融入設(shè)計(jì)的藝術(shù)與趣味性等，迎合瀏覽者的審美需求。［4］在具體落實(shí)設(shè)計(jì)的過程中，首先，要設(shè)計(jì)元素的整合，然后，實(shí)現(xiàn)各級(jí)頁面的具體設(shè)計(jì)，并確保各級(jí)頁面中具備單個(gè)產(chǎn)品交互動(dòng)畫展示的空間，最后，實(shí)現(xiàn)主頁面的設(shè)計(jì)，并制作出相應(yīng)的導(dǎo)航頁面，通過相應(yīng)語言軟件進(jìn)行編程，調(diào)試后來確認(rèn)最終的效果圖。第四，頁面整合設(shè)計(jì)。首先，以Photoshop等軟件進(jìn)行靜態(tài)頁面的制作與修飾，加入文字內(nèi)容，融入所需插入的交互動(dòng)畫，并確保其格式與大小上符合要求，并進(jìn)行保存；然后，以Flash軟件來實(shí)現(xiàn)動(dòng)畫設(shè)計(jì)，插入相應(yīng)背景等，并以 Dream weaver軟件實(shí)現(xiàn)單個(gè)物品與網(wǎng)站各級(jí)頁面的鏈接設(shè)計(jì)，最后進(jìn)行瀏覽并實(shí)現(xiàn)有針對性的調(diào)式，以確保交互動(dòng)畫的成功發(fā)布。

2　基于交互動(dòng)畫網(wǎng)站設(shè)計(jì)的應(yīng)用

2.1應(yīng)用的作用分析

第一，創(chuàng)新產(chǎn)品營銷手段。以交互動(dòng)畫設(shè)計(jì)的應(yīng)用來實(shí)現(xiàn)產(chǎn)品的營銷，通過互聯(lián)網(wǎng)這一媒介能夠?qū)崿F(xiàn)產(chǎn)品信息的高效流通與傳播，并以交互動(dòng)畫的獨(dú)特設(shè)計(jì)理念來迎合消費(fèi)者的實(shí)際需求。交互動(dòng)畫設(shè)計(jì)能夠進(jìn)一步細(xì)化產(chǎn)品的展示細(xì)節(jié)，并通過明確的主題與個(gè)性化設(shè)計(jì)理念的融入來吸引瀏覽者的注意力，進(jìn)而為產(chǎn)品的營銷與推廣開辟了新途徑。同時(shí)，這一設(shè)計(jì)形式的應(yīng)用也是對傳統(tǒng)網(wǎng)站設(shè)計(jì)的一種補(bǔ)充，相應(yīng)信息內(nèi)容更加的豐富且具體，效果更好。第二，強(qiáng)化信息傳遞效果。交互動(dòng)畫下通過動(dòng)畫設(shè)計(jì)與人的有效互動(dòng)，能夠強(qiáng)化消費(fèi)者的體驗(yàn)感，并在參與的過程中強(qiáng)化與消費(fèi)者的溝通與交流，進(jìn)而強(qiáng)化了信息的傳遞效果。第三，強(qiáng)化了情感上的交流。通過交互動(dòng)畫設(shè)計(jì)的應(yīng)用能夠通過這一平臺(tái)來吸引瀏覽者的注意力，并且以消費(fèi)者心理需求為出發(fā)點(diǎn)的設(shè)計(jì)理念下能夠激發(fā)情感的共鳴，通過藝術(shù)性與趣味性等進(jìn)一步融合來強(qiáng)化情感上的溝通與交流。

2.2應(yīng)用過程中所呈現(xiàn)出的問題與解決對策

第一，應(yīng)用過程中所呈現(xiàn)出的問題。主要表現(xiàn)在如下兩點(diǎn)：一是設(shè)計(jì)理念不完善，缺乏創(chuàng)新性，且在設(shè)計(jì)制作過程中技術(shù)落實(shí)不到位；二是交互動(dòng)畫設(shè)計(jì)的整體性存在不足，難以體現(xiàn)出交互動(dòng)畫設(shè)計(jì)的價(jià)值，有待進(jìn)一步的優(yōu)化與完善。第二，對策。立足于當(dāng)前網(wǎng)絡(luò)營銷推廣發(fā)展形勢下，交互動(dòng)畫設(shè)計(jì)的應(yīng)用要想充分的體現(xiàn)出交互動(dòng)畫的價(jià)值，則就需要以設(shè)計(jì)構(gòu)思為出發(fā)點(diǎn)，把握住整體構(gòu)思理念，在此基礎(chǔ)上，進(jìn)一步提升設(shè)計(jì)能力與水平，按部就班的落實(shí)各個(gè)設(shè)計(jì)環(huán)節(jié)，并要突出強(qiáng)調(diào)交互動(dòng)畫設(shè)計(jì)的交互性及趣味性。

3　結(jié)束語

綜上所述，交互動(dòng)畫網(wǎng)站的設(shè)計(jì)與應(yīng)用已成為當(dāng)前網(wǎng)絡(luò)營銷與推廣的主要途徑之一，在實(shí)際落實(shí)設(shè)計(jì)的過程中，需要在明確設(shè)計(jì)原則的基礎(chǔ)上，進(jìn)行設(shè)計(jì)的構(gòu)思與實(shí)現(xiàn)，同時(shí)要明確網(wǎng)站交互動(dòng)畫應(yīng)用意義的同時(shí)，結(jié)合所呈現(xiàn)出的問題來明確總體解決方向，以確保實(shí)現(xiàn)網(wǎng)站交互動(dòng)畫的完善設(shè)計(jì)與應(yīng)用。

參考文獻(xiàn)：

［1］王靜.網(wǎng)絡(luò)廣告中交互動(dòng)畫的設(shè)計(jì)應(yīng)用研究［D］.西安: 西安理工大學(xué)，2008.

［2］朱舉英.基于交互學(xué)習(xí)的精品課程網(wǎng)站設(shè)計(jì)與開發(fā)研究［D］.蘭州: 西北師范大學(xué)，2012.

［3］汪翠義.基于感性的教育網(wǎng)站頁面設(shè)計(jì)研究［D］.蕪湖: 安徽師范大學(xué)，2013.

［4］古樂娟.動(dòng)畫制作專題學(xué)習(xí)網(wǎng)站的設(shè)計(jì)與開發(fā)［D］.濟(jì)南: 山東師范大學(xué)，2011.

（責(zé)任編輯：雷 君）

中圖分類號(hào)：S611

文獻(xiàn)標(biāo)識(shí)碼：A

doi:10.3969/j.issn.1672-7304.2016.01.074

文章編號(hào)：1672–7304（2016）01–0159–02

作者簡介：吳晴（1990-），女，安徽池州人，研究方向：動(dòng)漫設(shè)計(jì)與理論研究。

The web design and application based on interactive animation

WU Qing，SHI Qi-xin
（Anhui Polytechnic University. Wuhu Anhui 241000）

Abstract:Based on the background of information technology， the popularization of network application and the development of multimedia technology have made interactive animation gradually become a mainstream form of Internet communication.Through the integration of image， sound and video， it can realize the personalized and efficient delivery of product information in a variety of forms， strengthen the stimulation in order to attract the attention of consumers and strengthen the effect of product marketing. In this paper， we first elaborate the specific design of interactive animation website， and then analyze the specific application of interactive animation website design， for reference.

Keywords:Interactive animation； Website design； Application