个性网页设计之页面设计
#1?牐犚弧⒁趁嫫狡?
?牐牥岩趁嫫狡炭饕奈锛校旱己嚼浮OGO、Banner、按钮、图片、文字。下面我就针对最主要的几个部分具体讲解。
#2?牐?1.导航栏
?牐牭己嚼溉绻杓频们〉胶么Γ腔岣潮旧碓錾芏啵ㄇ?万不要太花哨，它属于功能物件，喧宾夺主就不好了）。导航栏有一排、两排、多排、图片导航和Frame 框架快捷导航等等各种情况的设计。有时候是横排，有时候则是竖排。另外还有一些动态的导航栏，如很精彩的Flash导航。导航栏设计要点归纳如下：
?牐?1）导航不多的情况下，通常是一排，横竖都可以，其实栏目超过6个就可以考虑用两排。
?牐?2）导航栏目很多的情况，也可以多排，甚至不规则地多排（一排个数不同，或长度不同）。商业设计或门户站点通常都会有很多频道，设计起来，就要考虑横向双排。使用竖排，会占用太大空间。
?牐?3）通常内容不多的情况下，可能无所谓栏目，站点就包括了导航的具体内容，如^23040701a^1所示。
?牐?4）双排导航未必要挨在一起，可以自由一些，如^23040701b^2所示：上排有导航栏，图片分隔开后则另起一排。
?牐?5）图片式导航，很漂亮，占用页面空间比较大。如图2中每一个孩子图像就是一个点击热点。
?牐?6）我推荐大家多用Flash制作导航，其体积小、变化多。
?牐?7）内容很丰富的站点，可以考虑使用快捷导航，即Frame 框架快捷导航，是因为不管你进入哪个页面都可以快速跳跃到另外的栏目，不会失去方向。
?牐?8）利用DHTML、JS、动态隐藏层等技术实现的多变化的导航，都有浏览器的支持问题。我建议大家不要给信息很多的站点作此导航。
?牐?9）不是所有的网站都有导航的。大家可根据自己情况而定。
#2?牐?2.LOGO（标志）
?牐牴赜贚OGO的设计我会在以后的“CI行销”一文中具体讲解。这里我暂归纳下列两个设计要点：
?牐?1）LOGO的位置通常在页面的左上角。根据你的设计，它不是一成不变的，所谓个性的设计，不论商业或个人，都要去大胆尝试。这里为大家列出LOGO在页面上常见的布局情况（^23040701c^3），以作参考。
?牐?2）网站的LOGO，虽然有动态的，但是绝对不适宜过分的动感，且不是所有的网站标志都适合选用动态。
#2?牐?3.BANNER（广告条）类型
?牐牸钢止食叽绲腂anner如下：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
?牐犓淙怀叽缥时曜迹窃谏杓埔趁娴氖焙颍耆梢愿菽愕囊趁嬲加每占淅粗贫˙anner广告位和广告条大小。
?牐牐?1）一个页面内不易超出两个468×60 全尺寸Banner。两个条的时候，一般是上面一个，下面一个，如^23040701d^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）尽量不要使用彩虹色、晕边等复杂的特技图形效果，这样做会大大增加图形所占据的颜色数，增大体积。
#2?牐?4.按钮
?牐犕成杓剖切碌男幸担挥泻芫玫睦泛凸娣兜慕瘫荆て谝岳炊园磁サ亩ㄒ逡膊皇呛芮逦Ｄ男┧闶前磁ツ兀咳鏭23040701e^5中用圈作记的地方：其中“用户登录”、“登录按钮”“More按钮”、“个股推荐”等等类似物件，通常都统称为按钮。某种意义上导航的存在形式也是按钮，只是它的功能很特殊。如果经常做网页，就会感觉到按钮设计的要求已越来越高。
?牐牥磁ド杓埔悖?
?牐?1）设计按钮要同页面的整体协调，不能太抢眼。
?牐?2）有的页面很单调，还要依靠花哨的按钮来提一下。
?牐?3）选用的字体，选用的插图，或插图及字体搭配，都要考虑字迹清楚，色彩简单一些，不要超过四种。
?牐?4）很长的按钮可能就是框架的分界，尽量要纤细一些，否则页面会显臃肿。
#2?牐?5.图片
?牐犖嗣阑趁妫计侨魏我桓鲆趁娑家玫降模悸峭伲ㄒ榇蠹夷懿挥镁筒挥茫计脑擞靡侠怼?
?牐犕计擞靡悖?
?牐?1）图形的主体最好清晰可见。
?牐?2）图形的含义最好简单明了。
?牐?3）图片内所含文字应该清晰容易辨认。
?牐?4）背景与主体明度对比比例应为3∶1到5∶1之间为宜。
?牐?5）淡色系列的背景有助于整体和谐。
?牐?6）淡色材质背景最佳，能与主题分离之浅色标志或文字背景亦可。
#2?牐?6.文字
?牐犖淖忠彩巧杓频摹Ｕ饫锔蠹伊谐黾父錾杓埔悖?
?牐?1）每一行文字的长度最好20到30个中文字（40到60个英文字母）。
?牐?2）行距与字距已由软件内定。设计时注意段落与段落间空行及首行缩排方式以辅助阅读。
?牐?3）标题以H1到H3字号为佳，内文Font size=3到4级为佳。
?牐?4）同版面字型最好在三种以内。
?牐?5）文字的颜色最好也是三种以内。
?牐?6）文字在颜色上要与背景区别。
?牐?7）内文的排列向左对齐并与左边界保持适当距离。可以用表格填入文字以达此效果。
?牐?8）表格或清单内的字运用相同字型与字体大小，以利辨别。这些都是为用户服务的设计，很重要哦！
#1?牐牰⒄骞婊?
?牐?1.有共性，才有统一，有细节区别，就有层次。
?牐?2.防止设计与实现过程中的偏差，不要定死具体要放多少条信息。
?牐?3.设计的各部分，要配合整体风格，夸张一点好像VI。
?牐?4.不仅页面上各项设计要统一，而且网站的各级别页面也要统一。
?牐?5.页面要“透气”，就是信息不要太过集中，以免文字编排太紧密。
?牐?6.不要有太多分散注意力的点。动态闪烁要适中。
?牐?7.页面留白部分，要根据平面设计原理来设计，请注意，分栏式结构不宜留白。
?牐?8.还要考虑到浏览器上部占用的屏幕空间，防止图片截断等造成视觉效果不好。
?牐?9.首页留白布局部分我为大家准备了一个例图（^23040701f^6）供参考。
#1?牐犎⒐δ芤子眯?
?牐犎魏瓮径家颜飧鑫侍夥旁诘谝晃弧２还蠹仪胱⒁庖韵录傅悖?
?牐?1.导航栏应最先调入，以便常客快速前往所需信息空间。
?牐?2.页面长度要短，使得用户在信息空间内可迅速移动。
?牐?3.导航设计方向要一致。支持导航的层次按钮应当从上到下或从左到右，但不要两者都用，不要混用方向。
#1?牐犓摹⑵涨楦斜泶?
?牐犉栈嶙匀坏丶し⒊鲆恢智楦校还芩醋酝计⒀丈⒈晏饣蛘呤嵌墓愀妫灰抢醋砸趁妫旧砭途弑噶艘恢直泶锼枷搿＞俑龆员群芟拭鞯睦樱轰揽植勒镜愫弯朗サ谇熳Ｒ趁妫慊嵊性跹母芯跄兀空饩褪歉鲂浴?
#1?牐犖濉⑼萍稣镜?
#2?牐?1.导航
?牐爃ttp://www.blashig.com/ 非常不错的Flash导航。
?牐爃ttp://www.mtvhome.de/ 德国mtv站点，导航很典雅。
?牐爃ttp://www.mtve.com/ 值得学习的下拉式菜单导航，进任何一个页面你都会看见那个Flash，真的很漂亮。
?牐爃ttp://www.alistapart.com/index.html 右置导航并不常见。
?牐爃ttp://www.giantrobot.com/index2.html 简易的导航，也很舒服。
?牐牻樯芰礁鍪占疊anner 的站点，可以学习一下别人的创意，提高自己。
?牐爃ttp://www.homepagecn.com/fbl_brjx/
?牐爃ttp://www.v-4ever.com/8dstudio/base.htm
#2?牐?2.按钮
?牐爃ttp://www.apple.com/ 苹果按钮，经典且著名。
?牐爃ttp://www.mtvchinese.com/台湾Mtv。
?牐爃ttp://www.mtvjapan.com/shows/index.html日本MTV，我觉得它的按钮真的不错。简洁、特别。
#2?牐?3.图片运用
?牐爃ttp://www.mayto.com/
?牐爃ttp://www.photoshopclub.com/
#2?牐?4.首页的留白
?牐爃ttp://www.fathomcapital.com/default1.htm
?牐爃ttp://www.litewerx.dk/
#2?牐?5.页面内的留白
?牐爃ttp://www.mtvasia.com/Music/AtoZ/index.html 它还是右边导航的，图片运用也很好。
#2?牐?6.情感烘托好的站点
?牐爃ttp://www.celine.com/ 时尚站点，一个很棒的Flash。