網站界面分析和優化設計

王文震

摘要：本文以淄博職業學院動漫設計與制作專業教學資源庫為例，結合目前網站界面設計的特點，說明了網站界面設計的一般性原則。重點突出了網頁界面實用功能和審美功能之間的辯證關系。

關鍵詞：網站；界面設計；資源庫

網站根據其用途，理念的不同需要相應的氛圍，比如教育機構、政府機關、游戲類、音樂類的網站的氛圍是不可能相同的。如何在較短的時間內，使用戶通過視覺效果認識到網站的用途，就需要適當設計符合網站特點的圖像、顏色和布局。我們做網站設計應該沿用人民已經認同的大部分用戶習慣，在此基礎上設計自己的網站。下面以淄博職業學院動漫設計與制作專業教學資源庫為例，談談網站設計的一般性原則。

一、界面設計

目前我院動漫設計與制作專業主要培養游戲動漫、影視制作行業美工方面的人才，因此我們在設計網站界面時應體現行業特點，不能設計的太嚴肅、古板。不能等同于機械、化工、計算機等專業的資源庫網站。因此我們對游戲動漫類和影視音樂類網站的界面設計進行了分析得出如下特點：

影視音樂類網站界面顏色單純，文字為主，一般都是黑字白底，配合彩色圖片，區域劃分井然有序。背景色也以單色為主，多為冷色調。

游戲動漫類網站界面，圖片所占比重較大，顏色使用更豐富，多使用背景色以同類色、近似色為主，比如紅色+橙色，或者藍色+綠色，棕色系列等。Flash動畫較多。

綜合以上兩類網站的特點，我們確認以橙色+黑色+白色的顏色方案設計我們的網站，同時添加大量的圖片、Flash等元素提升網站界面的視覺效果。

二、顏色設計

顏色系統為整個網站結構決定了一個與理念相符合的顏色結構規則，表現出網站的整體性和統一性。我們的設計理念為嚴肅而不失活潑。在設計上充分考慮了顏色搭配不當造成的幾種影響視覺感受的因素。如：

忌臟：背景與文字內容對比不強烈，背景與文字明度差異小，不易辨識。

忌純：艷麗的純色對人的刺激太強烈，不宜長時間關注。

忌跳：在純度和明度上，色彩差別不要過于強烈。如果要用互補色，也要適當調和。減少面積對比，或者減弱純度。

忌花：確定主色調，減少不同色相顏色，以3套色以內為佳。

忌輕：使用高明度顏色，而缺乏重色的話，會顯得蒼白無力。藍色忌純，綠色忌黃，紅色忌艷。

為此我們對網站的主體色確定了以橙色+黑色+白色（背景）為主。

三、字體設計

在字體選擇上，中文字體在網頁上顯示的最佳尺寸為：宋體12px、宋體12px粗體；宋體14px，宋體14px粗體；黑體20px。一個網站中最好把字體控制在3-4中以內，字體過多，會影響網站的統一性。

根據上面的原則，我們對網站內容的一級標題采用了黑體20px字體，二級標題采用宋體14px粗體，正文采用宋體12px。

四、導航設計

為更好的引導學生通過本資源庫網站訪問我們的資源，促進自己的學習。我們設計了良好的導航系統，主要分為七大菜單首頁、專業建設、核心課程、案例中心、視頻中心、資源中心、考試系統，同時還可以通過頁面上的圖片、文字等超鏈接快速訪問自己需要的資源。

7大菜單中，因為不同的菜單所展示的內容不同，我們根據具體的情況為不同的內容頁面設計了不同的界面樣式。

1、專業建設頁面

由于專業建設情況，主要以文檔形式展示，我們采用了左側導航欄、右側內容顯示、頂部顯示類別的方式。

2、核心課程頁面

由于動漫設計與制作專業共有六大核心課程，為了對六大核心課程有一個明確的介紹，同時用戶又能直觀的了解六大核心系統的不同，我們通過圖片和文字相結合，并且在同一個頁面顯示的方式展示這六大核心課程。

3、資源中心頁面

資源庫，重點展示的是資源，為便于用戶檢索到本資源庫所提供的資源服務，我們采用左側導航、右側顯示資源列表的形式展示資源。同時對資源的類型，按照不同的方式進行了分類將資源按照媒體類型、應用類型、課程類型分了三大類，同時在每一個類型下面又細分了若干類，便于用戶查找自己需要的資源。因資源數量較多，對于查找特定資源的用戶，我們提供了資源搜索的功能，可以通過關鍵字去檢索自己需要的資源。

4、視頻中心頁面

為更好的為學生提供感興趣的視頻講解服務，我們按照慕課的理念，對每門課程的核心知識點單獨制作了視頻，同時為便于用戶迅速找到自己需要的視頻，設計了高效的導航模式，按照視頻講授方式的不同，分為了微課視頻，教學設計視頻以及國外的一些優秀視頻。同時對每一類視頻，又設計了二級菜單，按照課程去分了類別，便于用戶查找。對視頻內容也進行了縮略圖展示，使得講師內容更直觀，易于用戶瀏覽。

五、網頁界面實用功能和審美功能之間的關系

網頁界面的實用功能是最主要的，可以說是第一位的，脫離了功能美的形式美是沒有意義的。界面是以實用功能為前提和基礎，其審美功能必須以實用目的為導向，不能背離實用目的。

網頁界面自從誕生那天起，就表現出了實用價值，當時的界面只包含實用成分而不講究形式美感。直截了當地使用文字符號進行人機交流，界面的審美功能完全通過功能美來實現的，并沒有考慮形式美的因素。這個現象也符合人類設計審美的一般規律，即是先滿足實用功能再滿足審美功能。

一幅網頁界面設計作品的審美價值可以功能美為主要表現對象，也可以形式美為主要表現對象，但是不管怎樣，功能美必須要作為審美價值的基礎，并且不能被單方面取消。我們平常見到有形式美感十分突出的作品，但這并不意味著它可以改變審美功能的構成屬性。這僅僅說明了它的審美取向的定位不同而已。個人網站的審美價值取向更偏重于形式之美，可以只體現作者的設計思想，或者僅僅以設計出“美”的網頁為目的。但是它的最基本的實用功能是不能被取消的，否則是不能稱之為優秀的網頁界面設計的。

六、結束語

一個好的界面設計它突出的是功能，著重體現的是網站提供給使用者的是什么，傳達的是什么信息。網頁界面版式設計實際上沒有規定的格式可循，在實際的網頁設計過程當中，我們可以將所有在平面設計中體現出來的“新奇”、“獨特”和大膽的東西，運用到網頁界面設計中去。我們應該根據網頁界面的具體內容和要求，勇于突破傳統和形式框架的束縛，設計貴在創新和突破。

參考文獻：

[1]何榮，淺談網站界面設計，科技信息，2008年第26期

[2]黑格爾著 朱光潛譯，《美學》第三卷，商務印書館出版

[3]陳雷，網頁設計基礎[J]，藝術探索，2005，19（1）：75-76

[4]Ben Shneiderman，Catherine Plaisant，用戶界面設計---有效的人機交互策略，電子工業出版社，2006.1

[5]馬月，網站界面設計，北京理工大學出版社endprint