本站小編為你精心準備了網站設計中色彩運用分析（3篇）參考范文，愿這些范文能點燃您思維的火花，激發您的寫作靈感。歡迎深入閱讀并收藏。

第一篇：網站設計中色彩的應用分析

摘要:

進入21世紀，是互聯網發展的又一個新時代，人們獲得信息的主要方式是通過互聯網。在用戶瀏覽網頁時，網頁設計中色彩的選用是網站的點睛之筆，也是判斷一個網頁設計成敗與否的關鍵。色彩不但能給瀏覽者強烈的視覺沖擊力和藝術美感，還能更深層次的體現出該網站所要傳遞給瀏覽者:一個企業的經營理念和品牌所展示的價值。

關鍵詞:

網頁設計;色彩;搭配

在網頁設計中，最難的讓人無從下手的不是某個軟件怎么運用，而是要怎么設計來吸引瀏覽者的眼球，這就要求我們在設計中加強對色彩的合理使用，使之為網頁設計過程中能起到錦上添花的作用。這就要求在做網頁設計的時候不僅要有熟練的技術，更要有藝術的美感，色彩可以說是網頁設計中穿慣始終的一條紐帶，從而也就體現了它的重要性。

1網頁設計的基本概念

1．1網頁設計的定義

在說明網頁設計之前，先必須明白網頁的概念:網頁通俗的講是網站中的一頁，是HTML格式(文件擴展名為．html．asp．php．Jsp等)。網頁實際上就是一個文件它會被存放在有網絡存在的某臺電腦中。網頁會由相應的網址(URL)來讀取和保存，當我們使用時，會穿過一系列看不見的程序，網頁文件就會被你的計算機所接收，然后再由各種瀏覽器來分析網頁的內容，最后呈現在你的眼前［1］。網頁設計是一門把網絡應用和藝術設計緊密相結合的一門新興的學科，以網絡作為載體，融入人們對審美的追求，繼而有鮮活的藝術表現特色。在一個優秀的網頁設計中，必須對色彩加以高度的重視。

1．2網頁設計的發展階段

第一階段，以文字為主的階段。這個階段的網頁是由一個個字符組成，所呈現的也只是單一的文字，在藝術的表現效果上基本上沒有什么要求，只注重實用性。第二階段，圖和文字相結合。由于計算機技術的不斷提高，靜態的網頁已經受到了局限性，人們整體審美觀和藝術感加強，網站也不能僅僅以實用為主，而是慢慢的把制作網站的技術和藝術相聯系來豐富網站的內容。第三階段，一個字“動”。隨著技術的不斷更新，內容不斷的增加，出現了動態交互式的網頁，加之制作軟件的不斷強大，網頁設計人員可以根據需要各自取舍相關的內容，這時候也涌入了一大批從事藝術的設計人員，網頁設計技術也就從這個階段開始成為一個新的起點，不斷的注入新鮮的血液來不斷壯大［2］。

1．3網頁設計的要素

網頁設計作為一門新興的學科，主要要素包括:文字(既有它是局限性也有它獨到的地位，所以文字是網頁初始時的必不可少的要素，由之才慢慢擴展)、圖形、圖像、色彩(色彩是最能吸引瀏覽者的注意力的因素之一，色彩甚至可以直接判斷一個網頁設計的好壞，因為在網頁中色彩占的比例較大，往往會填補不足之處)、導航欄(導航欄是網頁站點超鏈接的主要線索，使得站點結構清晰、鏈接簡單、查詢便捷等)、多媒體(多媒體在網頁設計的運用，可以說是又一個有意義的突破，與聲音的結合更加增大了頁面的感染力)、頁面布局(在網頁設計中不是把相關的頁面機械的拼湊，而是要把有用的內容合理、有效的編排，分清主次，所以具備了前邊說的幾個基本要素的基礎上，才能考慮頁面的整體布局，這樣才能更好的為瀏覽者展示更好的視覺效果)等。

2色彩在網頁設計中的應用美國

