浅析网页设计中的霓虹色:用颜色吸引用户的注意力

颜色是网站设计中最强大的工具之一,尤其是在操纵阅读流程方面。除了某些亚洲和阿拉伯国家地区的文化习惯,通常标准阅读路径从左上角开始。人们从左到右移动眼睛,然后逐渐下移。这个原理无处不在,您也不例外。

浅析网页设计中的霓虹色:用颜色吸引用户的注意力

例如,您可以将标语设置为较大的字体,那么它将立即引起您的注意,改变原有的阅读路径。强迫人们改变其正常行为的另一种行之有效的方法是,使用与其他(设计)单元形成鲜明对比的颜色。经过时间的检验,不论环境和周围环境如何,霓虹色都是一种很好的选择。

霓虹色总是会引起人们的注意。这源于它的固有属性。同时,在今年我们可以看到大量针对千禧年而设计的网站,这些网站中充满了渐变色和年轻审美细节,它们变得非常流行。霓虹色完美地融入了这些充满活力的年轻领域,加入了这样的小趋势中。让我们来看一些代表案例。

Greenleaf Logistics

Greenleaf Logistics的首页提供了多种可以立即引起了用户的注意的方法。例如,所有图像都以一种不规则的色块来显示。在这种奇异的环境中,霓虹色表现得被大众审美所接受。

其标识、号召性用语和“启动”按钮设置为几乎让人尖叫的绿色。它们是引人注目的焦点,迫使读者在浏览时遵循设计团队建立的视觉路径。

浅析网页设计中的霓虹色:用颜色吸引用户的注意力

与前面的示例非常相似,这里的霓虹色效果几乎用于相同范围的UI元素。但是有一些细微的差异。

Flowhub

例如,Greenleaf Logistics背后的团队仅在标题中突出显示一个单词,而Flowhub则强调了整个标语。霓虹色作为阴影被使用,并且可以根据鼠标位置改变其角度。此外,霓虹绿不仅突出了内容中的文字,而且还突出了插图,图像和图标的重要细节。

浅析网页设计中的霓虹色:用颜色吸引用户的注意力

Herba Mojo

霓虹绿是一种普遍的色调,可以很好地配合浅色和深色主题。Herba Mojo在实践中是这样使用它的。

其中,发光的绿色用于各种细节:徽标,语言开关,滑块控件,CTA按钮甚至产品图像。但是,它并没有让人感觉过于突出。原因是,黑暗的环境在两者之间取得了良好的平衡,从而视觉效果显得非常自然。

浅析网页设计中的霓虹色:用颜色吸引用户的注意力

在前文中,我们已经提到过,霓虹绿可以像手套一样在不同类型的环境中使用。然而,使用的最佳剂量是多少呢?

Danilo Demarco

前面提到的所有项目均使用了非常有限的荧光色。通常情况下这些颜色大部分散布在整个页面上,看起来像明亮的水滴。但是,如果您说您想要大胆地使用它?没问题。请看一下Danilo Demarco的个人作品集。

在这里,氪石绿占据了界面的最大面积。但是,令人惊讶的是,它并没有让访客难以接受,也没有赶走他们地视线。它就是在界面中起到了作用。用户可以在UI的每个角落看到它。它丰富了大大小小的标题,悬停状态,鼠标光标,内容部分,块显示效果等。它统治了这个界面,而且不会引起抱怨。

浅析网页设计中的霓虹色:用颜色吸引用户的注意力

霓虹绿不是当今网络上唯一使用的一种霓虹色。霓虹色的范围还有一些出色的选择。让我们看一下其他奇妙的选择。

DesignGapp

DesignGapp选用艳丽的粉红色,并在蓝色渐变风格背景下显得非常好看。它巧妙地突出显示了CTA按钮,并与贯穿整个网站的充满活力的主题完美地结合在一起。

浅析网页设计中的霓虹色:用颜色吸引用户的注意力

Kostumn 1

紫红色注定要和时尚相关的网站一起使用。它使设计轻松自在地具有奢华感和精致感。即使与大字体一起使用,它也不会破坏整体的和谐感,并且看起来很有组织感。它丰富了产品名称的滑块和悬停状态中的标题。

浅析网页设计中的霓虹色:用颜色吸引用户的注意力

Critical Techworks

Critical Techworks采用了最具标志性的霓虹色调之一:丰富的绿松石色。在黑暗的技术环境中看起来很棒。从一开始,UI的所有细节都因这种颜色得魅力而显得丰富。

CTA按钮,文本,标题,图像元素以及车辆的各个部分都将从中受益。而且,还有另外一种深蓝色荧光色。它与绿松石完美搭配,增添了更多的设计感。

浅析网页设计中的霓虹色:用颜色吸引用户的注意力

Active Theory

Active Theory采用与前面的示例相同的使用方法。该网站还具有强大的令人陶醉的科技感。在这里,霓虹蓝与线条样式的排版协作。这两种颜色协作在一起就像一对甜蜜的夫妻。

那不是代表全部,还有其他一些荧光色调, 他们完美地完成了主题,使网站变得独一无二。

浅析网页设计中的霓虹色:用颜色吸引用户的注意力

Intelligent Artifacts

Intelligent Artifacts的首页充分利用了两种霓虹色:青绿色和紫色。同样,它们被用在一块几乎是黑色的画布上,这些画布展现出它们精致,黑暗的本质。

它们发出或强或弱的光,瞬间就引人注目。恰如其分,它们引起了人们对网站基本细节的更多关注,例如CTA按钮,徽标,导航栏甚至图像。

浅析网页设计中的霓虹色:用颜色吸引用户的注意力

Whoamama Design

Whoamama Design背后的团队已经围绕霓虹色建立了自己的整体美感。他们的作品中,霓虹色无处不在。该网站让人感到电子感,离奇而又奇特。就像来自迪斯科舞厅的强烈音浪一样。

有些人可能认为他们过度使用霓虹色了,而另一些人可能认为所有这些古怪的事情都相当有趣。总而言之,这种独特的古怪性和奇异性使UI在界面中脱颖而出,并引起人们对内容的关注。

在激烈的网络竞争中,您还需要做些什么?有时候,您需要表现得非同寻常,以使自己的声音能被听到。

浅析网页设计中的霓虹色:用颜色吸引用户的注意力

一种更加多彩的存在

霓虹色的主要优点之一是它们可以与深色或浅色主题完美配合,从而带来一定的魅力。与白色背景和明亮的环境一起使用时,它们会带来一种俏皮和异想天开的感觉。当与黑色背景和暗沉的色调搭配使用时,它们又给用户精致而繁复的感觉。

它们也完全适合不同类型的网站。无论是开发基于AI的产品的严肃公司,还是寻求志趣相投的用户的社区平台,霓虹色都会在其中找到自己的位置,并为用户体验做出贡献。

作者:Nately Birch

翻译:DomainX

审核:Maisie

原文:https://speckyboy.com/touch-of-neon/

业界动态

选择竞品,你真的选对了吗?

2019-12-13 9:01:39

业界动态

移动端设计规范:操作类

2019-12-13 9:58:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索