導航:首頁 > 萬維百科 > 談色彩在網頁界面設計中的應用

談色彩在網頁界面設計中的應用

發布時間:2020-10-14 22:28:36

1、網頁設計中的色彩有何應用原則

看看優秀的網站能夠給我們帶來很多啟示。下面我們就先看看這些主色調的象徵意義和這些色調中做的比較優秀的網站。

灰色:象徵冷靜、中立;(蘋果、維基百科、紐約時報……)

綠色:象徵健康、生命;(BP石油、食品超市whole foods、星巴克……)

藍色:象徵可靠、力量;(戴爾、大眾汽車、IBM……)

紫色:象徵智慧、想像;(雅虎、T-Mobile、科幻主題電視台Syfy……)

紅色:象徵血氣、年輕;(可口可樂、樂高、肯德基……)

橙色:象徵歡樂、信任;(芬達、亞馬遜、火狐……)

黃色:象徵溫暖、透明;(百思買、法拉利、麥當勞……)

網頁設計色彩搭配原則

網頁美工設計中,最常用的幾個顏色為藍色、綠色、橙色,以及暗紅色。

藍為主調。藍色多與白、橙搭配,。白底,藍標題欄,橙色按鈕或ICON做點綴;藍天白雲,沉靜整潔的感覺。

綠為主調。綠色多與白、蘭兩色搭配。白底,綠標題欄,蘭色或橙色按鈕或ICON做點綴,綠白相間,雅緻而有生氣。

橙為主調。橙色多與白、紅搭配。白底,橙標題欄,暗紅或桔紅色按鈕或ICON做點綴,橙色活潑熱情,標準的商業色調,因此多用於商業網站的網頁美工設計。

暗紅為主調。暗紅色顯得寧重、嚴肅、高貴,需要配黑和灰來壓制刺激的紅色。黑或灰底,暗紅標題欄,文字內容背景為淺灰色。

網頁設計師需要注意的幾點

盡管三原色的相互搭配創造出了無數顏色,可不是所有的顏色都適用於網頁設計,不同的顏色在搭配上也有著其中的學問,網頁設計就相當於平面設計,網頁設計師可以將平面設計中的審美觀點套用到這上面來,所以平面設計上的審美的觀點在網頁設計上非常實用。

在網頁設計師中對於色彩的使用特別忌諱臟、純、跳、花、粉這幾種情形。

忌臟是指背景與文字內容對比不強烈,灰暗的背景令人沮喪!

忌純是指艷麗的純色對人的刺激太強烈抗議,缺乏內涵。

忌跳是指再好看的顏色,也不能脫離整體。

忌花是指要有一種主色貫穿其中,主色並不是面積最大的顏色,而是最重要,最能揭示和反映主題的顏色,就象領導者一樣,雖然在人數上居少數,但起決定作用。

忌粉是指顏色淺固然顯的干凈,但如果對比過弱,顯得蒼白無力了,就象病夫一樣無可救葯。

另外,藍色忌純,綠色忌黃,紅色忌艷。

當然,作為網頁設計師,我們最需要時刻提醒自己的是不要為了設計而設計。

一切的設計都要以用戶的需求為導向。一個優秀的網站,會給用戶非常直觀簡介明了的體驗和簡明的導航。

2、如何在移動應用ui界面設計中使用色彩

傑夫 約翰遜(Jeff Johnson) 提出了軟體色彩設計的五項原則:

①用飽和度、亮度以及色相來區分顏色,避免顏色間輕微的差異;

②使用獨特的顏色,在紅一綠、黃一藍、黑一白三組顏色感知通道中的一個上觸發強信號;

③考慮色盲人群,避免使用深紅和黑、深紅和深綠、藍和紫、淺綠和白色,還要避免在深色背景上使用深紅、藍或紫色;

④若用顏色代表某種事物,則同時用另外一種方式標記它,如:圖形符號;

⑤不使用強烈對抗的顏色組合,如:紅色與綠色。此套准則同樣適用於智能手機移動互聯網應用界面的色彩設計中。

3、色彩設計在web界面如何應用

一、 視覺引導功能

視覺引導功能遵循的是一條流暢的路徑,網頁色彩能順利地引導用戶在頁面上移動體驗。

