（中英双语）如何设计出最完美的渐变色？
产业的发展离不开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.
（一）要从一个坚实的基础开始
（Start With a Strong Foundation）
关于如何选择色彩，你无须担心，其实你不需要成为色彩理论的专家，依然可以对渐变进行谨慎的选择。一般的经验法则是选择彼此接近的颜色，这样可以让它们更自然地混合。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.
（二）自然界中的渐变色
（Gradients In Nature）
在我们的日常生活中会不断地遇到各种各样的渐变:天空、日落、水体。无论我们在世界的哪个角落，天空都是极好的来源。让我们来看看令人惊叹的自然画面设计师安娜·格伦(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.
（三）升级提升到下一境界
（Taking it to the Next Level）
如果你现有品牌的颜色不适合渐变。不用担心：在渐变中注入额外的色调是增强视觉效果的好方法，并能更好地区别你的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.
（四）光源和形状
（Light Source & Shape）
即使确定了完美的颜色组合之后，要在设计中实现它仍然存在很多问题。首先，一些基本要素:
渐变应该与整体风格相融合，与整体布局保持一致，并指向用户该看的地方。对于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色彩设计大会暨渐变色创新趋势论坛
2019年5月11日
深圳观澜格兰云天国际酒店
人数规模：350
拟定议题：
序号 | 议题 | 拟邀请 |
1 | CMF设计中的色彩创新和研究 | CMF设计军团 Samy团长 |
2 | 多彩陶瓷的创意实现和心路历程 | 三环/小米 |
3 | 车企的色彩开发流程/汽车氛围灯色彩设计及工艺 | 广汽研究院 宋贝沙 |
4 | 渐变色效果实现工艺综合考量及创新 | 兆奕 |
5 | 如何系统的分析和应用产品色彩 | 三星 |
6 | “Pantone的‘活珊瑚橙色’能否成为2019年的国际主打代表色” | 北京服装学院教授色彩专家 崔唯 |
7 | 包装行业色彩开发和系统管理 | 中荣印刷 |
8 | 色彩 | 2020-21流行色设计趋势 | WGSN |
9 | 2020高端涂料流行趋势和特殊效果应用开发 | 施美克 |
10 | 纹理效果创新 | 微纳纹理工艺介绍及难点解析 | 苏州印象 |
11 | 渐变色领域新型材料的选择和应用 | 崯涛 |
12 | 色彩管理及流行色的设计灵感 | Pantone |
13 | 手机复合板材通用工艺介绍及难点解析 | 通达 |
14 | IML、IMD、烫印在装饰薄膜上的新应用 | 库尔兹 |
15 | 施华洛世奇的时尚基因及趋势发布 | 施华洛世奇 |
报名方式：
报名请联系
豆豆：189 25218739（电话同微信）
亮亮：189 2603 5037
或长按如下二维码在线登记报名
会议赞助请联系李先生18926006016
往期色彩大会活动回顾，视频时长1分44秒，请放心观看~~
关于CMF设计军团：CMF行业第一平台，由Samy团长黄明富创办，致力于推动CMF行业发展，专注于CMF探索研究与分享传播。为主机厂提供CMF创意资源支持；为供应商提供精准业务对接；为高校提供CMF教学支持；为设计师提供交流平台，分享对CMF的践行与感知，详询可加军团微信：CMFDESIGN999（请备注姓名、需求）
为探索CMF深度与广度，提升行业水平，军团邀请到：
海尔、美的、格力、西门子、奥克斯、小天鹅、海信、康佳、TCL、松下、奥马、长虹、飞利浦、创维、莱克、科沃斯、苏泊尔、史密斯、美菱、九阳、海派、仁宝、罗技、华硕；Apple、华为、小米、三星、OPPO、联想、中兴、vivo、酷派、魅族、乐视、Motorola、传音、努比亚、奇酷360、一加、美图；微软、intel；宝马、大众、广汽、北汽、上汽、一汽、长安、长城、吉利、海马、江淮、比亚迪、奇瑞、现代、中车、陕汽、东风、潍柴、蔚来、泛亚、小鹏、宝沃、伊狄达、开云、同捷科技；佳普、老板、正大、模德、奥普、樱花、欧普、欧派、顾家、华帝；杜邦、库尔兹、巴斯夫、陶氏、PPG、苏威、阿克苏诺贝尔、3M、艾文德、LG；武汉大学、天津大学、东南大学、湖南大学、吉林大学、江南大学、东华大学、同济大学、中央美院、天津科技、天津工业、广州大学、南京艺术学院、浙江理工、浙江工业、中国地质、南京理工、南京航空航天、北京理工、西南交通、广东工业、华南理工、华南工业、华南农业、安徽农业、哈尔滨理工大学；北京服装学院色彩设计研究中心、中国流行色协会、中国色彩中心、爱色丽&潘通、丽华创新制造、江南大学&卡秀堡辉联合创新实验室、荣格、YANG DESIGN等诸多业界同仁，分别来自家电、3C、汽车、家居、资源方、学术界、第三方平台、设计企业等，共同探索CMF，助力行业发展。
用心研究分享
设计、材料、工艺、趋势、文稿、资讯
CMF设计军团免责说明：本文仅代表作者本人对于行业的个人看法，作为分享交流。本文引用的图文、数据等其它内容，来源于网络或公开资料，版权归原作者及原出处所有，仅用于学习之用。任何商业盈利目的均不得使用，否则产生的一切后果将由您自己承担。如需转载，请与军团联系。
点击阅读原文，在线购买CMF工具，提升工作效率！