淺談網(wǎng)頁界面設(shè)計(jì)發(fā)展新趨勢(shì)

保山學(xué)院信息學(xué)院 ?楊 ?薇

【摘要】網(wǎng)站是公司或企業(yè)宣傳形象文化的重要窗口，一個(gè)界面良好的企業(yè)網(wǎng)站可以提高公司品牌的知名度。要設(shè)計(jì)個(gè)性的網(wǎng)站就要緊跟潮流，本文主要討論網(wǎng)頁設(shè)計(jì)發(fā)展的新趨勢(shì)及其在社會(huì)中的應(yīng)用。

【關(guān)鍵詞】網(wǎng)頁設(shè)計(jì);界面設(shè)計(jì);單頁布局;響應(yīng)式頁面

1.網(wǎng)頁設(shè)計(jì)的總體要求

一個(gè)企業(yè)創(chuàng)建網(wǎng)站的主要目的是增加產(chǎn)品供應(yīng)和提高品牌的知名度，通過它客戶可以得到企業(yè)最新信息，獲得最新產(chǎn)品介紹。

Web網(wǎng)站的設(shè)計(jì)是展現(xiàn)企業(yè)形象、介紹產(chǎn)品和服務(wù)、體現(xiàn)企業(yè)發(fā)展戰(zhàn)略的重要途徑，因此我們必須明確設(shè)計(jì)站點(diǎn)的目的和用戶需求，從而做出切實(shí)可行的設(shè)計(jì)方案。我們會(huì)根據(jù)消費(fèi)者的需求、市場(chǎng)的狀況、企業(yè)自身的情況等進(jìn)行綜合分析進(jìn)行設(shè)計(jì)規(guī)劃。在設(shè)計(jì)規(guī)劃時(shí)我們會(huì)考慮：建設(shè)網(wǎng)站的目的;提供服務(wù)和產(chǎn)品的對(duì)象;企業(yè)能提供什么樣的產(chǎn)品和服務(wù); 網(wǎng)站的目的消費(fèi)者的特點(diǎn)是什么;企業(yè)產(chǎn)品和服務(wù)適合什么樣的表現(xiàn)方式。

在目標(biāo)明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意，對(duì)網(wǎng)站的整體風(fēng)格和特色作出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。網(wǎng)站應(yīng)針對(duì)所服務(wù)對(duì)象的不同而具有不同的形式。有些站點(diǎn)只提供簡潔文本信息;有些則采用多媒體表現(xiàn)手法，提供華麗的圖像、閃爍的燈光、復(fù)雜的頁面布置，甚至可以下載聲音和錄像片段。好的Web站點(diǎn)把圖形表現(xiàn)手法和有效的組織與通信結(jié)合起來。

為了做到主題鮮明突出，要點(diǎn)明確，我們將按照客戶的要求，以簡單明確的語言和畫面體現(xiàn)站點(diǎn)的主題;調(diào)動(dòng)一切手段充分表現(xiàn)網(wǎng)站點(diǎn)的個(gè)性和情趣，辦出網(wǎng)站的特點(diǎn)。

2.傳統(tǒng)網(wǎng)頁界面設(shè)計(jì)方法

網(wǎng)頁界面設(shè)計(jì)通常指網(wǎng)站前臺(tái)或前端設(shè)計(jì)，重在觀念設(shè)計(jì)，即對(duì)站點(diǎn)整體視覺布局與單頁面視覺互動(dòng)。

2.1 網(wǎng)站的版式設(shè)計(jì)

網(wǎng)頁作為一種視覺語言，特別講究編排和布局。版式設(shè)計(jì)通過文字圖形的空間組合，表達(dá)出和諧與美。多頁面站點(diǎn)頁面的編排設(shè)計(jì)要求把頁面之間的有機(jī)聯(lián)系反映出來，特別要處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。為了達(dá)到最佳的視覺表現(xiàn)效果，我們將反復(fù)推敲整體布局的合理性，使瀏覽者有一個(gè)流暢的視覺體驗(yàn)。

2.2 色彩在網(wǎng)頁設(shè)計(jì)中的作用

色彩是藝術(shù)表現(xiàn)的要素之一。在網(wǎng)頁設(shè)計(jì)中，我們的設(shè)計(jì)師根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩進(jìn)行組合.搭配來構(gòu)成美麗的頁面。 根據(jù)色彩對(duì)人們心理的影響，合理地加以運(yùn)用。如果您的企業(yè)有CIS（企業(yè)形象識(shí)別系統(tǒng)），我們將按照其中的VI進(jìn)行色彩運(yùn)用。

2.3 網(wǎng)頁設(shè)計(jì)形式與內(nèi)容相統(tǒng)一

為了將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。靈活運(yùn)用對(duì)比與調(diào)和、對(duì)稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。

如對(duì)稱原則在頁面設(shè)計(jì)中，它的均衡有時(shí)會(huì)使頁面顯得呆板，但如果加入一些富有動(dòng)感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會(huì)達(dá)到比較好的效果。

點(diǎn)、線、面作為視覺語言中的基本元素，巧妙地互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁面效果，充分表達(dá)完美的設(shè)計(jì)意境。

2.4 結(jié)構(gòu)清晰并且便于使用

如果人們看不懂或很難看懂您的網(wǎng)站，那么，他如何了解你的企業(yè)和服務(wù)呢？使用一些醒目的標(biāo)題或文字來突出您的產(chǎn)品與服務(wù)。并且即使您擁有最棒的產(chǎn)品，如果客戶從您的網(wǎng)站上不清楚您在介紹什么或不清楚如何受益的話，他們是不會(huì)喜歡您的網(wǎng)站的，這就是網(wǎng)頁設(shè)計(jì)的失敗。

2.5 導(dǎo)向清晰

網(wǎng)頁設(shè)計(jì)中導(dǎo)航使用超文本鏈接或圖片鏈接，使人們能夠在您的網(wǎng)站上自由前進(jìn)或后退，而不會(huì)讓他們使用瀏覽器上的前進(jìn)或后退。我們?cè)谒械膱D片上使用“ALT”標(biāo)識(shí)符注明圖片名稱或解釋，以便那些不愿意自動(dòng)加載圖片的觀眾能夠了解圖片的含義。

3.網(wǎng)頁設(shè)計(jì)新的發(fā)展趨勢(shì)

3.1 整頁背景

網(wǎng)頁背景經(jīng)常遭到忽視，它們本身也不應(yīng)該太受關(guān)注，否則前景中的東西也就不那么顯眼了。但有時(shí)，當(dāng)設(shè)計(jì)師靈感迸發(fā)時(shí)，也會(huì)把背景做成網(wǎng)頁中最顯著的部分。這個(gè)技巧最近比較流行。當(dāng)設(shè)計(jì)師沒有很多內(nèi)容可以展示的時(shí)候，他們就會(huì)這么做。

3.2 響應(yīng)式網(wǎng)頁設(shè)計(jì)

響應(yīng)式Web設(shè)計(jì)的理念是：頁面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備;換句話說，頁面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。

響應(yīng)式網(wǎng)頁設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這樣，我們就可以不必為不斷到來的新設(shè)備做專門的版本設(shè)計(jì)和開發(fā)了。響應(yīng)式網(wǎng)頁設(shè)計(jì)主要采用彈性化和響應(yīng)式圖片技術(shù)手段來實(shí)現(xiàn)。響應(yīng)式網(wǎng)頁設(shè)計(jì)就是要讓網(wǎng)站能夠適應(yīng)所有分辨率。不管你使用什么分辨率，網(wǎng)站的要素都能夠重新組織以形成良好的視覺效果。同樣的網(wǎng)站在大屏幕顯示器上和在手機(jī)上都能很好地顯示。

3.3 單頁布局

單頁布局即使用一個(gè)單獨(dú)的頁面來呈現(xiàn)網(wǎng)站的內(nèi)容，在這種設(shè)計(jì)中包含了豐富的圖像和生動(dòng)的動(dòng)畫效果。當(dāng)用戶使用時(shí)，點(diǎn)擊某個(gè)導(dǎo)航項(xiàng)，頁面隨之改變，新的內(nèi)容就出現(xiàn)在了顯示先前內(nèi)容的區(qū)域里。使用單頁布局對(duì)用戶來說最主要的優(yōu)勢(shì)是通過更少的鼠標(biāo)移動(dòng)和點(diǎn)擊來獲得用戶想要的信息。個(gè)性的色彩圖畫及吸人眼球的動(dòng)畫極大的吸引了用戶的注意力，讓訪問者不知不覺延長了停留在網(wǎng)站的時(shí)間。

單頁布局的實(shí)現(xiàn)主要依靠HTML5。HTML5極大的改變了網(wǎng)頁設(shè)計(jì)的工作，其中一項(xiàng)最大的變化就是，其所支持的jQuery幾乎要把Flash淘汰。HTML5能帶來絕佳的動(dòng)畫，這種動(dòng)畫能力讓我們能設(shè)計(jì)動(dòng)態(tài)的單頁布局，而這種個(gè)性的單頁布局是作品集和個(gè)人頁面的首選。

風(fēng)靡社會(huì)的網(wǎng)購活躍在商業(yè)舞臺(tái)，成為新世紀(jì)購物趨勢(shì)的主流，極大的帶動(dòng)了經(jīng)濟(jì)的發(fā)展。各色各樣的網(wǎng)上商品讓人愛不釋手，商家為了吸引網(wǎng)民，而讓網(wǎng)民掏錢包，在設(shè)計(jì)網(wǎng)站中也各有特色，而單頁布局設(shè)計(jì)是很多設(shè)計(jì)師們?cè)O(shè)計(jì)個(gè)性作品的首先。

4.小結(jié)

網(wǎng)頁設(shè)計(jì)仍然在不斷變化，不斷創(chuàng)新，電子商務(wù)時(shí)代的到來，賦予設(shè)計(jì)人員更大的挑戰(zhàn)，不斷學(xué)習(xí)和適應(yīng)行業(yè)的最新潮流，掌握該行業(yè)的最新動(dòng)態(tài)，才可以立于不敗之地。

參考文獻(xiàn)

[1]姚怡，余海萍.網(wǎng)站建設(shè)與管理[M].中國鐵道出版社，2007.

[2]易枚根，易林.Dreamweaver MX 2004網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)[M].機(jī)械工業(yè)出版社，2004.

作者簡介：楊薇（1983—），女，云南保山人，保山學(xué)院信息學(xué)院講師，研究方向：多媒體及圖形圖像應(yīng)用。