渐变 on Victor42

印证渐变复兴的20个网站

hi@victor42.work (Victor42) — Sun, 26 Jul 2015 00:13:00 +0000

[国外设计第96期]

扁平化设计的时代正在终结，或许不会一蹴而就，却的确在逐渐衰亡。最有力的证明就是这种崭新的渐变潮流正在兴起。相比在web 2.0时代见到的那种渐变，它们更加细致微妙。

坦白说吧，渐变再度盛行了！

我列出了20个主打渐变形式的崭新网页设计。其中有些非常微妙，另一些则极度鲜艳；不论哪种，渐变都是一种为你设计添彩的有趣手法。

VO2 Group

VO2新网站的欢迎页面采用了非常规的设计，大量不同元素层层叠加。树洞般的设计造就了这个网站！很有意思，与众不同。背景元素之一——三角形——呈现了轻微的渐变。就此而言，它为三角形元素增添了视觉吸引力。

Melanie F – Look Book

Melanie的look book采用的布局方式，在时尚类网站中愈发流行，其中文字置于图片之上，两者却不粘连。在本例中，介绍文字呈现在网站页头的矩形上方。矩形中填充了绿色与紫色的渐变，很显然，它有助于吸引视线。

Adoratorio

这家设计机构以特别的方式运用渐变，将它用在了文字区域上。独具一格，相当酷炫。这种方法确实能巧妙地将文字风格化，非常管用。

Qards

甚至我们Designmodo Qard的着陆页也展现了多种渐变。大多页面都被分割成小块，背景填充了不同的渐变色。截图中的页面用的是橙色，其他页面则用了由浅到深的蓝色或绿色渐变。渐变的背景为网站设计增添一种独特的格调。

Symodd

Symodd的首屏，或者说介绍部分，主打由橙色到粉色的全屏渐变背景。这种渐变相对细微，因为这两种色调差异不大，赏心悦目。

Inc

Inc也在首屏区域使用了渐变。但是稍微有点不同，他们将蓝紫色渐变叠加在照片上。此处的渐变也没有太强烈，蓝色与紫色是非常接近的色调，将它置于照片之上效果很好。

Pho

又是一个蓝紫色渐变。它是这个案例集中相对柔和的一款，不过所选的两种颜色相当华丽——它们饱和度低，但对比强烈，看起来令人非常愉悦！

Impossible Bureau

Impossible Bureau的页面采用了非常鲜明、反差强烈的渐变色！很酷的是，每当页面加载完成，其他元素在上方出现，页面的浓烈与戏剧性并没有被冲淡。

Customeed

Customeed选择极度罕见的绿色渐变。出于某些原因，蓝色、紫色、粉色渐变非常盛行。但是绿色渐变也没有问题，它看起来令人愉快，与Customeed的网站配合良好。

Webflow

Webflow并没有大篇幅展示渐变——至少不像本文中其他网站那样。他们在网站首页用了一小片粉、紫、蓝的渐变点缀。这种激动人心的渐变在各处小范围运用，营造了很棒的格调。

Product to Profit

着陆页的渐变色很淡——略微有水洗的感觉。无论如何，它看起来的确很棒，因为并没有刻意突出。淡蓝淡紫色的渐变叠在照片上，效果很好。唤起这个网站一种友好的氛围。

Table Hero

Table Hero的主页遍布友好的小花样，说小花样是指各处的点缀。在1像素宽的按钮边框上，或是极细的标题文字上透出一丝渐变。这种方法很有意思，在设计中融入渐变来增添深度和多样性，却不会让渐变走火入魔。

GoGoRo

GoGoRo的焦点区域采用了极简设计，但绝对够抓眼球。除了巨大的文字“go”、小摩托的照片和少量小字，别无他物。文字本身很细，但由于字号够大，使它表现出一定的厚度。网站的设计师将欢快的蓝绿渐变作为文字的颜色。

Segment

