科普8个简单实用的网页配色要点

所属分类: 平面设计 / 平面其它 阅读数: 1678
收藏 0 赞 0 分享
人们用自己的眼睛和头脑来感受色彩。这不仅仅是物理层面上的,而且包含着精神和情感层面。当我们看色彩时常常想起以前与该色相联系的感受或事物,这种因某种色彩而出现的感受,我们就称之为色彩的联想。色彩的联想是通过过去的经验,记忆或知识而取得的。

选择和品牌一致的颜色、导航菜单栏用对比色、不要同时用大量红色和绿色…… 今天@喪心病狂十六夜貓 这篇好文,科普了8个简单实用的网页配色要点,一起来收!

喜好不同,有人喜欢单色也有人喜欢鲜艳的配色,解决的方法也随着喜好变化,在挑选颜色时要进行深刻的检讨,并不是因为颜色看起来很棒所以选它、而是要在设计的战略性上考虑,约束自己的个人情感。

这个笔记,主要讲述的是网页制作的配色选择的八个要点。

01. 决定品牌形象

在很多建设网站的理由中,传递出特定的感情这一信息是很常见的。所以在这时,选择好颜色就显得尤为重要。你想传递出什么样的感情,不用通过阅读内容,用户都能很好的理解。

在以生态为基础的公司的网站上,配色的灵感就来自于自然;如果是以销售玩具为主的公司、就需要选择有趣,鲜艳的配色。每一个被使用的颜色,在它背后所包含的意义是十分重要的。

你可以通过这个系列的好文了解色彩的情绪:

红色篇:《设计师的读书笔记!带你重新全面认识色彩系列之红色篇》橙色篇:《深入浅出学配色!带你重新全面认识色彩系列之橙色篇》黄色篇:《深入浅出学配色!带你重新全面认识色彩系列之黄色篇》绿色篇:《深入浅出学配色!带你重新全面认识色彩系列之绿色篇》蓝色篇:《深入浅出学配色!带你重新全面认识色彩系列之蓝色篇》紫色篇:《深入浅出学配色!带你重新全面认识色彩系列之紫色篇》

在品牌推广时使用的颜色要和公司LOGO设计的颜色要是相同的,这一点非常重要。对于网页设计师来说,在线销售的销售额增加,让人联想到什么样的传统或者概念,如何利用有效果的照片都是值得思考的一件事情。

虽然有很多种方法可以让用户在网页上进行购买时也能获得和在实体店一样的感觉,但网站的运营者则需要让网页设计师也注意到这一点,革新的新型网页也同样,或者说可以获得在这之上的购物体验。

最终的目标、就是给用户提供舒适的感觉。因此,在更新最新信息的时候,一定要注意要具有统一的品牌意识。

02. 决定你要传递的信息

给消息使用华美的颜色,或者让它变得特别有吸引力,在单独比较的时候又有独特的魅力,给用户提供这样有趣的体验。如果你已经知道你面向的是那些用户、考虑它们的喜好就不是很难、这也算是一个非常好的消息了。

03. 直观的导航菜单栏

当你看到一个网站的时候,或许你会有很多很棒的点子,但你也需要遵守导航菜单的一些规则。用户是一个接一个、按照顺序直观的去观看的,除去基本的动作之外,要防止出现让用户感到迷惑的动作。

想引导用户到达特定的区域,有好几种视觉效果可供选择,用配色方案来凸显出对比效果就是典型的方法。利用对角线上的布局,被称为对角线平衡(英: Diangonal Balance)、它特别惯用于从上到下的布局、我们可以在右上角的基本设定菜单中找到它,这在欧洲和美国的网页中经常用到的技术。

利用相反的配色,让每个选项的层次感凸显出来,用户在这些项目中就知道可以点击什么。

04. 决定什么是重点

用户可不知道,你有什么重要的情报和消息。在这种情况下你就需要在屏幕的中间,使用鲜艳的颜色来告诉它们。这么做的话,用户就会尝试着优先去看这一部分。

为了让用户去关注它们,也有用白色背景上使用黑色文字这样布局的网站。为了打破单调的外观,如果你利用了强调色,那将变得非常简单。也有这样的原因,为了表现出文本和超链接、使用非常鲜艳的颜色,这也是现在非常流行的设计趋势。

05. 考虑信息的重要性

在网站中、我们希望将【注册】或者【购买】这样的要素突出。而类似【取消】这样的按钮则希望用户尽可能的不去注意到它,因为它们并不是主要的要素、用一些通常的设置来控制它们就可以了。

我们可以用字体很小的文字或者和照片颜色相接近的自然的配色来设计按钮,从而让用户不去注意【取消】。如果将原本在右上角的【注册】按钮放在屏幕的正中间,那它所达成的效果也自不必说。通过调整按钮的大小,以及明确的写出它们的做用,用户就能很准确的理解你所表达的意思。

同时,为了突出主要要素按钮,你需要去注意它们的大小和颜色的对比,这样可以防止用户忘记按下按钮。

06.考虑图片的颜色。

为了给用户界面提供更加亦可赛艇的体验,你也可以将配色同图片相结合。从填满整个屏幕的背景图、到你想出售的的产品的缩略图、将它们考虑到构图之中,将用户的视线集中起来。(例图的配色和那些OX□Δ让我差点将它当成了PS4的宣传网页)

事实上,更加专业、精致大气的网站上,红色和绿色还有蓝色最好不要使用。由单色制作出来的网站,信息的传递往往会更好,这也作为一个特殊的效果,被很多网页设计师所采用。

07. 限制使用颜色的数量

如你所见、有些用户的眼睛是弱视的,而有些则是什么颜色都看不见的。而大多数情况下,色盲中红绿色盲居多,如果你的设计作品中运用了大量的红色和绿色,就会让它们感到混乱。

从这个设计师可以看出、在这个界面设计中它是以大量的红色作为主要要素,这样就可以避免红色和绿色难以区分这一问题。

08. 决定什么是最重要的

例如代表国家或者宗教的符号,颜色所代表的意思,因为各地的文化不同而不同。作为设计师,首先应该了解自己所面向的用户是那一类、在考虑配色的时候,应当要考虑到这些问题,从而确保传达出的意思不会被误解。

有时、颜色的意思相近(在中国红色代表幸运(英: Luck),在美国则代表了爱(英: Love))就显得不是那么重要,但像白色或者黑色这样因为宗教的原因而导致的意思不同,就会将你的设计从整体上破坏,这一点请务必注意。

最后

正如我们这次所看到的、理解配色的意思是十分重要的。不管是创建一个直观的界面、还是将它利用在品牌上,您都可以准确的传达出它的意思。正确的利用颜色,就好像魔法一般,将你的设计准确的反映出来。

如果想要了解颜色的意思,则需要长时间的学习,当然这也会更好的让用户了解到你的设计作品中所包含的趣味。

更多精彩内容其他人还在看

年后求职必备!UI设计新人常见的7个简历制作要点

当你的简历写完以后,是不是能够在十秒钟内看完所有你认为重要的内容呢?就业专家认为,一般情况下,简历的长度以A4纸1页为限,简历越长,被认真阅读的可能性越小,下面小编就为大家介绍UI设计新人常见的7个简历制作要点,来看看吧
收藏 0 赞 0 分享

如何运用基础的色彩三要素?

说到色彩,优设一直在跟上潮流,比如2017年的潘通流行色,刚发布不久,优设就有了相关的介绍和运用方法,今天我教你如何运用基础的色彩三要素,有需要的朋友可以参考本文,来看看吧
收藏 0 赞 0 分享

真正的新用户引导应该怎么设计呢?

新用户引导(Onboarding)这个词本是人力资源领域的术语,不过现在已经被UI/UX领域借用过来,指的是帮助刚刚注册网站/APP的新用户熟悉产品到流畅使用的引导流程,今天的文章,我们来聊聊新用户引导的设计
收藏 0 赞 0 分享

学习方法和思维方式解析如何快速提升设计

做设计这个行业拥有天赋的人很少,大多都是通过有效的学习手段进行提升,盲目学习是不行的,这里就是要提到一个人是否有正确的学习方法了,有的人进步很快,有些人很慢。这里我分享一些自己的学习方法和经验,希望对你们有用
收藏 0 赞 0 分享

设计师容易忽视或处理不好的七大设计细节

我在刚刚做设计的头三年经常会犯各种各样的错误,有些错误现在稍不注意还是有可能会犯。下面小编就为大家介绍设计师容易忽视或处理不好的七大设计细节,来看看吧
收藏 0 赞 0 分享

平面设计师在面试期间的技巧全揭秘

对于设计师而言,作品就是最好的嘴巴!它会在你面试的时候去帮你诉说你的想法你的设计思路,还有你的设计风格!下面小编就为大家揭秘平面设计师在面试期间的技巧,一起来看看吧
收藏 0 赞 0 分享

如何设计一款字体标志?字体标识制作一些经验和见解

在标志设计中文字与图形元素总是紧密配合,只有恰当的字体与图形搭配时才能发挥最大的视觉效果。那么如何设计一款字体标志?下面小编就为大家分享字体标识制作过程中的一些经验和见解,来看看吧
收藏 0 赞 0 分享

3分钟出成品 零基础字体设计过程解析

今天小编为大家分享一个很不错的教程,只需3分钟即可出成品,即使是零基础,也能学会。推荐到脚本之家,有需要的朋友可以参考本文,来看看吧
收藏 0 赞 0 分享

实用:易拉宝设计的流程和思路

今天为大家分享易拉宝设计流程,教程真的很实用,介绍地很详细,非常值得大家学习,推荐到脚本之家,感兴趣的朋友可以参考本文,希望能从文中得到一些启发
收藏 0 赞 0 分享

字体性格:字型通过哪些变化影响到人的视觉感官

这篇教程是向脚本之家的朋友分享字型通过哪些变化影响到人的视觉感官教程,教程很实用,主要是向大家介绍字型基本气质,来看看吧
收藏 0 赞 0 分享
查看更多