學(xué)校展示宣傳系統(tǒng)的設(shè)計(jì)與開發(fā)

摘 要：隨著信息技術(shù)的發(fā)展，人們?cè)絹碓揭揽炕ヂ?lián)網(wǎng)以及計(jì)算機(jī)來接觸外部世界，因此人們也越來越多地希望計(jì)算機(jī)的交互界面更加人性化。因此，更加人性化的用戶交互界面也成為設(shè)計(jì)者工作的最重要的要求，希望設(shè)計(jì)出來的界面更加受到用戶的歡迎。因此，這也成為現(xiàn)階段設(shè)計(jì)師的設(shè)計(jì)的重點(diǎn)以及難點(diǎn)，希望能夠更好的促進(jìn)界面的個(gè)性化，更適合人們的便捷使用。

關(guān)鍵詞：交互;界面設(shè)計(jì);NGUI;展示系統(tǒng)

在對(duì)知名院校進(jìn)行宣傳的過程中，可以采用Unity、Photoshop、C#語(yǔ)言以及NGUI相結(jié)合的方式來進(jìn)行，可以首先通過ps對(duì)界面中的一些圖標(biāo)或者是界面圖片進(jìn)行修飾，然后導(dǎo)入到unity中，之后可以在NGUI中進(jìn)行界面的編輯，最后再結(jié)合c#語(yǔ)言來完成界面的切換工作。通過這一系列的工作，可以更好地實(shí)現(xiàn)對(duì)于學(xué)校的一個(gè)展示工作，可以讓用戶通過交互界面來更好的了解學(xué)校的一些相關(guān)信息。

一 學(xué)校宣傳系統(tǒng)概述

（一）研究背景及研究意義

隨著計(jì)算機(jī)技術(shù)的不斷發(fā)展變化，人們對(duì)于計(jì)算機(jī)的需求越來越高，每個(gè)人幾乎每天都要用互聯(lián)網(wǎng)來工作學(xué)習(xí)和生活，可以說，互聯(lián)網(wǎng)或是多媒體設(shè)備已經(jīng)充斥了我們的生活的方方面面，我們已經(jīng)不能離開互聯(lián)網(wǎng)了。當(dāng)用戶與多媒體設(shè)備進(jìn)行互動(dòng)的過程，主要是通過交互界面來進(jìn)行，通過這個(gè)界面可以完成獲取重要信息，進(jìn)行有效的工作和生活。人機(jī)交互的影響力越來越大，因此對(duì)于交互界面的設(shè)計(jì)也成為當(dāng)前設(shè)計(jì)師的一個(gè)重要研究領(lǐng)域，設(shè)計(jì)師將會(huì)通過更加具有人性化的交互界面，來贏得用戶體驗(yàn)者的青睞。

通過交互界面，可以讓信息變得更加形象化。例如可以通過交互界面來對(duì)學(xué)校的信息進(jìn)行展示，通過這樣的方式可以讓用戶更好的了解學(xué)校，可以讓用戶更好的，更快的得到用戶所想要知道的信息。

（二）國(guó)內(nèi)外研究現(xiàn)狀

因?yàn)橛脩舻慕换ソ缑鎸?duì)于用戶的體驗(yàn)以及使用具有重要作用，因此許多國(guó)內(nèi)外企業(yè)已經(jīng)重視到了這一點(diǎn)，這些具有長(zhǎng)遠(yuǎn)眼光的企業(yè)，已經(jīng)非常注重通過人性化的交互界面來吸引用戶的使用率，以此為自己的企業(yè)來贏得更高的效益。例如大家所知道的金山毒霸，就是通過界面設(shè)計(jì)，給自己的產(chǎn)品帶來了很大的推動(dòng)作用，因?yàn)橥ㄟ^這樣的設(shè)計(jì)可以更好的被用戶所接受，所以才能在同類產(chǎn)品中脫穎而出。而且聯(lián)想也采用了這樣的方式，首先通過對(duì)用戶的使用性進(jìn)行測(cè)試，然后再不斷進(jìn)行改進(jìn)，通過這樣的方式可以更好地吸引用戶的使用，可以更好的為自己的企業(yè)創(chuàng)收效益，例如聯(lián)想推出了幸福系列的界面設(shè)計(jì)，而且受到了用戶的廣泛好評(píng)，以此證明具有人性化的界面設(shè)計(jì)，能夠更好的幫助自己的企業(yè)創(chuàng)收效益。因此，為了能夠更好的提升用戶的體驗(yàn)度，能夠更好的受到用戶的青睞，需要設(shè)計(jì)者設(shè)計(jì)出更加具有人性化的交互界面，來贏得用戶的喜歡。

