全國統(tǒng)一學(xué)習(xí)專線 8:30-21:00
位置:有考網(wǎng) > 有考課程 > 綜合 > 網(wǎng)頁設(shè)計(jì)中顏色搭配的技巧  正文

網(wǎng)頁設(shè)計(jì)中顏色搭配的技巧

2023-04-03 17:09:31來源:互聯(lián)網(wǎng)


【資料圖】

隨著社會(huì)越來越發(fā)達(dá),大家都選擇在網(wǎng)絡(luò)上汲取相關(guān)知識內(nèi)容,比如網(wǎng)頁設(shè)計(jì)中顏色搭配的技巧,為了更好的解答大家的問題,小編也是翻閱整理了相應(yīng)內(nèi)容,下面就一起來看一下吧!

中顏色搭配的技巧

以下就是網(wǎng)頁設(shè)計(jì)中顏色搭配的技巧等等的介紹,希望為您帶來幫助。

網(wǎng)站色彩搭配是一個(gè)很復(fù)雜的問題,如何用好色,配好色,分清主次,需要網(wǎng)站設(shè)計(jì)人員潛心研究。網(wǎng)站色彩搭配好,就會(huì)極具沖擊力。

因?yàn)橄埠貌煌?,有的網(wǎng)站喜歡用一種色彩,這樣的網(wǎng)站給人感覺是整體統(tǒng)一,通過色彩通明度和飽和度的變化,有層次感。有的網(wǎng)站則喜歡用兩種色彩來搭配網(wǎng)站,當(dāng)然,這兩種顏色是有主次的,黑白分明。后有的網(wǎng)站在色彩上選擇一個(gè)色系,比如例如淡藍(lán),淡黃,淡綠;或者土黃,土灰,土藍(lán)。

對于網(wǎng)站建設(shè)來說,使用什么色彩是掌握在網(wǎng)站所有者的手中,對于網(wǎng)站設(shè)計(jì)人員來說,一般都是先考慮網(wǎng)站所有者的意見,然后根據(jù)這個(gè)進(jìn)行設(shè)計(jì)規(guī)劃,雖然這樣很被動(dòng),不能否認(rèn),大多數(shù)能存活下來的網(wǎng)站都是因?yàn)槠溆泻軓?qiáng)的商業(yè)功能,很少人把它當(dāng)做藝術(shù)品去欣賞,而且我們這里說到的色彩搭配,也是為了迎合用戶體驗(yàn),獲得好感而設(shè)計(jì)的,這自然需要符合大多數(shù)的審美特性,很多時(shí)候,在確定整體顏色之后,只能在細(xì)節(jié)上下功夫。

這些細(xì)節(jié)上的設(shè)計(jì)包括網(wǎng)站底部顏色設(shè)計(jì)、網(wǎng)頁鏈接色彩、內(nèi)容頁的標(biāo)題和正文的色彩設(shè)計(jì)等等?,F(xiàn)在依次和大家分享一些經(jīng)驗(yàn)心得。

網(wǎng)站底部往往是一個(gè)容易讓人忽略的地方,對于那些點(diǎn)擊網(wǎng)站駐留時(shí)間不長的用戶來說,可能根本就看不到,但是,對于網(wǎng)站的忠實(shí)用戶,他們會(huì)注意網(wǎng)站底部,因?yàn)橥ǔT诘撞繒?huì)加入很多他們需要的內(nèi)容,有人說,網(wǎng)站底部以灰色為主題顏色,這樣具有安定用戶情緒的作用。而在底部,需要加入一些友情鏈接和次要的導(dǎo)航,當(dāng)然,一些網(wǎng)站也會(huì)把聯(lián)系地址在底部展現(xiàn)出來,現(xiàn)在又多了二維碼,在顏色上如何讓用戶一眼就能找到聯(lián)系方式和進(jìn)行二維碼登陸,良好的顏色搭配會(huì)有助于用戶付之于實(shí)際行動(dòng)。

