« 上一篇下一篇 »

网页设计中经常运用到的配色方法

虽然深底色风格可以带来视觉冲击力,但是很多设计师并不知道如何有效地表现他们,取得的效果往往适得其反。失败的设计导致可读性差,难以吸引用户,无法使用传统的设计元素等问题。所以在这里,将讨论一些深底色页面设计的要素,以便让你的下一次设计更受欢迎,更具创造性。

最新的调查表示,47%的受访者首选浅底色的设计,主要原因是基于可读性。大多数人不喜欢阅读深色背景上的亮色文字,那样眼睛容易疲劳从而导致不适的阅读体验。
相比之下,10%的受访者倾向于深底色的网站,另外36%的认为将取决于网站类型而定。

那什么是正确的答案呢?虽然每个人都有自己的观点,但既然有如此高比例的用户可以忍受深底色的页面设计,有时甚至是他们的首选。我们作为网页设计师必须了解如何为我们自己和客户创建更有效的深底色设计。同时我们必须相信深底色风格可以增加其可读性和友好性。

使用更多的空白
在这里或许我们应该称之为“空黑”。有效地利用空白,在任何设计中都是重要的,对于深底色风格而言更必不可少。深色的设计令人感到“沉重”,拥挤的布局会加重这种感受。看看一些流行的深底色设计,可以注意到他们运用了大量的空白。在Tictoc的设计中,精选内容及相关图片配合大片的空白共同构成。随着页面下移,我们可以发现空白越来越少,这样我们的注意力就会转移到缩展示的内容。其关键是:空白可以逐步引导用户到页面底部黑色背景增加了设计的纵深感。 网站非常依赖设计中的空白,配合黑色背景制造出来的创意效果,页面才如此吸引人。每个内容区块间的空白提供了足够的呼吸空间,在用户视线浏览到下一区块前,提供很好的休息点。大量的空白是深底色设计中必不可少的,它能够令布局简洁,突出重要的元素,令整体外观更优雅。

文字间距
由于可读性是深底色设计的头号问题,所以设计师应该更多地关注文本的设计。在整体设计中,改善可读性的一个途径是增加文本的段落间距,字距及行高。
下图中比较了在深底色和浅底色中不同文本间距造成的效果。另一种方式来改善网站的可读性的方式是增加字号。如同本文中提到的大部分规则,更大的字体意味这更多的空白。字母越大,字母的中间和四周就会出现更多空白。如下图中的”a“字,字号越大,除了四周的空白越大,字母“a ”字臂和字谷中的空白也更大。要注意,浅色背景上的小号文本比暗色背景上的更容易阅读。所以在设计新网站时,要使用一些虚拟文本来做测试,以确保文本的易读性,如果不行,尝试增加字号看是否有帮助。

文本的对比度
很多人都同意,深底色设计容易造成眼睛疲劳,过高或过低的对比度通常是罪魁祸首。 那如何找到完美的平衡点呢?
假设你在一个漆黑的房间里,突然有明亮的光线进入,你肯定会感到非常不适。但如果是在一个不太黑的屋子里,射入不那么亮的光线,则会好受得多。这同样适用于web设计。
寻找完美的对比度,意味着要找到背景暗度和文本亮度之间的平衡点。在深底色背景上,为文字寻找合适的亮度要困难得多。要找到完美的平衡点,必须要试验不同的配色。通常不使用纯黑或纯白能带来更好的效果。

« 上一篇下一篇 »