學校展示宣傳系統的設計與開發

摘 要：隨著信息技術的發展，人們越來越依靠互聯網以及計算機來接觸外部世界，因此人們也越來越多地希望計算機的交互界面更加人性化。因此，更加人性化的用戶交互界面也成為設計者工作的最重要的要求，希望設計出來的界面更加受到用戶的歡迎。因此，這也成為現階段設計師的設計的重點以及難點，希望能夠更好的促進界面的個性化，更適合人們的便捷使用。

關鍵詞：交互;界面設計;NGUI;展示系統

在對知名院校進行宣傳的過程中，可以采用Unity、Photoshop、C#語言以及NGUI相結合的方式來進行，可以首先通過ps對界面中的一些圖標或者是界面圖片進行修飾，然后導入到unity中，之后可以在NGUI中進行界面的編輯，最后再結合c#語言來完成界面的切換工作。通過這一系列的工作，可以更好地實現對于學校的一個展示工作，可以讓用戶通過交互界面來更好的了解學校的一些相關信息。

一 學校宣傳系統概述

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

隨著計算機技術的不斷發展變化，人們對于計算機的需求越來越高，每個人幾乎每天都要用互聯網來工作學習和生活，可以說，互聯網或是多媒體設備已經充斥了我們的生活的方方面面，我們已經不能離開互聯網了。當用戶與多媒體設備進行互動的過程，主要是通過交互界面來進行，通過這個界面可以完成獲取重要信息，進行有效的工作和生活。人機交互的影響力越來越大，因此對于交互界面的設計也成為當前設計師的一個重要研究領域，設計師將會通過更加具有人性化的交互界面，來贏得用戶體驗者的青睞。

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

（二）國內外研究現狀

因為用戶的交互界面對于用戶的體驗以及使用具有重要作用，因此許多國內外企業已經重視到了這一點，這些具有長遠眼光的企業，已經非常注重通過人性化的交互界面來吸引用戶的使用率，以此為自己的企業來贏得更高的效益。例如大家所知道的金山毒霸，就是通過界面設計，給自己的產品帶來了很大的推動作用，因為通過這樣的設計可以更好的被用戶所接受，所以才能在同類產品中脫穎而出。而且聯想也采用了這樣的方式，首先通過對用戶的使用性進行測試，然后再不斷進行改進，通過這樣的方式可以更好地吸引用戶的使用，可以更好的為自己的企業創收效益，例如聯想推出了幸福系列的界面設計，而且受到了用戶的廣泛好評，以此證明具有人性化的界面設計，能夠更好的幫助自己的企業創收效益。因此，為了能夠更好的提升用戶的體驗度，能夠更好的受到用戶的青睞，需要設計者設計出更加具有人性化的交互界面，來贏得用戶的喜歡。

相比較國內的一些設計機構，國外其實具有更加成熟的設計機構，這些國外企業很早的就認識到了用戶對于交互界面的一種高要求。這也主要是因為互聯網在國外的使用率，普及率比較高，而且首先使用互聯網，所以在這方面做的可能更加成熟。正是由于外國對于這一問題的重視，所以很早就成立了各種各樣的交互界面設計的相關機構，而且世界的幾大通訊企業也認識到了這一點，也紛紛成立了專項的研究機構，并且專門研究和發現這一問題的核心，來不斷的提升自己企業的閃光點，來更好地吸引用戶，更好的提高自己企業的收益。

通過以上的研究，我們發現交互界面和我們平常使用的產品不同，平常的產品只需要對于內部的材料質量結構進行提升，而交互界面則主要是對設計者的要求比較高，只有不斷地提高設計者的個人能力，才能更好的為用戶設計出更加受歡迎的交互界面，從而贏得用戶的需求。

二 系統需求分析及概要設計

（一）需求分析

本系統是為了對學校宣傳展示而存在的，跟學校網站有著同樣的功能，這就需要系統綜合網站的各項特點，互相補充，互相完善。通過這樣的一個展示系統，不僅可以在各個展示端上展示學校的成果，而且由于考慮到展示端的網絡問題，所有的信息并沒有提供下載等的方式，而是全部能夠展示在參觀者的面前。同時發現有很多的信息，并沒有必要展示出來的，對這些信息做了簡單的取舍。

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

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

