什么是彩虹混合風(fēng)格？
顧名思義，這個(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ì)感
彩虹色質(zhì)感可以扁平、可以3D，可以像水彩顏料一樣豐富，也可以像絲綢一樣順滑，可以像海浪一樣波瀾起伏，也可以像光影一樣華麗，總之他的質(zhì)感運(yùn)用場景，都可以根據(jù)你想要表達(dá)的情緒去營造。
▲可以像海水，水銀海浪一樣起伏波瀾
▲可以像光影幾何圖形般耀眼
▲也可以像水銀一樣流動(dòng)
在UI設(shè)計(jì)中的運(yùn)用
提到這個(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)格
在圖標(biāo)設(shè)計(jì)中的運(yùn)用
▲instagram在logo上對(duì)彩虹漸變的極致運(yùn)用，使得整體品牌極具辨識(shí)度，讓人印象深刻
▲instagram的品牌手冊也是運(yùn)用了與logo一致的漸變色彩。
▲Ramotion工作室為火狐設(shè)計(jì)的一組圖標(biāo)也是運(yùn)用了彩虹漸變處理技法，看起來非常有質(zhì)感
在網(wǎng)頁設(shè)計(jì)中的運(yùn)用
▲倫敦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)品在視覺上造成了不小的瑕疵，下面的文中我將闡述問題形成的原因和解決辦法。
NO.2 漸變的問題
先提一個(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)。
那該如何解決呢？
NO.3 圓角漸變
提到顏色漸變，很容易想到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ì)翻車。
上圖是日本松原城外的十字路口，大家感受下。
NO.4 顏色漸變的解決辦法
回到顏色漸變。如果我們想讓漸變色平滑融入圖像，就需要改變漸變的曲率。
關(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)整前后的效果：
NO.5 Easing Gradient
當(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
END. 試試吧
· 切圖蒙層，設(shè)計(jì)師只需替換相應(yīng)的切圖即可。
· 代碼蒙層，我和公司的前端開發(fā)溝通后確認(rèn)，iOS、Android兩端都可以用代碼實(shí)現(xiàn)曲線漸變。
如果你想領(lǐng)先一步完善產(chǎn)品中的漸變效果，就抓緊試試文中的辦法吧。
原文地址：海邊來的設(shè)計(jì)師（公眾號(hào)）
作者：海邊來的設(shè)計(jì)師
Loubsol
Niek Dekker
W3
symodd
Erik Zuuring
Pixel Palace
Gifn.it
Bacae
Canal TP
Speedo Fit
Oscar Barber
Atom
Final
The Snippet App
lucas.marinm
Coline
Customeed
Pushh
3Minute inc.
Electric Mainline
Srcfari
TouchstoneJS
NBSP
打開PS，新建300X200 像素的新文檔，調(diào)整漸變色：
用漸變色填充：
下一步 濾鏡――>像素化――>馬賽克
再一步 濾鏡――>銳化――>銳化 效果不明顯可多銳化幾次
最后效果：
