基于移動(dòng)終端的互動(dòng)媒體產(chǎn)品設(shè)計(jì)與制作

王榮榮 譚坤 唐蕓莉

摘要：以鳳翔泥塑的交互媒體產(chǎn)品設(shè)計(jì)與實(shí)現(xiàn)為研究對(duì)象，分析移動(dòng)終端的特點(diǎn)，并針對(duì)這一終端的主要用戶進(jìn)行需求分析，對(duì)鳳翔泥塑的交互媒體產(chǎn)品進(jìn)行了概念設(shè)計(jì)和交互制作研究。研究了視覺(jué)設(shè)計(jì)、交互制作與音效設(shè)計(jì)三個(gè)方面的合作。以實(shí)現(xiàn)整體交互功能的方法和流程。并在總結(jié)部分對(duì)非遺在交互媒體的發(fā)展提出了提高交互層次的建議。

關(guān)鍵詞：移動(dòng)終端；互動(dòng)媒體；鳳翔泥塑；非遺傳承

1《鳳翔泥塑》互動(dòng)媒體產(chǎn)品總體設(shè)計(jì)思考

基于移動(dòng)終端的鳳翔泥塑互動(dòng)媒體產(chǎn)品的設(shè)計(jì)，并非簡(jiǎn)單的的將鳳翔泥塑的作品圖片移植到移動(dòng)終端上，而是通過(guò)可能潛在的用戶進(jìn)行分析，將產(chǎn)品定位于面向各個(gè)年齡段、各個(gè)職業(yè)受眾的多媒體電子讀物。從當(dāng)前泥塑工藝的存在狀態(tài)看，傳統(tǒng)的泥塑風(fēng)格已經(jīng)已經(jīng)不能完全契合當(dāng)代人的審美。傳統(tǒng)泥塑作品逐漸成為祈子、護(hù)生、辟邪、鎮(zhèn)宅、納福的符號(hào)，更多的承載了人們的美好期望。因此，此作品以鳳翔傳統(tǒng)泥塑為切入點(diǎn)，在對(duì)其歷史以及傳承的介紹以外，在作品賞析部分也著重對(duì)其美好寓意進(jìn)行介紹。

2《鳳翔泥塑》互動(dòng)媒體產(chǎn)品信息架構(gòu)設(shè)計(jì)

2.1流程設(shè)計(jì)

多媒體產(chǎn)品的交互流程主要采用層層遞進(jìn)的形式，開(kāi)始動(dòng)畫(huà)結(jié)束后可自動(dòng)跳到導(dǎo)入頁(yè)也可以在動(dòng)畫(huà)播放的中途點(diǎn)擊跳過(guò)動(dòng)畫(huà)按鈕進(jìn)入導(dǎo)入頁(yè)，從導(dǎo)入頁(yè)點(diǎn)擊進(jìn)入后跳轉(zhuǎn)為實(shí)景導(dǎo)航頁(yè)，可以從四個(gè)模塊中選擇自己想要了解的部分點(diǎn)擊進(jìn)入，進(jìn)入之后為二級(jí)導(dǎo)航，展示這一部分的幾個(gè)小部分，再選擇一個(gè)點(diǎn)擊進(jìn)入后就是詳情頁(yè)，可以詳細(xì)了解鳳翔泥塑。在二級(jí)頁(yè)面右下角有伸縮導(dǎo)航，可以跳到其余的二級(jí)頁(yè)以及首頁(yè)退出頁(yè)等，使交互過(guò)程更便捷。

2.2架構(gòu)設(shè)計(jì)

為了更全面的介紹鳳翔泥塑而且符合大部分讀者的瀏覽習(xí)慣，對(duì)鳳翔泥塑的全部信息進(jìn)行了分類(lèi)，將其分為了四大模塊，又將這四大模塊劃分為若干小模塊，可以詳細(xì)了解其歷史、工藝、傳承大師、風(fēng)俗奇趣及作品。

3《鳳翔泥塑》互動(dòng)媒體產(chǎn)品界面設(shè)計(jì)

3.1導(dǎo)入頁(yè)及導(dǎo)航頁(yè)設(shè)計(jì)