網(wǎng)頁鏈接的顏色設(shè)計(jì)。對于網(wǎng)頁超級鏈接,大家似乎都喜歡統(tǒng)一色調(diào),那就是淡藍(lán)色,任何網(wǎng)站都不可能只有單一的一頁,所以文字和圖片的鏈接是網(wǎng)站中不可或少的一部分。尤其是文字的鏈接,因?yàn)槲淖宙溄雍臀淖植煌晕淖宙溄拥念伾臀淖值念伾?font color=red>絕對不能一樣?,F(xiàn)代人的生活節(jié)奏都很快,沒有人會(huì)花很多精力在尋找網(wǎng)站的鏈接上。因此,設(shè)置獨(dú)特的鏈接顏色,讓人感覺其獨(dú)特性,從而驅(qū)使用戶移動(dòng)鼠標(biāo),點(diǎn)擊鏈接。

網(wǎng)頁標(biāo)題和正文。網(wǎng)頁標(biāo)題的色彩以及正文的顏色,大多數(shù)以黑色為主,這已經(jīng)讓用戶。但是,如果在標(biāo)題上面或者下面加入圖片廣告,或者在文中加入超鏈接,有的網(wǎng)站為了吸引用戶點(diǎn)擊廣告,還在內(nèi)容左側(cè)加入圖片,這個(gè)時(shí)候?qū)ι实拇钆渚托枰ㄙM(fèi)一點(diǎn)小心思了,那么,不讓用戶產(chǎn)生反感的情緒,就應(yīng)該通過色彩搭配形成統(tǒng)一感,以新穎的版式讓用戶津津有味的看下去,而不會(huì)輕易離開。除此之外,對于每篇文章的模板需要統(tǒng)一規(guī)劃,網(wǎng)頁頂部和底部的色彩層次分明,否則會(huì)讓用戶感到混亂,引起不適,從而關(guān)閉網(wǎng)頁。

網(wǎng)頁設(shè)計(jì)中根本的原則是,做好用戶體驗(yàn),而且自己不適主角,真正唱主角的是網(wǎng)站內(nèi)容,你的設(shè)計(jì)應(yīng)該是形成一種氛圍,目的突出網(wǎng)站的內(nèi)容。一個(gè)網(wǎng)站,擁有別的網(wǎng)站所沒有的風(fēng)格,就會(huì)讓瀏覽者愿意多停留些時(shí)間,細(xì)細(xì)品嘗該站的內(nèi)容,甚至該站會(huì)得到多人的鼓勵(lì)與注目,所以,在做網(wǎng)站設(shè)計(jì)中,好好在色彩上下功夫,可以起到畫龍點(diǎn)睛的神奇效果!

網(wǎng)頁設(shè)計(jì)中如何給網(wǎng)頁配色

一、顏色選擇

我們要做的第一步是顏色選擇,在網(wǎng)站剛開始要設(shè)計(jì)的時(shí)候,這一點(diǎn)就要著手去做了,在這里要注意的是顏色的選擇并不是憑空想象的,而是要根據(jù)服務(wù)產(chǎn)品的定位、風(fēng)格、還有要傳達(dá)給用戶的理念,將這幾點(diǎn)考慮到,在進(jìn)行選取,而不是根據(jù)自己的經(jīng)驗(yàn)或者嗜好來。

我們來舉個(gè)例子,假如說為一家大型企業(yè)設(shè)計(jì)官網(wǎng),這家企業(yè)的要求是 VI 風(fēng)格,采用統(tǒng)一配色,那么這家企業(yè)官網(wǎng)的配色我們就應(yīng)該選取 VI 的風(fēng)格配色。

選色的方法:

(1)工具流:這個(gè)鏈接包含大量選色工具12個(gè)適合設(shè)計(jì)師的在線色彩搭配工具

