如何设计完美的渐变。

当你为用户体验设计公司工作时,你会发现行业趋势的周期性。 就像时尚或艺术一样,过时的风格不可避免地在几年后重新出现,只是被主流所接受,并且再一次被淘汰。

在数字设计领域,可能没有比渐变的上升和下降(以及上升)更好的例子。 考虑到九十年代界面设计的关键(有多少地理位置网站有梯度艺术字标头?),这一趋势可能要追溯到更远的地方。考虑一下这个标志性的标志:

如何设计完美的渐变(图1)

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

梯度是一种强大的设计技术,用巨大的力量来承担巨大的责任。当使用不当时,渐变会造成设计灾难。它们可以打乱布局,分散用户的注意力,破坏整个界面的美感。在这篇文章中,我们揭示了创建一个渐变的秘密,使您的界面提升到下一个层次。

从坚实的基础开始

无论是双色调还是多色调,每一种渐变都只有基本色那么强烈。就像所有基于颜色的设计选择一样,在选择正确的颜色时,我们可以参考色轮作为指导。

不要担心,你不需要成为色彩理论专家来为你的渐变做出谨慎的选择。一般的经验法则是选择接近彼此的颜色,从而使它们更自然地融合在一起。UX Planet包含了一个伟大的图表,看看从黄色到橙色的转换与绿-紫色的无缝衔接。

如何设计完美的渐变(图2)

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

在自然界中梯度

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

如何设计完美的渐变(图3)

虽然天空可能是最常见的来源材料,但例子还有很多。现在你周围可能有一个自然梯度。现实生活的色彩不是整齐地填满线条,而是混合在一起。

把它带到下一个层次

假设你现有品牌的颜色不适合渐变。或者也许你的标准双音渐变并没有削减它。不要害怕:在渐变中注入额外的色调是增强视觉效果的好方法,并能更好地区别你的UI。

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

如何设计完美的渐变(图4)

只是要注意:你添加的颜色越多,你的坡度越复杂,设计的平衡就越困难。你可以把目标定得高些,然后像Instagram的logo那样,拍摄多层次的渐变效果,但如果你做得太过火了,你最终会得到一个更接近这个故意设计得难看的MTV网站的东西。

如何设计完美的渐变(图5)

如何设计完美的渐变(图6)

光源和形状

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

渐变应该与容器对齐,与布局保持一致,并指向用户的眼球应该指向的地方。对于x面多边形(正方形、三角形、矩形、五角形等),这通常意味着一个线性梯度;圆形区域需要径向。

如何设计完美的渐变(图7)

一些UI设计师喜欢为他们正在设计的页面指定一个假想的"光源",就像画家描绘风景一样。这有助于他们决定如何确定渐变的方向——越亮的那一面显然应该离源越近,越暗的那一面越远。指定光源也可以帮助通知页面的其他图形元素,并充当焦点。

如何设计完美的渐变(图8)

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

当所有这些单独的元素被正确地选择,他们结合成一个华丽的,令人瞠目结舌的梯度。而这反过来又给整个界面带来了巨大的好处。

渐变从哪里出发?

在UI中包含渐变是一个很好的、很容易实现平台现代化的方法。通过遵循这里讨论的技巧,您可以确保正确地使用这个强大的设计工具。回顾一下:

使用你的品牌和色轮组合,选择合适的底色

如有疑问,请转向自然界寻求灵感

通过添加更多色彩来增加色彩,但是要注意不要做得太过火

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

就像所有的UI设计趋势一样,渐变也会因为下一个大事件而过时。但就目前而言,它们是尖端UI设计的支柱。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/218331.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚重蔚管理团队
上一篇 2023年2月15日 11:31
下一篇 2023年2月15日 11:31

相关推荐

  • title书写为何如此重要。

    Title是整个html在搜索引擎搜索结果中返回的第一要素,在目前为止,它被证明是seo效果中最为重要的一项之一,里面拥有最为核心的关键字词,下面是搜集到一些目前最为有效,被认为是最佳做法的条列:根据W3C的提议:ti…

    2022年8月21日
    0128
  • 如何利用百度平台推广网站。

    百度已经毫无悬念的做上了中文搜索引擎的第一把宝座,超过60%而且还在不断上升的市场份额使越来越多的网络营销人员开始在研究百度推广网站的技巧。其实,真正做过百度推广网站的人会发现,百度很有“个性&rdqu…

    2022年8月20日
    0158
  • 要想网络营销后期维护顺利,前期准备营销工作必不可少。

    互联网时代的兴起,使网络推广成为许多企业推广的重要手段,但许多企业的网络营销推广计划并没有达到预期的效果。有时这是扩展过程的一个问题,但由于早期准备不够,所以需要更多的时间。网络的准备工作对网络的普…

    2023年2月17日
    017
  • 如何优化网站结构更利于搜索引擎蜘蛛抓取。

    1.平面结构或树形结构说到网站结构,大家都会提到平面结构和树形结构,必须称之为“平面结构”。这些是指物理结构,即基于内容聚合由目录和文件位置确定的结构。其实,对于百度搜索引擎来说,只要结构合理、逻辑合理…

    2023年3月1日
    02
  • 网站内链优化具体要怎么做。

    80%的网站管理员在优化网站时都有这样的理解。只有做好内部链和外部链,才能做一个好网站,做一个排名。然而,这只是一种方式。事实上,很多人走相反的路。然后,你想知道,你可以安排网站只做内部链你知道怎么做吗…

    2022年9月5日
    092
  • 怎么做能够合理提高网站排名。

    一、网站內容和客户体验 不论百度搜索还是谷歌的总体目标,全是要搞好客户体验的,而网站发布的內容就尽管充分考虑百度收录难题,但最后还时出示给客户愿意看的內容。很长过段时间,在seo优化全过程忽略网站的內容…

    2022年8月20日
    0117
  • SEO基础知识清单-使用 Google Search Console 验证您的网站(2)

    使用 Google Search Console 验证您的网站 用于 SEO 的 Google Search Console 报告 谷歌搜索控制台是谷歌提供的一项免费服务,它让网站管理员可以访问许多工具和报告,以优化他们在谷歌搜索上的网站。 您可以使用 …

    2022年3月16日
    0206
  • 分析扁平化网站设计的优缺点。

    扁平化天津网站设计是指以抽象、简化的设计元素,摒弃多余的网站装饰,展示信息和事物的工作方式的设计风格。以下是一组文章,旨在探讨平面设计在网页设计中的优势,供您参考。初秋工匠的独创技术——白露白露特效分…

    2022年8月22日
    0119

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息