首页 > 设计 > 网页设计 > 正文

个性网页设计之页面设计

2018-10-16 20:51:33
字体:
来源:转载
供稿:网友

 页面设计包括甚多,可大可小,我分以下几个要点与大家讨论:页面平铺、整体规划、功能易用性、气氛情感表达。大家有什么问题可以给我来信relen@sina.com
  一、页面平铺
  把页面平铺开,主要的物件有:导航栏、LOGO、Banner、按钮、图片、文字。下面我就针对最主要的几个部分具体讲解。

  1.导航栏
  导航栏如果设计得恰到好处,是会给网页本身增色很多(千万不要太花哨,它属于功能物件,喧宾夺主就不好了)。导航栏有一排、两排、多排、图片导航和Frame 框架快捷导航等等各种情况的设计。有时候是横排,有时候则是竖排。另外还有一些动态的导航栏,如很精彩的Flash导航。导航栏设计要点归纳如下:

  1)导航不多的情况下,通常是一排,横竖都可以,其实栏目超过6个就可以考虑用两排。

  2)导航栏目很多的情况,也可以多排,甚至不规则地多排(一排个数不同,或长度不同)。商业设计或门户站点通常都会有很多频道,设计起来,就要考虑横向双排。使用竖排,会占用太大空间。

  3)通常内容不多的情况下,可能无所谓栏目,站点就包括了导航的具体内容,如图1所示。

  4)双排导航未必要挨在一起,可以自由一些,如图2所示:上排有导航栏,图片分隔开后则另起一排。

  5)图片式导航,很漂亮,占用页面空间比较大。如图2中每一个孩子图像就是一个点击热点。

  6)我推荐大家多用Flash制作导航,其体积小、变化多。

  7)内容很丰富的站点,可以考虑使用快捷导航,即Frame 框架快捷导航,是因为不管你进入哪个页面都可以快速跳跃到另外的栏目,不会失去方向。

  8)利用DHTML、JS、动态隐藏层等技术实现的多变化的导航,都有浏览器的支持问题。我建议大家不要给信息很多的站点作此导航。

  9)不是所有的网站都有导航的。大家可根据自己情况而定。

  2.LOGO(标志)
  关于LOGO的设计我会在以后的“CI行销”一文中具体讲解。这里我暂归纳下列两个设计要点:

  1)LOGO的位置通常在页面的左上角。根据你的设计,它不是一成不变的,所谓个性的设计,不论商业或个人,都要去大胆尝试。这里为大家列出LOGO在页面上常见的布局情况(图3),以作参考。

  2)网站的LOGO,虽然有动态的,但是绝对不适宜过分的动感,且不是所有的网站标志都适合选用动态。

  3.BANNER(广告条)类型
  几种国际尺寸的Banner如下:468×60(全尺寸Banner)、392×72(全尺寸带导航条Banner)、234×60(半尺寸Banner)、125×125(方形按钮)、120×90(按钮类型1)、120×60(按钮类型2)、88×31(小按钮)、120×240(垂直Banner),其中468×60的和88×31最多用,下面就常用的为大家讲解一下。

  1)468×60 全尺寸Banner

  虽然尺寸为国际标准,但是在设计页面的时候,完全可以根据你的页面占用空间来制定Banner广告位和广告条大小。

  (1)一个页面内不易超出两个468×60 全尺寸Banner。两个条的时候,一般是上面一个,下面一个,如图4所示。

  (2)设计Banner配合页面的两种情况:单看Banner很难看,但是放入网页中,却会使网页设计丰富而炫目,一般也就是468×60的Banner有这本事了。还有设计的时候必须要考虑LOGO跟别站互换时如何更适合他人网页的风格,所以该多做一些不同颜色不同情况的Banner。

  2)88×31的Banner

  (1)大家俗称它为LOGO。

  (2)好的Banner也要符合网站的风格。经常遇到一个很棒的Banner点开却是很难看的主页。虽然有被欺骗的感觉,但是从行销的角度讲,它设计越好,点击率越高,也就越成功。

  (3)如图4中,区域7内的一般的广告条, 88×31 Banner也可以用来丰富页面。这样的情况很少见,值得注意。

  3)Banner设计注意点:

  (1)Banner有动态和静态两种。在浏览网页的过程中,虽然闪烁的图案会产生瞬间记忆刺激,引起注意,但这种记忆往往为压迫性的,久之易产生负面效应,从而模糊记忆。而稳定的画面不易引发特殊的关注,但如果有良好的界面引导和内容,可产生良性的记忆,持久而牢固。根据粗略统计,100个Banner里面有1/3是静态的。看来大家对动态的Banner更加看好。

  (2)Banner的“重量”要轻!以468×60的Banner为例,最好是15K左右,不要超过22K。而88×31的Banner最好在5K左右,不要超过7K。

  4)设计要点:

  (1)Banner的文字不能太多,用一两句话来表达即可。

  (2)广告语要朗朗上口。

  (3)图形无须太繁杂,文字尽量使用黑体等粗壮的字体,否则在视觉上很容易被网页其他内容淹没。

  (4)图形尽量选择颜色数少,能够说明问题的事物。

  (5)如果选择颜色很复杂的物体,要考虑一下在低颜色数情况下,是否会有明显的色斑。

  (6)尽量不要使用彩虹色、晕边等复杂的特技图形效果,这样做会大大增加图形所占据的颜色数,增大体积。

  4.按钮
  网页设计是新的行业,没有很久的历史和规范的教本,长期以来对按钮的定义也不是很清晰。哪些算是按钮呢?如图5中用圈作记的地方:其中“用户登录”、“登录按钮”“More按钮”、“个股推荐”等等类似物件,通常都统称为按钮。某种意义上导航的存在形式也是按钮,只是它的功能很特殊。如果经常做网页,就会感觉到按钮设计的要求已越来越高。

  按钮设计要点:

  1)设计按钮要同页面的整体协调,不能太抢眼。

  2)有的页面很单调,还要依靠花哨的按钮来提一下。

  3)选用的字体,选用的插图,或插图及字体搭配,都要考虑字迹清楚,色彩简单一些,不要超过四种。

  4)很长的按钮可能就是框架的分界,尽量要纤细一些,否则页面会显臃肿。

  5.图片
  为了美化页面,图片是任何一个页面都要用到的,但要考虑网速,建议大家能不用就不用,图片的运用要合理。

  图片运用要点:

  1)图形的主体最好清晰可见。

  2)图形的含义最好简单明了。

  3)图片内所含文字应该清晰容易辨认。

  4)背景与主体明度对比比例应为3∶1到5∶1之间为宜。

  5)淡色系列的背景有助于整体和谐。

  6)淡色材质背景最佳,能与主题分离之浅色标志或文字背景亦可。

  6.文字
  文字也是设计的。这里给大家列出几个设计要点:

  1)每一行文字的长度最好20到30个中文字(40到60个英文字母)。

  2)行距与字距已由软件内定。设计时注意段落与段落间空行及首行缩排方式以辅助阅读。

  3)标题以H1到H3字号为佳,内文Font size=3到4级为佳。

  4)同版面字型最好在三种以内。

  5)文字的颜色最好也是三种以内。

  6)文字在颜色上要与背景区别。

  7)内文的排列向左对齐并与左边界保持适当距离。可以用表格填入文字以达此效果。

  8)表格或清单内的字运用相同字型与字体大小,以利辨别。这些都是为用户服务的设计,很重要哦!

  二、整体规划
  1.有共性,才有统一,有细节区别,就有层次。

  2.防止设计与实现过程中的偏差,不要定死具体要放多少条信息。

  3.设计的各部分,要配合整体风格,夸张一点好像VI。

  4.不仅页面上各项设计要统一,而且网站的各级别页面也要统一。

  5.页面要“透气”,就是信息不要太过集中,以免文字编排太紧密。

  6.不要有太多分散注意力的点。动态闪烁要适中。

  7.页面留白部分,要根据平面设计原理来设计,请注意,分栏式结构不宜留白。

  8.还要考虑到浏览器上部占用的屏幕空间,防止图片截断等造成视觉效果不好。

  9.首页留白布局部分我为大家准备了一个例图(图6)供参考。

  三、功能易用性
  任何网站都要把这个问题放在第一位。不过大家请注意以下几点:

  1.导航栏应最先调入,以便常客快速前往所需信息空间。

  2.页面长度要短,使得用户在信息空间内可迅速移动。

  3.导航设计方向要一致。支持导航的层次按钮应当从上到下或从左到右,但不要两者都用,不要混用方向。

  四、气氛情感表达
  气氛会自然地激发出一种情感,不管它来自图片、颜色、标题或者是动态的广告,只要是来自页面,本身就具备了一种表达思想。举个对比很鲜明的例子:浏览恐怖站点和浏览圣诞节庆祝页面,你会有怎样的感觉呢?这就是个性。

  五、推荐站点
  1.导航
  http://www.blashig.com/ 非常不错的Flash导航。

  http://www.mtvhome.de/ 德国mtv站点,导航很典雅。

  http://www.mtve.com/ 值得学习的下拉式菜单导航,进任何一个页面你都会看见那个Flash,真的很漂亮。

  http://www.alistapart.com/index.html 右置导航并不常见。

  http://www.giantrobot.com/index2.html 简易的导航,也很舒服。

  介绍两个收集Banner 的站点,可以学习一下别人的创意,提高自己。

  http://www.homepagecn.com/fbl_brjx/

  http://www.v-4ever.com/8dstudio/base.htm

  2.按钮
  http://www.apple.com/ 苹果按钮,经典且着名。

  http://www.mtvchinese.com/台湾Mtv。

  http://www.mtvjapan.com/shows/index.html日本MTV,我觉得它的按钮真的不错。简洁、特别。

  3.图片运用
  http://www.mayto.com/

  http://www.photoshopclub.com/

  4.首页的留白
  http://www.fathomcapital.com/default1.htm

  http://www.litewerx.dk/

  5.页面内的留白
  http://www.mtvasia.com/Music/AtoZ/index.html 它还是右边导航的,图片运用也很好。

  6.情感烘托好的站点
  http://www.celine.com/ 时尚站点,一个很棒的Flash。

本文作者:
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表