网站建设
移动互联网
品牌设计
创新应用
新闻动态
网站百科
简体

网站设计页面的规范

时间:2015-05-04 来源:尚品中国 类型:网站百科
字号:   

下面由尚品中国给大家分享一下网站设计的页面规范布局框架:

1、页面框架

WEB的页面框架是指构成完整页面的组织结构。通常是由以下三部分构成:Head,Main,Foot,有些时候出于布局的需要,在“Head”下面还会加上用于页面功能导航的“Menu”。如图:

页面框架


2、布局原则

对于WEB应用来说,页面布局是和web应用的功能区相对应的,并且对于页面中各个部分之间的切分比例也需要遵守一定的规则。
页面布局的设计,首先需要考虑用户在浏览web页面时视觉流向上的要求:

布局原则

从视觉流向上看,用户首先看到的是页面“Head”部分的左面,通常那里是标识这个WEB应用的Logo;然后是陈列WEB应用主要功能的“Menu”来用于页面导航;接下来用户将看的是处于页面左侧的“sidebar”,通常这里也是用于页面功能导航的,和“Menu”出的选择相呼应,这里的内容可以通过类似树状结构的方式展示更为详细的功能;接下来是处于页面中心位置的内容部分,最后用户的视线落在WEB页面的底部。

3、页面分割

以上面图示的布局方式为例,按照通常web页面设计时所遵循的方法,并结合黄金分割比例的方法:

首先,将页面按照3*3的方式进行分割,如下图:


在高度方向上,对上部1/3区域按照黄金分割的方法分出head和menu的区域;
在宽度方向上,对中部左边1/3区域按照黄金分割的方法分出sidebar的区域,剩下的空间留给content区域;
在高度方向上,对下部1/3区域按照黄金分割的方法分出foot的区域;

4、页面结构

页面的布局中,各个区域大小的定义方式是不同的,请见下图:

页面结构

在页面布局中,对各个功能区域的切分是按照“像素”和“比例”方式来进行的,以1024*768的分辨率做为基准,其中:
5、页面展现

对于页面布局来说,除了上述要求外,还需要考虑如下要求:

能自适应1024*768、800*600两种分辨率;
界面层次不超过3层;
默认窗口设置下,不应出现水平、垂直滚动条;
当界面内容超出显示区域时,以浮动层的形式显示;

还有,对于用户的感官而言,屏幕对角线相交的位置是用户直视的地方,而页面正上方四分之一处为易吸引用户注意力的位置,所以在放置页面时要注意利用这两个位置。

要求:
父页面或主页面的中心位置应该设计在对角线焦点附近;
子页面的位置应该靠近主窗体的左上角或正中;
需要多个子页面弹出时,应该依次向右下方偏移,以显示窗体出标题为宜;
在页面上方四分之一处放置用户的logo、主要功能导航和一些系统操作功能;

6、页面美化

界面应该大小适合美学观点,感觉协调舒适,能在有效的范围内吸引用户的注意力。

建议和要求:
6、页面字体

页面字体属性的设置在相应的CSS中进行定义,页面文字编码要求是UTF-8,在规定字体属性时,需要设置:中文采用“宋体”,英文采用“Arial”或“verdana”,CSS文件中的font-family里面必须保证有“宋体”。

对于页面属性中字体大小的设置,需要内容的不同级别来设置,通常:

有关页面字体属性的具体设置参见附录中的CSS示例。


您好,现在就与尚品客服交流

专业网站建设 | 大型网站开发 | 营销网站建设 | APP开发等业务

您可以直接电话快速沟通

北京专线:010-60259772(总部)

天津专线:022-58793660

假日热线:010-60255689

北京地区微信

天津地区微信

快速在线提交需求

请输入您的姓名(尚品将对您的联系方式严格保密)

请输入您的联系电话或微信号