(2)參考流:尋找別人的網(wǎng)站作為參考選取顏色(但是注意要風(fēng)格類似,比如你的客戶要求高雅風(fēng)格,你就去找類似風(fēng)格的網(wǎng)站選色),這個(gè)方法適用于初學(xué)者。

二、顏色的分配

當(dāng)你選取好了主色系之后,那就應(yīng)該要考慮如何將它們分配到網(wǎng)頁的每一個(gè)位置中去了,這里的操作也要講究的,我們要注意的是,如果在紅綠兩色之間加其它的顏色的話,進(jìn)行調(diào)和是可以搭配出很好看的色彩的,大家可以看看圣誕節(jié)各大電子商務(wù)網(wǎng)站的banner。

顏色選擇好之后我們就開始對顏色進(jìn)行搭配,這個(gè)時(shí)候設(shè)計(jì)師就要利用上色彩基礎(chǔ)知識了,色彩分為主色、輔助色、點(diǎn)綴色這三個(gè)叫法,如果可以的話還可以細(xì)分,一個(gè)網(wǎng)站的主色調(diào),是可以傳達(dá)網(wǎng)站的整體風(fēng)格的,面積也是大的,所以在選擇色階段選取的幾個(gè)顏色中選一個(gè)作為主色,然后用在網(wǎng)頁中需求多的地方,如果banner的顏色,導(dǎo)航的背景色、文字標(biāo)題的顏色等等,輔助色是比主色百分比略少的顏色,點(diǎn)綴色一般是飽和度較高的顏色,一般用在網(wǎng)頁中的強(qiáng)調(diào)內(nèi)容或者突出的內(nèi)容,如按鈕、鏈接等,三種顏色在整個(gè)網(wǎng)頁的比重大概是60%、30%、10%。

網(wǎng)頁色彩搭配的原理

1.色彩的鮮明性。網(wǎng)頁的色彩要鮮艷,容易引人注目。

2.色彩的獨(dú)特性。要有與眾不同的色彩,使得大家對你的印象強(qiáng)烈。(參考設(shè)計(jì)思考第二篇網(wǎng)站CI的標(biāo)準(zhǔn)色彩一節(jié))

3.色彩的合適性。就是說色彩和你表達(dá)的內(nèi)容氣氛相適合。如用粉色體現(xiàn)女性站點(diǎn)的柔性。

4.色彩的聯(lián)想性。不同色彩會(huì)產(chǎn)生不同的聯(lián)想,藍(lán)色想到天空,黑色想到黑夜,紅色想到喜事等,選擇色彩要和你網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)。

配色方案技巧:

1.用一種色彩。這里是指先選定一種色彩,然后調(diào)整透明度或者飽和度,(說得通俗些就是將 色彩變淡或則加深),產(chǎn)生新的色彩,用于網(wǎng)頁。這樣的頁面看起來色彩統(tǒng)一,有層次感。

2.用兩種色彩。先選定一種色彩,然后選擇它的對比色(在里按ctrl+shift+I)。我的主頁用藍(lán)色和黃色就是這樣確定的。整個(gè)頁面色彩豐富但不花稍。

3.用一個(gè)色系。簡單的說就是用一個(gè)感覺的色彩,例如淡藍(lán),淡黃,淡綠;或者土黃,土灰,土藍(lán)。確定色彩的方法各人不同,我是在photoshop里按前景色方框,在跳出的拾色器窗中選擇 自定義 ,然后在 色庫 中選就可以了:)

4.用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺很 跳 。

在網(wǎng)頁配色中,忌諱的是:

1.不要將所有顏色都用到,盡量控制在三種色彩以內(nèi)。

2.背景和前文的對比盡量要大,(絕對不要用花紋繁復(fù)的圖案作背景),以便突出主要文字內(nèi)容。

網(wǎng)頁設(shè)計(jì)中的顏色搭配

藍(lán)色:商務(wù)流行色。安全的web顏色。受設(shè)備偏色影響較小,搭配效果較好。

