颜色不仅影响网站的外观,而且影响它的有效性。这意味着,网站人均浏览时长,访问者的回头率,甚至网站转化都取决于颜色方案的选择。此外,考虑到现代技术的可视化,色彩扮演了互联网上的主要角色之一。当你开始自己的网站,你不应该忘记这个规则。
然而,我们中的一些人很难找到一件和牛仔裤颜色相配的T恤,所以并不是所有人能够完全清楚如何为你的网站选择合适的配色方案。但不要放弃,因为我们有色彩的理论。通过深入研究色彩理论的基本知识,你将能够创造美丽和有效的颜色组合。所有有经验的网页设计师都依赖于理论,这意味着你也可以做到这一点!让我们来谈谈它的主要原则,你会发现一切都比看起来容易得多。
工作工具色相环是色彩理论的基本要素。设计师应该没有哪个不认识它吧?
色相环是您的主要工作工具,清晰地演示了如何创建和组合颜色。所有的颜色被分为三个基本色-红色,蓝色和黄色,可以用来创建额外的颜色,如绿色,橙色和紫色。
然而,色相环并不总是由六个部分组成,他们可以包括十二个或更多的变化。在这种情况下,六种颜色被作为主和副颜色进行添加混合。比如黄绿色、绿蓝色、蓝紫色、紫红色、桔红色和橙黄色。因此色相环包含24个部分,甚至更多的额外色调。
冷暖色所有色相环都可以分成两半。其中一半为暖色,如黄色,橙色和红色(大多色相环的棕色也属于暖色调色板)。另一半是冷色,如蓝色,绿色,紫色和灰色。可能在这里会有人问:“哪种颜色更好–温暖还是凉爽?”答案是显而易见的——没有“更好”的颜色。你的选择应该取决于你要达到的效果以及与某一特定感觉或想法的关联。暖色被认为是愉快的,友好的和刺激的;冷色在大多数情况下是平静和放松的。
因此,颜色的选择取决于你的公司风格,需要和你想创造的氛围。如果你不是很理解,不妨自己进行实验,你可以混合暖色和冷色可能会这样做),来看一下效果。但关于色彩混合,我们在后面会详细地讲解。
混色的基本知识根据颜色在色相环中的位置,有几种配色方案案。让我们先从最简单的一个开始,然后转向更复杂的方案:
1.Complementary color scheme互补配色方案互补配色方案——你可以结合位置彼此相对的两个对比色。例如,你可以使用红色和绿色,或黄色和紫色。如果要得到一个更优雅的组合,建议添加中性附加色调-米色,浅棕色,浅灰色,黑色或白色,这些都可以是背景颜色。
2.Analogous color scheme近似色配色方案近似色配色方案——一般地选取三个在色相环上位置相近的三个颜色。举例:橙色,橙黄色和黄色;或者紫色,蓝紫色和蓝色。所有这些颜色都会很好地结合在一起,因为它们在色相环有着“邻居”的关系。
3.Color triad三角对立配色方案说到这个方案,有必要提醒你一些基本的几何规则。也不是什么深奥的东西,其实没有什么复杂的:你从色环中选取任何彼此等距三种颜色。如果你用线将它们连接起来,你会得到一个等边三角形。可能的组合是:黄绿色,橙红色和紫蓝色;黄橙,红紫和蓝绿色。这是一个非常丰富的对比方案,所以你需要找到一个平衡点,选择一种颜色作为主要颜色,然后再选择另外两种颜色。
4.Split-complementary color scheme分散互补色系配色方案在这个方案中,你选择一种颜色作为主要颜色,并将其与其他两种颜色相结合,即颜色轮上的补色。这个方案,如果你把选中的颜色和线条连接起来,你会得到一个等腰三角形。可能的选择是:红,黄绿色和蓝绿色,或紫色,黄色,橙色和黄绿色。这是一个不同的方案,它比上面第一个互补方案的张力小。
5.Rectangle color scheme矩形配色方案这里你需要选择两对互补色。如果你用线连接它们,你会得到一个矩形。例子:黄橙,黄绿色,蓝紫色和红紫色。这个方案是不同寻常的组合,是创意网站配色的完美选择。不过,如果你担心创建一个混乱的颜色,你可以选择一种颜色作为基础,然后用其他三种颜色来作为补充强调。
6.Monochromatic color scheme单色调配色方案从这个名字可以清楚地知道,这个方案结合了近似色。你既可以混合深色和浅色,也可以只选择深色或浅色。
从理论到实践好了,现在你大概了解了主要的配色方案,了解它们的优缺点。让我们看看如何在实践中使用这些知识。这里是一些 TemplateMonster 使用不同的配色方案创造优质的 WordPress 主题。这些都是很好的例子,也是灵感的源泉。如果你仔细阅读上面理论,试试猜一下每一个网站都使用了哪些颜色方案,可以在评论中与大家一起分享。
除此之外,中国设计之窗的设计欣赏频道也分享了全球许多优秀的网站设计案例。
Houston Business WordPress TemplateDetails| Demo
Bright Print Shop WordPress DesignDetails| Demo
Fast Cleaning Service WordPress ThemeDetails| Demo
Bellaina – Realtor Services WordPress TemplateDetails| Demo
Sweet Cakes and Bakery WordPress ThemeDetails| Demo
Wine Store WooCommerce ThemeDetails| Demo
Fashionable Apparel WooCommerce WebsiteDetails| Demo
Sketchfield – Web Design WordPress SiteDetails| Demo
SEO Agency WordPress ThemeDetails| Demo
Elegant Photography WP DesignDetails| Demo
WordPress Theme for Professional DesignerDetails| Demo
Reliable Financial Company WordPress ThemeDetails| Demo
Bright and Fashionable WordPress TemplateDetails| Demo
Vegetarian Restaurant WordPress ThemeDetails| Demo
Best Event Planner WordPress DesignDetails|Demo