简洁富有创造性的深色调网页设计

深色调的网站设计是比较流行的,它能营造出简洁、富有创造性的效果。
它能满足一些客户对网页设计风格的要求。然而,它并不能适用于每一个客户对网站设计风格的要求,设计师应根据实际情况而定。
尽管深色调的设计风格能做到引人注目的效果,但很多设计师不知道如果有效的使用它来打动、吸引浏览者。
深色调网页设计经常出现的问题是不易读、没有吸引力、很少打破传统的设计模式。
这片文章,我们将讨论一些如何让你的下一个深色调网页设计更能吸引、打动广大浏览者的方法和技巧,真正做到让你的设计表达你的创意。
最近的调查显示有超过47%的大众用户更喜欢亮色调的网页设计。内容的可读性是主要原因。大多数的用户不喜欢亮文字内容显示在深背景上,这样的对比效果是比较刺眼的,给人不舒服的感觉。
相比之下,有10%的设计师通常选择深色调来设计网页,同时36%的人认为应该根据网页的具体风格要求进行选择。
那么,哪个是正确的答案那?归结起来,每一个人都有自己的意见,事情就是这样。
但是有相当一部分用户认为重色调的设计是可以接受的,有时是设计首选。作为网页设计师,我们不得不考虑如何有效的设计深色调的网页给我们客户与自己。
相信亮色调网页设计的爱好者们希望深色调的网页设计应该更易阅读、有好的用户体验。

多使用留白
或者应该叫“留黑”?合理有效的使用留白对于任何风格的设计来说都是非常重要的。但对于深色调的网页设计来说它则是必须的。
深色调的网页设计给人总体的感觉是“沉重的”,如果整体布局结构凌乱更增强了给人沉重的感觉。下面展示了一些比较受大众喜欢的深色调网页设计,他们合理使用了留白达到很好的设计效果。
Black Estate是互联网里深色调网页设计的一个而已,设计确实很棒并值得我们研究学习。设计自始自终都在合理、有效的使用留白,如何在设计元素周围有效的使用了留白,从而设计出了这样讲究的网页。
logo标志周围留有大量的“留白”,作为浏览者我们首先看到的就是它,其次看到的才是主要内容与右边的瓶子。正如你所看到的,留白是用来突出瓶子上的亮文字内容与内容标题。

Tictoc的主要特点就是它在内容、装饰图片周围留用了大量的“留白”,当我们继续往下浏览时,我们看到使用了很少的留白,从而将我们的注意力集中在到下面的具体内容上面。
这里的关键是,留白起到了引导的作用,逐步引导用户浏览这个页面。
网站通过使用大量的留白从而增加了深色调设计的层次,留白仅仅是为了实现深色调的效果而已

Mark Dearman网站的框架结构自始自终采用灵活的、均匀的分布式布局进行留白。
留白为每一个相邻的内容板块里面的内容提供了大量呼吸、停顿的空间。当进入到下一板块内容的时候,它们之间的留白是一个很好的休息地点。
留白对于深色调网页设计来说是必须的,它不但有助于解决布局的凌乱、散乱,同时也是网页设计增强整体感很重要的元素。

正文内容留白
深色调网站内容的易读性是不喜欢深色调网页用户所担心的问题。设计师必须将更多的精力放在文字本身上。
在整个设计上,通过调整段落与段落之间的距离大小、行距来增加留白是提高重背景网站文字内容可读性的一种方式。
下面展示的例子介绍了元素与元素之间留白、元素本身周围留白在深背景和亮背景上的对比情况。

增加字体大小是提高深色调网页内容可读性的另外一种方式,同文章以上介绍的方法一样,大号的字体能增加其本身及周围的留白,字体越大其周围的留白空间就会越大。
比如下面的字母“a”,当字体增大时,其周围的留白就会随着增大。无论是a周围的空间还是其内部的空间,还是与上下内容之间的空隙留白都跟着一起变化。
注意,在淡色调上阅读小文字内容要比深色调上容易的多。当在新的网站上设置字体的时候,一定要事先虚拟一些内容以确保其清楚易读。如果不清楚的话,可以尝试增加一下字体的大小来调整。