光學學會的色度學委員會曾經把顏色定義為:顏色是除了空間的和時間的不均勻性以外的光的一種特性，即光的輻射能刺激視網膜而引起觀察者通過視覺而獲得的景象。在我國國家標準CG5698－85中，顏色的定義為:色是光作用于人眼球起除外形意外的視覺特性。因此，色彩感覺不僅與物體本來的色彩特性有關，還受時間、空間、外表狀態以及該物體的周圍環境的影響［3］。顏色分為無色系和有色系。無色系是指黑、白、灰;有色系是指除無色系以外的所有色彩。

2．1色彩屬性

(1)明度

明度指色彩的明暗程度．是從明到暗的若干排列的灰色，無色系只有明度的特征。(圖1)

(2)飽和度

是指色彩的鮮明度。根據需要可以調整色彩的鮮明度，突出所要表現的內容。

(3)色相

也叫顏色的光澤，是基本的特征，傳遞顏色基本基調(圖2十二色相圖)

2．2網頁設計中色彩的搭配

(1)色彩的心理表述

色彩與人的視覺感受有著密切的關系，色彩有獨特的象征意義，代表了人們豐富多彩的心理變化和復雜的情感。白色具有神圣不能侵犯的性質。給人潔凈、純樸、明快、清凈的感覺。在一些高檔商品網站設計中白色會被廣泛采用。黑色具有莊重、沉穩的特性。給人神秘、深沉、穩重的感受。在高科技和軍事網站中多采用黑色。(圖4)灰色具有調和的特性。給人平凡、消極、中和、沉寂的感受。所以灰色可以用于任何色調為主的網站中，起到過度的作用。紅色具有溫暖、熱情、活力、刺激、憤怒的特性。給人熱血沸騰、過目不忘、幸福美滿、喜慶的感覺。這種色彩多用于政府性網站、婚紗服務類網站。黃色具有成熟、清醒、高端的特性。給人一種嬌貴、收獲的感覺。多用于食品類、兒童類網站中。藍色具有經典、冷靜、清涼、誠實、悠遠、永恒。給人冷靜的思考氛圍。多用于高科技企業網站和一些具有權威性的網站中［4］。綠色具有平靜、柔和、新鮮、青春、活力的特性。給人寧靜、安全、健康、平安的感覺。在學校、環保、宣傳和健康類網站中被廣泛使用。紫色具有深遠、高傲、優雅的特性。給人捉摸不透的神秘感。多用于以女性為主題的網站:配飾、內衣、化妝品等。

(2)色彩法則

第一個法則:色彩的鮮明性。在設計中色彩鮮明，是很容易就能吸引瀏覽者的注意力。第二個法則:色彩的感染性。選用獨特的色彩搭配，會給瀏覽者留下深刻的印象。第三個法則:色彩的合理性。緊扣主題、不過分夸張，給瀏覽者統一、和諧的感覺。第四個法則:色彩的延展性。不同的色彩會使瀏覽者產生不同的想象空間:看到黑色會想到神秘，深沉;看到紅色會想到激情、刺激;看到藍色會想到藍天，大海;看到綠色會想到生命，健康等等［5］。在網頁設計中，選擇適合主題的色彩，會給整個網站增加靈氣、有血有肉，更加鮮活。

3結語

色彩是網頁設計的精髓。它不但給網頁作品披上了一件華麗的外衣，能使平面的東西立體化，同時引導人們對網頁有一個深層次的理解。色彩通過人們的視覺反應，在生理上和心理上產生強烈的共鳴，選用不同的顏色，所呈現的反應也各不相同。色彩有強烈的表現力和沖擊力，選取好的色彩會及時吸引人們的眼球，給人留下深刻的印象，換句話說就是一種美的享受。色彩對人的視覺有決定性作用，一個好的網頁設計，不但要求設計者的技術一流，還要求對色彩的運用也能游刃有余。在網頁設計中色彩越來越被人們所重視，色彩的選用、比例、含義等方面，對我們有了新的要求，要求我們認真實踐、研究、解決，要求我們無論在什么樣的網頁設計中，能準確找到它的定位。

參考文獻:

［1］武上富．網頁制作技巧和設計原則［M］．廣州:廣東科技出版社，2006．

［2］李宏，張小敏．網頁設計與制作［M］．北京:化學工業出版社，2005．

［3］文濤，文峰．色彩設計［M］．北京:中國青年出版社，2008．

［4］黎芳．網頁設計與配色實例分析［M］．北京:北京希望電子出版社，2006．