在WEB界面設計中,色彩擔負起和線條、文字一樣的視覺引導和強調的作用。設計師可以充分利用色彩導向作用力量去美化頁面,對重要的信息進行色彩的整合和強化,引導瀏覽者的注意力,有利於推廣新產品。對需要強調的內容適當運用色彩加以突出,使瀏覽者加深記憶,提高網站的信息傳遞效率。在產品展示類型的網頁中,色彩的強調功能尤為明顯。我們在瀏覽一些頁面中不難發現世界頂級護膚品牌HR赫蓮娜的展示頁面,它成功地利用色彩將瀏覽者的注意力引導到產品之上,給人留下深刻的印象。又如在某些商品展示類的網站,色彩的導向傳遞功能運用尤為明顯:亮色系比如以黃色為背景一般所代表的意思是促銷產品熱賣產品,而藍色、褐色或深綠色等冷色調的搭配則多用來表現商品的價值。

二、企業形象識別功能

企業標准色是企業形象識別要素之一,網站設計者將企業網路界面色彩與企業標准色相呼應起到了加深企業形象的作用。格羅佩斯(Walter Gropius)在他的《藝術家與技術家在何處相會》一文中提到「如果物體的形象很適合於它的工作,它的本質就能被人看的清楚明確。」從這里可以很深刻的了解到企業形象在信息傳遞和接納過程當中所起到的非常重要的作用因素。色彩也是形成企業形象的關鍵要素,企業標准色是企業形象的色彩表示系統,人們一看到此色彩就會聯想到該企業。把CI設計這一理念應用到網站整體形象規劃與設計開發上來,以企業CI設計中的標准色作為WEB界面的主色調展開設計,使WEB界面成為企業形象的延伸和宣傳,無疑是把WEB界面設計推向正規化、品牌化發展的道路。它可以使網站與企業具有共通的視覺特徵,便於宣傳和識別,通常達到事半功倍、相得益彰的效果。

百事可樂在全世界擁有較高的知名度,使人過目不忘的藍色和標准字體已成為它的標志。我們可以瀏覽一下百事可樂系列站點,每個網站的主體風格不盡相同,美國總站穩重些,英國站比較活潑,即使站點風格有些差異但都保持了一致的文化特點,都採用了大快藍色的底色,給人以熱情、活力、喜悅的感覺,應用在網路界面設計中,讓受眾群聯想到飲用百事可樂所帶來的快樂心情,無形中就加深了百事可樂品牌在消費者的心目中的形象。

三、 視覺區域劃分功能

WEB界面的首要功能是信息傳遞,色彩正是創造有序的視覺信息流程的重要因素。利用不同色彩設計進行視覺區域劃分是網路界面設計中的常用手法,也是色彩在WEB界面設計中的重要功能。網路界面中的信息不僅數量多,而且種類繁雜,往往在一個頁面中可以看到各種各樣的信息問題,利用色彩分布,可以將不同類型的信息分類排列,並配合相應內容,有針對性地設計色彩;利用各種色綵帶給人的不同心理效果,很好的區分出主次順序,從而形成有序的視覺流程。

色彩的視覺區域劃分功能實用性強,變化性強,靈活易用,適用面廣泛,在信息繁雜豐富的門戶類網站中應用較多,而且效果較為明顯。利用色彩和輔助線把網路界面分成幾個區域,這些區域可以是規則也可以是不規則的,以適應多種信息內容編排的需要。「FDI世界園」是一家招商投資網站,它的網路界面設計十分簡潔,多趣味性。由多種色塊矩形區域拼合成了網路界面的整體框架,用按鈕形式來顯示導航功能選擇,很清晰地把網站的內容分類展示給瀏覽者,配合上網站通用的icon,整個網站十分舒暢,同時減輕的用戶的視覺負擔。

四、審美功能

WEB界面不僅具有實用的物質功能,而且具有審美的精神功能,發揮審美功能的界面形象與發揮實用功能的界面實體是同一的,它們具有同質同構的聯系,網路界面是以一定的使用目的或物質功能為存在前提的,其審美功能必須以其使用目的為導向,即審美功能不能背離其使用目的。由於人的視覺對於色彩有著特殊的敏感性,因此色彩所產生的美感魅力往往更為直接。

色彩既是視覺信息傳達的方式(實用功能),又是藝術設計的語言(審美功能),當網路界面的色彩所反映的情趣與人們的審美情緒發生共鳴時,也就是說色彩配合的形式結構與人們審美心理的形式結構相對應時,人們就會感覺到色彩和諧的愉悅。色彩設計對WEB界面設計作品的藝術品位起著舉足輕重的作用,不僅在視覺上,而且在心理作用和象徵作用中都可以得到充分的體現。因此,網路界面設計要以色彩的科學知識為基礎,進而從美學的角度去探討色彩設計的表現形式,增強WEB界面設計作品的藝術性,以創造出更富審美情趣的作品。在國內68design網頁設計的站點,其中國內優秀設計作品中一家叫冰藝工作室的網站還是比較吸引人的眼球,讓人不由自覺的想去點擊它。它每個網路界面所選擇的色彩和圖形都能使瀏覽者自然地將其與產品風格聯系在一起,界面中間色彩和四周部分黑、白、灰無彩色的色調搭配形成了動靜相宜、多樣統一的韻律美,給網路界面注入了活潑而新鮮的活力,從而達成令人賞心悅目的界面形式,和諧中富於變化,具有獨特的創造性和審美價值。

