2009年8月24日星期一

Web design設計初步探討

網頁設計Web Design設計初步探討
網頁設計設計的內容
網頁設計設計初步探討
網頁設計設計是伴隨著電腦互聯網路的產生而形成的視聽設計新課題,是網頁設計者以所處時代所能獲取的技術和藝術經驗為基礎,依照設計目的和要求自覺地對網頁的構成元素進行藝術規劃的創造性思維活動,必然要成為設計藝術的重要組成部分,並隨著網路技術的發展而發展。表面上看,它不過是關於網頁版式編排的技巧與方法,而實際上,它不僅是一種技能,更是藝術與技術的高度統一。

一、網頁設計設計的內容

設計活動中包含著主觀和客觀兩方面的因素,在確立了網頁主題之後,首先要明確和熟悉設計的物件和構成的要素。網頁設計設計涉及的具體內容很多,可以概括為視聽元素和版式設計兩個方面。

1.視聽元素

這裏所說的視聽元素,主要包括:文本、背景、按鈕、圖示、圖像、表格、顏色、導航工具、背景音樂、動態影像等。無論是文字、圖形、動畫,還是音頻、視頻,網頁設計者所要考慮的是如何以感人的形式把它們放進頁面這個“大畫布”裏。多媒體技術的運用大大豐富了網頁設計設計的表現力。

以上各視聽元素大多數流覽器本身都可以顯示或收聽,無需任何外部程式或模組支援。比如,大部分流覽器都可以顯示GIF、JPEG圖形和GIF89a動畫。還有些多媒體檔(如MP3音樂)需要先下載到本地硬碟上,然後啟動相應的外部程式來播放。另外,在流覽器使用插件(Plug-in)可以播放更多格式的多媒體檔。微軟推出IE流覽器後,提供了基於OLE的ActiveX技術,用來在網頁中播放多媒體。目前ActiveX已經成為熱門技術。另一種播放多媒體的技術是JavaApplet。它是用Java語言編寫的應用於網頁之中的小應用程式,相比於插件和ActiveX,JavaApplet具有更大的靈活性和良好的跨平臺能力,因此具有很好的發展前景。總之,技術的不斷發展使多媒體元素在網頁設計設計中的綜合運用越來越廣泛,使流覽者可以享受到更加完美的視聽效果。這些新技術的出現,也對網頁的藝術設計提出了更高的要求。

2.版式設計

網頁的版式設計同報刊雜誌等平面媒體的版式設計有很多共同之處,它在網頁的藝術設計中佔據著重要的地位。所謂網頁的版式設計,是在有限的螢幕空間上將視聽多媒體元素進行有機的排列組合,將理性思維個性化的表現出來,是一種具有個人風格和藝術特色的視聽傳達方式。它在傳達資訊的同時,也產生感官上的美感和精神上的享受。

但網頁的排版與書籍雜誌的排版又有很多差異。印刷品都有固定的規格尺寸,網頁則不然,它的尺寸是由讀者來控制的。這使網頁設計者不能精確控制頁面上每個元素的尺寸和位置。而且,網頁的組織結構不像印刷品那樣為線性組合,這給網頁的版式設計帶來了一定的難度。
網頁設計設計的原則





二、網頁設計設計的原則

網頁作為傳播資訊的一種載體,同其他出版物如報紙、雜誌等在設計上有許多共同之處,也要遵循一些設計的基本原則。但是,由於表現形式、運行方式和社會功能的不同,網頁設計又有其自身的特殊規律。網頁的藝術設計,是技術與藝術的結合,內容與形式的統一。它要求設計者必須掌握以下三個主要原則:

1.主題鮮明

視覺設計表達的是一定的意圖和要求,有明確的主題,並按照視覺心理規律和形式將主題主動地傳達給觀賞者。訴求的目的,是使主題在適當的環境裏被人們即時地理解和接受,以滿足人們的實用和需求,這就要求視覺設計不但要單純、簡練、清晰和精確,而且在強調藝術性的同時,更應該注重通過獨特的風格和強烈的視覺衝擊力,來鮮明地突出設計主題。

