网页布局与颜色运用的基本准则

简介:
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>
在网页设计的众多环节中,页面布局、颜色搭配是最为重要的环节之一。接下来,我们将通过五条准则来告诉您如何在布局、颜色方面让您的网页看起来更舒适、更美观。 

首先,让我们来讲讲有关页面的布局。

准则一:有太多的条条框框会对你的健康产生不好的影响

有一名设计师说当他或她在页面设计时开始使用一些条条框框以及一些准则的时候就意味着他已经成为设计师了。

当你自己观察你的页面并意识到有必要去做些更有吸引力和创造力的东西来摆脱你所刚做的一些烦人的作品时,或是决定要抛弃一些以前所遵循的准则时,说明你的创造力已经脱离限制了。

在你使用那些存放在你软件中的条框钱,得先明白这点,做这件事得适当些。任何事一旦过了头就不太妙了。当然了,合理使用条框和分割线是亮出重要信息的好方法。但如果你在所有页面都用上,或是把太多的内容放在一个框里面,重要信息就会淹没在这些拥挤的文字中。

准则二: 别把页面一分为二

在创新过程中最好把你的文档分成三个部分。然后将那些重要的对象:比如标题,资料,放在顶上或是第三部分的底部。

现在我们来谈谈颜色。

准则三: 颜色对比度越强可读性越强

任何一名设计师都明白这点,文字和背景有足够的对比可以让文字更容易阅读。通常黑色字就会用在比较明亮的背景上。反过来也一样

尽管在深色背景上使用亮些的字可以让文字容易阅读些,但这个手法应该尽量保守使用。事实上已经证实了,在深色背景上阅读对比度较大的文字会让眼睛非常疲劳。

准则四: 珍惜使用的颜色

为了带来视觉上效果,设计师经常选择多个颜色来做设计。但在每个地方都用到不同的颜色也会降低它的视觉效果。基本原则:为把视觉效果最大化,把颜色充分利用在标题上,并把最重要的文字写在标题上。

准则五:不要使用互补色

以一个颜色为基点,可以在色盘的另一头找到它的互补色。举例来说,蓝色的互补色在色盘中是橘色。当这两个颜色贴边的时候,互补色会让我们的眼睛非常不舒服,因为这时我们无法同时聚焦在这两个颜色之上。再顺便补充一下,互补色在一起的时候会给人一种震动的感觉。 
本文转自 netcorner 博客园博客,原文链接:http://www.cnblogs.com/netcorner/archive/2006/11/09/2912479.html   ,如需转载请自行联系原作者
相关文章
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
|
3月前
|
前端开发 容器
CSS实现旋转圆角叠加样式,你学会了吗?
CSS实现旋转圆角叠加样式,你学会了吗?
48 0
|
8月前
|
前端开发
CSS圆角大杀器,使用滤镜构建圆角及波浪效果
CSS圆角大杀器,使用滤镜构建圆角及波浪效果
81 0
css3文字阴影和盒子阴影
css3文字阴影和盒子阴影
|
前端开发
【前端切图】CSS文字渐变和背景渐变
【前端切图】CSS文字渐变和背景渐变
85 0
|
前端开发
css实现背景半透明文字不透明的效果
css实现背景半透明文字不透明的效果
54 0
|
前端开发
通过构建背景图学习CSS径向渐变
通过构建背景图学习CSS径向渐变
71 0
|
前端开发 开发者
CSS 实现半透明边框和多重边框
这篇文章整理了半透明边框、多重边框等的实现方式,供大家参考。学习这些例子还能帮助你深入掌握CSS中与边框相关的属性,包括 `border`,`outline`,`box-shadow` 等。
230 0
CSS 实现半透明边框和多重边框
|
前端开发
css实现文字的条纹阴影效果
css实现文字的条纹阴影效果
124 1
|
前端开发
前端|CSS盒阴影和文字阴影
前端|CSS盒阴影和文字阴影
116 0