如何使用漸變元素提升產品質感(2)

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

可惜，右圖才是和上面參數對應的效果圖。因為在線性漸變終點的位置(即兩端)顏色過渡會突然消失。從而導致了明顯的“尖銳感”。如下圖：

PS：你能看到白線轉折處的兩條豎線嗎?

類似的問題，在當下的APP中隨處可見，隨機找了三個APP，微信、百度、站酷：

其中百度的漸變色“最深”，漸變的感覺也最突兀。還比如愛奇藝自制節目的開場：

蒙層在白色的背景上顯得十分不協調。

那該如何解決呢?

圓角漸變提到顏色漸變，很容易想到iOS的圓角漸變。2014年，Apple發布iOS 7，調整了圖標的圓角曲率。如圖：

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

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