起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識設(shè)計細節(jié)：用漸變巧妙提升產(chǎn)品質(zhì)感！
目前大多數(shù)產(chǎn)品的設(shè)計中都會在局部蒙版方案中加入漸變色，不過通過對app的調(diào)查對比后，我們可以發(fā)現(xiàn)不少漸變色蒙版做的有點突兀，那么如何改變這一點呢？筆者為我們展開了詳細說明。
NO.1 背景介紹
現(xiàn)在的APP界面中，經(jīng)常圖象或者視頻上疊加文字和按鈕的情況，比如常見的Banner、查看大圖、視頻播放器、專題等等。
而這也是新人容易出錯的地方：文字直接放在圖片上，當(dāng)背景色和字色過于接近時，會影響文字的讀取閱讀。
比如下面這樣：
為了解決這個問題，通常的解決辦法是在圖片和文字中間疊加一個中間層（蒙層），如圖：
這樣一來，即便背景色和字色過于接近，由于中間層的存在，也不會影響文字閱讀。
中間層（即 常說的圖片蒙層）的形式大概可分為“全蒙層”和“局部蒙層”兩種：
由于全覆蓋的蒙層對內(nèi)容品質(zhì)的影響很大，所以設(shè)計師大多采用局部蒙層的設(shè)計方案。
另外，我們見到絕大多數(shù)的局部蒙層方案，已經(jīng)都采用漸變色。如下圖：
而今天這個被普遍采用的方案，其實也給產(chǎn)品在視覺上造成了不小的瑕疵，下面的文中我將闡述問題形成的原因和解決辦法。
NO.2 漸變的問題
先提一個問題，如果漸變蒙層的參數(shù)是 黑色70%不透明度~黑色0%不透明度（#000000, 70% ~ #000000,0% ），參數(shù)如下圖所示：
你覺得下面兩張圖，哪張是蒙層效果圖？
我想幾乎所有人都會選擇左邊的效果——畢竟左邊的漸變過渡看起來更加自然。而右邊生硬的漸變則顯得不夠美觀。
可惜，右圖才是和上面參數(shù)對應(yīng)的效果圖。
因為在線性漸變終點的位置（即兩端）顏色過渡會突然消失，從而導(dǎo)致了明顯的“尖銳感”。如下圖：
PS：你能看到白線轉(zhuǎn)折處的兩條豎線嗎？
類似的問題，在當(dāng)下的APP中隨處可見，隨機找了三個APP——微信、百度、站酷：
其中百度的漸變色“最深”，漸變的感覺也最突兀。
還比如愛奇藝自制節(jié)目的開場：
蒙層在白色的背景上顯得十分不協(xié)調(diào)。那該如何解決呢？
NO.3 圓角漸變
提到顏色漸變，很容易想到iOS的圓角漸變。
2014年，Apple發(fā)布iOS 7，調(diào)整了圖標(biāo)的圓角曲率。如圖：
此前采用的普通的圓角會在兩端有明顯的“中斷”。從aiOS 7 開始，蘋果設(shè)計的圓角則在過渡上顯得更加自然。
同樣的設(shè)計也應(yīng)用在蘋果的硬件設(shè)計中。比如下圖左側(cè)是普通帶有圓角邊緣的矩形盒子，可以看到圓角的高光在圓角兩側(cè)有急劇的變化，即突然中斷。
而右側(cè)蘋果電腦的圓角設(shè)計。我們會看到圓角過渡十分柔和。這也是Apple產(chǎn)品讓我喜歡它們的原因之一。
生活中，過渡曲線還應(yīng)用在旋轉(zhuǎn)的高速公路中。得益于逐漸過渡的曲線，我們在駛?cè)牒婉偝鲂D(zhuǎn)高架時，才不會翻車。
上圖是日本松原城外的十字路口，大家感受下。
NO.4 顏色漸變的解決辦法
回到顏色漸變。如果我們想讓漸變色平滑融入圖像，就需要改變漸變的曲率。
關(guān)于這一點，在Google的Material Design中，Google的設(shè)計師建議對漸變蒙層做如下調(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)于這段話，我的理解是：想要平滑過渡，可以從兩個方面入手：
- 把漸變拉長；
- 把過渡的中間色，從50%位置移動到30%的位置（需要增加一個過渡節(jié)點，節(jié)點越多越好）。
第一：漸變拉長
我們先拉長標(biāo)準(zhǔn)的線性漸變，看看效果，示意圖如下：
這說明，單獨拉長蒙層的尺寸（漸變方向），可以達成平滑過渡的效果。
第二：調(diào)整節(jié)點
在尺寸不變的情況下，增加三個中間節(jié)點。示意圖如下：
接著調(diào)整中間三個節(jié)點的位置（把50%位置的節(jié)點，移動到30%的位置)：
這樣也實現(xiàn)了平滑過渡。（調(diào)整后的節(jié)點越多，過渡效果越平滑）。
用函數(shù)曲線可以很好的說明節(jié)點的變化：
圖中直線是標(biāo)準(zhǔn)的線性漸變，而曲線則是調(diào)整后的漸變頻率。
下面以愛奇藝視頻播放器為例，對比下調(diào)整前后的效果：
NO.5Easing Gradient
當(dāng)然，手動調(diào)整漸變不僅費時費力，還容易手抖出錯~ 過去每次漸變換顏色，都要調(diào)整半天。
現(xiàn)在有了更快的辦法——Sketch Plugins，去年發(fā)現(xiàn)了一款可以輕松曲線漸變的插件：Easing Gradient
可以一鍵做出平滑的漸變效果，如下圖：
下載鏈接：https://oursketch.com/plugin/easing-gradient
END.試試吧
- 切圖蒙層，設(shè)計師只需替換相應(yīng)的切圖即可。
- 代碼蒙層，我和公司的前端開發(fā)溝通后確認，iOS、Android兩端都可以用代碼實現(xiàn)曲線漸變。
如果你想領(lǐng)先一步完善產(chǎn)品中的漸變效果，就抓緊試試文中的辦法吧。
歡迎指正，留言討論
作者：顏偉 ，公眾號： 海邊來的設(shè)計師
來源：https://mp.weixin.qq.com/s/7i0SsbbIowy_JuT6GMrmBg
本文由@顏偉 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash，基于 CC0 協(xié)議
- 目前還沒評論，等你發(fā)揮！