根據認知心理學的理論,大多數人在短期記憶中只能同時把握4到7條分立的資訊,而對多於7條的分立資訊或者不分立的資訊容易產生記憶上的模糊或遺忘,概括起來就是:較小而分立的資訊要比較長而不分立的資訊更為有效和容易流覽。這個規律蘊含在人們尋找資訊和使用資訊的實踐活動中,它要求視覺設計者的設計活動必須自覺地掌握和遵從。

作為視覺設計範疇一種的網頁設計設計,其最終目的是達到最佳的主題訴求效果。這種效果的取得,一方面通過對網頁主題思想運用邏輯規律進行條理性處理,使之符合流覽者獲取資訊的心理需求和邏輯方式,讓流覽者快速地理解和吸收;另一方面通過對網頁構成元素運用藝術的形式美法則進行條理性處理,更好地營造符合設計目的的視覺環境,突出主題,增強流覽者對網頁的注意力,增進對網頁內容的理解。只有兩個方面有機地統一,才能實現最佳的主題訴求效果。

優秀的網頁設計必然服務於網站的主題,就是說,什麼樣的網站,應該有什麼樣的設計。例如,設計類的個人站點與商業站點性質不同,目的也不同,所以評論的標準也不同。網頁設計設計與網站主題的關係應該是這樣:首先,設計是為主題服務的;其次,設計是藝術和技術結合的產物,就是說,即要“美”,又要實現“功能”;最後,“美”和“功能”都是為了更好地表達主題。當然,有些情況下,“功能”即是“主題”,還有些情況下,“美”即是主題。例如,雅虎作為一個搜索引擎,首先要實現“搜索”的“功能”。它的主題即是它的“功能”。而一個個人網站,可以只體現作者的設計思想,或者僅僅以設計出“美”的網頁為目的。它的主題只有一個,就是——美。

只注重主題思想的條理性而忽視網頁構成元素空間關係的形式美組合,或者只重視網頁形式上的條理而淡化主題思想的邏輯,都將削弱網頁主題的最佳訴求效果,難以吸引流覽者的注意力,出現平庸的網頁設計或使網頁設計以失敗而告終。

要使網頁從形式上獲得良好的誘導力,鮮明地突出訴求主題,具體可以通過對網頁的空間層次、主從關係、視覺秩序及彼此間的邏輯性的把握運用來達到。

2.形式與內容統一

任何設計都有一定的內容和形式。內容是構成設計的一切內在要素的總和,是設計存在的基礎,被稱為“設計的靈魂”;形式是構成內容諸要素的內部結構或內容的外部表現方式。設計的內容就是指它的主題、形象、題材等要素的總和,形式就是它的結構、風格或設計語言等表現方式。內容決定形式,形式反作用於內容。一個優秀的設計必定是形式對內容的完美表現。正如黑格爾所說:“工藝的美就不在於要求實用品的外部造型、色彩、紋樣去摹擬事物,再現現實,而在於使其外部形式傳達和表現出一定的情緒、氣氛、格調、風尚、趣味,使物質經由象徵變成相似於精神生活的有關環境。”(黑格爾《美學》第三卷)

一方面,網頁設計所追求的形式美,必須適合主題的需要,這是網頁設計的前提。只講花哨的表現形式以及過於強調“獨特的設計風格”而脫離內容,或者只求內容而缺乏藝術的表現,網頁設計都會變的空洞而無力。設計者只有將二者有機地統一起來,深入領會主題的精髓,再融合自己的思想感情,找到一個完美的表現形式,才能體現出網頁設計獨具的分量和特有的價值。另一方面,要確保網頁上的每一個元素都有存在的必要性,不要為了炫耀而使用冗餘的技術。那樣得到的效果可能會適得其反。只有通過認真設計和充分的考慮來實現全面的功能並體現美感才能實現形式與內容的統一。

據有關資料所做的保守估計,目前在WWW上網頁資料傳輸平均以每秒1.5k的速度到達用戶端。假設某個網頁為了豐富其藝術性而追趕時髦地大量使用圖像或其他多媒體元素等,雖然達到了其靜態形式美的效果,卻造成多達幾十K甚至更大的網頁數據,使流覽者必須等待很長時間才能看到“廬山真面目”,這樣的網頁就不是一個優秀的網頁,因為它不符合網頁傳播資訊的突出特性之一——快捷性,使網頁內容不能很快地到達訪問者,影響了訪問效果和質量,損害了訪問者的情趣和積極性,這種技術要素影響了傳達資訊的效果,因而不是形式與內容的完美統一。

