蘋果Google都在用的設計趨勢,簡直太絢麗了!

2021-8-30    seo達人

圖片

 

什么是色彩疊加?

圖片

色彩疊加這種風格我們經(jīng)常可以在很多大廠設計中看到。從它的名字我們就知道這是一種通過顏色混合的一種表現(xiàn)手法。色彩疊加在色彩構成學上叫色料混合, 也叫第二混合。兩種或者多種顏色混合后所產(chǎn)生的新顏色,混合的色彩不但色相發(fā)生變化,明度和純度都會產(chǎn)生變化。它是多個顏色通過不同模式進行混合,可以得到不同的顏色,通過色彩模式疊加的運用,讓它的細節(jié)層次更豐富,色彩的飽和度也高。下面我來解刨一下它的特點,你也可以通過這些特點,輕松掌握這個設計技法哦!

 

 色彩疊加特點一:鄰近/互補色搭配 

圖片

在色相環(huán)上采用鄰近色搭配,顏色多以明亮的高飽和度為主,使得頁面更具時尚活潑感。

圖片

鄰近色是色環(huán)相鄰的兩種顏色,色相在60度以內(nèi),這樣的顏色搭配色彩過度比較平和也會顯得頁面有層次?;パa色是色環(huán)相對立的顏色,色相相距180度,這樣的顏色搭配對比會非常強烈,視覺效果會鮮明。
 

鄰近/互補色在網(wǎng)頁的運用

圖片

在視覺表現(xiàn)上運用互補色對比,搭配柔和的漸變過渡,給人一種年輕有活力的視覺感受。
 

鄰近色在APP中的運用

圖片

明亮的鄰近色搭配作為頁面的背景、卡片背景設計,頁面年輕活潑,通過色彩的疊加,有空間感。

 

色彩疊加特點二:混合的質(zhì)感 

圖片

搭配混合模式的運用,營造一種空間感,給頁面形成不一樣的質(zhì)感,通過明亮、色相形成一種空間感、層次感、通透,形成不一樣的感覺。

 

混合質(zhì)感圖標中的運用

圖片

鄰近色色彩搭配作為背景,搭配簡單的圖形和色彩混合和不透明度運用,整個圖形給人一種多彩、通透的視覺感受。

 

色彩疊加特點三:簡單的幾何圖形 

圖片通過簡單的幾何圖形,主要是圓形、正方形、三角形等;加上混合模式的質(zhì)感,給人一種高級感。加上透明度、疊加的光影,簡單的幾何圖形背景呈現(xiàn)出空間感。圖片上通過運用一個單色漸變,搭配方形的重復色彩疊加,給我的視覺感受是有層次的、立體的空間感。

圖片

如圖所示,飽和度高的背景搭配幾何圖形的運用,再運用顏色不透明的漸變,加上形狀的重復和變化,使得這個設計給人通透、高級的視覺感受。
 

幾何圖形在海報中的運用

圖片

很多變化豐富的設計都是通過簡單的幾何圖形處理的,簡單的幾何圖形也可以作為設計的抓手,在暗色背景上,通過幾何圖形的放大,搭配時尚的混合漸變,這樣的效果很有科技感、洋氣。圖片
明亮的色彩搭配塊面感的幾何圖形,這樣的設計手法是不是很簡單。

 

色彩疊加在APP上的運用 

圖片

這樣的幾何圖形我們在設計網(wǎng)站上經(jīng)??梢钥吹剑ㄟ^重復幾何圖形的組合加上混合模式的疊加,在設計上別具一格。同時讓我們的設計多一種表現(xiàn)手法也增加我們的行業(yè)競爭力。

圖片

通過鄰近色/互補色搭配,運用幾何圖形作為背景裝飾,這樣的配色與布局會讓設計很出彩,并且活潑舒適平和。這樣的設計對色彩的搭配要求較高,我們可以通過配色網(wǎng)站進行多種組合搭配練習。圖片
示例是菜鳥的首頁,在 banner 入口它運用了色彩疊加的設計手法,同時金剛區(qū)的圖標也是運用了色彩疊加的樣式,整體給人一種年輕、時尚的感受。圖片色彩疊加還可以運用在引導頁、閃屏頁面。通過疊加、柔和的過渡,整體呈現(xiàn)的視覺效果還是很時尚、符合主流的設計趨勢。

 

色彩疊加在icon上的運用 

圖片

明亮的顏色搭配混合模式和不透明度,出現(xiàn)出另外一種效果。

圖片

圖片

色彩疊加運用在icon上居多,飽和度高的色彩加上不透明度的疊加,整體的視覺效果都偏年輕、時尚,如果你的產(chǎn)品是面向年輕的用戶,這樣的設計手法你可以考慮運用上哦!圖片
這個 app 中,金剛區(qū)位置上采用了色彩疊加的視覺手法,通過簡單的幾何圖形,搭配混合模式,使整個頁面具有全新的視覺感受,傳遞的是一種年輕時尚感。

 

色彩疊加在品牌上的運用 

圖片

Apple 的今年官方宣傳采用簡單的正方形搭配明亮的色彩,加上不透明度、混合模式的運用,達到不一樣的視覺效果。圖片google 家的品牌升級,我們也看到了最新的趨勢,運用 google 經(jīng)典的顏色,搭配混合模式的漸變,同時具有品牌識別性。

 

色彩疊加-設計小教程 

圖片

1.選擇深色的顏色(#0A00BC),畫一個圓角,填充藍色漸變背景。

圖片

2.畫一個圓,填充紅色的漸變,模式選擇提亮的效果,剪貼蒙板在圓角背景上。

圖片

圖片

3.畫第二個大圓,填充紅色的漸變,模式選擇提亮,透明度調(diào)到70%,剪貼蒙板在圓角背景上。

圖片

4.畫第三個圓,填充紅色-黃色的漸變,模式選擇正常,透明度調(diào)到85%,剪貼蒙板在圓角背景上

圖片

5.畫第四個圓,填充藍色的漸變,模式選擇提亮,透明度調(diào)到90%(可以自己試著調(diào)整),剪貼蒙板在圓角背景上。圖片6.我們看到示例圖交叉處是黃色漸變,把第三個和四個圓進行復制,選擇交集,生成一個交叉的圖形,把這個交叉的圖形改為黃色漸變,模式改為加暗。圖片

7.最后一步,右下角的高亮,通過藍色徑向漸變,調(diào)整到我們滿意的效果即可,模式選擇變亮,透明度90%。

圖片

8.加上文字效果,這個圖標就完成了,是不是很簡單,通過不同模式的疊加,出現(xiàn)不同的效果,你也快點試一下吧!圖片
 

最后 

圖片

色彩疊加這種設計手法經(jīng)常出現(xiàn)在海報/icon。包括 apple 在品牌宣傳上也運用了這種視覺手法,重復運用簡單的幾何圖形,加上混合模式的疊加,構成頁面色彩空間感、通透;視覺感受上也有沖擊力。我們做設計的也知道往往具有高級感的設計就是通過簡單的幾何圖形加上色彩的混合漸變,也會讓我們的設計具有層次感、簡約。

 

原文地址:我們的設計日記(公眾號)

作者:sky

轉載請注明:學UI網(wǎng)》蘋果Google都在用的設計趨勢,簡直太絢麗了!

藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務


分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