（二）可行性分析

宣傳展示系統的建立，對學校的宣傳能都起到的作用是不容忽視的。而這樣的展示系統在今后能夠用到的場合還有很多，系統的搭建勢在必行。

（1）技術可行性：本展示系統的關鍵首先是界面設計部分，要設計出合適的界面，包括首頁一個各個二級界面。之后就是在NGUI中實現這些界面并對界面中的簡單動畫進行編輯。將各個界面之間緊密連接，形成一個大一統的整體。

（2）經濟可行性

從系統開發的投入金額以及對應的成效來考慮，在項目的開發投入之上，需要一臺PC機或者iPad來作為系統的展示端，在軟件要求上只需要PC機的WINDOWS 2007系統或者iPad上的IOS系統就能運行。系統可以使用后，既可以在各種場合上對學校進行宣傳，又能供給學校內部的人員們使用，幫助其獲取學校的一些信息，可以說意義遠大。

（3）系統的概要設計

本展示系統主要包括五個獨立的模塊，分別是學校概況、各個模塊分別代表了單獨一部分的信息。各個界面之間相互補充，各個模塊之間的信息加起來構成了系統的全部部分。

三 系統設計與實現

（一）進入系統

進入Unity ，依次點擊File-->New Project，在彈出窗口中點擊Browse...，選擇工程文件需要存儲的的位置，需要注意的是在目錄中不可以帶有中文的字符。選擇好文件夾后，點擊確定就能創建想要的工程文件。

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

選擇NGUI程序包并導入，如圖1所示。

接下來就可以創建NGUI的視圖了。我們在創建視圖的時候首先要將NGUI制作過程中需要使用的一些基礎的部件調出來。這里我們需要將首先我們需要做的是在菜單中選擇NGUI-->Options-->Reset PrefabToolbar，如圖2所示。

這時候的面板中可以看到多了一個UI Root目錄，這就是場景的根目錄。

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

（二）二級界面

二級界面中很多的用到了滾動文本，這里給滾動文本添加了一個iPad的背景，給人一種畫中畫的感覺，同時也可以讓用戶剛好的適應滾動文本的形式。在界面中沒有明顯提示的情況下，通過這樣的方式來對用戶進行簡單的提示，幫助用戶適應系統的使用。

（三）系統中動畫實現

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

NGUI里動畫的播放是通過代碼來控制的。首先按照前文提到的方式，對需要播放的動畫進行設計。比

如說界面切換的位置動畫，我們要先對需要進行動畫設置的物體添加動畫，如圖3所示。

之后對設置的動畫進行參數的設置。界面切換的動畫中需要考慮到的是界面的寬度，之后對動畫的屬性進行設置。需要注意的是在動畫參數設置完成之后要把動畫之前的對勾去掉，這樣在系統運行的過程中就不對將這個動畫默認播放，如圖4所示。

在之后就是用C#語言對動畫的播放進行代碼控制。

編輯好控制動畫的代碼之后，在顯示視圖的camera上將定義的函數的目標物體拖到代碼的target上，如圖5所示。

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

到這里一個動畫就制作完成了。

綜上所述，本系統設計以展示學校為目標，意在展示出學校最近的發展和取得的成就，并使得用戶了解學校的發展動態。隨著多媒體技術以及相關技術的不斷進展，同時伴隨著人文觀念的改善，新型科技的問世與更新換代，，學科與學科之間的關聯也變得更加密不可分。以人為本的交互界面設計也將會迎來一個同現下相比完全與眾不同的一個嶄新的歷史局面。在現代經濟社會的不斷發展與促進下，以人為中心的交互設計研究體系也將逐步完善。也可預見，未來的數字化時代，將是以人為本、科學與技術并存的設計體系。

參考文獻：

[1]徐娜.大一統的格局框架在多媒體界面設計中的應用.北京印刷學校. 2014.

[2]李硯祖.《平面設計藝術》〔M〕.中國人民大學出版. 2005.

[3]梁斌 曾亦琦.多媒體課件設計的探討.廣州師院學報. 2009.

[4]鄭曉彥.基于交互的多媒體人機界面設計.浙江農業商貿職業學校. 2013.

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

作者簡介：李冬梅（1975.12—） 女，黑龍江哈爾濱人，一級教師，本科，信息教學