- 相关推荐
网页设计的布局和用色技巧
网页是网站构成的基本要素。网页的布局和色彩搭配能够更好的提升网页的视觉效果、更能吸引浏览者的眼球。 理论上研究网页设计的布局和用色技巧在网页中的应用以及布局和用色技巧在网页设计中的发展方向。以下是小编搜索整理网页设计的布局和用色技巧,欢迎大家阅读!
网页设计是艺术与技术的高度统一,网页艺术设计包含视听元素与版式设计两项内容;以主题鲜明、布局形式与内容相统一、强调整体色调为设计原则。因此在明确了网页艺术设计与网站主题的关系的基础上,提出了“美”和“功能”都是为了更好地表达网站主题这一观点。从而更好的认识和理解布局和用色技巧在网页布局中的发展和创新。
国内网页设计环境目前还停留在初级的认知阶段,如同96年以前的网页几乎是纯文字的页面,没有什么所谓“设计”的概念可言。随着时代的发展人们对美的追求是不断深入,网页设计开始从从审美方面入手,结合使用方便的要求,设计出美观、合理的页面,运用一些平面设计中美的基本形式就能使网页更加富有美感,例如将平面设计中的色彩形式原理融入到网页设计中,注重了布局规划从而使繁多的页面更加有条理。
设计以人为本,任何设计都具有一定的内容和形式。内容贯穿整个网页设计中,是设计存在的基础。形式而是内容的延伸,或者说事内容的外部表现方式。
内容决定形式,形式反作用于内容。一个优秀的网页设计必定是形式对内容的完美表现。正如黑格尔所说:“工艺的美就不在于要求实用品的外部造型、色彩、纹样去摹拟事物,再现现实,而在于使其外部形式传达和表现出一定的情绪、气氛、格调、风尚、趣味,使物质经由象征变成相似于精神生活的有关环境。”
一、网页设计的布局
页面布局就是在网页设计时把网页的各种构成要素(文字、图片、菜单等等)在页面内完美的搭配起来。一个精美的网页,不仅体现在页面内容的精彩,还要有效地利用页面的有效显示空间,创造出合理的布局模式。
(一)“国”字型
“国”字型,也可以称为“同”字型,适用于一些大型网站,即最上面是网站的标题以及横幅广告条,接下来是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。
(二)拐角型
这种结构与上一种“国”字型结构,其实只是形式上的区别,有相似性。顶端是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,底端也是一些网站的辅助信息。在这种类型中,一种很常见的类型是,顶端是标题及广告,左侧是导航链接。
(三)左右框架型
这是一种左右分为两页的框架结构。一般左面是导航链接,有时顶端会有一个小的标题或标致,右面是正文。目前,大部分的大型论坛都是这种结构,一些企业网站也喜欢采用这种左右框架型结构。这种类型结构非常清晰,一目了然。
除了以上的布局类型外,还有上下框架型,标题正文型,综合框架型,封面型等。
二、网页用色技巧
(一)确定网页的主题色
所谓网页的主题色,就是体现行业特点,企业形象的色彩。色彩搭配的协调可以突出主题形象的视觉效果,色彩的搭配不仅体现美学的诉求,而且是一种可以强化的识别信息,会影响到浏览者对网站的印象乃至企业形象的认识。所以,主题色一经确定,要保持一定的稳定性,用这种色彩来帮助浏览者对网站的识别。
网页中颜色的过多使用,会使人感觉到凌乱、轻浮,感到杂乱无章,缺乏对网页的兴趣。因此网页设计必须有自己独特的色彩,必须有一种或两种主体色。
不至于让浏览者迷失方向,也不至于单调、凌乱。当主题色确定好以后,考虑到其他配色时,一定要考虑到其他配色与主体色的关系,要体现企业什么形象以及什么样的效果。
(二)用色技巧
1.针对不同的企业所要表达信息的不同,可以选择突出这些信息的颜色。
2.考虑浏览者。不同地区、不同年龄层次对色彩的认知的不同,可能会产生不同的反应。对网页所传达信息针对的人群的不同选择不同的用色。
3.不要使用过多的颜色。除了黑色和白色以外,约选择四到五个颜色就足够了。太多的颜色会使页面显得杂乱,不容易突出网页所要表达信息的重点。
4.选择颜色要注意时效性。当一种色彩成为流行色的时候,不免使浏览者产生麻木的审美效果。因此在网页中事实的实施一些怀旧色彩,会达到意想不到的效果。
以后,网页将代表个人、企业的形象。尤其是个人,或者企业的主页,它既要传达出某种信息,又要充分的体现出它们的特色。网页设计的好坏,直接关系到某个人、某个企业的形象,在人们的印象中所处的地位。所以布局和色彩的恰到好处的搭配将会使个人和企业的形象在别人心中留下深刻的印象,从而更好的体现出个人及其企业的知名度。
【网页设计的布局和用色技巧】相关文章:
广告设计之用色技巧总结03-06
网页设计配色技巧03-07
网页字体设计的技巧03-18
网页美工设计技巧03-12
网页设计色彩搭配技巧03-07
室内外设计用色的原则和规律03-28
怎样协调网页美工设计的细节与布局03-18
网页动画设计小技巧03-06
网页美工学习设计技巧03-12