淺談網頁界面設計發展新趨勢

淺談網頁界面設計發展新趨勢

保山學院信息學院 ?楊 ?薇

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

【關鍵詞】網頁設計;界面設計;單頁布局;響應式頁面

1.網頁設計的總體要求

一個企業創建網站的主要目的是增加產品供應和提高品牌的知名度，通過它客戶可以得到企業最新信息，獲得最新產品介紹。

Web網站的設計是展現企業形象、介紹產品和服務、體現企業發展戰略的重要途徑，因此我們必須明確設計站點的目的和用戶需求，從而做出切實可行的設計方案。我們會根據消費者的需求、市場的狀況、企業自身的情況等進行綜合分析進行設計規劃。在設計規劃時我們會考慮：建設網站的目的;提供服務和產品的對象;企業能提供什么樣的產品和服務; 網站的目的消費者的特點是什么;企業產品和服務適合什么樣的表現方式。

在目標明確的基礎上，完成網站的構思創意，對網站的整體風格和特色作出定位，規劃網站的組織結構。網站應針對所服務對象的不同而具有不同的形式。有些站點只提供簡潔文本信息;有些則采用多媒體表現手法，提供華麗的圖像、閃爍的燈光、復雜的頁面布置，甚至可以下載聲音和錄像片段。好的Web站點把圖形表現手法和有效的組織與通信結合起來。

為了做到主題鮮明突出，要點明確，我們將按照客戶的要求，以簡單明確的語言和畫面體現站點的主題;調動一切手段充分表現網站點的個性和情趣，辦出網站的特點。

2.傳統網頁界面設計方法

網頁界面設計通常指網站前臺或前端設計，重在觀念設計，即對站點整體視覺布局與單頁面視覺互動。

2.1 網站的版式設計

網頁作為一種視覺語言，特別講究編排和布局。版式設計通過文字圖形的空間組合，表達出和諧與美。多頁面站點頁面的編排設計要求把頁面之間的有機聯系反映出來，特別要處理好頁面之間和頁面內的秩序與內容的關系。為了達到最佳的視覺表現效果，我們將反復推敲整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。

2.2 色彩在網頁設計中的作用

色彩是藝術表現的要素之一。在網頁設計中，我們的設計師根據和諧、均衡和重點突出的原則，將不同的色彩進行組合.搭配來構成美麗的頁面。 根據色彩對人們心理的影響，合理地加以運用。如果您的企業有CIS（企業形象識別系統），我們將按照其中的VI進行色彩運用。

2.3 網頁設計形式與內容相統一

為了將豐富的意義和多樣的形式組織成統一的頁面結構，形式語言必須符合頁面的內容，體現內容的豐富含義。靈活運用對比與調和、對稱與平衡、節奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關系建立整體的均衡狀態，產生和諧的美感。

如對稱原則在頁面設計中，它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現內容往往會達到比較好的效果。

點、線、面作為視覺語言中的基本元素，巧妙地互相穿插、互相襯托、互相補充構成最佳的頁面效果，充分表達完美的設計意境。

2.4 結構清晰并且便于使用

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

2.5 導向清晰

網頁設計中導航使用超文本鏈接或圖片鏈接，使人們能夠在您的網站上自由前進或后退，而不會讓他們使用瀏覽器上的前進或后退。我們在所有的圖片上使用“ALT”標識符注明圖片名稱或解釋，以便那些不愿意自動加載圖片的觀眾能夠了解圖片的含義。

3.網頁設計新的發展趨勢

3.1 整頁背景

網頁背景經常遭到忽視，它們本身也不應該太受關注，否則前景中的東西也就不那么顯眼了。但有時，當設計師靈感迸發時，也會把背景做成網頁中最顯著的部分。這個技巧最近比較流行。當設計師沒有很多內容可以展示的時候，他們就會這么做。

3.2 響應式網頁設計

響應式Web設計的理念是：頁面的設計與開發應當根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備;換句話說，頁面應該有能力去自動響應用戶的設備環境。

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

3.3 單頁布局

單頁布局即使用一個單獨的頁面來呈現網站的內容，在這種設計中包含了豐富的圖像和生動的動畫效果。當用戶使用時，點擊某個導航項，頁面隨之改變，新的內容就出現在了顯示先前內容的區域里。使用單頁布局對用戶來說最主要的優勢是通過更少的鼠標移動和點擊來獲得用戶想要的信息。個性的色彩圖畫及吸人眼球的動畫極大的吸引了用戶的注意力，讓訪問者不知不覺延長了停留在網站的時間。

單頁布局的實現主要依靠HTML5。HTML5極大的改變了網頁設計的工作，其中一項最大的變化就是，其所支持的jQuery幾乎要把Flash淘汰。HTML5能帶來絕佳的動畫，這種動畫能力讓我們能設計動態的單頁布局，而這種個性的單頁布局是作品集和個人頁面的首選。

風靡社會的網購活躍在商業舞臺，成為新世紀購物趨勢的主流，極大的帶動了經濟的發展。各色各樣的網上商品讓人愛不釋手，商家為了吸引網民，而讓網民掏錢包，在設計網站中也各有特色，而單頁布局設計是很多設計師們設計個性作品的首先。

4.小結

網頁設計仍然在不斷變化，不斷創新，電子商務時代的到來，賦予設計人員更大的挑戰，不斷學習和適應行業的最新潮流，掌握該行業的最新動態，才可以立于不敗之地。

參考文獻

[1]姚怡，余海萍.網站建設與管理[M].中國鐵道出版社，2007.

[2]易枚根，易林.Dreamweaver MX 2004網頁設計與網站建設[M].機械工業出版社，2004.

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