紅色:熱情、沖動(dòng)、刺激、勇氣、恐怖、暴力、血腥、殘忍。

粉紅色:浪漫、幸福、迷茫、困惑。

桃紅:緋聞、挑逗、時(shí)尚、明亮。

暗紅:神秘、深?yuàn)W、穩(wěn)健、深沉。

黃色:有多個(gè)變種,每個(gè)變種很容易與其他顏色搭配,但同一種黃色在不同環(huán)境中所表現(xiàn)出來的視覺和心理效應(yīng)往往有很大差別。

橙色:快樂、時(shí)尚、溫馨、感動(dòng)。有紅色熱情奔放的特點(diǎn),但又不像紅色那樣光彩奪目。有黃色明快爽朗的一面,而又不容易產(chǎn)生平庸帶澀之感。視覺和心理效應(yīng)穩(wěn)定,不會(huì)有太大起伏和變化。

紫色:浪漫、優(yōu)雅、高貴、深沉、憂郁、神秘。

白色:白色、灰色、黑色、沒有明顯感情色彩或心理傾向,稱為中性色??梢誀I造出強(qiáng)烈視覺效果。

灰色:大面積灰色背景可以讓白色、紅色、前景信息更加醒目,可以讓整個(gè)網(wǎng)頁充滿現(xiàn)代氣息。用灰色過渡可以讓極難搭配的顏色變得容易搭配。

黑色:可以輕松從其他顏色中凸現(xiàn)出來,讓其他顏色更加惹眼。黑白紅可以構(gòu)成簡潔明快的布局??梢院途G、紫色描繪陰森恐怖的氣氛。

相關(guān)內(nèi)容: 網(wǎng)頁設(shè)計(jì)中顏色搭配的技巧

同類文章
導(dǎo)航

雅思 托福 GRE SSAT SAT GMAT ACT 提升英語 英語四六級 多鄰國英語測試 詞庫 IB 英語口語 商務(wù)英語 出國英語 考研英語 青少兒英語 成人英語 A-Level 學(xué)生英語 初高中英語 OSSD AP課程 AEAS個(gè)性化定制課程 一級建造師 二級建造師 消防工程師 消防設(shè)施操作員 BIM 造價(jià)工程師 環(huán)評師 監(jiān)理工程師 咨詢工程師 安全工程師 建筑九大員 公路水運(yùn)檢測 通信工程 裝配式工程師 注冊電氣工程師 二級注冊建筑師 一級注冊建筑師 智慧消防工程師 智慧建造工程師 全過程工程咨詢師 EPC 碳排放管理師 ACCA CFA 注冊會(huì)計(jì)師 會(huì)計(jì)證 初中級經(jīng)濟(jì)師 初級會(huì)計(jì)師 中級會(huì)計(jì)師 基金從業(yè) 證券從業(yè) 稅務(wù)師 薪稅師 企業(yè)合規(guī)師 會(huì)計(jì)就業(yè)實(shí)操 期貨從業(yè) FRM CMA CQF 教師資格 人力資源管理 導(dǎo)游考試 心理咨詢師 健康管理師 社會(huì)工作師 普通話 育嬰員 鄉(xiāng)村規(guī)劃師 家庭教育指導(dǎo)師 專利代理師 教師招聘 兒童專注力 兒童情緒管理 法律職業(yè)資格 少兒編程 書法培訓(xùn) 國畫 茶藝 樂器音樂 舞蹈 棋類 機(jī)器人編程 戲曲培訓(xùn) 信奧賽C++ 少兒小主播 口才培訓(xùn) 籃球培訓(xùn) 商務(wù)辦公 影視后期 剪輯包裝 游戲設(shè)計(jì) 游戲程序 UI設(shè)計(jì) 室內(nèi)設(shè)計(jì) photoshop CAD制圖 視覺設(shè)計(jì) 商業(yè)空間設(shè)計(jì) 平面設(shè)計(jì)