五、品牌語言傳遞功能

品牌宣傳效果不僅應該在視覺上,而且應該在心理上和象徵上得到體會和理解。不同色相具有不同的語意特徵。人們經過長期的社會生產實踐和生活體驗,對色彩形成了不同的情感和心理感受,人們將這種長期積累的色彩印象賦予各種語意特點並將其應用到生產、生活中。

在眾多的網站類型中,不同的網站類型都有自身的色彩語意相關性。如兒童用品的網站設計多使用色彩亮麗、醒目的純色;藍色常用在表現同科技產業等相關新興產業的WEB界面設計上。因此,設計者在界面色彩語言表達中應充分考慮不同色彩的語意特點,並將其和WEB界面主題內容結合起來。

六、主題鮮明功能

網路是信息的海洋,瀏覽者在網路中漫遊無疑是尋找他們所需要的信息資源,網路界面傳遞的信息內容與傳遞方式應該是相互統一的,這是設計作品成功的必要條件之一。網路界面如何使瀏覽者迅速、快捷、准確的掌握主題,整合信息資源,這就需要設計師利用色彩的對比調和手段,產生視覺落差,來表現信息的重點,從而提高瀏覽者獲取信息的效率。設計師可利用不同色彩自身的表現力、情感效應以及審美心理感覺等,使網路界面的內容與形式有機地結合起來,以色彩的內在力量來美化頁面,或含蓄優雅,或動感強烈,或時尚新穎,或單純醒目,烘托主題、突出主題。在網路界面設計的許多成功作品中我們都可以看出這一點。三星galaxys3公司的商業網站,進入該網站的第一需要就是找到所需的產品,WEB界面設計者就利用了產品圖片顯示顏色和灰色塊強烈對比所產生的視覺落差,突出了右上角黑色文字主題內容和產品薄輕便的優勢,以色彩的內在力量引起瀏覽者的重點關注,引導瀏覽者以最便捷的方式使用該網路界面,同時,灰色色塊背景好似深沉的藍色里的交音階,高貴、氣質不凡,鋪色用心,恰到好處,使網站風格突出,大大增強了網站的藝術性和吸引力,從而提高了網站的知名度。

4、色彩心理學對網頁設計有多大影響力

在網頁設計時,有許多因素需要,對於網站而言,轉化是其網站表現良好的指標,網頁設計中的色彩心理會影響這些轉換。用戶體驗和用戶界面設計在網站的成功中發揮著作用,顏色以及它在網頁設計中的使用方式,色彩心理學是一種強大的網頁設計工具。

紅色傳達了一種緊迫感,如果網站進行促銷,那麼在廣告中使用紅色會立即吸引注意力,用戶渴望完成互動,紅色是刺激,這在銷售中非常受歡迎。紅色也是激情的顏色,以吸引用戶的眼球。

藍色與可靠性,智能,信任,安全和安全性相關,在商業領域非常受歡迎,尤其是金融領域,藍色是舒緩和放鬆的顏色,用於網頁設計的網頁,適用於需要高度信任的行業,如保險,銀行和網路安全。藍色也可以表示放鬆,使用柔和的藍色來放鬆用戶,使放鬆和信任將推動轉換。

白色代表純真,美德和純潔,在醫療行業的廣泛應用。白色可以表示清潔,秩序和傳統價值觀,許多新聞網站也使用白色來喚起閱讀的可靠感覺,在網站調色板中使用白色可以讓內容脫穎而出。

黑色優雅,時尚和魅力,用於奢侈品。使用黑色強調品牌或產品的獨特,黑色調與其他頁面元素形成鮮明對比,並以鮮艷的色彩搭配,營造出時尚現代的感覺。

5、談對網頁與平面構成、色彩、版面設計關系的理解和認識 要求2000字 誰能幫我解決了啊 不要用百度的答案