［5］徐育忠，林芝．色彩表現與訓練［M］．北京:化學工業出版社，2007．

作者：史俊霞 高耀 單位：榆林學院網絡管理中心 榆陽區教育局

第二篇：網站設計色彩搭配研究

摘要：

在網頁設計與制作課程中，網頁的版面布局設計是至關重要的一個方面，要設計網頁版面，確立主題是設計之本，還要講究布局的形式和色彩的搭配。

關鍵詞：

確立主題；布局形式；色彩搭配；版面布局

網頁設計與制作課程中，網頁的版面布局設計是至關重要的一個方面，它關系到一個網頁在欣賞者第一眼看到時，能否合“眼緣”，能否留下深刻的印象和駐足的欲望。針對頁面的版面布局設計，結合實踐應用，筆者有了一些自己的心得和見解，從以下幾個方面做一個簡單的總結。

一、網站主題的確立是設計之本

一個網站最終要設計成什么樣子，主要還是由網站的主題來決定的，主題就是網站的靈魂，也是網站設計的第一步，只有主題明確了，設計者才能圍繞這個主題去打開思路，尋找設計靈感。

二、版面布局的形式

在確立了網站主題之后，網站的設計也就有了大概的風格和方向了，接下來要做的就是設計網頁的版面。從理論上來說，版面布局的方法不拘一格，沒有固定的方式和方法，即使同樣的主題同樣的素材，不同的人根據各自的理解和解讀可以設計制作出不同風格的頁面效果來。但不管是哪種布局方法，大概不外乎以下幾類。一種是按頁面的區域分布劃分，可以分為“T”形、“口”型、“三”型等幾種形式。從這幾個形象的字面表達上，我們不難想象出分別是一種什么樣的布局形式。一種常見的是對稱樣式的，當然所謂的對稱并不是一對一的絕對對稱，那樣看起來會比較呆板，可以通過上下或左右結構劃分以及色彩的合理搭配形成一種對稱的效果。還有一種是現在比較常用的所謂“豪華”型版面形式，首頁設計成一個比較漂亮的海報或者是制作成優美的flash影片。這樣的版型設計在廣告及宣傳類型的網頁中比較常見，突出特點是制作比較新穎，畫面漂亮，視覺沖擊比較強。當然，要做出一個完整漂亮的網頁，靠單一的版面布局樣式是不夠的，往往是幾種樣式的綜合運用。在實踐教學過程中，學生大多比較喜歡第三種樣式的網頁，但也只是作為欣賞之用，要做出這么有沖擊力的效果，不光需要時間還需要有一定的專業功底，經常是幾種工具軟件齊上陣做出來的。

三、網頁版面的色彩搭配

協調，是網頁版面色彩搭配的基本原則，既不能太單一，也不要搞得太花哨，把整個頁面弄得像個調色板一樣，要合理搭配，達到“總體協調，局部對比”的效果。在色彩的運用和搭配上，學生得具備一定的審美觀，懂得色彩的一些基礎知識。對于色彩在設計中的搭配技巧，則需要通過不斷的實踐以及經驗的積累慢慢悟出來。這種領悟不是靠講解理論就能夠懂得的，很多來源于生活。筆者在講課過程中曾經舉過這樣一個例子：假設我們要分別制作一個清明節、一個中秋節、一個國慶節的網頁，讓學生自己選擇以上三個節日網站的主色調。學生通過討論之后最終制定了幾種方案，清明節的主色調選用灰色，通過有點哀傷的灰色而不是太沉重的黑色，來表達這個節日人們對先人的懷念和哀悼之情；用金黃色來烘托中秋節家人團聚時和和美美的溫暖氛圍；而國慶節他們選擇用熱烈的大紅色調來表達全國人民舉國同慶的壯觀和莊嚴。像這些不能單純地靠理論知識去灌輸，而是要通過日常生活中所見所得的引導，讓學生自己去領悟和體會。

四、網頁版面布局表格嵌套的問題

頁面的版面設計方法比較常用的有表格層、框架、模板等。最簡單也是最基本的方法就是表格布局法。在實踐教學中，這種方法因為簡單，界面清晰，學生接受起來比較容易，也多數用這種方法做頁面。但就是這種簡單的方法在設計過程中也會遇到一些小問題。

