在现代网站设计中使用白色背景的6个技巧

设计师喜欢白色背景,而客户则认为应该是空白。使用白色背景似乎是创建简约网站的最简单方法之一,尽管设计师并不总是知道如何有效地使用它。



空白必须有目的。它应该与图像,文本,按钮和图标保持和谐。如果正确使用空白,则空白可能会成为您最好的朋友。让我们讨论一些提示和示例 网页设计中的白色背景

目录

321天使数字含义

白色的定义

设计师通常将白色视为色调,而不是颜色。打开任何设计编辑器时,您会看到一个空白页。它是白色的,表示没有任何东西。有些人可能将白色视为中性色,而其他人则将其定义为无色。

实际上,白色与配色方案中最暗的黑色形成对比。这就是为什么这两种颜色会产生强烈的对比度。通常,白色与清洁,完美,新颖,诚实和崭新的开端相关。

Web设计中白色背景的好处

您可以从白色的定义中受益,因为这种颜色还与网页设计中的极简主义有关。白色不仅可以清洁,而且可以具有阴影,例如蛋壳,奶油,象牙,香草,亚麻,贝壳等。一些设计师说纯白色对眼睛来说很刺眼。

白色背景可用于任何类型的网站,无论是投资组合,博客,在线商店还是 施工网站 。在网站上使用白色背景的主要好处是:

  1. 白色与黑色以及其他深色形成鲜明的对比。它可以帮助您将重点放在某些设计元素上,并使文本和标题易于阅读。
  2. 白人在大多数国家/地区都是中性的,因此您不必担心民族差异和传统。
  3. 白色背景感觉简约,不那么混乱。任何其他颜色都无法像白色那样为您提供足够的负空间。
  4. 白色背景完美适合平面和材料设计,至今仍是网络上最热门的趋势。

1.聪明地使用白色背景

空白也是设计元素周围的空白。该空间通常被认为是空的。请务必在页面上留出一些空白,以使您的设计元素更引人注目。具有白色背景的网站最受欢迎的示例之一是 苹果

苹果

白色有很多阴影-苹果网站使用略带粉红色的白色。这种白色阴影带来平静的露天感觉。同时,黑色背景的网站完全不同:它们传达了戏剧性和刺激性。

图片来源:Contractorgorilla

2.突出重点

白色背景可以帮助您将重点放在您希望人们注意到的元素上。例如,当您打开一个知名的 谷歌 页面上,您会在巨大的白色空间上看到明亮的彩色徽标。

谷歌

Google知道空白自然会吸引页面上明亮元素的注意力,最重要的是,页面中间的明亮元素。如您所见,白色背景是将访客的视线聚焦在某些事物上的最简单方法之一。通过在白色背景下包围重要消息,可以使用它来使您受益。

3.创造强烈的反差

所有明暗的颜色都会与白色背景形成强烈的对比。我们习惯于在白色背景上阅读黑色(或深灰色)文本,因为这两种颜色可产生高对比度,并使文本易于阅读。

碳美容

相同的规则适用于图像,图标和设计的其他元素。选择不是白色的照片,或者添加深色框以使其在白色背景上脱颖而出。

4.少即是多

空格的主要优点是简约或简单。白色背景与干净的平面网站设计最匹配。

整形

网站设计通常是方形的和几何的。这就是为什么所有设计元素都附加到网格的原因。当您创建带有白色背景的网站时,可以让某些元素落在网格之外并违反规则。这样,您将把重点放在设计的某些部分。

5.使图像脱颖而出

由于白色背景传达了极简主义,因此最好选择极简主义的图片。您的图像,插图和其他图形应与空白协调。

RGA

请记住,混乱的界面会使用户混淆太多信息。人们很快就会失去兴趣,因为他们看起来很复杂。您使用的空白越多,您对其他元素的重视就越多。

看看 体式的 使用白色背景:蓝色的“免费试用”按钮成为自然的热点。

朝体

6.它不应该是白色的

正如我们提到的,有许多白色阴影。这些提示都是关于引导访客的眼睛的。仅仅因为我们称其为“白色背景”,并不意味着它应该是白色的。使用可以与其他设计元素形成对比的任何颜色。

MailChimp

例如, MailChimp 使用带有黑色文字的黄色背景,这也会产生良好的对比度。此外,蓝色的“选择计划”按钮在黄色背景上引人注目。

白色背景网站的示例

您可以在下面找到最佳使用空白网站的最佳示例。

努阿比克斯

精英模式

天使编号 76

马西莫博尼尼

参考资料

威克雷特

一次应用

泰迪

感觉

计时银行

结论

我们希望这些技巧可以帮助您从新的角度看待网页设计中的白色背景。有效使用白色背景可以帮助引导用户正确地注视,增加销售量,并将重点放在重要的元素上。

和你的朋友分享: