设计人员如何设计完美的渐变

当您在用户体验设计公司工作了很长时间时,您开始注意到行业趋势的周期性。就像时尚或艺术一样,过时的东西不可避免地会在几年后重新浮出水面,直到被主流所采用,并再次消失。

在数字设计世界中,也许没有比梯度的上升和下降(和上升)更好的例子了。在90年代被认为是界面设计的关键(有多少个地理站点具有渐变的ArtArt标头?),这种趋势可能还要追溯到更远的年代。考虑以下标志性徽标:

bttf

“回到未来”是最近才浮出水面的设计趋势的合适例子,也许最值得注意的是在2016年Instagram的徽标重新设计和Spotify的双音播放列表图标。渐变在用户界面设计世界中变得越来越流行,并且有充分的理由-渐变会向界面注入深度和纹理。它们起着独特甚至冲突的作用:渐变实际上模仿了我们在周围看到的颜色(在现实世界中我们很少遇到单一色调),但是它们也可以用于创建我们从未见过的颜色模式。

如果使用不当,渐变会带来设计灾难

渐变是一种强大的设计技术,功能强大,责任重大。如果使用不当,渐变会带来设计灾难。他们可能会混淆布局,分散用户注意力并破坏界面的整体美感。在本文中(在我值得信赖的用户体验设计师团队的帮助下),我们揭示了制作渐变的秘诀,该渐变可将您的界面提升到下一个梯队,而不是提醒用户1997年。

 

从坚实的基础开始

无论是双色调还是多色调,每个渐变都仅与其基色一样强。与所有基于颜色的设计选择一样,在选择正确的颜色选择时,我们可以参考色轮作为指导。

不用担心,您不需要成为色彩理论的专家就可以为您的渐变做出谨慎的选择。一般的经验法则是选择彼此接近的颜色,从而使它们更自然地融合。UX Planet包含一个很棒的图表-看看从黄色到橙色与绿色-紫色之间的转换是多么无缝。

uxplanet

为什么方向盘上的颜色在视觉上如此吸引人?也许是因为这些梯度自然而然地经常出现。这为UI设计师带来了一个极好的商业秘密:将自然作为灵感的来源。

 

自然界中的渐变

我们在日常生活中不断遇到梯度:天空,日落,水域。无论我们在世界上的任何地方,天空都是最佳的原材料。只需看一下令人惊叹的自然景观设计师安娜·格伦(Anna Grenn)展示的橱窗,并配以随附的彩妆即可

uxplanet2

尽管天空可能是最常见的原始资料,但例子无穷无尽。您周围可能正在自然渐变。现实生活的色彩并不能整齐地填充线条内部,而是融合在一起。

 

将其带入新的高度

因此,假设您现有品牌的颜色并不完全有利于渐变。或者,也许您的标准两色渐变根本无法消除它。不用担心:为渐变注入其他色调是增强其视觉吸引力并进一步区分UI的好方法。

就像您想象的那样,其他颜色落在色轮上的开始和结束颜色之间时,它们的流动性最佳。从UX Planet重新审视同一张图:

uxplanet3

请注意:添加的颜色越多,渐变就越复杂,设计平衡动作就越困难。您可以瞄准高处并拍摄像Instagram徽标这样的多层渐变色,但是落伍了,最终可能会变得更接近于这种故意丑陋的MTV网页设计。

instagram
音乐电视

 

光源形状

即使确定了完美的色彩组合,仍然存在将其实际应用到设计中的问题。首先,一些基本知识:

渐变应与其容器对齐,与布局轮廓一致,并指示应将用户的眼球指向何处。对于x面多边形(正方形,三角形,矩形,五边形等),通常表示线性渐变;圆形区域要求径向。

垂直

一些高端网站设计设计师喜欢为他们正在处理的页面分配一个假想的“光源”,就像画家画风景一样。这有助于他们确定如何确定渐变的方向-较亮的一面显然应更靠近源,较暗的一面应更远。分配光源还可以帮助告知页面的其他图形元素,并且也可以充当焦点。

图片5

请注意此音乐应用程序界面的左上角的光源。

正确选择所有这些单个元素后,它们会融合成一个令人叹为观止的华丽渐变。反过来,这对于整个界面来说是一个巨大的福音。

 

梯度从哪里去?

在用户界面中包含渐变是使平台现代化的极好,简便的方法。通过遵循此处讨论的技巧,可以确保正确使用了此功能强大的设计工具。回顾一下:

  • 结合品牌和色轮选择合适的基本色调
  • 如有疑问,请向自然界寻求灵感
  • 通过添加更多的色调来增强效果,但请注意不要过度使用
  • 在界面中选择正确的形状和位置。记住:我们的眼睛跟随渐变!

