注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

野风吹过

旷野里吹来一阵无羁的风

 
 
 

日志

 
 

在统战系统宣传干部培训班上的讲课节选二  

2010-05-26 15:50:26|  分类: 野风空瞑 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

办好一个网站要做的几个功课

二、风格合适的网页设计

1、比例适当的页面分割
    一般资讯类网站的首页在纵向分割上都是基于3-4栏的变化,在800×600的显示分辨率的情况下往往是2个主栏一个副栏,或者2个副栏、一个主栏。.在1024×768和1280×1024的分辨率环境下,新闻网站往往都采用平行3主栏或4主栏的做法,期间穿插副栏分割。主栏较宽放主要的资讯类栏目,副栏较窄,往往放些公告广告,网站动态之类的栏目。栏目宽度的分割要符合视觉的美学规律,过窄、过宽都不一定好,宽窄主要的判断标准是页面的视觉平衡,这需要专业的设计师来把握。

    首页在横向分割上往往有顶部旗帜、导航条、导航条下旗帜、首屏要闻区、首屏底部通栏旗帜,第2屏、第3屏等等,每一屏之间往往用图片条或者通栏旗帜区隔。首屏的高度往往和时下流行的显示器分辨率有密切的关系,当流行800×600显示器的时候首屏高度就是600像素,现在流行的往往是768像素高度的,可能不远的将来是以1024像素高度为主,实际上已经有许多网站的首屏是1024高度的了。第二屏、第三屏是否要按显示高度来设置高度并没有定论,应用起来还是比较自由的。

    2006年4月,美国长期研究网站可用性的著名网站设计师杰柯柏?尼尔森(Jakob Nielsen)发表了一项《眼球轨迹的研究》报告。其中提出,大多数情况下浏览者都不由自主的以“F”形状的模式阅读网页,这种基本恒定的阅读习惯决定了网页呈现F形的关注热度。

    也就是说网友的所关注的内容往往是集中在F的两个横轴和纵轴之上,包括两个横轴之间的区域,也就是首屏。这实际上是符合人类从左向右从上倒下的阅读习惯。第一横轴主要放新闻头条首图等,重要性、关注度不言而喻。新浪作为老牌的商业门户,把它的纵轴全部让给了广告,并且用色块强调和做视觉引导,在它的第2个横轴上安排的是热播大片。网易在纵轴上安排的全是他要热推的栏目,在第2横轴上安排的是热点视频新闻。为什么关注F的第二横轴呢,因为第二横轴以下的部分的阅读率的提高主要依赖于第二横轴的吸引力,纵轴主要还是起视觉引导的作用,而往往纵轴是被当作副栏来设计的,在第2纵轴安排精彩内容的目的是一种向下的视觉引导的做法。当然F型阅读只是一种理论而已,有它的道理,但是打破常规打造E型阅读的做法也有,上面提到的和讯早期首页的安排就是一种打造E型阅读的做法,是否安排、是否能形成首页阅读的第三横轴和整个首页的高度还是有关系的,首页太长肯定是难以形成第三横轴的。形成第三横轴其实和版面的安排有很大的关系,过去报纸排版的时候往往在版面的底部辟出一个底栏,放些大块的重要文章,所以通过页面分割的变化,我们应尽量引导读者向下阅读,这是网页设计的一个重要原则。现在很多大型网站文章页的左边或右边开辟副栏,在文章页的底部开辟底栏做些延伸阅读,增加点击率,效果不错,这都是注重视觉引导的做法。

2、适宜的色彩搭配
    作为省级机构的官方网站,在色彩上应该要保持整体的风格统一,使用的色系和变化效果要统一,一般来说,网站的色彩搭配应该是企业或机构的CIS系统的延伸,是属于其中VI的范畴,包括使用规范的视觉标识和基于标识色彩的统一的RGB颜色值等,浙江在线的几次改版都是基于浙江在线的LOGO的标志色上的色系选择,以蓝色为基调,辅以LOGO中的其他颜色。搜狐也是这样的做法。
当然你可以不选择LOGO的标志色,但是你必须做到色彩搭配和谐,首页你所选用的颜色必须符合你的机构色彩、符合你网站的内容;其次色彩要简洁,方便阅读,不要把网页弄的花里胡哨,网页色彩的选择不要超过3-4种,且要保持色彩的稳定,不要频繁变化,如果你的网页选择了底色,那么你的底色和文字的对比一定要大;如果你还想追求点个性,那么你还可以考虑你选择的基本色彩要鲜明,色彩独特,以加深网友的印象。当然你还可以使用一些富于联想的色彩,往往在专题制作中比较强调色彩的联想性。

    在网页设计中有些色彩搭配的技巧值得借鉴,比如就使用一种颜色,然后调整它的透明度饱和度,用在不同的地方,以达到色彩的统一于和谐,当然这也必须符合一个网页不要超过3-4种的要求。另外你可以使用对比色,选一种颜色为网页的基本色彩,选它的对比色来区隔栏目,或者突出重要内容。再就是可以考虑选用一个色系的色彩。

    网页的色彩选用很重要,它关系到网友对你的网站甚至机构的第一印象,在座的有个网站在色彩选用上我怎么看怎么像少儿网站,色彩亮丽、富于变化跳跃,看上去倒是青春活泼,但是少了严肃和权威。

    如果你对色彩没感觉,又没有合适的专业人员做这件事,有个简单的办法,到网上去搜一下韩国网页设计的一些色彩搭配,或者到IT市场去买盗版牒,韩国人虽然有时候比较棒子但在网页设计的色彩的选择和搭配却是蛮有见解的,配出来的色彩还是蛮舒服,蛮鲜明、蛮有特点的,如果你不追求标新立异,韩国人的配色绝对够用了。

3、合理的内容安排
    网站首页非常重要千万不要浪费,不管是网友还是搜索引擎的蜘蛛对一个网站首页都是高度关注的。有很多网页设计师喜欢为企业或者机构网站做个非常漂亮的封面,使用大量的图片、FLASH、声音、视频等要素,虽然很有技术水准,但是对一个资讯类网站来说却是一种资源浪费,网络是一个讲究效率的地方,首页的主要功能是网站重要内容的推送、检索和导航,网站首页必须要有实际内容,这是网站首页内容规划的第一原则。比如统战部的网站首页,google就并不认为是一个有实际内容的页面,给出了跳过介绍页面的提示。这种把领导致辞放在首页的做法看似是突出了领导,实际上却把整个网站当做个人网站来处理了,反而给人不正规的印象,不是一种突出领导形象的好的办法,你如果想突出领导形象,可以再首页显著位置上做个领导活动专栏,或者开个观点、声音之类的栏目,集纳领导的精彩言论,在内容安排上要始终认识到网友是很挑剔的,他们不喜欢空洞的官样文章,他们来到这个网站是为了找到有价值和实用的信息。
 
    作为机构官网,机构背景的资料和所提供的社会服务始终应该放在比较容易找到的地方。最新的文件公告可以放在主栏中,而备查的文件资料可以放在侧栏中。如果你需要编发新闻,那么首屏最好让给要闻和图片。至于网站首页的内容如何划分栏目则需要根据机构自身的特点,和你的内容规划来决定,栏目划分要符合常规,要准确明了便于网友理解和查找。

    对于机构官网来说要充分重视自身独特的内容资源,重视原创内容,应该把这些内容放在尽可能高的位置,因为它们是将你的网站与众多网站进行区别的重要部分,尤其是对搜索引擎来讲。但是重视原创的同时你也不要轻视拷贝粘贴,中国最成功的网站都是从拷贝粘贴开始的,充分聚合相关信息资源是网络传播的一个重要优势,成功的网站对信息的聚合的重视和精益求精是值得学习和借鉴的,它会增强你网站的粘合力,一个能提供丰富、详实资料的网站总是受欢迎的,尤其这些资料经过具有某一领域专业知识的编辑编辑归类之后。

    在内容安排上不要忽略专业性,互联网是以技术为主导的,你的学术专著,你的技术报告,你的研究论文不仅能增加你在专业领域的权威性,还能吸引广大网友查阅,并吸引搜索引擎的关注。这些是大部分新闻网站忽略的或者没有能力做到的。

4、简洁明了的网站导航
    网站导航的目的是通过合理的分类为网友者提供路径指示,方便网友查找内容,同时表明网友现在所处的位置,帮助他迅速达到下一个想去的页面,为网友提供上下文链接或相关链接,为网友提供编辑重点推荐或最新的内容(NEW 、HOT)。

    网站导航要使用准确简洁的文字描述,规范或者大众熟悉的分类,避免内容交叉。导航在视觉上必须区别于正文,但是又必须保持页面风格的统一。要确保导航所有的链接必须是有效的链接,一个连导航都做不清楚的网站,网站的地位将大打折扣。首页导航条只是放大的分类或者设置重要内容的链接,或者新推出内容的链接,而大量的第2层次的分类不妨放在栏目之中,过于庞杂的导航条将降低内容的可检索性。导航设置要贯穿整个网站的每一个页面,每个页面必须体现导航树状结构本类分支的全部内容,在本页通过导航不仅能回到网站首页,而且需要回到本类内容每一层次的分类首页。如果你是个大的网站,网站导航需要多级分层,请把比较常用的信息内容、功能服务尽量放到更浅的层次。单独为网友提供一张完整的网站地图,详尽清楚地呈现你网站内容的树状结构。网站导航尽可能的在技术上实用、简单、直观,下拉菜单之类有技术含量的的导航能不用尽量不用。

5、关注用户体验,少点花哨 多点实用
    随着网站越来越多,网友对网站的选择也变的挑剔,我们会看见网友们对网页打开速度较慢的网站直接就关浏览器了。所以图片、FLASH的文件大小、数量都必须适当控制,视频窗口不能设置成默认播放,整个首页的文件不能太大,方便、实用是用户体验的最低要求,所有在网页上使用的技术都必须围绕着使用简单来进行,过分炫耀技术会对用户造成干扰,我们应该把更多的精力放在内容组织上,而不是放在表现各种技术水平上。GOOGLE的用户体验设计师归纳了10个原则:
(1). 有用(Useful):以用户为焦点,关注他们的生活、工作和梦想。
(2). 快速(Fast):争取节省每一个毫秒。
(3). 简单(Simple):简洁就是力量。
(4). 魅力(Engaging):能够唤起新手的好奇心,能够吸引资深用户。
(5). 革新(Innovative):勇于创新。
(6). 通用(Universal):全世界适用的设计。
(7). 盈利(Profitable):为现行的和将来的商业模式做好安排。
(8). 优美(Beautiful):外观具有视觉愉悦性,但是不会令用户分心。
(9). 可信(Trustworthy):值得用户信赖。
(10). 人性(Personable):加入人性化因素。

6、首屏原则和视觉引导
    上面讲过了F型阅读,首屏是网友关注度最高的部分,因此首屏应该是网站最精彩内容的聚合区,这些精彩内容应该尽量来自网站的各个板块,而同时,通过这些内容可以到达网站的各个板块。浙江在线的首页在上一个版本开始我便注入这种理念,上一个版本横向以选项卡形式排列了新闻、经济、文化、互动等主要板块的内容,而今年的新版则把这种排列竖来起来。我们缺的是类似凤凰网在精彩内容前做的辅助导航:http://www.ifeng.com/,把网友直接引导到各个栏目中去。凤凰网这种理念还用在了首图上。

    网站首页的视觉引导,大都运用纵向色块,或者网页分割处的图片来引起读者注意,从上个版本的首页开始,我把社会新闻从较高的位置移到了网页的中部,这个版本的首页沿用了我的理念,从后台流量来看,社会新闻的流量一直保持微量增长的态势,实际上社会新闻是大家很要看的东西,挪下来的目的就是为了在内容安排上做个纵向的引导。同样娱乐新闻在网络上也是热点,凤凰网则把它安排在了首页底部,这不能不说也是一种有魄力的视觉引导的办法,相信他们也和浙江在线一样有流量数据的支持。有许多网站在首屏以下较低位置的栏目还设置了栏目导读图,这也是一种非常有效的视觉引导。

    总之在强调黄金首屏同时注重下行的视觉引导是首页设计的一个原则,相信各人会有个人独特的办法,关键是要有这样的理念。

在统战系统宣传干部培训班上的讲课节选二 - 陈野风 - 野风吹过

 

  评论这张
 
阅读(475)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017