雖然很多人認為可能,多看多做就是最好的學習方法,但是我認為學習平面設計,在學平面構成和色彩構成是時候是絕對不可以怠慢的,一定要認真對待,就如同小學,中學是大學的基礎,要跑步一定要先會走,雖然說法是土了一點,但是多看多做是累積經驗的一種方法,經驗是從其他萬家的作品於一身的一個總結,如此一來自己所做的作品就會,多多少少受其他風格影響.
其實所謂構成,就是一種造型概念,也是現代造型設計語言.其中含義就是將 點 線 面 色 等各種單元組成一個新的單元,並賦予視覺化的、力學的概念。其中,立體構成是厚度造型,平面構成是以輪廓造型,是將不同的基本形態按一定的規則在平面上組合圖案。
平面構成元素,包括概念元素、視覺元素和關系元素,是指造型之前,僅在意念中感覺到的點、線、面、體的概念,其作用是促使視覺元素的形成。視覺元素,是把概念元素見之於畫面,是通過看得見的形狀 大小 色彩 位置 方向 肌理等被稱為基本形的具體形象加以體現的。關系元素,是指視覺元素(即基本形)的組合形式,是通過框架、骨骼以及空間 空心 虛實 有無等因素決定的;其中最主要的因素是骨骼,是可見的,其他如空間,則是以感覺去體現。
平面構成的框架 一切用於平面構成中的可見的視覺元素,通稱形象,基本形態即是最基本的形象;限制和管轄基本形在平面構成中的各種不同的編排,即是骨骼。基本形有「正」有「負」,構成中亦可互相轉化;基本形相遇時,又可以產生分離 接觸 復疊 透疊 聯合 減缺 差疊 重合等幾種關系。骨骼可以分為:視覺上起作用的有作用骨骼和在視覺上不起作用的無作用骨骼,以及有規律性骨骼(即重復 近似 漸變 發射等骨骼)和非規律性骨骼(密集 對比等骨骼)。基本形與骨骼的上述這些特性,將相互影響 互相制約 互相作用而構成千變萬化的構成圖案。
上面是平面構成的簡單概念和介紹但是平面設計中除了平面構成以外還有另外一個不可或缺的理論知識,就是色彩構成,色彩構成也是平面設計的必須基本知識之一,其實配色方面也是很多人的問題,有人會認為色彩的話只要自己覺得舒服就好了,我個人覺得舒服其實只是感覺中的一種,而色彩可以傳達的不單單是讓人舒服而已,簡單來說色彩是一種語言 是一種信息 是一種可以通過眼睛傳達到人腦中直接刺激人的大腦而對作品產生的一種對作品的共鳴。
色彩有冷暖 有遠近 有大小 甚至是可以直接傳達信號給觀看者。
就象是埃及的圖騰中紅色就是太陽,生活中紫色的花朵看了就有給人一種幸福的感覺,土黃色一看就很古典等等等~~
但同時在色彩構成中不同的行業對色彩運用也有不同的感受,還有就是不同的行業對色彩使用的要求也有不同想網頁設計和書報設計是不同的,網頁設計在網頁上的色彩除了符合自己風格以外還有就是不用考慮印刷方面的問題。因為在書報設計中要考慮印刷方法,和印刷出來的效果。
色彩是很微妙的東西,它們本身的獨特表現力可以用來產生出一種刺激人們大腦中對某種形式存在的物體的共鳴,展現出其對待生活中的新的看法與態度,擴大了我們創作的想像空間,賦予了創作的新的不定性。
其實在一個具體的設計稿樣上,形態的組織 色彩的構成等都是為了獲得一種整體的視覺效果,在我們拋開其他形態組織不談,先簡單的分歧一下設計稿件上在色彩上如何是形成一個同意和諧的整體的。
photshop課一般是針對平面設計而開設 也可三維作圖
色彩構成 通俗點說主要學一些 顏色的對比 搭配 重組 為什麼要在這一塊上這種顏色等

平面構成 主要講設計裡面的三個元素 點 線 面 用這些東西來做些形狀上的 疏密上的 長短上的 等對比 增加你的形式美法則和抽象思維

平面設計 因為他是一個大的專業 狹義可以理解為 二維上的設計!!!就是平面上的東西 沒有任何三維在上面 就是平面設計(比如 標志設計 服裝設計 logo設計 ci設計 廣告設計等都屬於平面設計的范疇)

6、色彩在網站建設中的作用有哪些

