风骚一点!在网页中玩转霓虹色的正确姿势 - 优设网 - UISDC

风骚一点!在网页中玩转霓虹色的正确姿势

2017/06/30 15268评论区

霓虹色真的是让人又爱又恨的一种设计元素啊。作为设计趋势,你会看到别人的设计中,霓虹色的运用是如此的帅气和炸裂,可是自己上手的时候,却一下子将逼格拉回到80年代,尴尬。现实世界中的霓虹灯所带来的效果本就参差不齐,在网页设计当中运用,稍不注意……就会整段垮掉。

这种局面让我忍不住去仔细审视那些成功的霓虹色运用案例,并且有了今天这篇零碎但是有用的文章。霓虹色是大胆而有自由的,同时它的特性也是有规律的。如果你希望霓虹色可以出现在你的设计当中,不妨读下去。

试试柠檬绿吧

“柠檬色是新的中性色。”

我听说过草木绿是新的中性色这种说法,但是我做婚庆的姐们儿信誓旦旦地告诉我其实应该是柠檬绿。她几乎将柠檬绿塞到任何一个配色方案里面,并且看起来还不错。

不过说道霓虹色,至少在这套色彩体系当中,柠檬绿确实是中性色。柠檬绿,或者说霓虹绿,在黑色的背景下所创造的效果非常醒目,它是为数不多可以让整个设计鲜活起来,又不需要大幅调整的设计技巧。

不要一次使用过多霓虹色!

虽然一些明亮的霓虹色可以协调地组成配色方案,但是霓虹色并不适合这么玩儿!大多数的霓虹色在饱和度上非常接近,在屏幕上看起来会很接近,当它们组合到一起的时候,对比度和可读性会大打折扣的。

大胆地用一种霓虹色做主导吧

将整个屏幕染成一种霓虹色,效果绝对炸裂。这种近乎霸道的使用手法,绝对具有视觉冲击力,你不用考虑配色方案中谁作主导这种问题,糊满就对了!

小心地把屏幕上其他的元素保持在最低限度,文字使用黑色,其他的东西能省则省。

白色背景不合适的!

霓虹色的惊艳源于黑夜所营造的深沉氛围,象征日光的白色背景怎么会合适呢?霓虹色的饱和度是如此的高,当它们在白色背景下,很难突出它们在饱和度上的特色。

品牌设计与霓虹色

有些品牌在设计LOGO的时候就采用了霓虹色,在进行相应的网页和广告设计的时候,就不应该避开这一元素。就像 Mountain Dew 一样,充分利用霓虹色的特点,大胆地投入到视觉设计中去。由于绝大多数的网页不会这样去用色,拥有霓虹色的网页无疑就可以通过这种差异,脱颖而出。

其他的特效就别加进来了!

霓虹色本身就足够引人瞩目了,再加入其他的特效,会让整个设计显得过于凌乱的。如果你在使用霓虹色的同时还加入了其他特效,很容易让设计显得过重,对用户产生压力的。

用霓虹色来提亮

将霓虹色加诸线条、按钮和标记上,能够起到明显的强调的作用。当你决定让某个元素吸引用户的注意力的时候,可以使用霓虹色来提亮。不过,要注意一点,高饱和的霓虹色需要搭配深色的背景,这样有对比度才能发挥它的特点。

霓虹色的文本是什么鬼

虽然霓虹色可以用来呈现各种各样的元素,但是并不适合用在大量的文本内容上!由于用户需要一定时间来专注阅读其中的内容,但是霓虹色所带来的炫光效果会对部分用户产生不适,而且会影响内容的可读性。

霓虹色的精髓在于……发光!

像霓虹灯一样,霓虹色的特点在于高饱和度的色彩和醒目的光线。在你的设计中使用霓虹色的时候,应该考虑参考显示中霓虹灯的特色融入其中,要让它“亮”起来!

想要造成这种拟真的效果,疯狂地模拟复杂灯光特效可能会过犹不及,简单的发光效果可能就够了。另外一种思路是模拟霓虹灯的脉冲光效,同样能带来逼真的体验。

撞色并不可取

霓虹色本身就是黑暗中的萤火虫,在整个设计中已经是视觉焦点了,如果再尝试使用其他色彩来吸引用户的注意力,会打乱整个设计。在一个配色方案中使用霓虹色,再加入一个其他的提亮色,不仅可能让人分心,而且可能会给人以错位感和陌生感。

还可以试试霓虹色的图片

霓虹色更多是作为设计中某些元素的提亮工具而存在,有些采用霓虹色的图片能让整个设计显得有趣。

但是,真正的霓虹色的元素,很难被镜头捕捉到,这也使得许多包含霓虹灯的图片,并不够优质。如果要使用,尽量使用简单、简约、对比强烈、空间感十足的带有霓虹色的图片,就像上面的Yoke 网站一样。

合理的情绪

霓虹色很有趣,很好玩,但它也是剑走偏锋的设计元素。很多霓虹色的图片、元素所传递的情绪是强烈而明显的,你的网站的内容和霓虹色所表达的情绪应该保持着一致,这也意味着霓虹色并不适合所有的网站。

试试自己混搭出霓虹色!

实际上,你是可以通过调整现有的色彩的亮度,来调整出你想要的霓虹色的。你可以有意识地创造符合品牌气质的霓虹色,也可以简单的混合、调整来创造出一些有趣的霓虹色。

霓虹色是有趣的,不要被你所创造的色彩局限住,多尝试,多调整。常见的霓虹色有霓虹绿,霓虹黄和霓虹粉,在这些颜色之间探索,在现实世界的霓虹灯里寻找灵感。

自然地探索

霓虹色应该是自然的,如果你是为了使用霓虹色而使用,有的时候并不一定能够达到效果。并且,值得一提的是,霓虹色并不一定符合每个人的品味,跟随趋势,但是自然的设计更重要。

在背景中试试!

霓虹色大胆,明亮,它会让你平淡的生活更加有趣。霓虹色的背景可以很好的提升屏幕上其他的元素的视觉体验,甚至能够创造一定的层次感。在背景中使用霓虹色,尤其要注意色彩的深度和亮度,会不会喧宾夺主。

结尾的话

霓虹色最早兴起于上世纪80年代,它随着摩登复古风和扁平化设计的流行而重新复苏,虽然它带有复古的属性,但是本质上是更加蛋大胆、醒目的现代风格设计。霓虹色很有意思,不过你的内容应该与之匹配,这样才会表里如一~

【聊聊配色这件小事吧】

  1. 《在配色这件事情上,总会有一些有趣且有用的小技巧》
  2. 《这5个色彩进阶技巧,能帮你创造更优质的网页用户体验》
  3. 《超实用!设计师自学手册之色彩搭配简易指南》
  4. 《超赞!让顶尖设计师告诉你10个色彩运用秘技》

原文地址:designshack
原文作者:CARRIE COUSINS
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/neon-colors-web-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里