我們的設(shè)計(jì)以簡(jiǎn)潔大方為主要風(fēng)格，導(dǎo)入頁(yè)以黃色為主基調(diào)，中間為泥塑兩個(gè)大字以及陜西鳳翔的小字，下半部分為有鳳翔建筑特色的屋檐，如圖2所示。導(dǎo)航以黑色為主要色調(diào)，分為四塊內(nèi)容，每塊代表一個(gè)模塊，鼠標(biāo)滑過(guò)效果以黃色為主基調(diào)，下方為西游記中的師徒四人。

3.2二級(jí)界面的設(shè)計(jì)

二級(jí)頁(yè)面為詳情頁(yè)的入口，為了保持整體風(fēng)格的一致，二級(jí)頁(yè)面也較為簡(jiǎn)約。二級(jí)頁(yè)面起承上啟下的作用，所以沒(méi)有太多的文字，而是有幾個(gè)進(jìn)入三級(jí)界面的按鈕，使交互過(guò)程有了過(guò)渡，也會(huì)使讀者有更好的用戶體驗(yàn)。

4《鳳翔泥塑》互動(dòng)媒體產(chǎn)品交互系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

4.1《鳳翔泥塑》互動(dòng)媒體產(chǎn)品交互系統(tǒng)的設(shè)計(jì)

交互系統(tǒng)設(shè)計(jì)有別于交互設(shè)計(jì)，它更強(qiáng)調(diào)系統(tǒng)的概念，是由一組相互作用、相互聯(lián)系的元素組成，并通過(guò)產(chǎn)品的使用和創(chuàng)新用戶的體驗(yàn)。因此，交互系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)需要團(tuán)隊(duì)合作，需要研究由人、人的行為、產(chǎn)品使用時(shí)的場(chǎng)景和實(shí)現(xiàn)技術(shù)四個(gè)方面組成系統(tǒng)，即交互系統(tǒng)。其中，人指產(chǎn)品服務(wù)的對(duì)象，即用戶。人的行為指在用戶產(chǎn)品使用中的動(dòng)作行為和反饋行為，如點(diǎn)擊按鈕、聲音的打開(kāi)與關(guān)閉等。使用環(huán)境是指用戶使用產(chǎn)品時(shí)所處的環(huán)境，包括地理環(huán)境、社會(huì)環(huán)境等。實(shí)現(xiàn)技術(shù)主要是指為實(shí)現(xiàn)用戶的所有交互功能而采取的包括硬件和軟件技術(shù)，如語(yǔ)音識(shí)別、多媒體、虛擬現(xiàn)實(shí)、網(wǎng)絡(luò)等。在交互系統(tǒng)設(shè)計(jì)中，歷經(jīng)需求分析、概念設(shè)計(jì)和原型設(shè)計(jì)三個(gè)階段。

需求分析主要是了解用戶，包括用戶的身份、使用習(xí)慣、使用場(chǎng)所等信息。在實(shí)際調(diào)查中，發(fā)現(xiàn)對(duì)鳳翔泥塑這一傳統(tǒng)工藝形式感興趣的群眾還是有很多的，并且想了解更多有關(guān)鳳翔泥塑的信息。在使用場(chǎng)所分析中，由于手機(jī)和計(jì)算機(jī)作為應(yīng)用程序載體的便攜性，用戶往往是在小段空余時(shí)間，如在交通工具上、等人、等車(chē)中使用，時(shí)間多分散、短暫。綜上所述，對(duì)本產(chǎn)品的需求進(jìn)行歸納。首先產(chǎn)品面對(duì)的用戶是廣大群眾，主要功能是通過(guò)交互體驗(yàn)來(lái)了解鳳翔泥塑這一國(guó)家非物質(zhì)文化遺產(chǎn)，考慮到用戶使用環(huán)境的特點(diǎn)，在安卓手機(jī)端及ipad端打開(kāi)再關(guān)閉可以記憶當(dāng)前瀏覽的節(jié)點(diǎn)，再次打開(kāi)時(shí)可以自動(dòng)播放這一節(jié)點(diǎn)。

