深色的网页设计要点


深色的网页设计要点


深色的设计令人感到“沉重”,拥挤的布局会加重这种感受 。深底色网页设计要点有哪些呢?看看一些流行的深底色设计,可以注意到他们运用了大量的空白 。在这里或许我们应该称之为“空黑” 。有效地利用空白,在任何设计中都是重要的,对于深底色风格而言更必不可少 。
首先,用户会第一眼看见的元素——logo,旁边有大量的空白 。然后用户会注意到主内容区和右侧的酒瓶 。如你所见,空白完美地反衬出了内容区的主标题和酒瓶上的文字 。
如何选用字体


字体在设计中扮演着重要的角色,在深底色整站网页设计中我们应该更谨慎地考虑字体的选用 。
无衬线字体可读性更强,但许多设计师仍然选用衬线字体来表现设计中优雅的部分 。其中的诀窍是仅在大字号文本上选用衬线字体,大字号的衬线字体会带来更多额外的空白,从而令每个字母都显得非常清晰 。
文字间距
由于可读性是深底色设计的头号问题,所以设计师应该更多地关注文本的设计 。在整体设计中,改善可读性的一个途径是增加文本的段落间距,字距及行高 。
另一种方式来改善网站的可读性的方式是增加字号 。如同本文中提到的大部分规则,更大的字体意味这更多的空白 。字母越大,字母的中间和四周就会出现更多空白 。如下图中的”a“字,字号越大,除了四周的空白越大,字母“a ”字臂和字谷中的空白也更大 。
要注意,浅色背景上的小号文本比暗色背景上的更容易阅读 。所以在设计新网站时,要使用一些虚拟文本来做测试,以确保文本的易读性,如果不行,尝试增加字号看是否有帮助 。
文本的对比度
很多人都同意,深底色网页设计容易造成眼睛疲劳,过高或过低的对比度通常是罪魁祸首 。那如何找到完美的平衡点呢?假设你在一个漆黑的房间里,突然有明亮的光线进入,你肯定会感到非常不适 。但如果是在一个不太黑的屋子里,射入不那么亮的光线,则会好受得多 。这同样适用于web设计 。
寻找完美的对比度,意味着要找到背景暗度和文本亮度之间的平衡点 。你可以注意到背景和文本的亮度都在梯次降低 。
在深底色背景上,为文字寻找合适的亮度要困难得多 。要找到完美的平衡点,必须要试验不同的配色 。通常不使用纯黑或纯白能带来更好的效果 。使用精简的配色方案
为了让深底色设计具有简洁明快的外观,设计者应该选用精简的配色方案 。坚持只使用一种或两种颜色 。如果要尝试更多的颜色,试试与背景色同色系的搭配 。当然,许多深底色的整站页面设计中拥有激动人心的配色方案 。你可以在使用正确技巧的情况下打破规则约束 。不过,一般状况下,过多的颜色容易让页面看起来脏乱,由于背景色已经让页面颜色很深,所以请谨慎使用颜色 。
提供切换模式
虽然我们已经掌握了很多技巧令深底色设计更具吸引力,但是我们还可以再做一点努力已满足更多的用户 。务必增加一个样式表,以便用户可以选择切换到效果为“浅色背景+深色文字”的另一版本 。
同时创建2个样式表可以保证这一点,一个用于默认的深底色风格,一个用于替换为浅底色 。
最适合使用深底色风格的设计类型
如前所述,很大一部分用户认为,深底色的页面设计可以适用于某些网站类型,但那份调查中并没有说清楚究竟是哪些类型 。一般而言,深底色风格适合用于创意型或优雅型的设计 。对于手绘风格的网站,深色背景可用于更好地体现个性与创意 。

推荐阅读