网站建设和App设计及开发应该避免的颜色或颜色组合
网络为我们的网站建设工作提供了各种各样的颜色选择。对于迅速抓住用户注意力来说,颜色是一个极好的工具,它能够为视觉提供兴趣点和制造影响,并通过创造对比度来增强页面信息的可读性。颜色也是许多设计趋势的中心,包括平面和材料风格。
想想,你是否曾有用错颜色的时候?有什么色调或色彩组合,你应该在网站设计之初就应该避开?一句话...有的!今天我们看看在网站建设和App设计及开发时应该避免的颜色或颜色组合。如果你已经犯了其中一个错误,我们也会提供其他建议。
1.霓虹灯效果(霓虹色)
霓虹色也许能创造更有趣、扭曲的个性元素,它可以在网页设计的色彩应用中添加很多的流行色或元素。 不幸的是,对于用户的眼睛来说,这简直就是一场“灾难”,这种颜色应用会给用户一种“泪流满面”的感觉,因为所有的一切都在伤害他们的视觉。
霓虹色的主要问题在于,它们太亮导致不容易阅读,并导致配对的背景往往不是太暗就是太浅的问题。当与文本一起使用时,霓虹色目前的可读性问题主要在于背景,因为文字几乎渗入到背景之中无法辨识。霓虹色需要搭配的背景通常过于抢眼,分散了设计中的主要信息。
尝试这样做:从霓虹色的颜色中去除一些亮度,使它们在屏幕上有一个更暗,更微妙的外观。
Orange You Glad网站在很多部分“几乎”将霓虹色融入到他们主页的设计中。这种主题的共同点在于,他们将霓虹色用于较小的元素并使用微妙的颜色变化,使粉红色,黄色和绿色这些更容易被视觉接受的色系。
2.“振动”色
当在网页设计中将高饱和度的颜色配对时,它们会产生一种“振动效应”,其中颜色似乎在模糊或发光的运动中游移。事实上,你不想这样做。
这种振动对于用户来说是令人不安的,正如颜色理论家约瑟夫·阿尔伯斯在他的经典指南“颜色的相互作用”中所概述的:“这种最初令人兴奋的效果同时也会让人感觉到侵略性,长时间看着它们甚至会使我们的眼睛感觉不舒服。人们发现它很少被使用,除了在广告中为了创造出惊艳的效果,但是结果却令人不快,厌恶以及极力想去避免的。”
当你在进行网站建设工作的时候,你几乎可以预测什么颜色在你将他们搭配在一起时会产生“震动效果”。
· 使用的颜色都是高饱和度的;
· 色轮上的互补色;
· 在色轮上间隔180度的颜色;
· 将颜色转换为灰度,导致对比度异常小。
对于这种搭配,一个典型的例子就是将明亮的红和绿搭配在一起。流行的“圣诞节”组合是最大(最广泛使用)的“罪魁祸首”。这些组合还存在可区分性问题,因为它们对于具有色盲的人来说是不可辨识的。
尝试这样做:如果你实在必须使用“振动”颜色来组合的话,请使用他们的中间色(最好是中性色)来过度他们。
3.在亮色中叠加另外的亮色
这是常见的配色错误之一。也许是因为你可以在后面的工作中用打印项目来完成它,也许是因为某些屏幕设置,使其可行,但浅色的光色组合最终的结果是你很难将他们区分开。
每一次这种尝试带来的结果都是是阅读变得异常困难。
这个案发现场似乎在这里:我们在banner的设计中经常配对图像和白色文本,但文本却落在图像的一个亮色的部分。在这一点上,这些词是难以被辨识和读取的。它发生的方式比它应该更频繁。如果每个字母都不清楚导致无法读取,你需要重新思考怎么去调整它。
尝试这样做:幸运的是,这个问题很容易修复:
· 选择具有一致颜色背景的新图片。
· 在有大量颜色变化的图像顶部于文本使用彩色框。
· 考虑全色图像叠加以增加背景和文本元素之间的对比度。
4.任何各种各样色彩的随意叠加
虽然这几乎不用多说什么,五颜六色的网站是没有任何实际作用的。(试想一下你打破了多少颜色理论规则当你构思一个五颜六色的网站的时候。)
各种各样的颜色组合具有压倒性和强大的吸引力。或许他们可能在最初会抓住用户的注意,但是一旦用户意识到内容无法辨识,他们将会毫不犹豫的选择离开。
尝试这样做:如果要使用宽范围的调色板(如趋势一样),那么考虑选择颜色色块或卡片样式,其中颜色可以与元素相关联。这种容器式的设计将允许更多的颜色灵活使用,同时创造一种组织和流动的感觉。
5.明配明,暗配暗
就像在亮色中叠加另外的亮色以及将类似的高饱和度的颜色组合在一起将会导致的问题一样。这种形式应该是不言而喻的,单纯的只要避免它们。
如果你认为这不会发生在你身上,当你使用单调配色方案时就要小心。许多设计师就是在这里“一失足成千古恨”的。
尝试这样做:相比之下。如果要使用多种明亮的颜色或深色,请将它们视为滚动网站中的屏幕选项。在这种情况下你可以使用所有你喜欢的黑暗或明亮的颜色,但仍能保持文本的可读性和可用性。(瞧,双赢!)
6.“K”黑(纯黑)
特别是如果你频繁地在打印和web项目之间切换(正如许多设计师所做的)纯黑可能会因为失误而进入web项目。总所周知,“K”黑存在于打印项目中,因为它在数字项目中只使用一块板或“纯”黑色(#000000),这种颜色只是平的。
想想现实,所有黑色的组合实际上都被作用在他上面的其他色调给过滤了才使它呈现了丰富性。(即使乌鸦的羽毛在合适的光线下看起来常常带着蓝色或偏紫色。)你可以使用包括其他颜色的黑色组合来创造丰富,深色的颜色,并保存纯黑色用于打印。
尝试这样做:尝试根据你的品牌匹配黑色的同时加入一些其他的提示颜色,或添加正确的颜色内涵。当你将黑色调亮为灰色的程度越深,辅助颜色就越容易被看到。试着考虑黑色与周围的颜色一致,考虑每个的辅助色和它们如何相互关联。(例如,使用带有更多蓝色色调的黑色来抵消文本或其他元素的橙色或黄色色调。)例如,上面的Wonderland的颜色是#0a0a0b。
总结
上文提到的应该尽力避免的这些颜色和组合最大原因是他们缺乏可读性和对比度。实际上,我们还是有很多颜色可以选择,几乎任何色调都可以杂适当的条件下发挥他们的作用。
但有一个要点:在你实际网页设计工作中,你可能不得不使你所用的颜色比你预期的偏暗或偏轻,才能更好的和你的设计更好的协调。记住,颜色都是来自周围环境的属性(包括屏幕上的背光),必须进行相应的调整。
相关文章
各类商务印刷品的尺寸怎么选? 印刷设计常用的尺寸纸张/克重都在这里了
日常经常印刷各种东西,哪些尺寸,纸张更合适呢?本文为大家整理了常用印刷尺寸,方便图文广告店、印企在日常接单生产中能够快速掌握客户关键性信息,详细请看下文介绍2024-02-10- 现如今,证件照已成为我们生活中不可或缺的一部分,无论是求职应聘,还是入学注册,亦或是办理各种证件,都需要提交符合规定格式和要求的证件照,那么,这些证件照的尺寸和2024-02-10
- 平面设计是一个注重视觉效果的设计,简单的排版方式有时候不能满足视觉突出的效果,业务很难达到吸引用户的眼球,下面我们就来看看8个平面设计技巧分享2023-10-08
- 每个设计师都有自己最喜欢的设计软件,并把软件作为自己的第二语言,今天我们来推荐10款UI设计不可或缺的工具,详细请看下文介绍2023-10-08
- 夏日电影风怎么调色调色?夏天快到了,想要调节夏季电影风的画面,该怎么操作呢?下面我们就来看看适合夏季的柔和绿色调调色分享2023-04-02
什么是真RAW 什么是伪RAW? 简单说说真 RAW 和 伪RAW
随着索尼α7RV(ILCE-7RM5)正式发售,近期有不少网友跟我咨询索尼相机“无损压缩(M)”和“无损压缩(S)”RAW的问题,今天做一个统一答复2022-12-24- 手机UI设计尺寸有哪些?作为新手在设计手机ui的页面的时候,发现自己设计的尺寸都很奇怪,如果能有元素尺寸介绍就好了,下面就来看看我们汇总的超全面的UI元素尺寸设置指南2021-08-06
- 常用照片尺寸有哪几个?我们经常说一寸照片,二寸照片,这些照片的尺寸是怎么计算的?下面我们就来看看照片标准尺寸/像素对照表汇总2021-08-06
怎么让设计更高级? 一些不受关注的小细节设计提升作品高级感的技巧
怎么让设计更高级?都一样是做设计的,一样的素材一样的文案,为什么有的设计很高级,有的很拉胯呢?在素材一样的大前提下,细节就能决定成败,下面我们就来分享一些不受关2021-08-05- 新人如何快速掌握黄金分割构图法?看到结构漂亮的图片,很多朋友都能想到黄金分割,即使不熟悉的朋友也知道黄金分割构图,什么是黄金分割构图?怎么掌握这个知识点呢?下面2021-08-05
最新评论