转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
网站页面设计的决定性因素         ★★★★

网站页面设计的决定性因素

作者:闵涛 文章来源:闵涛的学习笔记 点击数:1001 更新时间:2009/6/9 2:31:08

  一:内容的组织

  设计Web页面时,所发布的材料必须经过精心组织,比如说按逻辑、按时间顺序或按地理位置等等进行组织,而且这种内容组织应当是易于理解的。

  材料组织好后,下一步就是在Web页面上布置文本、图片等内容,目的是引导浏览者在页内浏览。我们应该控制页面上的元素的放置顺序和它们相互之间的空隙。比如,可以把与一段文字相关的图形放在段落旁边或嵌入段落中,但不要把与段落无关的图形放在段落边上,以免引起浏览者的误解。把相关的内容放在一起,而不相关的内容用空白,水平线或其他图形分隔开,最好是浏览者看完一页之后可以选择继续读下去或通过链接跳到其他合适的主题上去。

  由于人们阅读材料习惯于从左到右,从上到下进行,因此他们眼睛首先看到的是页面的左上角,然后逐渐往下看。根据这一习惯。我们在组织内容时可以把希望浏览者最先看到的内容放在页面的左上角和页面顶部,如公司的标记,最新消息以及其他一些重要内容等等;然后按重要性递减的顺序,由上而下放轩其他一些内容。重要的内容应当是浏览者最容易发现,而不是放在很深 的链接之后的,页面上的广告为了达到宣传效果,通常也放在页面顶部显著位置。在段落中不宜放入过多的链接,否则会引起浏览者浏览上的混乱,最好的办法是按逻辑关系选择放置,而不是随便乱放。如果可能的话,应该把链接放在一些相关的说明性文字旁边。比如,在一列放置文本,在另一列放置链接。这样就可以提示浏览者去使用这些链接。

  二:设计时可用的一些元素

  在确定Web站点的基本组织结构之后,就可以着手设计页面了。下面是设计时可供使用的一些元素:

  文本格式化:Web本身对文本和字体的格式化能力并不强,在Web页面中,可以指定文本尺寸、排列和其他的一些格式化属性(序号列表和无序号列表),但建议不要改变这体而应当使用缺省字体,以确保页面的平以无关必画面为浏览器是用本地机器上的字体显示示页面内容的,你指定的字体在浏览者那里并不一定能够找到,如果确实有必要少量使用某种特殊字体,可以把这些字画在图片上,然后将图片插入到页面中;

  按钮、图标和其他导航工具,帮助浏览者在Web内导航。

  背景:给页面添加背景,包括纹理填充、水印式背景和长条状背景等等,可以使得页面更加美观,给浏览者留下深刻的映象;

  图形:可加入图片、图表和图形等;

  表格:用来显示按行和列组织的信息,比如产品价格表,客户名单等;

  颜色:包括图片的色彩、文本和背景的色彩等;

  多媒体元素:包括声音、动画、视频片断、背说音乐等。

  页面布局:在页面上放置文本、图形等元素,在元素间添加横线条,空白等,并用表格、杠架进行排版。  

  三:选择文本和背景的色彩

  色彩可以使页面更加生动。首先,使用色彩可以产生强烈的视觉效果,使你的页面在浏览者心中留下很深的映象;色彩还可以传递设计者的思想情感。但是必注意慎重的使用色彩,否则很可能弄巧成拙。滥用色彩容易造成视觉上的混乱。一般情况下不要过多的使用效果太强烈的色彩,对于大面积的文字来说,白底黑字或黑底白字总是最佳选择。

  通常还应该选择相近的色彩。多数的页面背景为白色、黑色或灰色,其他一些次要的元素,如背景图片、线条适宜采用不抢眼的色彩。在数量有限的情况下,只有少量精心选择的元素为了突出强调的需要,才彩用明亮的色彩。在数量有奶的情况下,这引起彩色亮点会产生强烈的视觉冲击,但如果用得太多了,就会形成一种均匀的噪声,而达不到强调的效果。

  在选择背景和正文颜色时,最重要的一点是注意易读性。实现易读性的关键在于提供足够的明暗对比。由于黑白之间有最强烈的对比度,因此大多数网页都采用黑底折字显示文本,但是,也不必拘泥于黑白两色实现对比,可以选择一对颜色,其中一个是亮的,一个量暗的,只要它们保持足够的对比度,比如说,灰底黑字也是很好的选择。

  大面积的适宜采用低对比度。因此,对于大的形状或粗体字最好采用低对比度的色彩组合。

  除了亮度上的对比之外,还要考虑颜色上的对比。互补色具有最强的颜色对比两种有较强的色彩对比度的颜色组合在一起时,很难区分它们的边界。颜色对比同样可以产生强烈的视觉效果。运用强的色彩对比,可以制造紧张,激动等感觉。但是,在文本和它的背景之间不宜采用太强的颜色对比,否则文字看起来会显示得模糊。特别是,文本切忌放在使用文字的互补色的背景上。

  在选择颜色时,还要注意冷暖色的部题。冷色调(蓝、绿)会产生收缩感,而暖色调(红、橙、黄)则有向前突出的感觉。深蓝色和深绿色适合作为背景色,而明亮的黄色适合于那些希望引起注意的黄色。事实上,只要我们平时稍加观察,就会发现许多商店的招牌,广告或其他商业图形展示都彩用深蓝色背景加黄色文字,标记的组合。这种组合非常醒目,最适合商业领域使用。黑色和黄色也是另一种常用的颜色组合。

  在Web面面上,大多采用明亮的背景色衬以深颜色的文字这样的一种颜色组合。

  除了色彩的对比、冷暖感觉之外,还需要考虑色彩带给人心理上的感觉。比如,冷的颜色使人平静,而暖色使人激动;强的色彩对比造成紧张感;暗的颜色给人以沉重感和压迫感。亮的颜色给人轻松、开放的感觉。我们可以根据所要表达的主题,选择合适的色彩。

  色彩除了带给人心理上的感觉之外,有些颜色实际上已经有了社会意义。比如,红色代表停止,绿色代表通行,灰色和深蓝色代表保守,稳重等。恰当运用色彩可以调动浏览者心理上的感受。比如,在许多饮食店中,采用汪蓝色,给人轻松愉快的感觉,这同样也适合于网页,在网页中使用颜色时,就要尽量使得色彩搭配与这些习俗相吻合。

  考虑到大多数人使用256色显示模式,因此一个页面显示的颜色不宜过多,连页面内的图像在内应当控制在256色以内。主题颜色通常只需要两到三种,并采用一种标准色。

  知识扩展:色彩搭配的建议:

  对多数网页特别是有大面积文字的网页来说,应采用白色或浅色的背景,如浅灰色、淡黄色、浅蓝色或浅绿色,文字采用黑色或深颜色;

  避免在浅色背景使用明亮颜色的文字,因为这样文字会很难辨认;

  深颜色背景上使用浅色的文字是一种很好的组合,但是如果不是特别需要,应留作那些需要引起浏览者特别注意的小块区域和场合,比如标题图形等;

  使用黑色背景许多时候显得太沉重,可以考虑使用深灰色、深蓝、粟色等;

  白色、浅灰色、浅蓝色、浅绿色、浅褐色很适合作为深色背景上的文字颜色;

  大的、粗体的文字比常规尺寸的文字更适合使用;交强的颜色,可考虑鲜红色,橙色,明亮的蓝色,但注意不要滥用。


[搜索优化]闵涛——如何让百度重新收录你的网站,网站被K怎么…  [Web开发]网站的下载资源防盗链系统是如何做的?
[Web开发]在js中调用asp页面的方法详解  [网页制作]利用HTML meta refresh 实现页面刷新与跳转(重定向…
[搜索优化]百度蜘蛛爬行网站检测代码诠释  [建站心得]浅谈高质量的原创软文对网站的重要性
[网站运营]网站除了ICP证还要啥 各类网站许可证大全  [网站推广]分享几个颇有创意的网站推广方法
[建站心得]老站长谈个人如何才能够做一个成功的网站?  [网络安全]网站存在上传漏洞被挂马的解决办法(供参考)
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台