高端定制,品牌设计

指南针2005 - 2016作品集

指南针网络科技有限公司

如何做深底色风格页面设计(一)

13-06-03 11:19:53 · 网页设计 ·

善网站的可读性的方式是增加字号。 如同本文中提到的大部分规则,更大的字体意味这更多的空白。 字母越大,字母的中间和四周就会出现更多空白。如下图中的”a“字,字号越大,除了四周的空白越大,字母“a ”字臂和字谷中的空白也更大。

  要注意,浅色背景上的小号文本比暗色背景上的更容易阅读。 所以在设计新网站时,要使用一些虚拟文本来做测试,以确保文本的易读性, 如果不行,尝试增加字号看是否有帮助

  四、如何选用字体

  字体在设计中扮演着重要的角色,在深底色设计中我们应该更谨慎地考虑字体的选用。 下图中示范了在深色背景中14号无衬线字体和衬线字体的显示效果。

  (译注:衬线:例如右边Serif的“S”字母曲线两端的小笔画,那就是衬线。中文中的衬线字体是宋体,无衬线字体是黑体。衬线字体除了有笔画顶端的装饰笔画,线条有明显的粗细变化。而无衬线字体往往笔画是粗细是一致的,或变化非常不明显。)

  无衬线字体可读性更强, 但许多设计师仍然选用衬线字体来表现设计中优雅的部分。其中的诀窍是仅在大字号文本上选用衬线字体,大字号的衬线字体会带来更多额外的空白,从而令每个字母都显得非常清晰。

  下图的案例中, 衬线字体和无衬线字体的使用形成了优美的搭配。

  在大字号的文本(如标题,导航和页面头部)上使用衬线字体,可令设计倍增优雅。 在正文部分使用了简洁的无衬线字体,又提高可读性和对比度。

  无、文本的对比度

  很多人都同意,深底色设计容易造成眼睛疲劳,过高或过低的对比度通常是罪魁祸首。 那如何找到完美的平衡点呢?

  假设你在一个漆黑的房间里,突然有明亮的光线进入,你肯定会感到非常不适。 但如果是在一个不太黑的屋子里,射入不那么亮的光线,则会好受得多。 这同样适用于web设计。

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

  下图中简略地说明了背景和文本之间的对比状况。 你可以注意到背景和文本的亮度都在梯次降低。

  在深底色背景上,为文字寻找合适的亮度要困难得多。要找到完美的平衡点,必须要试验不同的配色。 通常不使用纯黑或纯白能带来更好的效果。

  六、提供切换模式

  虽然我们已经掌握了很多技巧令深底色设计更具吸引力,但是我们还可以再做一点努力已满足更多的用户。

  务必增加一个样式表,以便用户可以选择切换到效果为“浅色背景+深色文字”的另一版本。

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

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

  感谢您对石家庄网站设计的关注与支持!

|<< << < 1 2 > >> >>|

推荐阅读

【签约】石家庄恒阳新能源科技有限公司与指南针签约

2015-04-0947

【签约】康贝乐玩具租赁公司与指南针签约

2015-03-2113

怎样才能解决网站快照更新慢的原因

2014-10-2119

怎样才能提高网站友情链接的推广作用

2014-10-2015