文字对比
一些人普遍认为大多数的深色调的网站容易导致眼睛疲劳。设计师们或多或少的忽视了对比。如何找到一个平衡点那?
如果你在一个漆黑的屋子里,突然遇到很强的亮光你会感觉不适应的。但是,如果你在一个稍微有点弱光的屋子里再遇到亮光的话应该会好一些儿。这个规则同样使用于网页设计。
找到一个完美的对比,也就是说在深背景于亮字之间找到一个对比平衡点。
下面的例子简单的说明这点,如何平衡字体与背景之间的对比度。注意当让背景颜色变浅时其上面的文字也会一起变浅的。
找到文字与背景的对比平衡点是比较困难的。
为了找到最终的平衡点,我们使用不同的程度的背景颜色做试验。背景不要是纯黑色,文字不是纯白色是试验的最终平衡点。

字体的处理
字体在设计里面扮演着非常重要的角色,尤其在深色调布局设计里面更应该深思熟虑的。下面的图片展示了14点大小的serif和sans-serif字体在深背景上的效果。
sans-serif字体明显更清晰、易读一些。但是一部分设计师让然是应用serif字体。
仅仅放大sans-serif字体这一个方法,从而让其周围留有更多的留白,并让其清晰易读。

下面是在写此文之前的网站论坛的界面截屏。网站同时使用了serif和sans-serif两种字体,但是使用它们是有技巧的。
大字体比如标题、导航等使用了serif字体来增加其效果。为了比较好的对比、提高可读性,body里面定义了sans-serif字体。

使用少的配色方案
为了让深色调的设计看起来更干净、整齐,设计师应尽量选择少的配色方案。
通过一下几个简单的例子,过多的颜色配色方案针确实无意于深色调设计的,因为这样的配色对比太强烈了。
保留一种或二种颜色系

部分设计师喜欢用对比强烈、刺激的配色方案,当然这样也是可以的,但要能够恰如其分的使用好。
总体来说,颜色很容易让网页界面花、杂乱,本来深色调的网站颜色就很重了。所以在用色方面更应该慎重一些!

中文原文:深色调网页界面设计注意事项
英文原文:The Do’s and Don’ts of Dark Web Design

时间: 2024-10-03 06:38:47

简洁富有创造性的深色调网页设计的相关文章

深色调网页界面设计注意事项

深色调的网站设计是比较流行的,它能营造出简洁.富有创造性的效果. 它能满足一些客户对网页设计风格的要求.然而,它并不能适用于每一个客户对网站设计风格的要求,设计师应根据实际情况而定. 尽管深色调的设计风格能做到引人注目的效果,但很多设计师不知道如果有效的使用它来打动.吸引浏览者. 深色调网页设计经常出现的问题是不易读.没有吸引力.很少打破传统的设计模式. 这片文章,我们将讨论一些如何让你的下一个深色调网页设计更能吸引.打动广大浏览者的方法和技巧,真正做到让你的设计表达你的创意. 最近的http:

保持网站简洁外观:简洁的网页设计衬托网站内容

文章描述:通过本文你能从中学到一些经验.本文作者迈克·埃文斯(Michael Evans)是一位热情的博客写手.他擅长Photoshop,贡献了多篇网页设计和开发的教程,并且受到了读者们的喜爱. 导语:简洁并不等于极简主义,在保持网站简洁的外观的同时,辅以其它元素的使用,同样能够达到要求.那如何做到这一点呢?通过本文你能从中学到一些经验.本文作者迈克·埃文斯(Michael Evans)是一位热情的博客写手.他擅长Photoshop,贡献了多篇网页设计和开发的教程,并且受到了读者们的喜爱. 洁净