Segment用了深色设计，通常整个区域都采用深灰色背景。但是为了给它添彩——或者说点亮它——他们用了很多明亮的霓虹绿色来提亮设计。某些区域的绿色渐变颇具吸引力，使整个设计引人注目。

Mapbox

进入Mapbox的主页，你会看到一个非常棒的首屏。轮播图中有些采用了微妙的渐变背景，为整个设计增加了纵深感和清晰度。

Gradients, motherfucker.

不知道你是否还记得这个网站，Visual Idiot在2012年发布的。不过随着屏幕滚动，你会发现它的渐变真是切中要害。这个网站相当简单，而且非常滑稽。展现了一系列难以置信的渐变，取自彩虹的颜色，例如粉色、蓝色、绿色、橙色。

Pitney Bowes

又是个大胆的案例。这个网站的设计相当平滑，白色文字在紫色为主体的渐变上显得鲜亮。文字看上去的确很棒。这个渐变其实是均匀线性的，但是得益于上面的蓝色圆形纹理，这种视错觉让它显得有点圆润。很酷，对不对？

Stripe

Stripe近期更新了他们的网站，他们也用了渐变！有些首屏轮播图用了非常漂亮的渐变，你在截图中看到的就是其中第一张。由深色的海军蓝过渡到绿色的渐变，色彩丰富，作为暗色调背景非常好。

One John St

这是Brooklyn DUMBO一个公寓群的着陆页。这个网站令人惊奇的地方，是渐变色会在一天中随着时间改变深度。这个设计非常有趣。

Wake

最后一个案例展现了最流行的蓝紫色渐变，这种配色正如日中天。Wake的网站遍布这种渐变色，因为这是他们应用品牌色一部分。

结论

可以看出，渐变是一项有趣的设计决策。它们造就了这种欢快、激动人心的设计。总体来说，渐变并不差——从来都没有差过——只是我们对太极端的渐变感到厌烦。尽管这些案例中有部分对比很强烈，也有一些呈现了它柔和的一面。希望这一系列能在你未来的设计中激发你的灵感。

原文链接

作者信息： Paula Borowska Paula runs a user experience blog BeingLimited and an author of an upcoming book about mobile design, the Mobile Design Book. You can connect with her on Google+.

光彩夺目的柔滑渐变APP界面

hi@victor42.work (Victor42) — Sun, 06 Oct 2013 16:25:34 +0000

[国外设计第13期]

iOS7让我们重新认识了渐变效果，老实说，渐变是设计师手法中最简单的装饰之一。它有许多变化，既可以让设计出彩，反过来也可以毁了设计，关键就取决于色彩的选用和整体风格。除此之外，和大多装饰手段一样，它也会随着当前潮流趋势变化

近日的主流，是平滑温和的霓虹色渐变，配合近乎发光的浅色文字和简单易懂的字体，并通常伴随着低透明度的半透明层。如此细腻的结合很自然地能给任何UI增加一分精致和微妙

我们这里不仅仅讨论这种渐变样式，它毫无疑问非常流行，我们也讨论其他基础且广为流传的渐变实现方法。其中包含的方法更多被用作一种差异化的手段，它的主要目标是在某种特定视觉风格中承载内容

首先，我们来欣赏一些超凡脱俗、基于当红流行渐变风格的APP界面

移动APP中的渐变效果

我们开篇选用Michael Shanks华丽柔和、基于渐变的iOS7锁屏界面设计。极简的屏幕元素只包含必须的信息，通过优雅的浅色文字实现，精妙的阴影和半透明条作为强调

Tommy Borgen的Sense。设计师也采用了极简的UI设计。界面看起来简单却相当精美。中央轻微模糊的圆形轮廓漂亮地和其中微妙的细字体组合，与平滑的背景也搭配良好

Ross Popoff-Walker的个人站点Idea v1.1。设计师借鉴了破晓天空的渐变色，用非凡的泼溅手法来展现。背景为白色的图形和文字提供了坚实的底色，很好地突出强调了它们。大量的留白和浅灰纯色页头页尾（主要包含导航项）漂亮地与主题结合