網頁具有多屏、分頁、嵌套等特性,設計者可以對其進行形式上的適當變化以達到多變性處理效果,豐富整個網頁的形式美。這就要求設計者在注意單個頁面形式與內容統一的同時,更不能忽視同一主題下多個分頁面組成的整體網頁的形式與整體內容的統一。

因此,在網頁設計中必須注意形式與內容的高度統一。





3.強調整體

網頁的整體性包括內容和形式上的整體性,這裏主要討論設計形式上的整體性。

網頁是傳播資訊的載體,它要表達的是一定的內容、主題和意念,在適當的時間和空間環境裏為人們所理解和接受,它以滿足人們的實用和需求為目標。設計時強調其整體性,可以使流覽者更快捷、更準確、更全面地認識它、掌握它,並給人一種內部有機聯繫、外部和諧完整的美感。整體性也是體現一個站點獨特風格的重要手段之一。

網頁的結構形式是由各種視聽要素組成的。在設計網頁時,強調頁面各組成部分的共性因素或者使諸部分共同含有某種形式特徵,是求得整體的常用方法。這主要從版式、色彩、風格等方面入手。例如:在版式上,將頁面中各視覺要素作通盤考慮,以周密的組織和精確的定位來獲得頁面的秩序感,即使運用“散”的結構,也是經過深思熟慮之後的決定;一個站點通常只使用兩到三種標準色,並注意色彩搭配的和諧;對於分屏的長頁面,不可設計完第一屏再考慮下一屏。同樣,整個網頁內部的頁面,都應統一規劃,統一風格,讓流覽者體會到設計者完整的設計思想。

從某種意義上講,強調網頁結構形式的視覺整體性必然會犧牲靈活的多變性,“物極必反”就是這個道理。因此,在強調網頁整體性設計的同時必須注意:過於強調整體性可能會使網頁呆板、沉悶,以致影響訪問者的情趣和繼續流覽的欲望。“整體”是“多變”基礎上的整體。
三、網頁設計設計的特點


三、網頁設計設計的特點

1.交互性與持續性

網頁不同于傳統媒體之處,就在於資訊的動態更新和即時交互性。即時的交互性是Web成為熱點的主要原因,也是網頁設計時必須考慮的問題。傳統媒體(如廣播、電視節目、報刊雜誌等)都以線性方式提供資訊,即按照資訊提供者的感覺、體驗和事先確定的格式來傳播。而在Web環境下,人們不再是一個傳統媒體方式的被動接受者,而是以一個主動參與者的身份加入到資訊的加工處理和發佈之中。這種持續的交互,使網頁設計設計不像印刷品設計那樣,發表之後就意味著設計的結束。網頁設計人員必須根據網站各個階段的經營目標,配合網站不同時期的經營策略,以及用戶的反饋資訊,經常地對網頁進行調整和修改。例如,為了保持流覽者對網站的新鮮感,很多大型網站總是定期或不定期的進行改版,這就需要設計者在保持網站視覺形象一貫性的基礎上,不斷創作出新的網頁設計作品。

2.多維性

多維性源於超連結,主要體現在網頁設計中對導航的設計上。由於超連結的出現,網頁的組織結構更加豐富,流覽者可以在各種主題之間自由跳轉,從而打破了以前人們接收資訊的線性方式。例如,可將頁面的組織結構分為序列結構、層次結構、網狀結構、複合結構等。但頁面之間的關係過於複雜,不僅使流覽者檢索和查找資訊增加了難度,也給設計者帶來了更大的困難。為了讓流覽者在網頁上迅速找到所需的資訊,設計者必須考慮快捷而完善的導航設計。

