什么是彩虹混合風格？
顧名思義，這個風格就是在色彩上融合了大自然中彩虹的物理變化，色彩就像彩虹一樣顏色豐富、美麗，同時色彩之間有著很柔和的融合感，形成視覺沖擊力很強的形式風格！
▲國外經(jīng)典的服裝設計師 Bianca Luini也在自己服裝作品中，大量運用這種自然里面最神奇的色彩作為服裝設計靈感。
那么彩虹色，究竟有哪些特點呢？？？
色彩
現(xiàn)在早已經(jīng)不再是過去的彩虹1.0設計時代，彩虹混合也絕對不是普通的拉一個七種顏色的漸變，現(xiàn)在我們統(tǒng)稱的彩虹漸變，它的顏色界限過渡會更加柔和，絕不是那種不講究美感的粗暴漸變！
圖形
彩虹漸變的形式類似海水、水銀。多為不規(guī)則流動感的形態(tài)，色彩融合比較豐富，也有彩虹色和超現(xiàn)實人物元素一起運用！
▲幾何圖形：幾何圖形運用，運用在商品上，背景上，氛圍元素裝飾上
質感
彩虹色質感可以扁平、可以3D，可以像水彩顏料一樣豐富，也可以像絲綢一樣順滑，可以像海浪一樣波瀾起伏，也可以像光影一樣華麗，總之他的質感運用場景，都可以根據(jù)你想要表達的情緒去營造。
▲可以像海水，水銀海浪一樣起伏波瀾
▲可以像光影幾何圖形般耀眼
▲也可以像水銀一樣流動
在UI設計中的運用
提到這個風格就不得不說起眾所周知的Instagram圖標，ins的設計主管是這么描述的：如果鏡頭是個橋梁，那么鏡頭拍攝出來的那些美麗的照片，五彩繽紛，美麗多彩，要用顏色來定義這個橋梁的話，就是彩虹！
▲在一些封面、banner圖，以及引導頁面的設計中運用，能很好的和其他產(chǎn)品拉開設計差異性
▲在很多電商大促中，如天貓之前的雙11以及618都大量采用這種彩虹漸變作為色彩主風格
在圖標設計中的運用
▲instagram在logo上對彩虹漸變的極致運用，使得整體品牌極具辨識度，讓人印象深刻
▲instagram的品牌手冊也是運用了與logo一致的漸變色彩。
▲Ramotion工作室為火狐設計的一組圖標也是運用了彩虹漸變處理技法，看起來非常有質感
在網(wǎng)頁設計中的運用
▲倫敦Grammar的宣傳頁面也是采用的一個彩虹色水滴可以慢慢移動的形式作為主視覺，應用到項目中去。
▲Southwest在官網(wǎng)設計中，采用的是另外一種設計手法，彩虹背景和元素成為畫面一個容器，很好的把文字放置進去，彩虹線條背景很好的在頁面中形容前后關系的呼應
▲在Sourav Maity作品中，很好的運用了整體插畫都是運用彩虹色的體現(xiàn)，使得作品整體色溫下有一個很好的形式感和統(tǒng)一性！
▲Natoni網(wǎng)站的登錄頁面；運用彩虹漸變當做主體背景，做出與其他網(wǎng)站的差異性
最后
很多設計師會問，這個風格這么好看，要怎么運用？其實很簡單，多去收集好的作品，總結規(guī)律和用法，最終轉化成自己的東西，是我們研究設計趨勢的意義。希望我們都能把我們看見的好的設計趨勢和方法靈活運用到自己的產(chǎn)品中去！一起沉淀！
原文地址：我們的設計日記（公眾號）
作者：sky
現(xiàn)在的APP界面中，經(jīng)常圖象或者視頻上疊加文字和按鈕的情況，比如常見的Banner、查看大圖、視頻播放器、專題等等。
而這也是新人容易出錯的地方：文字直接放在圖片上，當背景色和字色過于接近時，會影響文字的讀取閱讀。
比如下面這樣：
為了解決這個問題，通常的解決辦法是在圖片和文字中間疊加一個中間層（蒙層），如圖：
這樣一來，即便背景色和字色過于接近，由于中間層的存在，也不會影響文字閱讀。
中間層（即 常說的圖片蒙層）的形式大概可分為“全蒙層”和“局部蒙層”兩種：
由于全覆蓋的蒙層對內(nèi)容品質的影響很大，所以設計師大多采用局部蒙層的設計方案。
另外，我們見到絕大多數(shù)的局部蒙層方案，已經(jīng)都采用漸變色。如下圖：
而今天這個被普遍采用的方案，其實也給產(chǎn)品在視覺上造成了不小的瑕疵，下面的文中我將闡述問題形成的原因和解決辦法。
NO.2 漸變的問題
先提一個問題，如果漸變蒙層的參數(shù)是 黑色70%不透明度~黑色0%不透明度（#000000, 70% ~ #000000,0% ），參數(shù)如下圖所示：
你覺得下面兩張圖，哪張是蒙層效果圖？
我想幾乎所有人都會選擇左邊的效果。畢竟左邊的漸變過渡看起來更加自然。而右邊生硬的漸變則顯得不夠美觀。
可惜，右圖才是和上面參數(shù)對應的效果圖。
因為在線性漸變終點的位置（即兩端）顏色過渡會突然消失。從而導致了明顯的“尖銳感”。如下圖：
PS：你能看到白線轉折處的兩條豎線嗎？
類似的問題，在當下的APP中隨處可見，隨機找了三個APP，微信、百度、站酷：
其中百度的漸變色“最深”，漸變的感覺也最突兀。
還比如愛奇藝自制節(jié)目的開場：
蒙層在白色的背景上顯得十分不協(xié)調(diào)。
那該如何解決呢？
NO.3 圓角漸變
提到顏色漸變，很容易想到iOS的圓角漸變。
2014年，Apple發(fā)布iOS 7，調(diào)整了圖標的圓角曲率。如圖：
此前采用的普通的圓角會在兩端有明顯的“中斷”。從iOS 7 開始，蘋果設計的圓角則在過渡上顯得更加自然。
同樣的設計也應用在蘋果的硬件設計中。比如下圖左側是普通帶有圓角邊緣的矩形盒子，可以看到圓角的高光在圓角兩側有急劇的變化，即突然中斷。
而右側蘋果電腦的圓角設計。我們會看到圓角過渡十分柔和。這也是Apple產(chǎn)品讓我喜歡它們的原因之一。
生活中，過渡曲線還應用在旋轉的高速公路中。得益于逐漸過渡的曲線，我們在駛入和駛出旋轉高架時，才不會翻車。
上圖是日本松原城外的十字路口，大家感受下。
NO.4 顏色漸變的解決辦法
回到顏色漸變。如果我們想讓漸變色平滑融入圖像，就需要改變漸變的曲率。
關于這一點，在Google的Material Design中，Google的設計師建議對漸變蒙層做如下調(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.”
關于這段話，我的理解是：想要平滑過渡，可以從兩個方面入手：
第一，把漸變拉長；
第二，把過渡的中間色，從50%位置移動到30%的位置（需要增加一個過渡節(jié)點，節(jié)點越多越好）。
【第一：漸變拉長】
我們先拉長標準的線性漸變，看看效果，示意圖如下：
這說明，單獨拉長蒙層的尺寸（漸變方向），可以達成平滑過渡的效果。
【第二：調(diào)整節(jié)點】
在尺寸不變的情況下，增加三個中間節(jié)點。示意圖如下：
接著調(diào)整中間三個節(jié)點的位置（把50%位置的節(jié)點，移動到30%的位置)：
這樣也實現(xiàn)了平滑過渡。（調(diào)整后的節(jié)點越多，過渡效果越平滑）。
用函數(shù)曲線可以很好的說明節(jié)點的變化：
圖中直線是標準的線性漸變，而曲線則是調(diào)整后的漸變頻率。
下面以愛奇藝視頻播放器為例，對比下調(diào)整前后的效果：
NO.5 Easing Gradient
當然，手動調(diào)整漸變不僅費時費力，還容易手抖出錯~ 過去每次漸變換顏色，都要調(diào)整半天。
現(xiàn)在有了更快的辦法——Sketch Plugins，去年發(fā)現(xiàn)了一款可以輕松曲線漸變的插件：Easing Gradient
可以一鍵做出平滑的漸變效果，如下圖：
下載鏈接：https://oursketch.com/plugin/easing-gradient
END. 試試吧
· 切圖蒙層，設計師只需替換相應的切圖即可。
· 代碼蒙層，我和公司的前端開發(fā)溝通后確認，iOS、Android兩端都可以用代碼實現(xiàn)曲線漸變。
如果你想領先一步完善產(chǎn)品中的漸變效果，就抓緊試試文中的辦法吧。
原文地址：海邊來的設計師（公眾號）
作者：海邊來的設計師
#p#副標題#e#
#p#副標題#e#
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)整漸變色：
用漸變色填充：
下一步 濾鏡――>像素化――>馬賽克
再一步 濾鏡――>銳化――>銳化 效果不明顯可多銳化幾次
最后效果：
