细节决定成败——Web设计五大要点

导读:现在几乎任何人都可以使用工具来建设一个网站,但最成功的设计都会有以下几个特点:这些网站通常都组织地很好,内容完善并且都会注重以下几个设计细节。无论是排版、字体还是对比和颜色这样的小细节都可以决定你的网站设计的成败。在你发布网站之前一定要确保它整体上的整洁感,散乱的设计和缺乏重点的呈现会让人觉得一个网站的设计不专业,甚至令人厌烦。所以在开始你的项目之前,你需要考虑以下这些设计细节,并且将它们整合在你自己的作品里。

1)排列

整洁的设计的第一关键就在于对齐,包括水平和垂直对齐。随随便便地排列网页元素的话是无法创作出整齐、一致的感觉的。这也是你的网站是否专业、优秀的关键。良好的排列会让你的网站看起来更有层次感。

向网站添加图像和文字时要注意网页元素是如何在页面上排列的。每个项目的顶部是否在一条直线上?或者项目的底部是否在一条直线上?

当然,你也需要注意垂直排列。保证元素的宽度保持一致,要特别注意元素之间的空白处,元素之间的空间应该保持相同。注意不同宽度的漂亮的照片是如何在Jux上的网格中排列的,间隔让不同宽度和形状的图片排列地非常完美。

在你配合网格设计网站能够更简单并且快速地达到良好的设计效果。使用何种类型或大小的网格才能工作得最好并没有硬性规定,但是使用合适网格能够帮你在脑海中形成一个比较完善的映象。

所以在你建设网站时最好使用网格来排列网页元素。你可以使用一个纵横分布的网格和分栏,使用自己创建的网格,或者下载一个优秀的模板。

2)对比

网站中的某些元素可能会因为图像或颜色或文字比其它的更吸引人的注意力。有效地规划和使用这样的对比能让你控制哪儿更受注意。你可以在设计中使用颜色、文本和不同比重来保证网站的对比。确定网站哪儿更需要注意,在那里建立大的对比。

创造对比的一个最简单的方法是通过颜色。当你确定了背景和文本颜色之后使用完全不同的颜色能够强调网站的部分来突出重点。注意doberman网站的抽象化设计,该网站(不考虑图片元素)只使用基本黑色和白色的配色方案,但使用了鲜艳的黄色来强调,和黑白的背景形成强烈对比,对眼睛造成极大的冲击。此外,网站还使用了蓝色来强调别的关键地方。

你还可以其它方法来制造对比,比如不同大小或者比重的字体也可以用来制造差异感。

3)字体

字体可能是建设网站时最难抉择的部分之一。为了保持设计的整洁性,注意千万不要选择过多的字体种类。即使你的项目再复杂,也会被过多的字体种类给毁掉。

但是你可以使用各种字体的变种。不同大小、比重和颜色字体,能够在增加多样性的同时又保证了一致性。一般来说,不应该使用超过两种字体来进行排版。简单的排版可以帮助建立秩序便于阅读。

当你计划如何使用每种字体的尺寸和比重时,想想整个网站元素的相似之处。使用一个字体、类型、大小和颜色来装饰标题,给副标题使用相同的字体,但是不同的大小、颜色或者比重。再给内容文字使用第三种类型、颜色或者大小的字体。注意使用类来定义元素样式,保证网站各网页之间的一致性。

4)颜色

和字体一样,使用一定种类的颜色能够完善设计,而调色板对于取色是非常有帮助的。注意记录每个颜色的具体混合,在整个网站中使用同一个颜色的缓冲颜色。同一类元素之间则一定要使用相同的颜色,因为这里哪怕出现一点点的差异都会使网站显得非常不协调。

记下你使用的所有的颜色,增加比重和特效来突出不同。比如Netlife Research就在整个网站中始终使用同一种颜色以及它的变种,使得整个网站保持了良好的一致性。当然,你也不是一定要使用如此简单的设计,但是你在设计时一定要在脑海里谨记这一原则。

5)一致性

所有细节中最重要的一点就是一致性,网站中的所有元素必须在视觉和感觉上保持相当高的一致性。logo、header和banner不需要花哨,保证导航栏里的文字一致,同一类文字等元素使用相同或相似的颜色。调色板和网格对于网站设计都是很有用的。

千里之堤溃于蚁穴!在你的网站快完工时注意检查所有的小部件是否还有问题。在完成设计后建立一个检查列表来检查框架:

  1.     垂直对象对齐;
  2.     水平对象对齐;
  3.     需要强调的元素很突出;
  4.     字体数目;
  5.     字体大小一致;
  6.     字体颜色种类;
  7.     适当的色彩搭配;
  8.     页眉和页脚等元素的一致性。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值