網頁設計壹般分為三種大類:功能型網頁設計(服務網站&B/S軟件用戶端)、形象型網頁設計(品牌形象站)、信息型網頁設計(門戶站)。設計網頁的目的不同,應選擇不同的網頁策劃與設計方案。
網頁設計的工作目標,是通過使用更合理的顏色、字體、圖片、樣式進行頁面設計美化,在功能限定的情況下,盡可能給予用戶完美的視覺體驗。高級的網頁設計甚至會考慮到通過聲光、交互等來實現更好的試聽感受。
網頁設計常用的工具包括AI、PS、FL、FW、DW等。
網頁,是網站中的任何壹頁面,通常是HTML(是標準通用標記語言下的壹個應用)格式(文件擴展名為html、或htm、或asp、或aspx、或php、或jsp等)。網頁通常用圖像檔來提供圖畫,網頁要使用網頁瀏覽器來閱讀。
在網頁設計的認識上,許多人似乎仍停留在網頁制作的高度上。認為只要用好了網頁制
作軟件,就能搞好網頁設計了。
其實網頁設計是壹個感性思考與理性分析相結合的復雜的過程,它的方向取決於設計的
任務,它的實現依賴於網頁的制作。正所謂“功夫在詩外”,網頁設計中最重要的東西
,並非在軟件的應用上,而是在我們對網頁設計的理解以及設計制作的水平上,在於我
們自身的美感以及對頁面的把握上。
首先,我們要弄清楚網頁設計的任務。
壹、設計的任務
設計是壹種審美活動,成功的設計作品壹般都很藝術化。但藝術只是設計的手段,而並
非設計的任務。設計的任務是要實現設計者的意圖,而並非創造美。
網頁設計的任務,是指設計者要表現的主題和要實現的功能。站點的性質不同,設計的
任務也不同。從形式上,可以將站點分為以下三類。
第壹類是資訊類站點,像新浪、網易、搜狐等門戶網站。這類站點將為訪問者提供大量
的信息,而且訪問量較大。因此需註意頁面的分割、結構的合理、頁面的優化、界面的
親和等問題。
第二類是資訊和形象相結合的網站,像壹些較大的公司、國內的高校等。這類網站在設
計上要求較高,既要保證資訊類網站的上述要求,同時又要突出企業、單位的形象。然
而就現狀上來看,這類網站有粗制濫造的嫌疑。
第三類則是形象類網站,比如壹些中小型的公司或單位。這類網站壹般較小,有的則有
幾頁,需要實現的功能也較為簡單,網頁設計的主要任務是突出企業形象。這類網站對
設計者的美工水平要求較高。
當然,這只是從整體上來看,具體情況還要具體分析。不同的站點還要區別對待。別忘
了最重要的壹點,那就是客戶的要求,它也屬於設計的任務。
明確了設計的任務之後,接下來要想的就是如何完成這個任務了。
二、設計的實現
設計的實現可以分為兩個部分。第壹部分為站點的規劃及草圖的繪制,這壹部分可以在
紙上完成。第二部分為網頁的制作,這壹過程是在計算機上完成的。
設計首頁的第壹步是設計版面布局。我們可以將網頁看作傳統的報刊雜誌來編輯,這裏
面有文字、圖像乃至動畫,我們要做的工作就是以最適合的方式將圖片和文字排放在頁
面的不同位置。
除了要有壹臺配置不錯的計算機外,軟件也是必需的。不能簡單地說壹個軟件的好壞,
只要是設計者使用起來覺得方便而且能得心應手的,就可以稱為好軟件。當然,它應該
能滿足設計者的要求。筆者常用的軟件是Macromedia的Dreamweaver、Fireworks、
Flash以及Adobe的Photoshop、imageready,這些都是很不錯的軟件。
接下來我們要做的就是通過軟件的使用,將設計的藍圖變為現實,最終的集成壹般是在
Dreamweaver裏完成的。雖然在草圖上,我們定出了頁面的大體輪廓,但是靈感壹般都
是在制作過程中產生的。設計作品壹定要有創意,這是最基本的要求,沒有創意的設計
是失敗的。在制作的過程中,我們會碰到許多問題,其中最敏感的莫過於頁面的顏色
了。
四、造型的組合
在網頁設計中,我們主要通過視覺傳達來表現主題。在視覺傳達中,造型是很重要的壹
個元素。拋去是圖還是文字的問題,畫面上的所有元素可以統壹作為畫面的基本構成要
素點、線、面來進行處理。在壹幅成功的作品裏,是需要點、線、面的***同組合與搭配
來構造整個頁面的。
通常我們可以使用的組合手法有秩序、比例、均衡、對稱、連續、間隔、重疊、反復、
交叉、節奏、韻律、歸納、變異、特寫、反射等等,它們都有各自的特點。在設計中應
根據具體情況,選擇最適合的表現手法,這樣有利於主題的表現。
通過點、線、面的組合,可以突出頁面上的重要元素,突出設計的主題,增強美感,讓
觀者在感受美的過程中領會設計的主題,從而實現設計的任務。
造型的巧妙運用不僅能帶來極大的美感,而且能較好地突出企業形象,而且能將網頁上
的各種元素有機的組織起來,它甚至還可以引導觀者的視線。
三、色彩的運用
色彩是壹種奇怪的東西,它是美麗而豐富的,它能喚起人類的心靈感知。壹般來說,紅
色是火的顏色,熱情、奔放;也是血的顏色,可以象征生命。黃色是明度最高的顏色,
顯得華麗、高貴、明快。綠色是大自然草木的顏色,意味著純自然和生長,象征安寧和
平與安全,如綠色食品。紫色是高貴的象征,有莊重感。白色能給人以純潔與清白的感
覺,表示和平與聖潔。
我們知道,顏色是光的折射產生的,紅、黃、藍是三原色,其它的色彩都可以用這三種
色彩調和而成。換壹種思路,我們可以用顏色的變化來表現光影效果,這無疑將使我們
的作品更貼近現實。
色彩代表了不同的情感,有著不同的象征含義。這些象征含義是人們思想交流當中的壹
個復雜問題,它因人的年齡、地域、時代、民族、階層、經濟地區、工作能力、教育水
平、風俗習慣、宗教信仰、生活環境、性別差異而有所不同。
單純的顏色並沒有實際的意義,和不同的顏色搭配,它所表現出來的效果也不同。比如
綠色和金黃、淡白搭配,可以產生優雅,舒適的氣氛。藍色和白色混合,能體現柔順、
淡雅、浪漫的氣氛。紅色和黃色、金色的搭配能渲染喜慶的氣氛。而金色和粟色的搭配
則會給人帶來暖意。設計的任務不同,配色方案也隨之不同。考慮到網頁的適應性,應
盡量使用網頁安全色。
但顏色的使用並沒有壹定的法則,如果壹定要用某個法則去套,效果只會適得其反。經
驗上我們可先確定壹種能表現主題的主體色,然後根據具體的需要,應用顏色的近似和
對比來完成整個頁面的配色方案。整個頁面在視覺上應是壹個整體,以達到和諧、悅目
的視覺效果。
五、設計的原則
設計是有原則的,無論使用何種手法對畫面中的元素進行組合,都壹定要遵循五個大的
原則:統壹、連貫、分割、對比及和諧。
統壹,是指設計作品的整體性,壹致性。設計作品的整體效果是至關重要的,在設計中
切勿將各組成部分孤立分散,那樣會使畫面呈現出壹種枝蔓紛雜的淩亂效果。
連貫,是指要註意頁面的相互關系。設計中應利用各組成部分在內容上的內在聯系和表
現形式上的相互呼應,並註意整個頁面設計風格的壹致性,實現視覺上和心理上的連貫
,使整個頁面設計的各個部分極為融洽,猶如壹氣呵成。
分割,是指將頁面分成若幹小塊,小塊之間有視覺上的不同,這樣可以使觀者壹目了
然。在信息量很多時為使觀者能夠看清楚,就要註意到將畫面進行有效的分割。分割不
僅是表現形式的需要。換個角度來講,分割也可以被視為對於頁面內容的壹種分類歸
納。
對比就是通過矛盾和沖突,使設計更加富有生氣。對比手法很多,例如:多與少、曲與
直、強與弱、長與短、粗與細、疏與密、虛與實、主與次、黑與白、動與靜、美與醜、
聚與散等等。在使用對比的時候應慎重,對比過強容易破壞美感,影響統壹。
和諧是指整個頁面符合美的法則,渾然壹體。如果壹件設計作品僅僅是色彩、形狀、線
條等的隨意混合,那麽作品將不但沒有“生命感”,而且也根本無法實現視覺設計的傳
達功能。和諧不僅要看結構形式,而且要看作品所形成的視覺效果能否與人的視覺感受
形成壹種溝通,產生心靈的***鳴。這是設計能否成功的關鍵。
六、網頁的優化
在網頁設計中,網頁的優化是較為重要的壹個環節。它的成功與否會影響頁面的瀏覽速
度和頁面的適應性,影響觀者對網站的印象。
在資訊類網站中,文字是頁面中最大的構成元素,因此字體的優化顯得尤為重要。使用
css樣式表指定文字的樣式是必要的,通常我們將字體指定為宋體,大小指定為12px,
顏色要視背景色而定,原則上以能看清且與整個頁面搭配和諧為準。在白色的背景上,
我們壹般使用黑色,這樣不易產生視覺疲勞,能保證瀏覽者較長時間地瀏覽網頁。
圖片是網頁中的重要元素。圖片的優化可以在保證瀏覽質量的前提下將其size降至最低
,這樣可以成倍地提高網頁的下載速度。利用Photoshop6或Fireworks4可以將圖片切
成小塊,分別進行優化。輸出的格式可以為gif或jpeg,要視具體情況而定。壹般我們
把有較為復雜顏色變化的小塊優化為jpeg,而把那種只有單純色塊的卡通畫式的小塊優
化為gif,這是由這兩種格式的特點決定的。
表格(table)是頁面中的重要元素,是頁面排版的主要手段。我們可以設定表格的寬度、
高度、邊框、背景色、對齊方式等參數。很多時候,我們將表格的邊框設為0,以此來
定位頁面中的元素,或者籍此確定頁面中各元素的相對位置。我們知道:瀏覽器在讀取
網頁html原代碼時,是讀完整個table才將它顯示出來的。如果壹個大表格中含有多個
子表格,必須等大表格讀完,才能將子表格壹起顯示出來。我們在訪問壹些站點時,等
待多時無結果,按"停止"按鈕卻壹下顯示出頁面就是這個原因。因此,我們在設計頁面
表格的時候,應該盡量避免將所有元素嵌套在壹個表格裏,而且表格嵌套層次盡量要
少。在使用Dreamweaver制作網頁時,會自動在每壹個td內添加壹個空字符“ ”。如果
單元格內沒有填充其它元素,這個空字符會保留,在指定td的寬度或高度後,可以在源
代碼內將其刪去。
網頁的適應性是很重要的,在不同的系統上,不同的分辨率下,不同的瀏覽器上,我們
將會看到不同的結果,因此設計時要統籌考慮。壹般我們在800*600下制作網頁,最佳
瀏覽效果也是在800*600分辨率下,在其它情況下只要保證基本壹致,不出現較大問題
即可。
說了這麽多,只是希望能對做“網頁設計”的人有所幫助,希望他們在做網頁的時候能
夠從整體著眼,無愧於“設計”這兩個字。順便說壹下,本文只代表本人個人觀點,僅
供參考。
對於網頁的框架與定位,這個是很難說得清楚的,這要看妳在做網站時,對網站的
規劃,並不能壹並而論的,如果妳沒有這方面的經驗,就多多在網上看看別人是如何設計
的吧,是非常的用的,可以把他們給抓下來,做個圖庫,方便自己設計
其實看看壹些設計精良的網頁,會對自己有很大的作用,
把別人的網頁下載下來,再用相關的軟件,進行分析,
可以學到許多的東西的,是壹種快捷的學習方法,
但決不是COPY
我認為首要的是突出主題
壹個好的網站(個人的只能算做網頁)最首要的是突出妳的主題,在別人搜索或訪問時首
先就看有沒有自己所需要的內容,要麽就直奔主題.然後再在主題鮮明的基礎上做好框架
設計.壹個好的網站要做到層次分明,結構合理,讓人壹看就能明白妳想要表達的中心思
想是什麽,以及怎樣才能以以最快的速度找到自己想要的內容.這兩個主要問題解決後再
在壹些細節上加以潤色,就能制作出賞心悅目的網站.