- 相關推薦
網頁設計的布局和用色技巧
網頁是網站構成的基本要素。網頁的布局和色彩搭配能夠更好的提升網頁的視覺效果、更能吸引瀏覽者的眼球。 理論上研究網頁設計的布局和用色技巧在網頁中的應用以及布局和用色技巧在網頁設計中的發展方向。以下是小編搜索整理網頁設計的布局和用色技巧,歡迎大家閱讀!
網頁設計是藝術與技術的高度統一,網頁藝術設計包含視聽元素與版式設計兩項內容;以主題鮮明、布局形式與內容相統一、強調整體色調為設計原則。因此在明確了網頁藝術設計與網站主題的關系的基礎上,提出了“美”和“功能”都是為了更好地表達網站主題這一觀點。從而更好的認識和理解布局和用色技巧在網頁布局中的發展和創新。
國內網頁設計環境目前還停留在初級的認知階段,如同96年以前的網頁幾乎是純文字的頁面,沒有什么所謂“設計”的概念可言。隨著時代的發展人們對美的追求是不斷深入,網頁設計開始從從審美方面入手,結合使用方便的要求,設計出美觀、合理的頁面,運用一些平面設計中美的基本形式就能使網頁更加富有美感,例如將平面設計中的色彩形式原理融入到網頁設計中,注重了布局規劃從而使繁多的頁面更加有條理。
設計以人為本,任何設計都具有一定的內容和形式。內容貫穿整個網頁設計中,是設計存在的基礎。形式而是內容的延伸,或者說事內容的外部表現方式。
內容決定形式,形式反作用于內容。一個優秀的網頁設計必定是形式對內容的完美表現。正如黑格爾所說:“工藝的美就不在于要求實用品的外部造型、色彩、紋樣去摹擬事物,再現現實,而在于使其外部形式傳達和表現出一定的情緒、氣氛、格調、風尚、趣味,使物質經由象征變成相似于精神生活的有關環境!
一、網頁設計的布局
頁面布局就是在網頁設計時把網頁的各種構成要素(文字、圖片、菜單等等)在頁面內完美的搭配起來。一個精美的網頁,不僅體現在頁面內容的精彩,還要有效地利用頁面的有效顯示空間,創造出合理的布局模式。
(一)“國”字型
“國”字型,也可以稱為“同”字型,適用于一些大型網站,即最上面是網站的標題以及橫幅廣告條,接下來是網站的主要內容,左右分列一些兩小條內容,中間是主要部分,與左右一起羅列到底,最下面是網站的一些基本信息、聯系方式、版權聲明等。
(二)拐角型
這種結構與上一種“國”字型結構,其實只是形式上的區別,有相似性。頂端是標題及廣告橫幅,接下來的左側是一窄列鏈接等,右列是很寬的正文,底端也是一些網站的輔助信息。在這種類型中,一種很常見的類型是,頂端是標題及廣告,左側是導航鏈接。
(三)左右框架型
這是一種左右分為兩頁的框架結構。一般左面是導航鏈接,有時頂端會有一個小的標題或標致,右面是正文。目前,大部分的大型論壇都是這種結構,一些企業網站也喜歡采用這種左右框架型結構。這種類型結構非常清晰,一目了然。
除了以上的布局類型外,還有上下框架型,標題正文型,綜合框架型,封面型等。
二、網頁用色技巧
(一)確定網頁的主題色
所謂網頁的主題色,就是體現行業特點,企業形象的色彩。色彩搭配的協調可以突出主題形象的視覺效果,色彩的搭配不僅體現美學的訴求,而且是一種可以強化的識別信息,會影響到瀏覽者對網站的印象乃至企業形象的認識。所以,主題色一經確定,要保持一定的穩定性,用這種色彩來幫助瀏覽者對網站的識別。
網頁中顏色的過多使用,會使人感覺到凌亂、輕浮,感到雜亂無章,缺乏對網頁的興趣。因此網頁設計必須有自己獨特的色彩,必須有一種或兩種主體色。
不至于讓瀏覽者迷失方向,也不至于單調、凌亂。當主題色確定好以后,考慮到其他配色時,一定要考慮到其他配色與主體色的關系,要體現企業什么形象以及什么樣的效果。
(二)用色技巧
1.針對不同的企業所要表達信息的不同,可以選擇突出這些信息的顏色。
2.考慮瀏覽者。不同地區、不同年齡層次對色彩的認知的不同,可能會產生不同的反應。對網頁所傳達信息針對的人群的不同選擇不同的用色。
3.不要使用過多的顏色。除了黑色和白色以外,約選擇四到五個顏色就足夠了。太多的顏色會使頁面顯得雜亂,不容易突出網頁所要表達信息的重點。
4.選擇顏色要注意時效性。當一種色彩成為流行色的時候,不免使瀏覽者產生麻木的審美效果。因此在網頁中事實的實施一些懷舊色彩,會達到意想不到的效果。
以后,網頁將代表個人、企業的形象。尤其是個人,或者企業的主頁,它既要傳達出某種信息,又要充分的體現出它們的特色。網頁設計的好壞,直接關系到某個人、某個企業的形象,在人們的印象中所處的地位。所以布局和色彩的恰到好處的搭配將會使個人和企業的形象在別人心中留下深刻的印象,從而更好的體現出個人及其企業的知名度。
【網頁設計的布局和用色技巧】相關文章:
廣告設計之用色技巧總結03-06
網頁設計配色技巧03-07
網頁字體設計的技巧03-18
網頁美工設計技巧03-12
網頁設計色彩搭配技巧03-07
室內外設計用色的原則和規律03-28
怎樣協調網頁美工設計的細節與布局03-18
網頁動畫設計小技巧03-06
網頁美工學習設計技巧03-12