浅析深底色的网页设计

深底色风格的网页规划很受欢迎，它可以创造出别致典雅，极富创造力的效果。

深底色网页规划适用于许多网站类型，但并非全部。这种风格应该在恰当的条件下运用。

虽然深底色风格可以带来视觉冲击力，可是许多网页规划师并不知道怎么有用地表现他们，获得的效果往往拔苗助长。失利的规划会导致可读性差，难以吸引用户，无法运用传统的规划元素等问题。

所以在这里，我们将评论一些深底色网页规划的要素，以便让你的下一次规划更受欢迎，更具创造性。

查询表明，47%的受访者浅底色的规划，首要原因是根据可读性。大多数人不喜欢阅览深色布景上的亮色文字，那样眼睛简略疲惫然后导致不适的阅览领会。

相比之下，10%的受访者倾向于深底色的网站，另外36%的认为将取决于网站类型而定。

那什么是正确的答案呢？虽然每个人都有自己的观念，我们作为网页规划师有必要了解怎么为我们自己和客户创建更有用的深底色规划。一起我们有必要信任深底色风格可以增加其可读性和友好性。

运用更多的空白

在这里或许我们应该称之为“空黑”。

有用地运用空白，在任何网页规划中都是重要的，关于深底色风格而言更必不可少。

深色的规划令人感到“沉重”，拥堵的布局会加重这种感触。 看看一些流行的深底色规划，可以注意到他们运用了许多的空白。

网站 Black Estate 陈列了互联网上优异的深底色网页规划，它本身也是一个值得关注的超卓的网页。 其规划中运用了许多的空白，还有独到之处：有用地在某些重要元素周围运用空白。

首要，用户会一眼看见的元素是logo，周围有许多的空白。 然后用户会注意到主内容区和右侧的酒瓶。 如你所见，空白完美地反衬出了内容区的主标题和酒瓶上的文字。

在Tictoc的规划中，精选内容及相关图片合作大片的空白一起构成。随着页面下移，我们可以发现空白越来越少，这样我们的注意力就会转移到缩展示的内容。

其关键是：空白可以逐步引导用户到页面底部

黑色布景增加了网页规划的纵深感。 网站非常依靠规划中的空白，合作黑色布景制造出来的构思效果，页面才如此吸引人。

网站 Mark Dearman的布局中应用了许多对称散布的空白。

每个内容区块间的空白供应了满足的呼吸空间，在用户视线阅览到下一区块前，供应很好的休憩点。许多的空白是深底色规划中必不可少的，它可以令布局简练，突出重要的元素，令整体外观更典雅。

文字间隔

因为可读性是深底色规划的头号问题，所以网页规划师应该更多地关注文本的规划。在整体规划中，改善可读性的一个途径是增加文本的段落间隔，字距及行高。

下图中比较了在深底色和浅底色中不同文本间隔构成的效果。

另一种改善网站可读性的方法是增加字号。 如同本文中说到的大部分规矩，更大的字体意味着更多的空白。字母越大，字母的中心和四周就会出现更多空白。如下图中的”a“字，字号越大，除了四周的空白越大，字母“a ”字臂和字谷中的空白也更大。

要注意，淡色布景上的小号文本比暗色布景上的更简略阅览。 所以在规划新网站时，要运用一些虚拟文原本做检验，以保证文本的易读性，假设不行，检验增加字号看是否有协助

文本的比照度

许多人都赞同，深底色规划简略构成眼睛疲惫，过高或过低的比照度一般是罪魁祸首。 那怎么找到完美的平衡点呢？

假定你在一个乌黑的房间里，遽然有明亮的光线进入，你肯定会感到非常不适。 但假设是在一个不太黑的屋子里，射入不那么亮的光线，则会舒适得多。 这相同适用于网页规划。

寻找完美的比照度，意味着要找到布景暗度和文本亮度之间的平衡点。

下图中简略地说清楚布景和文本之间的比照状况。 你可以注意到布景和文本的亮度都在梯次下降。

在深底色布景上，为文字寻找适宜的亮度要困难得多。要找到完美的平衡点，有必要要试验不同的配色。 一般不运用纯黑或纯白能带来更好的效果。

怎么选用字体

字体在网页规划中扮演着重要的人物，在深底色规划中我们应该更慎重地考虑字体的选用。下图中演示了在深色布景中14号无衬线字体和衬线字体的显现效果。

（译注：衬线：例如右边Serif的“S”字母曲线两头的小笔画，那就是衬线。中文中的衬线字体是宋体，无衬线字体是黑体。衬线字体除了有笔画顶端的装修笔画，线条有明显的粗细改动。而无衬线字体往往笔画是粗细是一致的，或改动非常不明显。)

无衬线字体可读性更强， 但许多网页规划师依然选用衬线字体来表现规划中典雅的部分。其间的诀窍是仅在大字号文本上选用衬线字体，大字号的衬线字领会带来更多额定的空白，然后令每个字母都显得非常清楚。

下图的案例中， 衬线字体和无衬线字体的运用构成了美丽的分配。

在大字号的文本（如标题，导航和页面头部）上运用衬线字体，可令规划倍增典雅。在正文部分运用了简练的无衬线字体，又提高可读性和比照度。

运用精简的配色计划

为了让深底色规划具有简练明快的外观，规划者应该选用精简的配色计划。

从下面的几个案例中，我们可以看出，炫目的配色计划在深底色规划中并不适用，因为比照太激烈了。

坚持只运用一种或两种颜色

假设要检验更多的颜色，试试与布风光同色系的分配。

当然，许多深底色的网页规划中具有激动人心的配色计划。 你可以在运用正确技巧的情况下打破规矩约束。

不过，一般状况下，过多的颜色简略让页面看起来凌乱， 因为布风光现已让页面颜色很深，所以请慎重运用颜色。

供应切换形式

虽然我们现已掌握了许多技巧令深底色规划更具吸引力，可是我们还可以再做一点尽力已满足更多的用户。

必须增加一个样式表，以便用户可以挑选切换到效果为“淡色布景+深色文字”的另一版别。

一起创建2个样式表可以保证这一点，一个用于默许的深底色风格，一个用于替换为浅底色。

网站SitePoint上有不错的教程讲到了这一点 : Build a Simple Style Switcher in CSS.《怎么运用css创建风格简练的界面切换功用》。 在这里仅需创建深色和淡色两份样式表，而无需其它颜色（如橙色、蓝色、白色）的界面皮肤。

最适宜运用深底色风格的规划类型

如前所述，很大一部分用户认为，深底色的页面规划可以适用于某些网站类型，但那份查询中并没有说清楚究竟是哪些类型。

一般来说，深底色风格适宜用于构思型或典雅型的规划，比如：关于摩登时尚网站，深布风光可以显得别致典雅。关于手绘风格的网站，深色布景可用于更好地表现特性与构思。