1．插入表格及表格的嵌套

在頁面總體布局的時候，我們一般用的是直接插入固定寬度的一個表格，當然寬度由頁面的寬度來決定。而頁面內部的一些小的分區域，一般用嵌套表格，也就是在表格內再套表格的方式，且是用百分比的形式，這樣嵌套的表格會自動去適應外部表格的變化。

2．表格嵌套中的小問題

開始的時候學生不理解為什么要用百分比的形式嵌套表格，筆者結合“青島西海岸旅游網站”的主頁設計進行了講解。在制作頁面的導航條時，直接用插入固定寬度的表格，而不是嵌套表格。因為導航項目并不一定都是字數一樣的，在輸入的過程中，由于寬度不統一，表格會自動變寬，而且調整其中的一個單元格的寬度時，會影響到其他的單元格，所以控制起來比較麻煩，很難統一導航內容的寬度，做出來的導航條很不整齊，影響整體美觀。而利用百分比的形式再嵌套一個表格之后，這個嵌套的表格會自動適應原來上一層表格的寬度，明顯的效果是制作出來的導航條寬度是平均分配的，看起來比較規整，比原來直接插入一個表格的效果好很多。通過以上幾個方面的設計及實現，一個基本的網頁版面的框架已經出來雛形了，接下來主要的工作就是往這個框架里面添加網頁元素，逐步豐富網頁內容。那將會涉及更深更廣的內容，還需要學生不斷去學習和探索。

作者：劉艷秋 單位：山東青島市黃島區職業教育中心

第三篇：網站設計中風格色彩研究

摘要：

在互聯網時代，網站設計受到很多人的喜愛，特別是各種設計軟件的快速發展，不僅為專業設計人員提供了便利，也使得越來越多的人開始接觸網站設計，獨特、靈活、便捷的網站設計不僅給用戶帶來美和舒適的享受，而且給用戶留下深刻印象。本文分析了網站設計的風格定位、色彩搭配和網頁美化。

關鍵詞:

網站設計；風格色彩；美化

網站設計和建設是一門技術也是一門藝術，怎樣設計一個成功、成熟的網站是很多設計人員應該關注、思考的問題。而風格色彩和美化是網站設計的重要內容，在具體設計中應綜合考慮多方面因素，從搜集資料、網站框架設定、風格定位到各個設計制作環節和最后的優化調試，要認真做好風格色彩和美化，不斷提高網站設計水平。

1網站設計的風格定位

網站設計首先應結合其主題內容，確定其形式和風格，實現內容和形式的完美結合，從而獲得良好的宣傳效果。風格定位對整個網站設計都非常重要，如生活類、娛樂類、經濟類、技術類、企業類等類型網站，而不同類型的網站，其風格是不同的，所以在網站設計中，應考慮不同行業的性質，充分體現出不同主題風格。通過合理、科學的交互方式、先進技術、合理結構布局和色彩，可以幫助用戶快速、熟悉網站操作，吸引用戶的注意力。

1.1布局風格

合理的網站布局為用戶瀏覽網站提供方便，也是網站閱讀的重要指引，精心規劃地網站布局，可以幫助用戶快速找到所需內容。網站布局主要有居中、上下、左右等形式，若細化劃分還包括“田”字形、“品”字形、“廠”字形、“國”字形等，不同行業、不同類型的網站可以結合自身需求，選擇合適的網站布局。

1.2顏色風格

某網站以黑色為背景色，利用專業的flash制圖軟件，結合網站主題風格，以黑色為基礎，雙擊flash快捷圖標，進入“開始頁面”，該頁面中包含從模板創建、創建新項目、打開最近項目等內容，從模板創建中，設計人員可選擇測試、廣告、幻燈片演示文稿等項目；創新新項目中可創建flash項目、flashJavascript文件、動作腳本應用文件、動作腳本文件、flash表單應用程序、flash文檔等，在網站設計中主要采用flash文檔，單擊flash文檔按鈕，進入flash軟件操作界面。整個操作界面包括七個部分：活動面板、固定面板、舞臺、時間軸、工具欄、菜單欄和標題欄。新文檔創建以后，其由默認來設置文檔屬性，具體設計過程中，flash屬性要求不符合默認值，這時設計人員應結合網頁設計要求進行手動修改該，選擇修改—文檔命令，將文檔屬性對話框打開，在這個對話框中修改標尺單位、幀頻、背景顏色、文檔的尺寸和名稱等參數，經過修改以后flash文檔適用非線性編輯，對修改后的文檔屬性進行保存。Flash動作制作完成以后，利用SWF格式生成flash播放文件，從而在網絡系統中傳播。選擇文件—設置的選項，將設置對話框打開，在類型選項中能夠看出flash為MOV、HQX、EXE、PNG、JPG、GIF、HTML、SWF等格式文件，對類型的文件中選中復選框，然后將該格式標簽打開。然后挑選一些明亮的顏色和黑色形成鮮明對比，強化視覺沖擊力，在操作flash制圖軟件時，以該軟件系統為設計平臺，優化顏色設置。

2網站設計的色彩搭配

網站設計過程中，相關設計人員應全面把握用戶的心理狀態，并且結合色彩搭配原理，網站設計中應講究藝術性，注意色彩搭配合理，色彩鮮明，通常情況下色彩鮮艷的網站更容易吸引用戶，然而網站設計不能單純利用某一種顏色，使用戶感到乏味、單調，但是也不能運用所有顏色，使用戶感到缺乏協調性和統一性，使整個網站花俏、輕浮。一個網站應保持一種或者兩種主要顏色，不能使用戶感到乏味、單調，更不能讓用戶迷失方向，相關設計人員應充分考慮到網站主題色，在一個網站中色彩使用應避免超過四種顏色，顏色太多使用戶感到沒有側重點和方向感。另外，確定網站的主題色以后，在利用其它配色，協調處理主題色和其它配色的關系，呈現出良好的網站設計效果，并且網站色彩搭配應和網頁內容協調起來，結合不同的網頁內容，選擇不同顏色，通過色彩的合理搭配，充分體現不同網站的特點和特色，突出個性，設計特點鮮明的網站，吸引用戶在網頁上駐足。

3網站設計的網頁美化結合

網站主題內容，使用PS設計軟件，從開始菜單中找到AdobeFlashProfessionalCS5.5，單擊打開軟件，新建一個空白文檔，點擊“新建文檔”對話框中的ActionScript3.0選項，對話框右邊出現一系列參數，在此可以設置文檔的屬性，啟動Flashcs5.5的初始界面，利用工具面板、時間軸面板、屬性面板等拖曳的活動面板，利用鼠標按住面板的頂部深灰色區域可以將面板拖動到合適的位置，在菜單“窗口”>“工作區”中可以選擇適合的工作區環境，按快捷鍵N鍵，在舞臺的空白區域拉出幾根線條，選中線條在“屬性”（Ctrl+F3）上設置線條的屬性。在屬性面板中，位置和大小指的是線條距離舞臺左上角的位置。在筆觸選項中設置線條的顏色、筆觸的粗細、樣式等，將端點和結合部設置為所需要的樣式。在實際制作中，也經常需要將線稿導入到Flash中，然后根據線稿新建一個圖層進行描線，將線稿轉換為Flash文檔，熟練的使用線條工具和選擇工具進行描線是動畫師的基本工作，最后使用“文件”>“保存”（Ctrl+S）或者“文件”>“另存為”（Ctrl+Shift+S），保存動畫項目，存成.fla文件。網站設計美化應堅持反復和條理的原則，形成整體網頁秩序美，在運動發展過程中實現一致性和協調性，為了使網站主體畫面有生氣，保持變化性，要通過合適的對比方法，使網站各個部分實現有效調和，保持不同元素的平衡和均齊，實現網頁中心和動態元素的統一性。

4結束語

近年來，計算機科學技術快速發展，網站成為人們進行網絡交互的重要門戶，結合網站設計要求，做好風格定位、色彩搭配和網頁美化，從而設計一個用色協調、形象突出、整體性好、使用方便、簡潔實用的網站。

參考文獻：

[1]賀冬梅.淺談網站設計的風格色彩與美化[J].中國科技信息,2012,06:138-139.

[2]李海燕.網站設計色彩協同與風格異同研究[D].合肥工業大學,2013.

作者：古艷利 單位：天津市先行多媒體網絡技術有限公司