像所有UI设计趋势一样,渐变将不合时宜,而下一个大问题将使渐变变得更糟。但就目前而言,它们是尖端UI设计的支柱。


返回观点列表
本文标签:

相关专题

  • 品牌官网设计
    品牌官网设计

    杭州派迪科技为高端客户提供品牌官网咨询策划,品牌官网设计,品牌官网建设开发服务,以国际化视野和标准为基础,为各行业领军品牌提供高端企业网站定制、策划、设计、互动与制作

    查看详情
  • 大策略营销门户网站
    大策略营销门户网站

    杭州派迪科技有自己的营销型网站CMS系统,适合白帽SEO网站。特别对大策略的营销型门户网站制作有一定的经验,曾经为上海天擎外贸行业网站、浙江兆龙营销型门户、先临三维门户营销网站提供全程的技术支持及SEO优化指导

    查看详情
  • 集团/上市公司网站
    集团/上市公司网站

    杭州派迪科技为杭州本地集团公司提供网页设计、制作、开发服务,为集团公司网站建设提供了响应式、营销型、品牌型、门户型网站建设需求,欢迎广大集团公司客户咨询

    查看详情
  • 外贸网站建设
    外贸网站建设

    杭州派迪科技为高端客户提供外贸网站咨询策划,外贸官网设计,外贸官网建设开发服务,以谷歌搜索引起算法为基础,为各行业外贸公司提供高端企业外贸网站定制、策划、设计、互动与制作

    查看详情
  • 企业网站建设
    企业网站建设

    高端专业、令人印象深刻的用户界面、易于访问——企业网站必须反映一切,因为派迪科技在这里提供帮助,凭借精湛的技术、丰富的经验、与客户的持续沟通以及对每一个细节的关注,我们确保在快速的周期时间内提供优质的服务。

    查看详情
  • 半定制网站
    半定制网站

    杭州派迪科技模板网站建设专题_各行业方案专题栏目提供各行业产品适合的网站建设方案,帮助企业了解派迪科技建站效果等信息,您可以通过本站了解各行业网站建设方案,如需要获取本行业定制网站建设方案,可以联系在线客服或拨打电话咨询

    查看详情

体验从沟通开始,让我们聆听您的需求!

开始您的数字化品牌体验! 15158117070 期待您的来电!

[ 网站建设×品牌官网设计×大策略营销门户×微信小程序开发×微信公众号开发]

派迪业务总监微信号

派迪业务总监微信号

了解最新项目报价

派迪产品经理微信号

派迪产品经理微信号

免费获取项目策划

我们正使用 cookies 来改善您的访问体验

派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookies 。

如果您想详细了解我们如何使用cookies请访问我们的 《隐私政策》

Cookie 偏好

如果您想详细了解我们如何使用cookie请访问我们的 《隐私政策》

管理cookie偏好

基本 cookies

始终允许

这些 cookies 是网站运行所必需的,不能在我们的系统中关闭。它们通常仅针对您所做的相当于服务请求的操作而设置,例如设置您的隐私首选项、登录或填写表格。您可以将浏览器设置为阻止或提醒您有关这些 cookies 的信息,但网站的某些部分将无法运行。这些 cookies 不存储任何个人身份信息。

性能 cookies

始终允许
这些 cookies 使我们能够计算访问量和流量来源,以便我们可以衡量和改进我们网站的性能。它们帮助我们了解哪些页面受欢迎和不受欢迎,并了解访问者如何在网站上移动。这些 cookies 收集的所有信息都是汇总的,而且是匿名的。如果您不允许这些 cookies,我们将不知道您何时访问了我们的网站,也无法监控其性能。

功能性 cookies

这些 cookies 收集信息用于分析和个性化您的定向广告体验。您可以使用此拨动开关来行使选择不获取个人信息的权利。如果您选择关闭,我们将无法向您提供个性化广告,也不会将您的个人信息交给任何第三方。

定位 Cookies

这些 cookies 可能由我们的广告合作伙伴通过我们的网站设置。这些公司可能会使用它们来建立您的兴趣档案,并在其他网站上向您展示相关广告。它们不直接存储个人信息,而是基于唯一标识您的浏览器和互联网设备。如果您不允许使用这些 cookie,您将体验到较少针对性的广告。

我们正使用 cookies 来改善您的访问体验

派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookies 。

如果您想详细了解我们如何使用cookies请访问我们的 《隐私政策》