相比較國(guó)內(nèi)的一些設(shè)計(jì)機(jī)構(gòu)，國(guó)外其實(shí)具有更加成熟的設(shè)計(jì)機(jī)構(gòu)，這些國(guó)外企業(yè)很早的就認(rèn)識(shí)到了用戶對(duì)于交互界面的一種高要求。這也主要是因?yàn)榛ヂ?lián)網(wǎng)在國(guó)外的使用率，普及率比較高，而且首先使用互聯(lián)網(wǎng)，所以在這方面做的可能更加成熟。正是由于外國(guó)對(duì)于這一問題的重視，所以很早就成立了各種各樣的交互界面設(shè)計(jì)的相關(guān)機(jī)構(gòu)，而且世界的幾大通訊企業(yè)也認(rèn)識(shí)到了這一點(diǎn)，也紛紛成立了專項(xiàng)的研究機(jī)構(gòu)，并且專門研究和發(fā)現(xiàn)這一問題的核心，來不斷的提升自己企業(yè)的閃光點(diǎn)，來更好地吸引用戶，更好的提高自己企業(yè)的收益。

通過以上的研究，我們發(fā)現(xiàn)交互界面和我們平常使用的產(chǎn)品不同，平常的產(chǎn)品只需要對(duì)于內(nèi)部的材料質(zhì)量結(jié)構(gòu)進(jìn)行提升，而交互界面則主要是對(duì)設(shè)計(jì)者的要求比較高，只有不斷地提高設(shè)計(jì)者的個(gè)人能力，才能更好的為用戶設(shè)計(jì)出更加受歡迎的交互界面，從而贏得用戶的需求。

二 系統(tǒng)需求分析及概要設(shè)計(jì)

（一）需求分析

本系統(tǒng)是為了對(duì)學(xué)校宣傳展示而存在的，跟學(xué)校網(wǎng)站有著同樣的功能，這就需要系統(tǒng)綜合網(wǎng)站的各項(xiàng)特點(diǎn)，互相補(bǔ)充，互相完善。通過這樣的一個(gè)展示系統(tǒng)，不僅可以在各個(gè)展示端上展示學(xué)校的成果，而且由于考慮到展示端的網(wǎng)絡(luò)問題，所有的信息并沒有提供下載等的方式，而是全部能夠展示在參觀者的面前。同時(shí)發(fā)現(xiàn)有很多的信息，并沒有必要展示出來的，對(duì)這些信息做了簡(jiǎn)單的取舍。

通過前期信息的搜集，發(fā)現(xiàn)學(xué)校需要展示的信息非常的多，而且很雜。有著很多的資料，比如各種獲獎(jiǎng)信息，由于信息量較大，這樣就給用戶造成了一定的負(fù)擔(dān)，對(duì)于界面友好來說有著一定的缺陷，而且在展示端沒有網(wǎng)絡(luò)的情況下比較復(fù)雜。本系統(tǒng)采用了滾動(dòng)文本的方式，將這些信息展示了出來。

為了調(diào)理更加清楚，更合理的展示出需要展示的信息，同時(shí)考慮到展示端的實(shí)際情況，有必要提供這一展示系統(tǒng)，供參觀者瀏覽學(xué)校取得的成就。

（二）可行性分析

宣傳展示系統(tǒng)的建立，對(duì)學(xué)校的宣傳能都起到的作用是不容忽視的。而這樣的展示系統(tǒng)在今后能夠用到的場(chǎng)合還有很多，系統(tǒng)的搭建勢(shì)在必行。

（1）技術(shù)可行性：本展示系統(tǒng)的關(guān)鍵首先是界面設(shè)計(jì)部分，要設(shè)計(jì)出合適的界面，包括首頁(yè)一個(gè)各個(gè)二級(jí)界面。之后就是在NGUI中實(shí)現(xiàn)這些界面并對(duì)界面中的簡(jiǎn)單動(dòng)畫進(jìn)行編輯。將各個(gè)界面之間緊密連接，形成一個(gè)大一統(tǒng)的整體。