網站就相當於企業的一張網路名片,「愛美之心人皆有之」網站「顏值」的高低直接影響用戶的使用體驗。要判定網站的「顏值」,網站配色必定是其中的一項,在進行過程中需要注意的遵守網站配色的原則:
1、鮮明性
網頁的色彩要鮮明,吸引眼球,給用戶留下深刻的印象。
2、獨特性
要定製具有企業風格的網站,網頁配色要獨具特色。
3、藝術性
網頁配色是網站設計中關鍵一步,要遵循藝術規律,在根據網站的定位和需要,大膽進行藝術創新,增加網站美觀度。

7、網頁設計中顏色搭配的重要性,常見顏色的含義

一步、底色和圖形色 色彩搭配的問題確實不是一個簡單的問題。這一代的設計師比上一代的設計師,所能運用的色彩工具多了許多。如今,我們能運用好計算機為我們提供的豐富色彩,看來不是很簡單的事情。就我個人而言,在我從事設計師工作以來,往往也會迷失在色彩的世界。現在交流一下自己學過的和掌握的一些經驗,希望大家指正。 配色所要注意的要素 實際設計時,我們經常會按照設計的目的來考慮與形態、肌理有關聯的配色及色彩面積的處理方案,這個方案就是我的配色計劃。在做配色計劃時,我們應該考慮下述幾點以突出視覺效果。 1.底色和圖形色 在設計時我們會經常遇到用幾個色做各種形的構成,作為底的色我們往往會將它推遠,而作為圖形或文字的色我們要將它拉近。這就需要我們了解受配色關系的影響是什麼樣的。 一般明亮和鮮艷的色比暗濁的色更容易有圖形效果。因此,配色時為了取得明了的圖形效果必須首先考慮圖形色和底色的關系。 圖形色要和底色有一定的對比度。這樣才可以很明確的傳達我們要表現的東西。 我們要突出的圖形色必須讓它能夠吸引觀者的主要注意力。如果不是這樣就會喧賓奪主。
第二步、整體色調 如果我們想使我們的設計能夠充滿生氣,穩健,冷清或者溫暖,寒冷等感覺都是由整體色調決定的。那麼我們怎麼能夠控制好整體色調呢?只有控制好構成整體色調的色相、明度、純度關系和面積關系等。才可以控制好我們設計的整體色調。首先要在配色中心決定佔大面積的色,並根據這一色來選擇不同的配色方案會得到不同的整體色調。從中選擇出我們想要的。 如果我們用暖色系列來做我們的整體色調則會呈現出溫暖的感覺,反之亦然。 如果用暖色和純度高的色作為整體色調則給人以火熱刺激的感覺,以冷色和純度低的色為主色調則讓人感到清冷、平靜的感覺。 以明度高的色為主則亮麗,而且變得輕快,以明度低的色為主則顯得比較莊重、肅穆。 取對比的色相和明度則活潑,取類似、同一色系則感到穩健。 色相數多則會華麗,少則淡雅、清新。 以上幾點整體色調的選擇要根據我們所要表達的內容來決定。

第三步、配色的平衡 顏色的平衡就是顏色的強弱、輕重、濃淡這種關系的平衡。這些元素在感覺上會左右顏色的平衡關系。因此,即使相同的配色,也將會根據圖形的形狀和面積的大小來決定成為調和色或不調和色。一般同類色配色比較容易平衡。 處於補色關系且明度也相似的純色配色,如:紅和蘭綠的配色,會因過分強烈感到刺眼,成為不調和色。可是若把一個色的面積縮小或加白黑,改變其明度和彩度並取得平衡,則可以使這種不調和色變的調和。 純度高而且強烈的色與同樣明度的濁色或灰色配合時,如果前者的面積小,而後者的面積大也可以很容易的取得平衡。 將明色與暗色上下配置時,若明色在上暗色在下則會顯得安定。反之,若暗色在明色上則有動感。

第四步、配色時要有重點色 配色時,為了彌補調子的單調,可以將某個色作為重點,從而使整體配色平衡。在整體配色的關系不明確曖昧時,我們就需要突出一個重點色來平衡配色關系。選擇重點色要注意以下幾點: 重點色應該使用比其他的色調更強烈的色。 重點色應該選擇與整體色調相對比的調和色。 重點色應該用於極小的面積上。而不能用於大面積上。 選擇重點色必須考慮配色方面的平衡效果。

第五步、配色的節奏 由顏色的配置產生整體的調子。而這種配置關系在整體色調中反復出現排列就產生了節奏。色的節奏和顏色的排放,形狀,質感等有關。由於漸進的變化色相、明度、純度都會產生變化而且時有規律的,所以就產生了階調的節奏。 將色相、明暗、強弱等等的變化做幾次反復,從而會產生反復的節奏。 可以通過賦予色彩的配置以跳躍和方向感就會產生動的節奏,等等。我們可以通過學習或訓練來掌握更多的節奏效果。

第六步、漸變色的調和 2色或2個以上的色不調和時,在其中間插入階梯變化的幾個色,就可以使之調和。色環的漸變:色相的漸變象色環一樣,在紅、黃、綠、蘭、紫等色相之間配以中間色,就可以得到漸變的變化。 明度的漸變:從明色到暗色階梯的變化。 純度的漸變:從純色到濁色或到黑色的階梯變化。 根據色相、明度、純度組合的漸變,把各種各樣的變化作為漸變的處理,從而構成復雜的效果。這些漸變色都是調和的。

第七步、在配色方面的統調 所謂統調,即為了多色配合的整體統一而用一個色調支配全體,將這個色叫做統調色,也就是支配色調。 色相統調是在各色中加入相同的色相,而使整體色調統一在一個色系當中。從而達到調和。 明度統調是加白色或黑色,以使全體色調的明度相似。這樣也可以達到調和。 純度統調是加灰色,以使全體色調的純度相似

第八步、在配色方面的分割 2個色如果互相處於對立關系是對比的,具有過分強烈的效果,成為不調和色。為了調節它們,在這些色中用其它色把它們劃分開來,即分割。將用於分割的色叫做分割色。由於分割的目的,可以用於分割色的顏色不多,最常用的是白、灰、黑。 金色和銀色也具有分割的效果。但在我們的電腦中很難調出具有重量感的這兩種色,所以在電腦中幾乎用不到這兩種色。但可以用於印刷中。 使用其它彩色進行分割也可以,但要選擇與原來色有明顯區別的明度,同時也應考慮色相和純度。

以上這些是我們在配色時注意的一些問題和解決的一些基本方法。我想還有更多的色彩問題,我這里沒有談到。如:色彩的感情、色彩的形狀、色彩的味覺、色彩的距離感、色彩的音樂感等等。
紅色:熱情、浪漫、火焰、暴力、侵略。紅色在很多文化中代表的是停止的訊號,用於警告或禁止一些動作。

紫色:創造、謎、忠誠、神秘、稀有。紫色在某些文化中與死亡有關。

藍色:忠誠、安全、保守、寧靜、冷漠、悲傷。

綠色:自然、穩定、成長、忌妒。在北美文化中,綠色代表的是「行」,與環保意識有關,也經常被連結到有關財政方面的事物。

黃色:明亮、光輝、疾病、懦弱。

黑色:能力、精緻、現代感、死亡、病態、邪惡。

白色:純潔、天真、潔凈、真理、和平、冷淡、貧乏。白色在中華文化中也代表著死亡的顏色。

打開一個網站,給用戶留下第一印象的既不是網站豐富的內容,也不是網站合理的版面布局,而是網站的色彩。色彩對人的視覺效果非常明顯,一個網站設計成功與否,在某種程度上取決於設計者對色彩的運用和搭配。因為網頁設計屬於一種平面效果設計,在排除立體圖形、動畫效果之外,在平面圖上,色彩的沖擊力是最強的,它很容易給用戶留下深刻的印象。因此,在設計網頁時,我們必須要高度重視色彩的搭配。

一、色彩的基礎知識

色彩五顏六色、千變萬化,我們平時所看到的白色光,經過分析在色帶上可以看到,它事實上包括紅、橙、黃、綠、青、藍、紫等七色,各顏色間自然過渡。其中,紅、黃、藍是三原色,三原色通過不同比例的混合可以得到各種顏色。色彩有冷暖色之分,冷色(如藍色)給人的感覺是安靜、冰冷;而暖色(如紅色)給人的感覺是熱烈、火熱。冷暖色的巧妙運用可以讓網站產生意想不到的效果。

色彩與人的心理感覺和情緒也有一定的關系,利用這一點可以在設計網頁時形成自己獨特的色彩效果,給瀏覽者留下深刻的印象。一般情況下,各種色彩給人的感覺是:

紅色代表熱情、活潑、熱鬧、溫暖、幸福、吉祥

橙色代表光明、華麗、興奮、甜蜜、快樂

黃色代表明朗、愉快、高貴、希望

綠色代表新鮮、平靜、和平、柔和、安逸、青春

藍色代表深遠、永恆、沉靜、理智、誠實、寒冷

紫色代表優雅、高貴、魅力、自傲

白色代表純潔、純真、樸素、神聖、明快

灰色代表憂郁、消極、謙虛、平凡、沉默、中庸、寂寞

