顧名思義,這個(gè)風(fēng)格就是在色彩上融合了大自然中彩虹的物理變化,色彩就像彩虹一樣顏色豐富、美麗,同時(shí)色彩之間有著很柔和的融合感,形成視覺沖擊力很強(qiáng)的形式風(fēng)格!


▲國外經(jīng)典的服裝設(shè)計(jì)師 Bianca Luini也在自己服裝作品中,大量運(yùn)用這種自然里面最神奇的色彩作為服裝設(shè)計(jì)靈感。
那么彩虹色,究竟有哪些特點(diǎn)呢???

現(xiàn)在早已經(jīng)不再是過去的彩虹1.0設(shè)計(jì)時(shí)代,彩虹混合也絕對(duì)不是普通的拉一個(gè)七種顏色的漸變,現(xiàn)在我們統(tǒng)稱的彩虹漸變,它的顏色界限過渡會(huì)更加柔和,絕不是那種不講究美感的粗暴漸變!
彩虹漸變的形式類似海水、水銀。多為不規(guī)則流動(dòng)感的形態(tài),色彩融合比較豐富,也有彩虹色和超現(xiàn)實(shí)人物元素一起運(yùn)用!


▲幾何圖形:幾何圖形運(yùn)用,運(yùn)用在商品上,背景上,氛圍元素裝飾上
彩虹色質(zhì)感可以扁平、可以3D,可以像水彩顏料一樣豐富,也可以像絲綢一樣順滑,可以像海浪一樣波瀾起伏,也可以像光影一樣華麗,總之他的質(zhì)感運(yùn)用場景,都可以根據(jù)你想要表達(dá)的情緒去營造。

▲可以像海水,水銀海浪一樣起伏波瀾

▲可以像光影幾何圖形般耀眼

▲也可以像水銀一樣流動(dòng)
提到這個(gè)風(fēng)格就不得不說起眾所周知的Instagram圖標(biāo),ins的設(shè)計(jì)主管是這么描述的:如果鏡頭是個(gè)橋梁,那么鏡頭拍攝出來的那些美麗的照片,五彩繽紛,美麗多彩,要用顏色來定義這個(gè)橋梁的話,就是彩虹!

▲在一些封面、banner圖,以及引導(dǎo)頁面的設(shè)計(jì)中運(yùn)用,能很好的和其他產(chǎn)品拉開設(shè)計(jì)差異性



▲在很多電商大促中,如天貓之前的雙11以及618都大量采用這種彩虹漸變作為色彩主風(fēng)格

▲instagram在logo上對(duì)彩虹漸變的極致運(yùn)用,使得整體品牌極具辨識(shí)度,讓人印象深刻
▲instagram的品牌手冊也是運(yùn)用了與logo一致的漸變色彩。

▲Ramotion工作室為火狐設(shè)計(jì)的一組圖標(biāo)也是運(yùn)用了彩虹漸變處理技法,看起來非常有質(zhì)感

▲倫敦Grammar的宣傳頁面也是采用的一個(gè)彩虹色水滴可以慢慢移動(dòng)的形式作為主視覺,應(yīng)用到項(xiàng)目中去。

▲Southwest在官網(wǎng)設(shè)計(jì)中,采用的是另外一種設(shè)計(jì)手法,彩虹背景和元素成為畫面一個(gè)容器,很好的把文字放置進(jìn)去,彩虹線條背景很好的在頁面中形容前后關(guān)系的呼應(yīng)



▲在Sourav Maity作品中,很好的運(yùn)用了整體插畫都是運(yùn)用彩虹色的體現(xiàn),使得作品整體色溫下有一個(gè)很好的形式感和統(tǒng)一性!

▲Natoni網(wǎng)站的登錄頁面;運(yùn)用彩虹漸變當(dāng)做主體背景,做出與其他網(wǎng)站的差異性
很多設(shè)計(jì)師會(huì)問,這個(gè)風(fēng)格這么好看,要怎么運(yùn)用?其實(shí)很簡單,多去收集好的作品,總結(jié)規(guī)律和用法,最終轉(zhuǎn)化成自己的東西,是我們研究設(shè)計(jì)趨勢的意義。希望我們都能把我們看見的好的設(shè)計(jì)趨勢和方法靈活運(yùn)用到自己的產(chǎn)品中去!一起沉淀!
原文地址:我們的設(shè)計(jì)日記(公眾號(hào))
作者:sky
現(xiàn)在的APP界面中,經(jīng)常圖象或者視頻上疊加文字和按鈕的情況,比如常見的Banner、查看大圖、視頻播放器、專題等等。

而這也是新人容易出錯(cuò)的地方:文字直接放在圖片上,當(dāng)背景色和字色過于接近時(shí),會(huì)影響文字的讀取閱讀。
比如下面這樣:

為了解決這個(gè)問題,通常的解決辦法是在圖片和文字中間疊加一個(gè)中間層(蒙層),如圖:

這樣一來,即便背景色和字色過于接近,由于中間層的存在,也不會(huì)影響文字閱讀。
中間層(即 常說的圖片蒙層)的形式大概可分為“全蒙層”和“局部蒙層”兩種:

由于全覆蓋的蒙層對(duì)內(nèi)容品質(zhì)的影響很大,所以設(shè)計(jì)師大多采用局部蒙層的設(shè)計(jì)方案。
另外,我們見到絕大多數(shù)的局部蒙層方案,已經(jīng)都采用漸變色。如下圖:

而今天這個(gè)被普遍采用的方案,其實(shí)也給產(chǎn)品在視覺上造成了不小的瑕疵,下面的文中我將闡述問題形成的原因和解決辦法。
先提一個(gè)問題,如果漸變蒙層的參數(shù)是 黑色70%不透明度~黑色0%不透明度(#000000, 70% ~ #000000,0% ),參數(shù)如下圖所示:

你覺得下面兩張圖,哪張是蒙層效果圖?

我想幾乎所有人都會(huì)選擇左邊的效果。畢竟左邊的漸變過渡看起來更加自然。而右邊生硬的漸變則顯得不夠美觀。
可惜,右圖才是和上面參數(shù)對(duì)應(yīng)的效果圖。
因?yàn)樵诰€性漸變終點(diǎn)的位置(即兩端)顏色過渡會(huì)突然消失。從而導(dǎo)致了明顯的“尖銳感”。如下圖:

PS:你能看到白線轉(zhuǎn)折處的兩條豎線嗎?
類似的問題,在當(dāng)下的APP中隨處可見,隨機(jī)找了三個(gè)APP,微信、百度、站酷:

其中百度的漸變色“最深”,漸變的感覺也最突兀。
還比如愛奇藝自制節(jié)目的開場:

蒙層在白色的背景上顯得十分不協(xié)調(diào)。
那該如何解決呢?
提到顏色漸變,很容易想到iOS的圓角漸變。
2014年,Apple發(fā)布iOS 7,調(diào)整了圖標(biāo)的圓角曲率。如圖:

此前采用的普通的圓角會(huì)在兩端有明顯的“中斷”。從iOS 7 開始,蘋果設(shè)計(jì)的圓角則在過渡上顯得更加自然。

同樣的設(shè)計(jì)也應(yīng)用在蘋果的硬件設(shè)計(jì)中。比如下圖左側(cè)是普通帶有圓角邊緣的矩形盒子,可以看到圓角的高光在圓角兩側(cè)有急劇的變化,即突然中斷。

而右側(cè)蘋果電腦的圓角設(shè)計(jì)。我們會(huì)看到圓角過渡十分柔和。這也是Apple產(chǎn)品讓我喜歡它們的原因之一。
生活中,過渡曲線還應(yīng)用在旋轉(zhuǎn)的高速公路中。得益于逐漸過渡的曲線,我們在駛?cè)牒婉偝鲂D(zhuǎn)高架時(shí),才不會(huì)翻車。

上圖是日本松原城外的十字路口,大家感受下。
回到顏色漸變。如果我們想讓漸變色平滑融入圖像,就需要改變漸變的曲率。
關(guān)于這一點(diǎn),在Google的Material Design中,Google的設(shè)計(jì)師建議對(duì)漸變蒙層做如下調(diào)整:
“gradient should be long… with the center point about 3/10 towards the darker side of the gradient. This gives the gradient a natural falloff and avoids a sharp edge.”
關(guān)于這段話,我的理解是:想要平滑過渡,可以從兩個(gè)方面入手:
第一,把漸變拉長;
第二,把過渡的中間色,從50%位置移動(dòng)到30%的位置(需要增加一個(gè)過渡節(jié)點(diǎn),節(jié)點(diǎn)越多越好)。
【第一:漸變拉長】
我們先拉長標(biāo)準(zhǔn)的線性漸變,看看效果,示意圖如下:

這說明,單獨(dú)拉長蒙層的尺寸(漸變方向),可以達(dá)成平滑過渡的效果。
【第二:調(diào)整節(jié)點(diǎn)】
在尺寸不變的情況下,增加三個(gè)中間節(jié)點(diǎn)。示意圖如下:

接著調(diào)整中間三個(gè)節(jié)點(diǎn)的位置(把50%位置的節(jié)點(diǎn),移動(dòng)到30%的位置):

這樣也實(shí)現(xiàn)了平滑過渡。(調(diào)整后的節(jié)點(diǎn)越多,過渡效果越平滑)。
用函數(shù)曲線可以很好的說明節(jié)點(diǎn)的變化:

圖中直線是標(biāo)準(zhǔn)的線性漸變,而曲線則是調(diào)整后的漸變頻率。
下面以愛奇藝視頻播放器為例,對(duì)比下調(diào)整前后的效果:

當(dāng)然,手動(dòng)調(diào)整漸變不僅費(fèi)時(shí)費(fèi)力,還容易手抖出錯(cuò)~ 過去每次漸變換顏色,都要調(diào)整半天。
現(xiàn)在有了更快的辦法——Sketch Plugins,去年發(fā)現(xiàn)了一款可以輕松曲線漸變的插件:Easing Gradient

可以一鍵做出平滑的漸變效果,如下圖:

下載鏈接:https://oursketch.com/plugin/easing-gradient
· 切圖蒙層,設(shè)計(jì)師只需替換相應(yīng)的切圖即可。
· 代碼蒙層,我和公司的前端開發(fā)溝通后確認(rèn),iOS、Android兩端都可以用代碼實(shí)現(xiàn)曲線漸變。
如果你想領(lǐng)先一步完善產(chǎn)品中的漸變效果,就抓緊試試文中的辦法吧。
原文地址:海邊來的設(shè)計(jì)師(公眾號(hào))
作者:海邊來的設(shè)計(jì)師

]]>打開PS,新建300X200 像素的新文檔,調(diào)整漸變色:

用漸變色填充:

下一步 濾鏡――>像素化――>馬賽克

再一步 濾鏡――>銳化――>銳化 效果不明顯可多銳化幾次

最后效果:
