网页制作学习 关于门户网站设计(上)

开发 前端
门户网站,是指通向某类综合性互联网信息资源并提供有关信息服务的应用系统。本文主要介绍的是门户网站设计的一些知识,初学者必看,网页制作学习,一起来看。

门户网站有很多种,最为国人熟知的是象新浪搜狐那种信息类门户。主要以广告收入为主。现在也有博客门户等。象当当、淘宝那样的购物平台,其实也是一种门户,只不过陈列的是商品信息,赢利方式是依靠出售商品。不同的门户,有不同的需求,都应该根据这些需求出发去设计网站,这是众所周知的,但是它们之间也有共性,那就是都要求提高浏览效率!促使网站达成赢利目标。

信息类门户:

1.网页的体积最小

2.分类明确,多方向引导

3.信息量最大

4.风格一致,易于管理

5.以适当的方式提供多种多样的广告位

6.分栏目设计突出主题风格

购物类门户:

1.网页体积尽量小

2.分类明确,多方向引导

3.信息根据重要程度疏密有秩

4.每一个页面信息都是一种广告方式

5.突出商品本身

6.分栏目设计突出主题风格

一、网站风格/创意

“风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。整体形象包括站点的版面布局,色彩,字体,浏览方式等…。如:我们觉得迪斯尼是生动活泼的而IBM则是专业严肃的。每一个网站都会给人们留下的不同感受。

这里我们需要做到的是根据网站的定位做出网站特有的风格。除此我们还需要在风格同一上需要把握一下,其实这个风格的统一和传统的印刷出版物没什么区别。你网页上所有的图像、文字,包括像背景颜色、区分线、字体、标题、注脚什么的,都要统一风格,贯穿全站。这样子用户看起来舒服、顺畅,会对你的网站留下一个“很专业”的印象,有一个全局感受。

创意,所谓创意就是不拘一格?某些设计师在做创意的时候大费周章,做出来确实不可否认很有创意、很别致,但往往对于行业网站的客户为什么不能接受呢?此时不要太责怪客户的不识货,应该反思,抓住客户的需求。其实做行业网站不需要很多大的创意,也不要浪费过多的时间去追求如何个性、如何好看,我们只需要一点小小的创意贯穿全站,也许会使网站更生动更具有吸引力、更有思想。”

不要在页头用大面积的装饰图片来体现整个网站的风格

门户网站构成很复杂,通常会兼并、嵌套很多小网站。网站的经营方当然希望让这些小的网站套用整个门户的VI。所以,在使用最频繁的页头部分,应该是能够很明确的标识网站风格的地方。但是,不要用大副的装饰图片来体现,LOGO?LOGO是干什么用的?设计时的出发点是什么?不就是标识企业突出门户风格吗?如果LOGO不能起到这样的作用,那还要它做甚?所以为了浏览速度快,最好页头只有LOGO、文字导航、简单色彩装饰。我建议页头最好是可以宠满页面的,没有宽度限制,这样就能够适应各种宽度的网页了。

不要制作过多过大的图片镶嵌在网页中,如大片的没有意义的装饰图片,别忘了你是在做一个门户!!有商业目的的门户!这是在做生意!如果你做生意老板会批给你很多钱去做些对销售没有帮助的事吗?也许他会批给你钱组织员工去旅游,用于提高士气,但是他绝对不会批给你钱带所有员工去冰岛,并盖一个希尔顿饭店!

二、网站LOGO

Logo顾名思义就是站点的标志图案,logo最重要的就是用图形化的方式传递网站的定位和经营理念、同时便于人们识别。网站logo的设计过程中一般有以下三种思路:1.直接以网站网址作为logo。2.根据网站提供的产品/服务特点展开logo设计。3.以传递网站运营商的经营理念为特色。我个人建议门户网站的LOGO中最好包含:网址(去掉WWW及网址后缀)中文标识辅助图形标识。辅助图形标识能够最好的体现网站风格,变化多样。网址和中文标识的设置要清晰易用。最好独立创建一套字体,但最好跟常见字体相差不太大。便于应用在子栏目中。

三、视觉流程

“人们在阅读某种信息时,视觉总有一种自然的流动习惯,先看什么,后看什么,再看什么。在心理学的研究表明,一般的浏览习惯是从上到下、从左到右,在一个平面上,上松下稳而压抑。同样,平面的左松右稳。所以平面的视觉影响力上方强于下方,左侧强于右侧。这样平面的上部和中上部被称为“最佳视域”,也就是最优选的地方。在网页设计中一些突出或推荐的信息通常都放在这个位置。左侧为常规信息,右侧为推荐信息。当然这种视觉流程只是一种感觉并非一种固定的公式,只要符合人们的心理顺序和逻辑顺序,就可以更为灵活地运用,在网页设计中,灵活而合理地运用直接影响到传达信息的准确与有效性。”

 

四、网页框架与布局

网页布局大致可分为“国”字型、拐角型、“T”字型、“L”字型、综合框架型、Flash型、变化型,在这里就不做一一论述了。其实在我们在做设计的时候并没有过多的去考虑什么形式,比如我们在一张纸看到一个圆形的东西,很容易可以联想到它像太阳,而有些人则联想到月亮等等…这都是一种形式比喻,最重要的是抓住客户的需求,把握网站的定位做处合理的框架布局。

