技法干货：渐变这样做才更美！（文末领取绝美矢量渐变礼包~）
TOPIC:
GRADIENT
DESIGN TIPS
UI Design UX Design
Article：2022/04/01
Hi~，欢迎来到「交互设计新视觉系」技法专栏的第一期！
著名的Aesthetic-usability effect（美即好用效应）是UX/UI设计师要知道的基础的法则。人类通过五官感知事物，“看”是设计中最直接的输入方式，用户通常认为美观的设计更实用。大家在生活中也不乏为颜值买单的经历吧~
相信大家在本公众号的上一篇推文中也已经了解了视觉设计的重要性，视觉系这不就来了嘛！
本期带来的是帮助大家做出更美渐变的9大实用技巧，文末还为大家准备了新德里的3D插画师兼设计师Amrit Pal Singh以独角兽为灵感创作的25款绝美矢量渐变完整礼包哦~
重要性：渐变是当下图形、网页和UI设计中的流行趋势，并广泛应用于应用程序、网站、徽标、插图、包装等。然而，使用渐变作为设计元素可能会很棘手，如果做得过火，很可能会显得俗气而廉价。所以，了解如何更好地使用渐变很重要。
是什么：渐变是一系列混合的颜色，使某些元素在视觉上更令人兴奋和引人注目。通过渐变，我们可以用一种现代而微妙的方式来强调和美化界面。
怎么做：接下来就为大家分享圣彼得堡的UX设计师Dmitriy Bunin和委内瑞拉的产品设计师Dan Romero为创建更美的渐变提出的建议和技巧 ——
Tip1 找到合适的灵感
渐变的最佳灵感来自自然。
观察真实的世界——天空、日落、植物、风景......都可以作为你的色彩来源。
Tip2 创建你的调色板
通过从照片中提取2-3个主要的颜色来为你的渐变找到合适的情绪氛围。
技巧：让渐变更自然
看看现在的天空，如果现在是白天，你会看到自然渐变的蓝天，美总是源于自然~
适宜的渐变通常产生于和谐的邻近色或单色，一般要尽量避免使用互补色。
Tip3 混合选择的颜色
在颜色上应用背景模糊效果，创建一个平滑的过渡。
技巧：使渐变尽量平滑
要让渐变看起来更微妙和自然，可以试着扩展它们，做出平稳的过渡。
也可以使用不透明度来实现看起来很棒的和谐渐变哦~
Tip4 用径向渐变增添深度
使用径向渐变为线性增添深度，创造更身临其境的感觉。
Tip5 用有意义的渐变方向
在需要的地方使用合适的渐变方向。
例如，设置光源以突出UI元素，通过将文本放置在特定的彩色区域而使其更具可读性。
Tip6 添加特别的视觉效果
添加特别的视觉效果使其产生不一样的视觉感受。
例如添加一层颗粒，让你的渐变看起来更复古。注意，只需要0.1%到0.5%的噪点SVG透明度。
Tip7 渐变与抽象形状结合
使用抽象的半透明形状，将它们融合到渐变中。
Tip8 情感＆观众
我们是在为特定的用户设计界面，对嘛? 永远不要忘记探索和认识你的用户。
渐变是颜色的混合，如果选择得当，可以传达特定的信息和情感。
技巧：方向＆感觉
尝试寻找不一样的感觉，使特定的色彩结构更有意义。
例如在更大的空间中使用对角线方向，会看起来更平静宽阔；例如我们想要从上到下阅读有光线来自天空的感觉，可以在顶部放置较浅的颜色。
Tip9 明智地使用渐变
在提供美好视觉体验的同时，不要忘记最重要的：内容。
要明智、巧妙地使用渐变，过度使用会有损用户体验哦。
技巧：对文本使用渐变要谨慎
我们当然也可以对文本应用渐变，但要非常小心。在大标题或需要强调的关键短语或引用中，渐变看起来都很棒。
但尽量不要将渐变应用于大段的正文，这可能会使阅读复杂化，降低易读性。
希望这些实用的方法和技巧能帮助你做出更美的渐变！
最后，为大家准备了新德里的3D插画师兼设计师Amrit Pal Singh以独角兽为灵感创作的25款绝美矢量渐变完整礼包~
Amrit声称，在制作这些全息和多彩的柔和渐变的过程中，没有任何独角兽受到伤害😜
使用恰当的渐变永远不会过时。
（部分图文来自网络，若有侵权，请联系删除。）
福利时刻
扫码添加小助手微信
领取文末25款绝美矢量渐变完整礼包~
帮助大家做出更好的设计~
加入社群，解锁更多惊喜！
往期推荐 | READ MORE
视觉设计在用户体验设计中的作用？ （文末领取艺术周边展示样机~）
关于可持续服装的电商App设计案例
推动2022年移动应用程序发展的新技术
文字丨Jelly
编辑丨Jelly
如果觉得我们做的还不错点个赞和在看吧！：）