黑色代表崇高、堅實、嚴肅、剛健、粗莽

二、色彩搭配的原則

色彩搭配既是一項技術性工作,同時它也是一項藝術性很強的工作,因此,設計者在設計網頁時除了考慮網站本身的特點外,還要遵循一定的藝術規律,從而設計出色彩鮮明、性格獨特的網站。

1.特色鮮明

一個網站的用色必須要有自己獨特的風格,這樣才能顯得個性鮮明,給瀏覽者留下深刻的印象。

2.搭配合理

網頁設計雖然屬於平面設計的范疇,但它又與其它平面設計不同,它在遵從藝術規律的同時,還考慮人的生理特點,色彩搭配一定要合理,給人一種和諧、愉快的感覺,避免採用純度很高的單一色彩,這樣容易造成視覺疲勞。

3.講究藝術性

網站設計也是一種藝術活動,因此它必須遵循藝術規律,在考慮到網站本身特點的同時,按照內容決定形式的原則,大膽進行藝術創新,設計出既符合網站要求,又有一定藝術特色的網站。

三、色彩搭配要注意的問題

1.使用單色

盡管網站設計要避免採用單一色彩,以免產生單調的感覺,但通過調整色彩的飽和度和透明度也可以產生變化,使網站避免單調。

2.使用鄰近色

所謂鄰近色,就是在色帶上相鄰近的顏色,例如綠色和藍色,紅色和黃色就互為鄰近色。採用鄰近色設計網頁可以使網頁避免色彩雜亂,易於達到頁面的和諧統一。

3.使用對比色

對比色可以突出重點,產生了強烈的視覺效果,通過合理使用對比色能夠使網站特色鮮明、重點突出。在設計時一般以一種顏色為主色調,對比色作為點綴,可以起到畫龍點睛的作用。

4.黑色的使用

黑色是一種特殊的顏色,如果使用恰當,設計合理,往往產生很強烈的藝術效果,黑色一般用來作背景色,與其它純度色彩搭配使用。

5.背景色的使用

背景色一般採用素淡清雅的色彩,避免採用花紋復雜的圖片和純度很高的色彩作為背景色,同時背景色要與文字的色彩對比強烈一些。

6.色彩的數量

一般初學者在設計網頁時往往使用多種顏色,使網頁變得很「花」,缺乏統一和協調,表面上看起來很花哨,但缺乏內在的美感。事實上,網站用色並不是越多越好,一般控制在三種色彩以內,通過調整色彩的各種屬性來產生變化

8、如何在UI設計中正確地運用色彩 –學UI網

一、空間的擺放一致。
二、UI布局盡量符合格式塔原理中的接近性,即相互靠近的控制項看起來盡量使一組。
三、用結構來提高用戶瀏覽長數字的能力,比如關於金額的表示,一般為2,548,125.00元,其中的「,」符號的分割,方便用戶清晰快速的讀取。
四、構建清晰的視覺層次:用尺寸大小、顯著程度和內容關聯對頁面內容進行組織排序。方便用戶看,無形中提高用戶體驗。
五、支持,而不是干擾閱讀。識別越容易,閱讀也就越快、越容易。
1)避免一些難辨認的字體,如帶圖案的背景或所有問題都居中對齊等
2)使用直白的、用戶的語言
3)將界面設計出層次感
六、讓錯誤提醒信息易見,
讓錯誤信息易見的常用方法是:放在用戶所看的位置上,標記出錯誤。使用錯誤「X」「!」等錯誤符號,保留紅色以呈現錯誤
七、為促進用戶使用,系統提供低風險環境
1)盡可能防止出錯(最常見就是讓不可點擊的按鈕灰掉)
2向用戶清晰展示他們做了什麼(比如,不小心刪了一段文字),這樣錯誤就容易被用戶及時發現。
3)讓用戶能夠輕松地撤銷、反轉或修正錯誤。

9、如何在網頁設計中使用正確的色彩以表達情感