Yasser Achachi的界面设计看起来绝对惊艳且引人注目。奇妙的万花筒色用在背景上，配合浅色文字、像素级优化的小图标、半透明条和彩色色块，巧妙地打造了一款相当激动人心的界面

Kyung Min Kim的Coloring Clock依靠炽热的火焰色渐变背景，结合粗笔划的文字组合和大量留白。精美天然的配色方案很自然地点缀了整个界面。你也可以定制自己喜欢的渐变主题，来给界面赋予一些个人色彩

chirag dave的iPhone App Instasave中，界面切换处用了一张精彩的放射状渐变图片，来作为侧滑菜单的固定背景。设计师用背景图中相对较浅的区域来强调导航，以精美小号字和纤细字体来表现

Vladimir的Beam Day概念时钟设计。其中背景旨在清晰凸显少数几个图形构成元素。轮廓极细的圆环和纤细字体相互完美配合

Alex Patrascu的Aero Weather设计。其中干净明亮的渐变，很自然地将视线吸引至包含大量信息的天气预报上。浅色的非正式字体与背景完美结合，并使数据清晰易读

Gaétan Pautler的iOS 7 快捷菜单设计。尽管设计师用的事实上不是传统渐变，因为那是一张有着颜色过渡的高度模糊的背景图，即便如此，快捷菜单的背景有着难以察觉的垂直渐变，从蓝色渐变至淡粉的奶油色

渐变效果作为强化的手段

作品集的这部分，是致力于将渐变效果用作强化手段的APP界面

Keyuri Bosmia的IndiaNIC App有着令人喜爱的彩虹格调。设计师巧妙地把菜单上色成鲜艳的色调来将每个菜单项清晰区分开。整体来看，这个概念设计看上去愉快、充满活力

Andrus Valulis的SunFun App设计。相反地，这件UI作品基于更加平滑自然的渐变效果。鉴于这个app致力于展示日出日落相关数据，设计师使用暖色来支撑整个主题风格就不奇怪了

Frantisek Krivada的扁平样式色轮设计。不同于之前的案例，这件UI作品采用了最终过渡至中性白的冷色调。所以这个界面看起来更加犀利、有力和严肃。带曲线的功能圆环富有活力，增加了一分圆滑

Franz (Taptanium)的Haze Rays界面主题又是一件强烈依赖生脆清冷配色方案的概念设计。放射状渐变很自然地将用户注意力锁定在屏幕中央，无疑使关键数据生动鲜活起来

Carrie Philips的Waygo App V2设计。设计师使用了清新的橙色明暗变化，来构成温暖鲜活的渐变主题，提亮了菜单部分。颜色的选用与主色调完美搭配，并且很好地强化了主题风格

Rustem Ramadanov的Bird app GIF中，组织良好、清晰易读的磁贴布局，起了重要作用，它们通过柔滑的颜色差异来精确指向各分类。设计师使用了久经考验的端庄蓝白色组合

Eddie Lobanovskiy的Brisk设计。界面中展示了一套渐变色大融合，主要由多种明暗变化的热带橙过渡至极地蓝。其中背景色扮演着更加功能性的角色，而非纯粹装饰，每种颜色都为温度计增加了图形化的表现

Nick Murph的Goo App基于绝妙的柔和配色。柔和渐变漂亮地与内容融合，给界面营造一种文雅怡人的氛围

Maria Bratchikova的"Giftboard"设计。设计师通过多种色调的红色巧妙地区分类别，为界面营造一种亲切、略微伤感的格调。此处小小的渐变效果，在强调和融合类别上起到了一定作用

Amine Mounazil的天气app界面又是一件利用色彩的力量来视觉化数据展示的作品。照惯例，温度越高，颜色越深、越暖、越饱和

反思

设计师们精明地利用各种渐变效果，从无间断的柔滑光亮背景，到割裂成一条条相互区别的奔放背景。他们不仅将这种活力十足的效果用于纯装饰作用，也作为一种强调既有主题风格的手段

原文链接