（中英双语）如何设计出最完美的渐变色？

任何产业链的发展都离不开CMF（色彩、材料、工艺）设计

当你在用户体验设计公司工作时，你开始注意到行业趋势的周期性。就像时尚或艺术一样，过时的东西几年后必然会重新出现，然后被主流所接受，然后再一次被淘汰。

When you work for a user experience designcompany , you start to notice the cyclical nature of industry trends. Just likefashion or art, what goes out of style inevitably resurfaces a few years downthe road, only to become adopted by the mainstream, and fade into obsoletiononce again.

2018年渐变色工艺趋势火爆，CMF设计军团作为全国知名的CMF交流平台，专门成立了渐变色工艺技术微信交流群，打通全产业链，串联全行业资源，打造最具人气的渐变色CMF群。

目前军团成立了渐变色CMF（色彩、材料、工艺）行业微信交流群，小米、华为、三星、oppo、vivo、格力、苏泊尔、九阳、海尔、广汽、上汽、北汽、佛吉亚、富士康、比亚迪、伯恩、蓝思等5000+终端、加工、设计公司、高校及材料设备供应商企业均已加入，长按如下二维码或加群主微信13480805861，备注“渐变色”，加入技术交流群，与行业专家一起交流！

Back To The Future是最近重新流行的一种设计潮流的一个恰当例子，或许最引人注目的是2016年Instagram重新设计logo，以及Spotify的双色播放列表图标。渐变在用户界面设计领域越来越流行，因为，它们为界面注入了深度和纹理。它们扮演着独特的、甚至是相互冲突的角色：渐变实际上模仿了我们周围看到的颜色（在现实世界中我们很少遇到单色调），但它们也可以用来创建我们以前从未见过的颜色模式。

‘Back To The Future’ is a fitting example for a design trend that has just recentlyresurfaced today, perhaps most notably in Instagram’s logo redesign in 2016 and Spotify’s dual tone playlist icon. Gradients havebecome increasingly popular in the user interface design world, and for goodreason—they inject depth and texture to the interface. They serve unique,even conflicting roles: gradients realistically mimic the colors we see aroundus(rarely do we encounter single tones in the real world), but they can also beused to create color patterns we’ve never seen before.

渐变是一种强大的设计技术，而伴随着这强大的力量带来的是一种巨大的责任。如果使用不当，渐变会造成设计灾难。它们可以打乱布局，分散用户的注意力，破坏整个界面的美感。在这篇文章中，我们揭示了制作渐变的秘密，它将会让你设计的界面提升到新的层次。

The gradient is a powerful designtechnique, and with great power comes great responsibility. When usedimproperly, gradients spell out a design disaster. They can muddle a layout,distract the user, and ruin an interface’s entire aesthetic. In this article, we reveal the secret tocrafting a gradient that elevates your interface to the next echelon.

关于如何选择色彩，你无须担心，其实你不需要成为色彩理论的专家，依然可以对渐变进行谨慎的选择。一般的经验法则是选择彼此接近的颜色，这样可以让它们更自然地混合。UX Planet 包括一个伟大的图表-看如何无缝的过渡从黄色到橙色是与绿紫色比较。

Don’t worry, you don’t need to be an expert on color theory to make prudent selectionsfor your gradient. The general rule of thumb is to choose colors that are closeto each other, thus allowing them to blend more naturally. UX Planet includes agreat diagram—look how seamless the transition from yellow to orange is comparedto the green-purple. 

为什么轮子附近的颜色在视觉上如此吸引人？也许是因为这些渐变是自然发生的。这给UI设计师带来了一个极好的商业秘密：将自然作为灵感的来源。

Why are colors in proximity on the wheel sovisually appealing? Perhaps it’s because those are the gradients that naturally occur so often.Which brings us to an excellent trade secret for UI designers: turning tonature as a source for inspiration.

在我们的日常生活中会不断地遇到各种各样的渐变:天空、日落、水体。无论我们在世界的哪个角落，天空都是极好的来源。让我们来看看令人惊叹的自然画面设计师安娜·格伦(Anna Grenn)为我们展示的场景，以及它们的配套色彩。

We constantly encounter gradients in ourday-to-day lives: the sky, sunsets, bodies of water. No matter where we are inthe world, the sky especially serves as excellent source material. Just take alook at the breathtaking natural tableaus designer Anna Grenn showcases,complete with their accompanying color makeups.

虽然天空可能是最常见的渐变色来源，但其实这种案例还有很多。你每天其实都被这自然界中的渐变所包围着。现实生活的色彩都是混合在一起。

And while the sky may be the most commonsource material, there’s no end to examples. There’s probably a natural gradient around you right now. The color of thereal life does not neatly fill inside the lines, but rather blends.

如果你现有品牌的颜色不适合渐变。不用担心：在渐变中注入额外的色调是增强视觉效果的好方法，并能更好地区别你的UI。

So let’s say your existing brand’s colors aren’t exactly conducive to gradients. Never fear: injecting additionalhues to the gradient is a great way to enhance its visual interest anddistinguish your UI even more.

正如你所想的，当附加的颜色落在色轮的开始和结束之间时，它们会流动得最好。重温来自 UX Planet的相同图表:

As you’d imagine, additional colors are going to flow best when they fallin between the start and end color on the color wheel. Revisiting the samediagram from UX Planet:

只是要注意的是:你添加的颜色越多，你渐变色的复杂度就越高，设计的平衡性就越困难。你可以把目标定得高些，然后争取完成像Instagram的标志这样的多层渐变，但凡事都有度，如果你做得太过了，你最终会得到一个更接近这个故意设计得难看的MTV网站的东西。

Just be warned: the more colors you add,the more complex your gradient, and the more difficult a design balancing-actyou’ll have to perform.You could aim high and shoot for a multi-layered gradient like Instagram’s logo, but go overboard and you couldend up with something closer to this deliberately ugly MTV web design.

即使确定了完美的颜色组合之后，要在设计中实现它仍然存在很多问题。首先，一些基本要素:

渐变应该与整体风格相融合，与整体布局保持一致，并指向用户该看的地方。对于x面多边形(正方形、三角形、矩形、五角形等)，一般是线性渐变;而圆形区域需要径向。

Even after nailing down the perfect colorcombination, there’s still the matter of actually implementing it into the design.First, some of the basics:

Gradients should align with theircontainers, contouring to the layout and directing where the user’s eyeballs should be pointed. For x-sidedpolygons (squares, triangles, rectangles, pentagons, etc.) this usually means alinear gradient; rounder areas call for a radial direction.

一些UI设计师喜欢为他们正在设计的页面设定一个假想的“光源”，就像画家描绘风景一样。这有助于他们确定渐变的方向：越亮的那一面显然应该离光源越近，越暗的那一面则越远。

Some UI designers like to assign animaginary ‘light source’ for the page they’re working on, the same way an artist painting a landscape might.This helps them decide how to orient the gradient—the lighter side should obviously be closer to the source, thedarker side farther away.

比如这个音乐应用程序的界面左上角的光源。以它为中心，页面中单独的色彩元素不断扩散开来，结合成一个华丽的，令人眼花缭乱的渐变。并且对整个界面起到了非常棒的效果。

Note the light source in the upper-lefthand corner for this music app’s interface.When all of these individual elements are chosenproperly, they coalesce into a gorgeous, eye-popping gradient. And that, inturn, serves as a huge boon to the interface as a whole.

最后，回顾一下（Finally,To recap:）：

选择彼此接近的颜色，作为渐变色的基色

choose colors that are close to each otheras the base color of the gradient

当有疑问时，向自然界寻求灵感

When in doubt, turn to the natural worldfor inspiration

通过添加更多的色调来提高效果，但是要注意不要做得太过火

Kick things up by adding more hues, but becareful not to overdo it

在界面中选择正确的形状和位置。记住:我们的眼睛会跟随渐变!

Choose the correct shape and placementwithin your interface. Remember: our eyes follow the gradient!

The article source：BY SEAN MCGOWAN

Sean is a technical researcher & writerat Codal, authoring blog posts on topics ranging from UX design to the Internetof Things. Working alongside developers, designers, and marketers, Sean helpssupport the writing team to ensure Codal produces engaging web content of thehighest quality. When not writing about the latest innovations in app design,Sean can be found cooking, watching old movies, or complaining about theshortcomings of his favorite Philadelphia sports teams. More articles by SeanMcGowan

 本文翻译：CMF设计军团Diudi，未经允许，禁止转载！

欢迎在文章后面留言

年度重磅 活动推荐

主办机构：国际CMF设计大会组委会

执行机构：国际CMF设计大会组委会、CMF设计军团、萨米设计研究、广州设计周、日本.物学研究会

大会学术支持：广州美术学院、南京艺术学院工业设计学院、武汉理工大学艺术与设计学院、武汉大学、湖南大学、华中科技大学机械科学与工程学院、南京工业大学、成都大学中国－东盟艺术学院、北京服装学院色彩设计研究中心（BIFTcolor）、华南理工大学、吉林大学、广东财经大学艺术与设计学院、哈尔滨理工大学、北京理工大学珠海学院、广州大学、安徽农业大学（排名不分先后）

大会支持单位：科思创聚合物（中国）有限公司、索尼、雅马哈、Pantone彩通、WGSN、物学研究会、上汽大众、现代汽车、广汽传祺、美的、TCL电子控股、苏泊尔、深圳市崯涛油墨科技有限公司、深圳市绚图新材科技有限公司、上海朗亿功能材料有限公司、上海锦湖日丽塑料有限公司、深圳市迪嘉机械有限公司、合肥为先产品设计有限公司、惠州快捷五金制品有限公司、旷达科技集团股份有限公司、浙江佳华精化股份有限公司、东莞多彩水转印、芜湖弘度智能科技有限公司、广东杰百顺新材料有限公司、深圳市豪恩声学股份有限公司、东莞迪芬尼电声科技有限公司、深圳市天昊海科技有限公司、广东省工业设计协会、深圳市设计联合会、广东工业设计创新服务联盟、广州工业设计促进会、深圳市真空技术行业协会、佛山工业设计协会、深圳市企业创新发展促进会（排名h不分先后）

参会人群：品牌终端、设计公司、研究机构、高校、代工及加工厂商、材料设备供应商等

注：参加CMF创新展请联系李先生/189 2600 6016（同微信）