網(wǎng)頁色彩搭配中深色背景的應(yīng)用
隨著信息化時代的快速到來,網(wǎng)頁設(shè)計師已經(jīng)成為了一門新興職業(yè)。簡單機械的將信息羅列在一起的頁面不再能滿足人們的審美需求,那些依靠未加修飾的圖片和隨意使用的色彩制作出來的頁面,在沒有欣賞價值的同時,也逐漸失去了用戶群。所以,越來越多的網(wǎng)站開始注重頁面的視覺效果,他們將計算機技術(shù)與藝術(shù)設(shè)計結(jié)合起來,在保證網(wǎng)站具有實用性的同時,也使頁面看上去更美觀、更舒適。
在藝術(shù)創(chuàng)作中,無論哪一個門類都離不開色彩,合理的使用顏色能夠讓平淡無味的畫面瞬間變得精彩。因此,色彩也被看做是設(shè)計中重要的一個因素。網(wǎng)頁的色彩設(shè)計是影響網(wǎng)站頁面效果的關(guān)鍵因素之一,它可以影響用戶對網(wǎng)頁性質(zhì)的判斷,對站點信息的理解,為頁面效果注入了生機和活力。所以說,一個好的網(wǎng)頁設(shè)計離不開對色彩的研究和使用。
在網(wǎng)頁色彩的設(shè)計中,從色彩構(gòu)成中“色相”的概念出發(fā),可大致將網(wǎng)頁色彩的搭配方法歸納為以下幾種:
其一,同色系色彩搭配。即利用同一色相的不同明度、純度的變化來進行配色組合,例如檸檬黃、中黃和土黃的搭配,這些色彩由于色相的統(tǒng)一,所以在頁面中很容易調(diào)和。
其二,鄰近色搭配。即色相環(huán)上相鄰近的顏色,如綠色和藍色,紅色和黃色等。這種方法與“同色系色彩搭配”相比能產(chǎn)生相對豐富的畫面效果。
其三,互補色搭配。在色相環(huán)中,處于直徑位置的兩色為互補色,如藍色與橙色,紅色與綠色,紫色與黃色;パa色組合在一起使用時,會呈現(xiàn)強烈的相互輝映的視覺效果,具有很強烈的視覺沖擊力。
其四,對比色搭配。如紫色與綠色,藍色與黃色等。這種方法搭配出來的顏色由于色彩反差較大,所以需要第三種調(diào)和色來協(xié)調(diào)畫面。
在色彩構(gòu)成中,從“明度”的概念出發(fā),還可以將網(wǎng)頁色彩分為高明度,中明度、低明度等類型,在這其中,低明度深色背景風(fēng)格的網(wǎng)頁產(chǎn)生的視覺效果更為獨特,也頗受歡迎。在互聯(lián)網(wǎng)中所能看到的深色背景的知名網(wǎng)站比比皆是,比如:nike.com,香奈兒官網(wǎng),Louis Vuitton網(wǎng)站等。
作為網(wǎng)頁設(shè)計工作者,有必要了解深色背景設(shè)計的風(fēng)格特點,知道它所適用的范圍,并不斷探尋它在使用中的技巧和規(guī)律。
一、深色背景網(wǎng)頁的風(fēng)格特點
深色背景并非指黑色,它包含了一切明度較低的色彩,可以是深紅色、深藍色、深灰色或者其他任何一種低明度色彩,它可以有自己的色彩傾向,只是在明度上偏暗而已。
這種色調(diào)給人的感覺是沉穩(wěn)的、有力量的、莊重的、神秘的。因為它是一種明度較低的色彩,所以比較容易起到襯托作用,因此能夠與許多種色彩構(gòu)成良好的對比調(diào)和的關(guān)系,是最有力的搭配色。所以,在很多應(yīng)用深色背景的網(wǎng)站中,我們經(jīng)常能夠看到深底色與一些輔助顏色的搭配。輔助色可以在瞬時間打破頁面的沉悶感,引起瀏覽者的注意。
深色背景的合理運用能散發(fā)出一種高品位高格調(diào)的氣息,具有極強的視覺沖擊力。無論頁面上使用的輔助色彩是何種色調(diào),也不管它們的純度或?qū)Ρ榷,只要有深底色這一有力的色彩作為主色調(diào)去調(diào)和,那么頁面配色上都能夠達到和諧統(tǒng)一的效果。
二、適合使用深色背景的網(wǎng)站類型
深色背景的設(shè)計可以應(yīng)用在許多網(wǎng)站上,但并不是所有的主題都適用,這種風(fēng)格應(yīng)該與網(wǎng)站的性質(zhì)相搭配。由于深色背景明度較低,給人的心理感覺也較理性、沉穩(wěn),所以他多被用在一些男性網(wǎng)站上,如:YOKA男士網(wǎng),Allcoolmen.com,Trendscar.com.等專為男性服務(wù)的網(wǎng)站。
其次,深底色與高明度色彩的搭配通?梢员憩F(xiàn)出比較時尚的視覺效果,結(jié)合一些光感技巧,可令展示的產(chǎn)品更有質(zhì)感。因此,這種搭配也常被用于一些時尚的、優(yōu)雅的、比較現(xiàn)代的頁面設(shè)計之中,如:香奈兒官網(wǎng),nike.com,blackberry中國官網(wǎng)、淑女屋服飾官網(wǎng)等。
此外,深底色也適用于一些比較有創(chuàng)意性的網(wǎng)站,比如設(shè)計公司或者一些張揚個性的團體(如搖滾樂隊)或個人的網(wǎng)站。
但對于一些包含眾多內(nèi)容與服務(wù)項目的大型門戶網(wǎng)站(如搜狐、雅虎、騰訊門戶網(wǎng))來說,清新簡潔是頁面的要點,所以這種深色的設(shè)計顯然不是明智的選擇,要盡可能的避免。
三、深色背景在網(wǎng)頁設(shè)計中的應(yīng)用技巧
與淺色背景的網(wǎng)站相比,深色背景的網(wǎng)站更具吸引力,因此也擁有著相當(dāng)一部分的擁護者,他們喜歡深底色網(wǎng)站帶來的時尚感。對設(shè)計工作者而言,這意味著在設(shè)計過程中,有更多的色彩可供選擇,但同時,也要有能力解決使用這種深底色配色方法時所產(chǎn)生的.問題,要為客戶或用戶群創(chuàng)建出更有效的深底色設(shè)計,那么,在使用這種色彩搭配時,應(yīng)該注意哪些方面?
(一)注意文字的辨識度與可讀性
文字的辨識度是指文字在界面上出現(xiàn)時,用戶能否順利的進行正常閱讀,在閱讀的過程中是否會感覺到吃力或者眼部不適。
在深底色設(shè)計中,容易造成眼睛疲勞,過高的對比度(如黑底白字)會刺激人的雙眼,長時間閱讀會造成用戶眼睛不適,從而影響閱讀。過低的對比度(如深灰色底與中灰色文字)由于背景與文本的對比不夠強,會導(dǎo)致文字不夠清晰,讓人無法正常順暢的瀏覽信息。所以,在使用深底色設(shè)計時,文字與底色的對比度成了重中之重,尋找到背景暗度與文字亮度的平衡點,是解決文字辨識度問題的關(guān)鍵所在。
在通常情況下,為了提高文字的辨識度和可讀性,設(shè)計師會盡量避免使用過高或過低的對比度,往往會用深灰色代替黑色,用淺灰色代替白色等方法來找到底色與文本之間的一個平衡點。
(二)合理使用留白
國畫中的“計白當(dāng)黑”的方法在設(shè)計領(lǐng)域中也得到了廣泛的認可和應(yīng)用,此處的“白”并不是指白色,而是指“留白”或“空白”,有效的利用留白,在任何的藝術(shù)創(chuàng)作中都是重要的,尤其在深色背景的設(shè)計中,顯得更為重要。
深色背景給人神秘感的同時,也會讓人感覺壓抑、沉悶,在這種情況下,除了利用輔助色打破頁面的沉悶感之外,留白的使用會更有效的解決這個問題。
(三)選擇合適的輔助色
由于深底色具有強烈的視覺沖擊力,所以在為它選擇輔助色的時候就要盡量使用簡潔的色彩組合,使用一種或兩種輔助色即可。如果為了產(chǎn)生更豐富的效果,可以選擇同色系的顏色,這樣的搭配方法,無論輔助色使用多少種不同明度或純度的顏色,由于他們處在一個色調(diào)之中,所以也不會產(chǎn)生混亂之感。
用過多的不同色相的色彩來做深底色的輔助色并不合適,過多的顏色會讓頁面顯得花哨,雜亂無章,同時也不夠沉穩(wěn)大氣。如果一定要使用多種色彩作為輔助色,那么務(wù)必要減少其在頁面中的使用面積,以達到平衡畫面的效果。
(四)適當(dāng)?shù)氖褂霉庥靶Ч?/strong>
在一些較為時尚或現(xiàn)代的頁面中,常會使用深底色的設(shè)計,與之同時出現(xiàn)的除了一些合理的輔助色之外,也經(jīng)常會看到光影效果的使用,比如奢侈品牌Louis Vuitton的網(wǎng)站,背景色選用了高貴沉穩(wěn)的深褐色,在頁面的左下角使用了一點高光效果,這種設(shè)計方法使深底色頁面產(chǎn)生了通透感。
當(dāng)然,光影的使用不僅僅局限于此,它可以是導(dǎo)航上的一個泛光,也可以是背景中某個局部的光暈,或者是一束淡淡的光線。它可以有無限多的表現(xiàn)形式,但目的只有一個,就是服務(wù)于頁面。這種看似無關(guān)緊要的一個效果的使用,對整個頁面視覺美感的提升卻有著不可小覷的作用,在打破頁面沉悶感的同時,也提高了網(wǎng)站的質(zhì)感。
由此可見,網(wǎng)頁的設(shè)計離不開色彩,當(dāng)用戶第一次瀏覽網(wǎng)站的時候,給人們留下第一印象的不是網(wǎng)站的內(nèi)容和布局,而是網(wǎng)站的色彩。色彩會影響到用戶對內(nèi)容的判斷,可以說,一個網(wǎng)站設(shè)計的成功與否,很大程度上取決于設(shè)計者對色彩的搭配和使用。
深底色背景的設(shè)計又是網(wǎng)頁色彩搭配技巧中較為特殊的方式,它既可以讓你的頁面呈現(xiàn)出美妙的視覺效果,又會產(chǎn)生一些新的問題需要思考和解決,所以,這是一門學(xué)不完的課程。在使用深色背景設(shè)計時可以遵循一定的規(guī)律,運用色彩知識科學(xué)合理的設(shè)計網(wǎng)頁的色彩。但同時,也要不拘一格,大膽創(chuàng)新,這樣才能夠使作品具有獨特的藝術(shù)風(fēng)格和良好的視覺效果。
【網(wǎng)頁色彩搭配中深色背景的應(yīng)用】相關(guān)文章:
色彩搭配在微信網(wǎng)頁中的應(yīng)用11-29
網(wǎng)頁色彩搭配原理06-22
網(wǎng)頁色彩的搭配運用11-28
網(wǎng)頁設(shè)計中色彩搭配原則及方法10-09
網(wǎng)頁設(shè)計中色彩搭配的原則和技巧10-31
網(wǎng)頁美工色彩搭配技巧11-20