交互系統(tǒng)的概念設(shè)計(jì)是一系列有序、可組織、有目標(biāo)的設(shè)計(jì)活動(dòng)。在本階段，交互系統(tǒng)設(shè)計(jì)為產(chǎn)品規(guī)劃出基本的功能框架，分析用戶在使用產(chǎn)品時(shí)所有可能出現(xiàn)的情況，并歸納出各種情況間的邏輯關(guān)系和應(yīng)對(duì)方法。一般而言，交互系統(tǒng)中根據(jù)應(yīng)用程序與用戶的互動(dòng)形式，可以將互動(dòng)行為分為三個(gè)層次，分別是反應(yīng)是互動(dòng)、主動(dòng)式互動(dòng)和雙向式互動(dòng)。其中反應(yīng)式交互可實(shí)現(xiàn)用戶操作后，應(yīng)用程序提供固定的反應(yīng)，如點(diǎn)擊切換下一界面等。而主動(dòng)式互動(dòng)需要用戶對(duì)應(yīng)用程序提出的問(wèn)題予以解答，根據(jù)不同用戶的回答應(yīng)用程序?qū)⒔o予正誤判斷或各自相應(yīng)的答案，如在app中進(jìn)行拼圖游戲等。在交互層次更高的雙向式交互中，則是實(shí)現(xiàn)用戶在使用應(yīng)用程序時(shí)，自身和應(yīng)用程序均發(fā)生變化，雙方在互動(dòng)中互相影響并改變自己，如一些職能玩具可以記錄用戶的使用習(xí)慣、愛(ài)好、常用語(yǔ)言等，并調(diào)整自身功能，使用戶在后續(xù)使用中更和諧、更人性化。由于本產(chǎn)品屬于電子讀物，主要提供圖片、視頻和文字的展示功能，并需符合人們閱讀電子讀物的行為習(xí)慣，如返回上級(jí)界面、返回導(dǎo)航界面、關(guān)閉背景音樂(lè)或者中途退出等。根據(jù)上述需求分析和定位，研究者將交互層次定位為第一層次的反應(yīng)式互動(dòng)，主要通過(guò)按鈕點(diǎn)擊控制為用戶提供固定的反應(yīng)活動(dòng)。

交互系統(tǒng)的原型設(shè)計(jì)是直接決定整個(gè)交互面貌和狀態(tài)的關(guān)鍵性環(huán)節(jié)，此項(xiàng)交互媒體產(chǎn)品的交互系統(tǒng)程序包括開(kāi)始動(dòng)畫(huà)、導(dǎo)入項(xiàng)、導(dǎo)航項(xiàng)、二級(jí)項(xiàng)等。點(diǎn)擊導(dǎo)入頁(yè)的“點(diǎn)擊進(jìn)入”按鈕，即可進(jìn)入導(dǎo)航頁(yè)，在鼠標(biāo)滑過(guò)導(dǎo)航頁(yè)的四個(gè)大的按鈕時(shí)，會(huì)有翻頁(yè)的變化效果，點(diǎn)擊即可進(jìn)入各個(gè)二級(jí)頁(yè)面，點(diǎn)擊二級(jí)界面的按鈕即可進(jìn)入詳情頁(yè)。此外，每一個(gè)頁(yè)面都有退出按鈕和控制音樂(lè)開(kāi)關(guān)的按鈕，可以直接退出和關(guān)閉/播放音樂(lè)，各個(gè)頁(yè)面都可以返回到上一級(jí)頁(yè)面。二級(jí)頁(yè)面上還有伸縮導(dǎo)航可以不返回實(shí)景導(dǎo)航直接跳到其他二級(jí)頁(yè)面。此外還有幫助頁(yè)，從幫助頁(yè)上也可以直接跳轉(zhuǎn)到任意界面。跳轉(zhuǎn)到新的頁(yè)面時(shí)都有相應(yīng)的動(dòng)畫(huà)播放，增加其趣味性。

4.2《鳳翔泥塑》互動(dòng)媒體產(chǎn)品交互系統(tǒng)的開(kāi)發(fā)實(shí)現(xiàn)

4.2.1交互動(dòng)畫(huà)的制作

在交互系統(tǒng)原型設(shè)計(jì)完成之后，進(jìn)入交互系統(tǒng)的實(shí)現(xiàn)階段。首先，先把每一個(gè)單獨(dú)界面的動(dòng)畫(huà)制作出來(lái)，將靜態(tài)的界面變成動(dòng)態(tài)的界面，這一階段需要使用flash軟件和ID軟件來(lái)完成。在此過(guò)程中要注意動(dòng)畫(huà)形式要多樣化，要有層次感，使其有趣味性，引發(fā)讀者的閱讀興趣。然后就是把制作出來(lái)的單個(gè)界面用編寫(xiě)代碼的形式串聯(lián)在一起，使其可以實(shí)現(xiàn)點(diǎn)擊按鈕跳轉(zhuǎn)相應(yīng)的界面，而且要保證產(chǎn)品可以流暢播放，不能出現(xiàn)卡頓等影響視覺(jué)效果的情況。