1.分辨率

网页的整体宽度可分为三种设置形式:百分比、象素、象素+百分比。通常在网站建设中以象素形式最为常用,行业网站也不列外。我们在设计网页的时候必定会考虑到分辨率的问题,科技发展到现在我们通常用的是1024*768和800*600的分辨率,现在网络上很多都是用到778个象素的宽度,在800的分辨率下面往往使整个网页很压抑,有种不透气的感觉,其实这个宽度是指在800*600的分辨率上网页的最宽宽度,不代表最佳视觉,不妨试试760~770的象素,不管在1024还是800的分辨率下都可以达到较佳的视觉效果。

并且,针对你的目标用户,你可以采用不同的分辨率标准,比如购物网站的用户,通常都是比较适应网络生活,有一定经验的网民,他们的显示器通常会比较先进,象目前就可以采用最低1024*768分辨率。如果你面对的目标用户,行业不固定,也许有相当一部分都只是偶尔上网,那么他们很可能采用的是过时的旧设备。就要考虑用较低分辨率做为制作标准。

2.合理广告

在目前一些网站的广告(弹出广告、浮动广告、大广告、banner广告、通栏广告等等…)让人觉得很烦琐,更本就不愿意来看,有时连你这个网站都不上了,这样一来网站受到了严重的影响、广告也没达到广告的目的。这些问题都是我们在设计网站之前需要考虑、需要规划的内容之一。

浮动广告有两种,第一种是在网页两边空余的地方可以上下浮动的广告,第二种是满屏幕到处随机移动的广告。建议能使用第一种的情况下尽量使用第一种,不可避免第二种情况时尽量在数量上控制最多一个就好。如果数量过多会直接影响到用户的心理、防挨到用户浏览信息,适得其反。首页广告不宜过多适中即可。如在注册或者某个购买步骤的页面上最好不要出现过多的其他无关的内容让用户分心,避免客户流失等。

最新新流行的一种广告是将整个页面按1024*768或更高的分辨率标准来设计,在超过800*600用户浏览范围的地方,放置的是常规广告信息或软广告信息,这样一来,设备条件好的用户就可以浏览将近全屏的页面内容,而800*600的用户只能看到广告部分的一个小边,但是不影响浏览主要信息。

3.空间的合理利用

很多的网页都具有一个特点,用一个字来形容,那就是“塞”,它将各种各样的信息如文字、图片、动画等不加考虑的塞到页面上,有多少挤多少,不加以规范,导致浏览时会遇到很多的不方便,主要就是页面主次不分,喧宾夺主,要不就是没有重点,没有很好的归类,整体就像各大杂烩。让人难以找到需要的东西。有的则是一片空白失去平衡,也可以用个“散”字来形容。

并非要把整个页面塞满了才不觉得空,也并非让整个页面空旷才不觉得满,只要合理的安排、有机的组合,使页面达到平衡,既使在一边的部分大面积留空,同样不会让人感到空,相反这样会给人留下广阔的思考空间,给人回味又达到了视觉效果。

比如重要但形式单一的文字信息,就要在块于块之间多点留白。图片花色凌乱的部分要于其他块有明显区分。在首页上展示子栏分类信息要紧凑,以一大类作为一个整体块。相同类的信息采用相同的排榜方式。门户的导航是经常变且类别繁多的,不一定什么时候是单数什么时候是双数,所以不要用图片来制作。

随着中国互联网10年的过去,已经诞生出几家全国大型的门户。中国城市百分之九十都是属于中小二三级城市,电脑终端在中国的普及和网民快速增长,中国城市未来的网络发展是趋势,市场空间也是很巨大的。所以门户网站的前景是相当可观的。下面接着为大家介绍,一起来看,网页制作学习:关于门户网站设计(下)

【编辑推荐】

  1. 门户网站负载均衡技术的六大新挑战
  2. 政府门户网站安全防护解决方案
  3. 互联网大会门户网站“分裂”
  4. 对搜狐、网易和TOM三大门户网站的SQL注入漏洞检测
责任编辑:于铁 来源: 站长之家
相关推荐

2011-05-11 14:34:13

门户网站

2012-01-06 10:42:43

NASA开源

2011-05-11 14:43:00

门户网站

2010-08-17 13:23:49

2011-12-13 10:06:11

2011-01-21 18:13:41

RadwareAlteon应用交付

2012-05-04 10:16:51

vmware虚拟化View VDI

2017-02-10 12:01:07

2010-05-04 16:40:14

Oracle加速计划

2010-05-27 18:26:53

2013-03-08 09:22:02

2017-08-16 08:49:27

私有云自助服务

2013-02-19 10:30:16

2010-12-22 13:02:02

2015-09-02 08:55:49

裁员门户网站凤凰网

2009-06-04 11:26:05

2010-11-25 10:33:04

2009-08-14 16:29:04

2010-10-25 12:02:52

点赞
收藏

51CTO技术栈公众号