網頁設計如何合理使用色彩疊加
色彩幾乎是所有設計中都至關重要的組成部分,無論是明亮大膽的配色方案,還是簡約的黑白色調,你的用色將會直接影響整個設計的實際效果。
網頁設計合理使用色彩疊加效果!效果超讚!
近兩年,在色彩運用上有許多值得一提的手法,其中最有意思也最常見的應該就是色彩疊加。使用半透明的色塊(純色或者漸變)疊加到圖片或者視頻上,這種效果能夠強化圖片本身的氛圍,賦予含義,並且更好地吸引用户的注意力。
今天我們來深入聊聊這種色彩使用技巧在實際運用中,需要注意的問題和值得探究的做法。
使用漸變
首先,漸變作為一種設計趨勢,再次迴歸了。當你想為特定的元素疊加色彩的時候,可以嘗試使用某個醒目的漸變色疊加上去。
漸變色的好處在於,你可以使用多種不同的色彩一起構成漸變(比如品牌色),也可以使用某一個色彩進行深淺、明度、飽和度上的漸變,這樣的設計會顯得更加集中。明亮的配色方案會更加吸引用户用户,讓圖片呈現出某種獨特的氣場。
這種設計趨勢很大程度上是Spotify 起的頭,他們在播放列表中使用了迷幻味十足的雙色漸變效果,讓唱片封面和藝術家頭像變得更加富於藝術韻味。
搞定這樣的設計非常簡單:
·選取一張照片
·使用品牌色創建漸變色彩疊加
·完成!
使用純色定基調
純色的疊加效果其實和漸變一樣醒目,不過純色相比於漸變所呈現的意義和氛圍會更加明確。比如,在圖片上疊加上棕色能夠呈現出一種歷史的厚重感。
如果你選擇當前的流行色,功用和效果也是類似的。使用這些明亮、鮮豔的流行色的同時,結合扁平化設計或者Material Design的設計風,你的頁面和UI會明顯地呈現出一種現代主義和時尚的感覺。
當你在疊加純色的時候,應當仔細考慮一下色彩的飽和度和透明度。這些因素其實都是有意義的。疊加的色彩圖層擁有高飽和度和低透明度的時候,用户會更多關注色彩本身;當疊加的'色彩擁有低飽和度和高透明度的時候,用户會更容易被底層的圖像所吸引。
考慮明暗
當然,許多色彩並不全都是靠有色半透明圖層疊加出來的,有時候僅僅是使用單純的黑白灰來疊加,創造出不同的明暗效果,這樣也能很好的實現一些效果。
正如你所想,當圖像更加沉鬱陰暗的時候,壓抑沉重的氛圍自然而然就出現了,而圖像偏白色彩變淺的時候,往往會顯得更加輕鬆,或者説更加飄忽。這個時候,並不需要單獨疊加黑色或者白色,只需要調整圖片本身的明度即可。
上面所顯示的這個名為 Call me lsh 的網站中,設計師在背景上覆蓋了一層半透明的白色,讓用户的專注點集中到前景的文字上去,但是背景的攝影師微笑的表情依然潛移默化地影響着用户的情緒。色彩和圖片的組合讓訪客不知不覺地同背景的攝影師產生了情緒上的互動,也許很快會打動他們僱傭這名攝影師也説不定。
選擇高對比度的圖片
當你想要在設計項目中使用色彩疊加這種技法的時候,置於底層的圖片或者視頻是最重要的組成部分。一張平庸的圖片不管你怎麼疊加色彩都很難達到驚豔的效果,而圖片本身如果有着良好的對比度,那麼能夠在疊加圖片之後構成漂亮的明暗效果,將設計的優勢最大化。
當然,如果圖片的可選範圍本身就不大,那麼最好嘗試使用PS之類的軟件先提升圖片的對比度,否則實際效果是不會太好的。
想要達成好效果的方法有很多,另外一種方法就更加簡單粗暴了:從黑白的圖片開始着手。對於初學者而言,黑白圖片的對比度更容易控制。上面的Just Actions 這個網站就是採用黑白色調的突破背景,搭配彩色的半透明圖層。
要麼自然,要麼失真
當你開始使用色彩疊加到圖片和視頻上的時候,有兩種處理方法:
·圖片儘可能自然。色彩、明暗、陰影都應該處於自然的狀態,疊加的色彩應當儘可能微妙,比如上面那個Abednego Coffee 網站。
·圖片完全異化。用完全出乎意料的色彩疊加在圖片上,創造出獨一無二的效果。本文中絕大多數的案例都是這麼做的。
介於兩者之間的案例很少,可以説這兩者是完全對立的。這麼設計的好處在於,用户會更加專注於網站內容,強化整體的設計感。
嘗試部分疊加
前面絕大多數的案例都將半透明的色彩圖層疊加到大塊的圖片內容上,但是這並不是唯一的選擇。部分疊加同樣可以帶來不錯的效果。
Knot Clothing 這個網頁採用了綠色的導航欄,其上疊加了半透明層,看起來效果相當不錯。
而Nuts and Woods 這個網站則換了一種玩法,當光標懸停在特定的內容區塊上的時候,半透明層就疊加到上面,提示用户這些內容是可點擊的。這個半透明的疊加層作為視覺線索而存在,提供內容瀏覽的路徑。
結語
色彩疊加的效果並不是萬能的,至少不是所有的項目都適合使用的一項效果,所以當你在進行設計的時候,應當儘量避免過度使用。
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
javascript設置創建動態表格的方法
兩種JavaScript動態創建table表格的方法,分享給大家,具體實現如下方法一:最原始的方法,創建一一元素vara1=teElement("table");vara2=teElement("tbody");vara3=teElement("tr");vara4=teElement("td");//開始appendchild()追加各個元素ndChild(a4);ndChild(a3);nd...
-
JavaScript 函數表達式
JavaScript中創建函數主要有兩種方法:函數聲明和函數表達式。這兩種方式都有不同的適用場景。這篇筆記主要關注的是函數表達式的幾大特點以及它的使用場景,下面一一描述。主要特點可選的函數名稱函數名稱是函數聲明的必需組成部分,這個函數名稱相當於一個變量,新定...
-
關於HTML meat作用
meta標籤用於網頁的與中,meta標籤的用處很多。meta的屬性有兩種:name和http-equiv。name屬性主要用於描述網頁,對應於content(網頁內容),以便於搜索引擎機器人查找、分類(目前幾乎所有的搜索引擎都使用網上機器人自動查找meta值來給網頁分類)。這其中最重要的是descrip...