浅谈网站布局结构

zxh5566  2017-03-30 21:52   Hits: 

网页布局结构的标准
 
信息架构(Information Architecture)的基本目的是更加简便地、快捷地向使用者传递信息。信息架构就是依照最常见、最普遍的标准对内容进行分类整理,确立标记(Labeling)体系和导航系统,实现网站内容结构化,以便使用者十分容易地查找到想要的信息。
 
网页布局结构就过这种信息架构在使用者容易理解的用户界面里对所有内容进行视觉化处理。
因此,信息架构就是确立网页布局结构时最重要的参照标准。信息架构好比是水果店里的水果摆放方式。水果店里常见的是按照不同品种和价格摆放水果,也就是说,摆放水果的时候,首先按照种类将水果分为橘子、苹果、李子、香瓜,西瓜等,然后以水果的大小、品种、质量为基准,依照价格对水果进行分类。这种常见的水果摆放方式有助于顾客挑选想要的水果,进入水果店后,水果的品种和质量一目了然;如果各种水果混杂在一起的话,顾客就要花费很多时间辨别水果的品种和质量,也不容易确认不同大小或质量的水果价格差别。因此,常见的水果摆放方式便于顾客快捷地辨别水果的质量和价格,有助于顾客选购水果。另外,通过这种摆放方式还可以激发顾客的购物欲望;摆放整齐、色彩鲜艳、散发着浓浓香气的新鲜水果,绝对能给顾客带来强烈的视觉、味觉冲击,激发顾客的购买欲。在不同季节里,还把最多的当季水果摆放在显眼的地方,这也是考虑到人们在不同季节有着不同的喜好而实行的销售策略。
 
同样道理,信息架构的重要原则和目的根据常见网页布局结构大致可以定义为两类:一类是对信息进行分类,使其结构化、体系系化,便于使用者简便快捷地理解各种信息,这就如同按照品种和质量区分水果一样;另一类是优先提供最重要的信息,提供不同时期可以吸引使用者注孝意的信息,引起符合网站目的的使用者的关注,这就如同把最讨人喜欢的水果、当季的新鲜水果摆放在显眼地方一样。这种原则和目的非常重要,其原因就在于互联网使用者的普遍特点,互联网使用者可以瞬问判断出网站的内容并进行快捷的选择,不必因为难以理解网站内容而苦恼。
 
网页布局结构的连贯性
 
更新版本继续保持网页布局结构的连贯性
美国MACYS百货公司的网上购物中心macys.com网站的两个版本。第二版本保持了原有版本网页布局结构的连贯性,只是更新了网站图片;虽然网站的网页设计有了变化,但是使用者仍可按照以前的览。使用网站。网页顶部是导航栏,下方的左侧色彩是第二层菜单,即站内导航,右侧框架是横幅广告、快速链接内容等。两个版本的差别在于:第一版本在左右侧框架运用了色彩,左右侧框架的三段垂直分割结构显得非常明确清晰,而第二版本则在左侧色彩框架运用了黑色,比右側框架更为醒目,使得页面分割结构好像是左侧框架分割结构;第二二版本的右侧框架没有运用特殊的表现技巧,只是利用内容排列与内容区域区分开来。
 
突出内容区域的左右側框架韩国SK电信(SK Telecom)面向二十多岁年轻人制作的移动通信服务-TTL网站?网页的顶部导航和左右侧框架使用了相同的色彩,从视觉上突出了页面中央的白色背景内容区域;左侧墒框架设有站内导航,右侧框架设有快捷菜单。
 
顶部的其他菜单导航和左侧的网网站导航游戏、音乐、电影为一体的美国绳综合性娱乐网站Under Ground Online。网页的顶部导航由于插入图形符号、标志的,的强调效果显得非常醒目;下方内容区域内.内左侧框架的”娱乐频道”网站导航也很跟,右侧框架设有搜索框、E-mail地址输人框及问卷调查等辅助内容。保持水平页面分割的连贯性国际知名网页设计师(Ralph Lauren, Donna Karan, Fendi)的设计作品首次亮相——美国Bloomingdales百货公司网上购物中心网站。可以看出,旧版和新版都采用了顶部导航及利用内容区域下方的水平栏进行水平页面分割的方式,保持了网页的连贯性;两个版本都以800 X 600的分辨率为标准,采用了活用固定内容区域的水平结构。-活用整个页面的水平结构德国的国际知名汽车品牌BMW的.  官方网站。网页的顶部为网站导底部为框架结构的导航栏,网页中央为内容区域;底部导航上的空白处为白色背景,给人一种清新脱俗的感觉。
上一篇:规划网页布局类型的方法
下一篇:根据导航划分网页布局结构