印刷品中導航問題不是那麼突出,如果一個句子在頁尾突然終止,讀者會很自然地翻到下一頁查找剩餘部分,為了幫助讀者找到他們要找的資訊,出版者提供了目錄、索引或註腳。如果文章從期刊中的一頁跳到後面的非順序頁時,讀者會看到類似于“續68頁”這樣的指引語句。然而,作為一名網頁設計者,你以前所學的導航技術沒有一種完全適合於網頁導航。在替流覽者考慮得很周到的網頁中,導航提供了足夠的、不同角度的鏈結,幫助讀者在網頁的各個部分之間跳轉,並告知流覽者現在所在的位置、當前頁面和其他頁面之間的關係等。而且,每頁都有一個返回主頁的按鈕或鏈結,如果頁面是按層次結構組織的,通常還有一個返回上級頁面的鏈結。對於網頁設計者來說,面對的不是按順序排列的印刷頁面,而是自由分散的網頁,因此必須考慮更多的問題。如:怎樣構建合理的頁面組織結構,讓流覽者對你提供的巨量資訊感到條理?怎樣建立包括站點索引、幫助頁面、查詢功能在內的導航系統?這一切從哪兒開始,到哪兒結束?

3.多種媒體的綜合性

目前網頁中使用的多媒體視聽元素主要有文字、圖像、聲音、視頻等,隨著網路帶寬的增加、晶片處理速度的提高以及跨平臺的多媒體檔格式的推廣,必將促使設計者綜合運用多種媒體元素來設計網頁,以滿足和豐富流覽者對網路資訊傳輸質量提出的更高要求。目前國內網頁已經出現了類比三維的操作介面,在資料壓縮技術的改進和流(Stream)技術的推動下,Internet網上出現即時的音頻和視頻服務,典型的有線上音樂、線上廣播、網上電影、網上直播等。因此,多種媒體的綜合運用是網頁設計設計的特點之一,是未來的發展方向。

4.版式的不可控性

網頁版式設計與傳統印刷版式設計有著極大的差異:

(1)印刷品設計者可以指定使用的紙張和油墨,而網頁設計者卻不能要求流覽者使用什麼樣的電腦或流覽器;

(2)網路正處於不斷發展之中,不象印刷那樣基本具備了成熟的印刷標準;

(3)網頁設計過程中有關Web的每一件事都可能隨時發生變化。

這一切說明,網路應用尚處在發展之中,關於網路應用也很難在各個方面都制訂出統一的標準,這必然導致網頁版式設計的不可控制性。其具體表現為:

(1)網頁頁面會根據當前流覽器視窗大小自動格式化輸出;

(2)網頁的流覽者可以控制網頁頁面在流覽器中的顯示方式;

(3)不同種類、版本的流覽器觀察同一個網頁頁面,效果會有所不同;

(4)用戶的流覽器工作環境不同,顯示效果也會有所不同。

把所有這些問題歸結為一點,即網頁設計者無法控制頁面在用戶端的最終顯示效果,但這也正是網頁設計的吸引人之處。

5.技術與藝術結合的緊密性

設計是主觀和客觀共同作用的結果,是在自由和不自由之間進行的,設計者不能超越自身已有經驗和所處環境提供的客觀條件限制,優秀設計者正是在掌握客觀規律基礎上得到了完全的自由,一種想像和創造的自由。網路技術主要表現為客觀因素,藝術創意主要表現為主觀因素,網頁設計者應該積極主動地掌握現有的各種網路技術規律,注重技術和藝術緊密結合,這樣才能窮盡技術之長,實現藝術想像,滿足流覽者對網頁資訊的高質量需求。

例如,流覽者欣賞一段音樂或電影,以前必須先將這段音樂或電影下載回本地機器,然後使用相應的程式來播放,由於音頻或視頻檔都比較大,需要較長的下載時間。流(Stream)技術出現以後,網頁設計者充分、巧妙地應用此技術,讓流覽者在下載過程中就可以欣賞這段音樂或電影,實現了即時的網上視頻直播服務和線上欣賞音樂服務,無疑增強了頁面傳播資訊的表現力和感染力。

網路技術與藝術創意的緊密結合,使網頁的藝術設計由平面設計擴展到立體設計,由純粹的視覺藝術擴展到空間聽覺藝術,網頁效果不再近似於書籍或報刊雜誌等印刷媒體,而更接近於電影或電視的觀賞效果。技術發展促進了技術與藝術的緊密結合,把流覽者帶入一個真正現實中的虛擬世界。

技術與藝術的緊密結合在網頁設計設計中體現得尤為突出。