網(wǎng)站界面分析和優(yōu)化設(shè)計

王文震

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

關(guān)鍵詞：網(wǎng)站；界面設(shè)計；資源庫

網(wǎng)站根據(jù)其用途，理念的不同需要相應(yīng)的氛圍，比如教育機(jī)構(gòu)、政府機(jī)關(guān)、游戲類、音樂類的網(wǎng)站的氛圍是不可能相同的。如何在較短的時間內(nèi)，使用戶通過視覺效果認(rèn)識到網(wǎng)站的用途，就需要適當(dāng)設(shè)計符合網(wǎng)站特點(diǎn)的圖像、顏色和布局。我們做網(wǎng)站設(shè)計應(yīng)該沿用人民已經(jīng)認(rèn)同的大部分用戶習(xí)慣，在此基礎(chǔ)上設(shè)計自己的網(wǎng)站。下面以淄博職業(yè)學(xué)院動漫設(shè)計與制作專業(yè)教學(xué)資源庫為例，談?wù)劸W(wǎng)站設(shè)計的一般性原則。

一、界面設(shè)計

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

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

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

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

二、顏色設(shè)計

顏色系統(tǒng)為整個網(wǎng)站結(jié)構(gòu)決定了一個與理念相符合的顏色結(jié)構(gòu)規(guī)則，表現(xiàn)出網(wǎng)站的整體性和統(tǒng)一性。我們的設(shè)計理念為嚴(yán)肅而不失活潑。在設(shè)計上充分考慮了顏色搭配不當(dāng)造成的幾種影響視覺感受的因素。如：

忌臟：背景與文字內(nèi)容對比不強(qiáng)烈，背景與文字明度差異小，不易辨識。

忌純：艷麗的純色對人的刺激太強(qiáng)烈，不宜長時間關(guān)注。

忌跳：在純度和明度上，色彩差別不要過于強(qiáng)烈。如果要用互補(bǔ)色，也要適當(dāng)調(diào)和。減少面積對比，或者減弱純度。

忌花：確定主色調(diào)，減少不同色相顏色，以3套色以內(nèi)為佳。

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

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

三、字體設(shè)計

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

根據(jù)上面的原則，我們對網(wǎng)站內(nèi)容的一級標(biāo)題采用了黑體20px字體，二級標(biāo)題采用宋體14px粗體，正文采用宋體12px。

四、導(dǎo)航設(shè)計

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

7大菜單中，因?yàn)椴煌牟藛嗡故镜膬?nèi)容不同，我們根據(jù)具體的情況為不同的內(nèi)容頁面設(shè)計了不同的界面樣式。

1、專業(yè)建設(shè)頁面

由于專業(yè)建設(shè)情況，主要以文檔形式展示，我們采用了左側(cè)導(dǎo)航欄、右側(cè)內(nèi)容顯示、頂部顯示類別的方式。

2、核心課程頁面

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

3、資源中心頁面

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

4、視頻中心頁面

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

五、網(wǎng)頁界面實(shí)用功能和審美功能之間的關(guān)系

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

網(wǎng)頁界面自從誕生那天起，就表現(xiàn)出了實(shí)用價值，當(dāng)時的界面只包含實(shí)用成分而不講究形式美感。直截了當(dāng)?shù)厥褂梦淖址栠M(jìn)行人機(jī)交流，界面的審美功能完全通過功能美來實(shí)現(xiàn)的，并沒有考慮形式美的因素。這個現(xiàn)象也符合人類設(shè)計審美的一般規(guī)律，即是先滿足實(shí)用功能再滿足審美功能。

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

六、結(jié)束語

一個好的界面設(shè)計它突出的是功能，著重體現(xiàn)的是網(wǎng)站提供給使用者的是什么，傳達(dá)的是什么信息。網(wǎng)頁界面版式設(shè)計實(shí)際上沒有規(guī)定的格式可循，在實(shí)際的網(wǎng)頁設(shè)計過程當(dāng)中，我們可以將所有在平面設(shè)計中體現(xiàn)出來的“新奇”、“獨(dú)特”和大膽的東西，運(yùn)用到網(wǎng)頁界面設(shè)計中去。我們應(yīng)該根據(jù)網(wǎng)頁界面的具體內(nèi)容和要求，勇于突破傳統(tǒng)和形式框架的束縛，設(shè)計貴在創(chuàng)新和突破。

參考文獻(xiàn)：

[1]何榮，淺談網(wǎng)站界面設(shè)計，科技信息，2008年第26期

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

[3]陳雷，網(wǎng)頁設(shè)計基礎(chǔ)[J]，藝術(shù)探索，2005，19（1）：75-76

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

[5]馬月，網(wǎng)站界面設(shè)計，北京理工大學(xué)出版社endprint