應(yīng)用補(bǔ)間動(dòng)畫(huà)、遮罩層動(dòng)畫(huà)、設(shè)置緩動(dòng)等方式完成線性導(dǎo)入頁(yè)動(dòng)畫(huà)設(shè)計(jì)。注意通過(guò)時(shí)間軸和緩動(dòng)來(lái)設(shè)置動(dòng)畫(huà)的運(yùn)動(dòng)節(jié)奏。通過(guò)調(diào)節(jié)實(shí)景導(dǎo)航按鈕光線的亮度指完成按鈕閃光效果。注意閃光動(dòng)畫(huà)的運(yùn)動(dòng)節(jié)奏。添加事件偵聽(tīng)，通過(guò)點(diǎn)擊窗戶可以跳轉(zhuǎn)到其他頁(yè)面。為減少調(diào)用外部swf的數(shù)量，在次級(jí)界面與其子界面跳轉(zhuǎn)時(shí)，可采用調(diào)用庫(kù)中影片剪輯的形式。將要跳轉(zhuǎn)的界面合并到主頁(yè)面庫(kù)中，作為一個(gè)獨(dú)立的影片剪輯，并定義其類(lèi)名字。

4.2.2產(chǎn)品的發(fā)布

在所有的功能都實(shí)現(xiàn)后，要把產(chǎn)品發(fā)布在手機(jī)和ipad等移動(dòng)終端上進(jìn)行測(cè)試，保證可以正常瀏覽。測(cè)試完畢后就可以將整個(gè)程序打包發(fā)布于各類(lèi)應(yīng)用商店中供讀者下載瀏覽。讓用戶可以在更為寬泛的平臺(tái)了解鳳翔泥塑的信息，對(duì)其產(chǎn)生興趣并投身于非遺的傳承與保護(hù)中。更新Flash中的Adobe AIR版本，從網(wǎng)上下載AIRSDK_Compiler包。在Adobe Flash的安裝目錄下新建一個(gè)AIR20.0.0.204的文件夾，將下載包解壓至該文件夾即可。選擇幫助＼管理AIR SDK，然后點(diǎn)擊添加根目錄新建的AIR20.0.0.204文件夾即可。將要發(fā)布的《中華刺繡》所有鏈接文件拷貝到D盤(pán)或E盤(pán)根目錄下，其中的地址鏈接不能出現(xiàn)中文字符。打開(kāi)首頁(yè)文件進(jìn)行發(fā)布，在屬性面板設(shè)置發(fā)布設(shè)置目標(biāo)為AIR20.0.0.204 for android。點(diǎn)擊目標(biāo)旁邊扳手圖標(biāo)進(jìn)入編輯應(yīng)用程序設(shè)置面板。創(chuàng)建證書(shū)、選擇橫向全屏播放、將AIR運(yùn)行時(shí)嵌入應(yīng)用程序。

結(jié)論

非遺元素為互動(dòng)媒體產(chǎn)品提供了視覺(jué)支持，同時(shí)互動(dòng)媒體又為非遺的宣傳工作注入了新鮮的血液，多元化的媒體傳播方式為文化的傳承與發(fā)展提供了有力的支持，擴(kuò)大了群眾對(duì)非遺的認(rèn)知度，對(duì)于非遺的保護(hù)具有重要的意義。

基金項(xiàng)目：北京電子科技職業(yè)學(xué)院移動(dòng)終端交互設(shè)計(jì)創(chuàng)新團(tuán)隊(duì)項(xiàng)目（CGJX2017_XSSZ_003/12）

作者簡(jiǎn)介：王榮榮（1997—），女，山西人，北京電子科技職業(yè)學(xué)院藝術(shù)設(shè)計(jì)學(xué)院學(xué)生。

通訊作者簡(jiǎn)介：譚坤（1982—），女，山東人，碩士，北京電子科技職業(yè)學(xué)院副教授，主要研究方向?yàn)榛?dòng)媒體設(shè)計(jì)。