亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

背景介紹

現(xiàn)在的APP界面中，經(jīng)常圖象或者視頻上疊加文字和按鈕的情況，比如常見的Banner、查看大圖、視頻播放器、專題等等。

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

比如下面這樣：

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

這樣一來(lái)，即便背景色和字色過(guò)于接近，由于中間層的存在，也不會(huì)影響文字閱讀。

中間層（即 常說(shuō)的圖片蒙層）的形式大概可分為“全蒙層”和“局部蒙層”兩種：

由于全覆蓋的蒙層對(duì)內(nèi)容品質(zhì)的影響很大，所以設(shè)計(jì)師大多采用局部蒙層的設(shè)計(jì)方案。

另外，我們見到絕大多數(shù)的局部蒙層方案，已經(jīng)都采用漸變色。如下圖：

而今天這個(gè)被普遍采用的方案，其實(shí)也給產(chǎn)品在視覺(jué)上造成了不小的瑕疵，下面的文中我將闡述問(wèn)題形成的原因和解決辦法。

漸變的問(wèn)題

先提一個(gè)問(wèn)題，如果漸變蒙層的參數(shù)是 黑色70%不透明度~黑色0%不透明度（#000000, 70% ~ #000000,0% ），參數(shù)如下圖所示：

你覺(jué)得下面兩張圖，哪張是蒙層效果圖？

我想幾乎所有人都會(huì)選擇左邊的效果。畢竟左邊的漸變過(guò)渡看起來(lái)更加自然。而右邊生硬的漸變則顯得不夠美觀。

可惜，右圖才是和上面參數(shù)對(duì)應(yīng)的效果圖。

因?yàn)樵诰€性漸變終點(diǎn)的位置（即兩端）顏色過(guò)渡會(huì)突然消失。從而導(dǎo)致了明顯的“尖銳感”。如下圖：

PS：你能看到白線轉(zhuǎn)折處的兩條豎線嗎？

類似的問(wèn)題，在當(dāng)下的APP中隨處可見，隨機(jī)找了三個(gè)APP，微信、百度、站酷：

其中百度的漸變色“最深”，漸變的感覺(jué)也最突兀。

還比如愛奇藝自制節(jié)目的開場(chǎng)：

蒙層在白色的背景上顯得十分不協(xié)調(diào)。

那該如何解決呢？

圓角漸變

提到顏色漸變，很容易想到iOS的圓角漸變。

2014年，Apple發(fā)布iOS 7，調(diào)整了圖標(biāo)的圓角曲率。如圖：

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

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

而右側(cè)蘋果電腦的圓角設(shè)計(jì)。我們會(huì)看到圓角過(guò)渡十分柔和。這也是Apple產(chǎn)品讓我喜歡它們的原因之一。

生活中，過(guò)渡曲線還應(yīng)用在旋轉(zhuǎn)的高速公路中。得益于逐漸過(guò)渡的曲線，我們?cè)隈側(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)于這段話，我的理解是：想要平滑過(guò)渡，可以從量個(gè)方面入手：

第一，把漸變拉長(zhǎng)；

第二，把過(guò)渡的中間色，從50%位置移動(dòng)到30%的位置（需要增加一個(gè)過(guò)渡節(jié)點(diǎn)，節(jié)點(diǎn)越多越好）。

【第一：漸變拉長(zhǎng)】

我們先拉長(zhǎng)標(biāo)準(zhǔn)的線性漸變，看看效果，示意圖如下：

 這說(shuō)明，單獨(dú)拉長(zhǎng)蒙層的尺寸（漸變方向），可以達(dá)成平滑過(guò)渡的效果。

【第二：調(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)了平滑過(guò)渡。（調(diào)整后的節(jié)點(diǎn)越多，過(guò)渡效果越平滑）。

用函數(shù)曲線可以很好的說(shuō)明節(jié)點(diǎn)的變化：

圖中直線是標(biāo)準(zhǔn)的線性漸變，而曲線則是調(diào)整后的漸變頻率。

下面以愛奇藝視頻播放器為例，對(duì)比下調(diào)整前后的蒙層效果：

Easing Gradient

當(dāng)然，手動(dòng)調(diào)整漸變不僅費(fèi)時(shí)費(fèi)力，還容易手抖出錯(cuò)~ 過(guò)去每次漸變換顏色，都要調(diào)整半天。

現(xiàn)在有了更快的辦法——Sketch Plugins，去年發(fā)現(xiàn)了一款可以輕松曲線漸變的插件：Easing Gradient （文末有附件，可下載嘗試）

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

實(shí)踐

我們可以根據(jù)實(shí)際情況優(yōu)化產(chǎn)品效果：

· 切圖蒙層，設(shè)計(jì)師只需替換相應(yīng)的切圖即可。

· 代碼蒙層，我和公司的前端開發(fā)溝通后確認(rèn)，iOS、Android兩端都可以用代碼實(shí)現(xiàn)曲線漸變。

如果你想領(lǐng)先一步完善產(chǎn)品中的漸變效果，就抓緊試試文中的辦法吧。