简洁网页设计你需知的6点技巧

  洁净和一尘不染之间是不能划等号的.去掉了多余内容的设计看起来外形美观,一目了然,让人心旷神怡,尤其是对网页设计领域更甚.设计师在网站设计过程中,时常会遇到过度设计的例子.保持审美需求和实际需求之间的平衡,对整洁,干净和条理清晰的网站来说很重要.在激烈的行业竞争中,网页设计师想要获得成功,先决条件之一就是要掌握简洁的网站设计基础.在网站设计中,并没有保密规定,但相关的从业人员仍需坚持一些基本原则:用外观专业,整洁的网站设计来打动用户. 但是,简洁的网页设计并不就等同于我们在网页设计中所强调的极

网页设计中的单个色彩:富有感情的红色

译自:The Passionate Color Red 中文原文:设计中的色彩:热情的红色原作者:Jennifer Farley请尊重版权,转载请注明来源! 今天是一个新的系列文章的开始,我们将讨论设计中的单个色彩,包括一个简要的色彩心理学理论和大量可见的实例.色彩是设计中的一个很重要的元素.它被用于影响我们的心情,影响购物选择,以及作为情感的象征.那么让我们从最富有感情的色彩(也是本人最喜欢的)--红色开始吧. 对色彩的看法可能比较主观,但是有一个普遍的认识就是,暖色调聚集在色谱中红色的区域(

网页设计中保持清晰简洁的图片设计技巧

平面设计,网页设计中使用精美图片插图是经常有的事.我们通过观赏许多大师的设计作品会发现,他们使用图片的时候都能给人一种十分合理的感觉,不仅能突出重点,同时也给人比较好的视觉享受. 你如何展示一张非常不错的照片?非常简单,保持清晰,所有无关的元素都不要出现在页面上. Ambient摄影俱乐部出版了它们自己的月刊杂志来提升俱乐部的影响力.因此,他们希望杂志的视觉效果能够显得更加专业,以迎合范围更广的读者.Ambient是一本内部自己使用大幅激光打印机打印的杂志,这也意味着打印的质量相当高,而且能够使

PhotoShop打造简洁的新闻栏目网页设计制作教程

介绍用PhotoShop打造简洁的新闻栏目网页设计效果,比较简洁的新闻栏目设计,喜欢网页设计的同学可以一起来学习一下! 效果: 制作开始: 绘制一个矩形框. 给矩形框增加样式:描边. 在底部矩形上再绘制一个长形矩形.用来承载栏目名. 给这个载体矩形增加样式. 分类: PS入门教程

网页设计中白色最简洁优雅与和平颜色的应用

当你想到白色的时候什么会跑进你的脑海中? 白色是最简洁,优雅与和平的颜色. 白色被广泛应用于博客,网上证券,电子商务和其他各种网站的网页设计中. 白色可以被用在字体颜色,背景颜色,链接,图片等等. 如果你认为白色网站不那么http://www.aliyun.com/zixun/aggregation/18473.html">吸引读者,那么事实你会感到惊讶.一些设计优秀的网站也在页面上使用白色.在这篇文章中你会找到怎么样在网站中使用白色的灵感与建议. Minimal Beautiful Si

在网页设计中对称手法使用技巧

文章描述:在网页设计中,对称/不对称的有效运用可以达到非常与众不同的效果. 在设计中,对称创造了平衡,平衡了创造和谐.秩序和审美.自然界中对称无处不在,也许正是这种无处不在的状态让我们发现对称的美.形态学的基本原则之一就是对称,它是一套人类形为理论,形态学认为人类对看到和遇到的事物本能的产生出秩序和完整性. However, symmetry can get boring. Asymmetry is a break in symmetry, which when used effectively

如何在网页设计中使用颜色

  在网页设计中,对目前的网站配色(Landscape of color)认真琢磨一下还是非常有趣的.大多数网站或多或少相同,但是颜色的设计搭配却是一个非常给力的工具. 我并不想尝试去阐述一些具有革命性的东西或者是特别的发现.但如果大部分网站都采用同样的配色方案,那对颜色意味着什么呢?实际上,远超出你的想象.幻想一下整个世界的每一个网站都是非常漂亮和五彩缤纷的,但它同时也意味着千篇一律.这就像你文章中每一个段落的粗体. 因此,当配色方案比较柔和的时候,它允许有更多的机会. 关注你想要的任何东西