（2）經(jīng)濟(jì)可行性

從系統(tǒng)開發(fā)的投入金額以及對(duì)應(yīng)的成效來考慮，在項(xiàng)目的開發(fā)投入之上，需要一臺(tái)PC機(jī)或者iPad來作為系統(tǒng)的展示端，在軟件要求上只需要PC機(jī)的WINDOWS 2007系統(tǒng)或者iPad上的IOS系統(tǒng)就能運(yùn)行。系統(tǒng)可以使用后，既可以在各種場(chǎng)合上對(duì)學(xué)校進(jìn)行宣傳，又能供給學(xué)校內(nèi)部的人員們使用，幫助其獲取學(xué)校的一些信息，可以說意義遠(yuǎn)大。

（3）系統(tǒng)的概要設(shè)計(jì)

本展示系統(tǒng)主要包括五個(gè)獨(dú)立的模塊，分別是學(xué)校概況、各個(gè)模塊分別代表了單獨(dú)一部分的信息。各個(gè)界面之間相互補(bǔ)充，各個(gè)模塊之間的信息加起來構(gòu)成了系統(tǒng)的全部部分。

三 系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

（一）進(jìn)入系統(tǒng)

進(jìn)入U(xiǎn)nity ，依次點(diǎn)擊File-->New Project，在彈出窗口中點(diǎn)擊Browse...，選擇工程文件需要存儲(chǔ)的的位置，需要注意的是在目錄中不可以帶有中文的字符。選擇好文件夾后，點(diǎn)擊確定就能創(chuàng)建想要的工程文件。

接下來要做的就是將NGUI導(dǎo)入到Unity之中去。在Unity界面中點(diǎn)擊Assets-->Import Package-->Custom Package...然后選中我們需要導(dǎo)入的文件Next-Gen UI 3.6.8點(diǎn)擊打開，接下來會(huì)彈出界面，點(diǎn)擊Import導(dǎo)入對(duì)應(yīng)的NGUI程序包。

選擇NGUI程序包并導(dǎo)入，如圖1所示。

接下來就可以創(chuàng)建NGUI的視圖了。我們?cè)趧?chuàng)建視圖的時(shí)候首先要將NGUI制作過程中需要使用的一些基礎(chǔ)的部件調(diào)出來。這里我們需要將首先我們需要做的是在菜單中選擇NGUI-->Options-->Reset PrefabToolbar，如圖2所示。

這時(shí)候的面板中可以看到多了一個(gè)UI Root目錄，這就是場(chǎng)景的根目錄。

另外使用NGUI的過程中需要注意的事項(xiàng)還有一點(diǎn)，就是將設(shè)置好的文件導(dǎo)入到NGUI中時(shí)，需要先導(dǎo)入到文件夾下，之后點(diǎn)擊NGUI-->Open-->Atlas Maker將選擇的圖片制作成一個(gè)圖集。在使用圖片的時(shí)候現(xiàn)在場(chǎng)景中創(chuàng)建一個(gè)精靈Sprite，然后在Sprite的選項(xiàng)中選擇圖集，在選擇其中的圖片。經(jīng)過我的實(shí)際使用發(fā)現(xiàn)，這樣的做法雖然在前期的制作過程中顯得比較復(fù)雜，但是在使用的過程中非常的有條理，并且便于修改。

（二）二級(jí)界面

二級(jí)界面中很多的用到了滾動(dòng)文本，這里給滾動(dòng)文本添加了一個(gè)iPad的背景，給人一種畫中畫的感覺，同時(shí)也可以讓用戶剛好的適應(yīng)滾動(dòng)文本的形式。在界面中沒有明顯提示的情況下，通過這樣的方式來對(duì)用戶進(jìn)行簡(jiǎn)單的提示，幫助用戶適應(yīng)系統(tǒng)的使用。

（三）系統(tǒng)中動(dòng)畫實(shí)現(xiàn)

系統(tǒng)中的各個(gè)動(dòng)畫最主要的類型就是界面切換動(dòng)畫。在這里簡(jiǎn)單舉例說明。在NGUI內(nèi)的動(dòng)畫主要就是先設(shè)計(jì)好幾個(gè)動(dòng)畫的方式，包括大小動(dòng)畫、位置動(dòng)畫等等，之后利用對(duì)應(yīng)的按鈕來控制這些動(dòng)畫的播放。比如說首頁(yè)和學(xué)校概況界面的切換，首先需要在首頁(yè)上點(diǎn)擊學(xué)校概況的按鈕，在按鈕之上有著控制動(dòng)畫播放的代碼，接著設(shè)計(jì)好的動(dòng)畫就開始播放，一直到動(dòng)畫結(jié)束，首頁(yè)界面移出顯示窗口，而學(xué)校概況界面移進(jìn)來。

NGUI里動(dòng)畫的播放是通過代碼來控制的。首先按照前文提到的方式，對(duì)需要播放的動(dòng)畫進(jìn)行設(shè)計(jì)。比

如說界面切換的位置動(dòng)畫，我們要先對(duì)需要進(jìn)行動(dòng)畫設(shè)置的物體添加動(dòng)畫，如圖3所示。

之后對(duì)設(shè)置的動(dòng)畫進(jìn)行參數(shù)的設(shè)置。界面切換的動(dòng)畫中需要考慮到的是界面的寬度，之后對(duì)動(dòng)畫的屬性進(jìn)行設(shè)置。需要注意的是在動(dòng)畫參數(shù)設(shè)置完成之后要把動(dòng)畫之前的對(duì)勾去掉，這樣在系統(tǒng)運(yùn)行的過程中就不對(duì)將這個(gè)動(dòng)畫默認(rèn)播放，如圖4所示。

在之后就是用C#語(yǔ)言對(duì)動(dòng)畫的播放進(jìn)行代碼控制。

編輯好控制動(dòng)畫的代碼之后，在顯示視圖的camera上將定義的函數(shù)的目標(biāo)物體拖到代碼的target上，如圖5所示。

之后給設(shè)計(jì)好的控制代碼播放的圖片或者文本添加按鈕組件，將其做成按鈕之后組件就可以點(diǎn)擊并且添加Click點(diǎn)擊事件。找到添加點(diǎn)擊事件的地方，將按鈕的點(diǎn)擊事件通知包含動(dòng)畫時(shí)間的Camera，并從相應(yīng)的動(dòng)畫方法中選擇對(duì)應(yīng)的方法，如圖6所示。

到這里一個(gè)動(dòng)畫就制作完成了。

綜上所述，本系統(tǒng)設(shè)計(jì)以展示學(xué)校為目標(biāo)，意在展示出學(xué)校最近的發(fā)展和取得的成就，并使得用戶了解學(xué)校的發(fā)展動(dòng)態(tài)。隨著多媒體技術(shù)以及相關(guān)技術(shù)的不斷進(jìn)展，同時(shí)伴隨著人文觀念的改善，新型科技的問世與更新?lián)Q代，，學(xué)科與學(xué)科之間的關(guān)聯(lián)也變得更加密不可分。以人為本的交互界面設(shè)計(jì)也將會(huì)迎來一個(gè)同現(xiàn)下相比完全與眾不同的一個(gè)嶄新的歷史局面。在現(xiàn)代經(jīng)濟(jì)社會(huì)的不斷發(fā)展與促進(jìn)下，以人為中心的交互設(shè)計(jì)研究體系也將逐步完善。也可預(yù)見，未來的數(shù)字化時(shí)代，將是以人為本、科學(xué)與技術(shù)并存的設(shè)計(jì)體系。

參考文獻(xiàn)：

[1]徐娜.大一統(tǒng)的格局框架在多媒體界面設(shè)計(jì)中的應(yīng)用.北京印刷學(xué)校. 2014.

[2]李硯祖.《平面設(shè)計(jì)藝術(shù)》〔M〕.中國(guó)人民大學(xué)出版. 2005.

[3]梁斌 曾亦琦.多媒體課件設(shè)計(jì)的探討.廣州師院學(xué)報(bào). 2009.

[4]鄭曉彥.基于交互的多媒體人機(jī)界面設(shè)計(jì).浙江農(nóng)業(yè)商貿(mào)職業(yè)學(xué)校. 2013.

[5]陳慧英.多媒體課件界面設(shè)計(jì)中的視聽心理.武警山東總隊(duì)，2001.

作者簡(jiǎn)介：李冬梅（1975.12—） 女，黑龍江哈爾濱人，一級(jí)教師，本科，信息教學(xué)