笑天涯說:為什麼Facebook的主題色是藍色的?為什麼淘寶的主題色是橙色的?如何在網頁設計時,正確地使用色彩?欲知個中緣由和方法,且看本文分解! 作者是位顧問,曾幫多家做出適當轉型,讓其營利上升,來看看他有些什麼秘訣。 色彩影響人類心情與思考這件事情是真的,當眼睛看到某種顏色時,會將此訊息傳回大腦的下視丘,經由一系列的神經傳達,甲狀腺分泌賀爾蒙,進而造成情緒、情感或是實際反應。 經由線上 uickSprout 的研究顯示,顏色可以影響 90% 的產品評價;數位行銷專家 Neil Patel 指出,85% 購產品的原因是出自於顏色,而色彩對於網路上各式各樣的設計當然也具有一定影響。 跟相親一樣,第一印象很重要;只要抓住色彩使用的箇中奧妙,就等於抓住讀者的心。 什麼是色彩心理學? 在我們開始談色彩攻略之前,先來談談色彩心理學,字面上來講就是研究色彩如何影響心理的學問,有些人因為還沒有大量文獻研究背書,而對色彩心理學抱持懷疑立場,而我接下來要探討色彩對於人的觀感影響也不是每一項都經由科學證實,但是色彩對於認知行為的影響實在非常巨大,因此仍有探討的必要性存在。 在一篇文獻探討中,Satyendra Singh 認為顧客在 90 秒內就會決定一項產品的觀感,其中色彩就占 62%-90% 的決定性因素,色彩心理學的重要性因此不證自明,產品要成功,選色很重要,領導者、經理人、建築師、主廚、設計師等等都應該正視顏色帶來的影響。 色彩用對地方才能穿透人心 跳到正題,既然顏色這么重要,那要用在哪裡才能真正發揮功效?本文將討論各種網頁上的顏色設計運用,最主要將著重在的主色調上,包含網頁主圖、標題、隔線、背景色、連結紐以及彈出視窗都在討論范圍內。 例如下圖,NinjaJump 在 logo、碼、分類連結、副標題連結、側邊連結都使用綠、黃、紅三色,我們要討論的重點也可以運用到選項欄位、側邊欄位與色彩策略等等。 色彩學真的非常精妙,不僅要用對地方,連天時地利人為因素都要加進去考量,才能展現威力。如果要在網頁上跳跳床,你絕對不會想到要用黑色,看看NinjaJump?。 身為一個跳跳床的,我們可以預期的是明亮有活力的配色,紅色、綠色、再加上一點亮澄澄的黃色對孩童與父母而言都是不錯的選擇。若今天的消費主要客是女性,可能這招就不管用,L&rsuo;Oreal 的就僅使用簡單的黑與白色,加上些許紫色增添層次感。 關於為何 L&rsuo;Oreal 使用黑白兩色是正確的,我留到稍後解釋,首先再一次提醒運用色彩要注意:用對地方、用對時間、針對客、針對目的,我們先來看看以下幾點。 女性不喜歡灰、橘與棕色;她們喜歡藍、紫與綠色。 Patel 利用性別來分類男女對於顏色有何不同的喜好,在一項顏色與性別的研究中,35% 的女性表示她們最喜歡藍色;再來是紫色占 23%、綠色占 14%。33% 的女性表示橘色是她們最不喜歡的顏色,再來是棕色 33% 與灰色 17%。 其他研究也顯示女性較不偏好大地色系,只要看看瞄準女性做為主要客的線上購物就可證實。 化妝品牌 Milani Cosmetics 專供女性場,其首頁上沒有任何一點橘、棕、灰色。 Won&rsuo;s Day 則是把所有女性最愛的顏色 (藍、紫、綠) 都放上網頁設計了。 還是有人以為女生最愛粉紅色,請容我在這先翻個白眼,事實上只有少數女性會將粉紅色選為最喜愛的顏色,雖然粉紅色與女性柔若有相關聯,但使用藍、紫、綠色,反而能夠有效增進女性購物者的造訪率。 男性不喜歡紫、橘、棕色;他們喜歡藍、綠與黑色 如果男性才是的主要針對客,最好別用紫、橘、棕色。藍、綠與黑色在傳統上較常與男性氣息連結在一起,棕色竟然不在此列倒是讓人有點訝異。 藍色可以增進使用者的信任 藍色事實上是最被普遍使用的顏色,而且很多人喜歡,所以藍色是最溫暖的顏色(喂!)。 只要看看有關藍色的文獻探討,就可以發現藍色被認為是信任、和平、秩序、忠誠的象徵;也會讓人有冷靜下來的作用;甚至還可以將藍色直接代表寧靜。 在顏色對於心理影響的調查中,藍色傳達信任感與寧靜的作用是被證實過的,所以看看 Facebook 就知道,將藍色運用在主頁面上用以傳達核心價值:透明與信任。 如果 Facebook 的例子還不夠明顯,我們再來看看 Paypal,作為一個線上支付平台,同樣也選擇藍色增進使用者的信任。如果他們用的是紅色或橘色,大概讓人以為是在跳樓大拍的機率還會高一點。

與談色彩在網頁界面設計中的應用相關的知識