欢迎光临散文网 会员登陆 & 注册

第1节Web页面设计规范之页面布局

2019-11-27 20:57 作者:游戏理想国  | 我要投稿

一.1.网页宽度

最新显示器分辨率比例调查：

目前主流分辨率处于1024X768以上，在此状态下，默认使用910的网页宽度。



特殊情况

1 .信息量或图片量过大的情况，可以考虑加宽承载，给出两个参考尺寸：

950、990

2. 搜索类信息页面，采用自适应屏幕方式


一.2.页面框架

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

图1


一.3.页面布局


    1. 布局原则



对于WEB应用来说，页面布局是和web应用的功能区相对应的，并且对于页面中各个部分之间的切分比例也需要遵守一定的规则。

页面布局的设计，首先需要考虑用户在浏览web页面时视觉流向上的要求：

图2

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



    1. 布局要求



一.3.1.1.页面分割

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


  • 首先，将页面按照3*3的方式进行分割，如下图：

  • 在高度方向上，对上部1/3区域按照黄金分割的方法分出head和menu的区域；

  • 在宽度方向上，对中部左边1/3区域按照黄金分割的方法分出sidebar的区域，剩下的空间留给content区域；

  • 在高度方向上，对下部1/3区域按照黄金分割的方法分出foot的区域；


一.3.1.2.页面结构

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

图3


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


  • Head区域，宽度是按照比例方式设置的，宽度按照100%设置，高度采用所占的固定像素值来确定的，一般占*px，如果有menu区，则调整为*px；

  • Menu区域，和“head”的配置要求是一样的，宽度按照100%设置，高度结合“head”的高度设置来确定，一般占*px；

  • Sidebar区域，宽度是结合与“content”之间的黄金切分比例，按照固定像素的方式确定的，一般占*px；高度是按照比例方式来设置的；

  • Content区域，高度和宽度方向布局都是按照比例方式来设置的；

  • Foot区域，宽度按照100%设置，高度采用所占的固定像素值来确定的，一般占*px；


一.3.1.3.页面展现

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


  • 能自适应1024*768、800*600两种分辨率；

  • 界面层次不超过3层；

  • 默认窗口设置下，不应出现水平、垂直滚动条；

  • 当界面内容超出显示区域时，以浮动层的形式显示；


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

要求：


  • 父页面或主页面的中心位置应该设计在对角线焦点附近；

  • 子页面的位置应该靠近主窗体的左上角或正中；

  • 需要多个子页面弹出时，应该依次向右下方偏移，以显示窗体出标题为宜；

  • 在页面上方四分之一处放置用户的logo、主要功能导航和一些系统操作功能；


一.3.1.4.页面美化

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

建议和要求：


  • 长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度；

  • 布局要合理，不宜过于密集，也不能过于空旷，合理的利用空间；

  • 同一页面上的按钮大小应该一致，不同页面的按钮大小尽量相近，按钮上忌用太长的名称；

  • 按钮的大小要与界面的大小和空间要协调；

  • 避免空旷的界面上放置很大的按钮；

  • 放置完控件后界面不应有很大的空缺位置；

  • 字体的大小要与界面的大小比例协调， 通常使用的字体12px；

  • 前景与背景色搭配合理协调，反差不宜太大，主色要柔和，最好少用深色，如大红、大绿等，可以借用Windows界面色调；

  • 大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等；

  • 界面风格要保持一致，字的大小、颜色、字体要相同，需要艺术处理或有特殊要求的地方建议使用图片表现；

  • 如果窗体支持最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放；

  • 系统对话框页面不应该支持缩放，即右上角只有关闭功能；

  • 通常父窗体支持缩放时，子窗体没有必要缩放；

  • 如果能给用户提供自定义界面风格，则由用户自己选择颜色、字体等；


一.4.页面字体

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

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



    • “Head”中标题文字，20px；

    • “Menu”中的导航文字，14px；

    • “Sidebar”中的文字，12px；

    • “Content”中的正文，12px或14px，标题；

    • “foot”中的文字，12px或10px；



一.5.边距

WEB页面和其中的表格都应该设定边距，避免页面元素紧贴边沿的情况发生，最小边距值为“3px”，默认边距值应在CSS中设定。

例如：

图4

一.6.段落排版

在WEB页面中，“content”部分是展示页面正文的区域，当段落是由纯文字构成时：


  • 正文一行字数最好不超过50，首页的标题文字以8-20字为佳。

  • 行距建议用百分比来定义，常用的两个行距的值是"宋体">或150%；

  • 对于一段文字，尤其是正文部分，保证左右至少有15px的留白，便于用户换行时不受到干扰。

  • 文字和背景对比要足够明显，保证最弱文字的可读性。


在使用<p>标签，需要对应有</p>，并且要求设置margin，使得段落文字的前后左右能够有合适的空白区。可在CSS中设置：p{margin: 18px 6px 6px 18px;}，分别定义了上、右、下、左的空白区大小。

首行缩进时，禁止使用“&nbsp;”，而是在CSS中设置text-indent，例如：p{ text-indent: 2em; }。

在一段完整的文字中请尽量不要使用<br>来人工干预分段；

对于margin，为了防止由于采用默认的margin值而导致的页面排版问题，推荐所有标签定义为：margin:0;

当采用竖排文字时，推荐使用writing-mode。通过设置两个属性值：lr-tb和tb-rl，并结合direction完成文字竖排，lr-tb指的是文字方向为：左-右、上-下，tb-rl是指上-下、右-左。


一.7.Frame

Frame是能够将一个WEB页面切分成几个窗口来显示WEB内容的一种页面设计方法，切分后的每个窗口内容是通过指向URL来实现的。

Frame的标记是<FRAMESET><FRAME> ，而在使用Frame时，通常需要将其放在网页入口的html文件中，而不必放入<BODY> 标记。<FRAMESET>是用以划分框窗的，每一框窗由一个<FRAME> 标记所标示，<FRAME>必须在<FRAMESET>范围中使用。

其中：


  • <FRAMESET> 称框架标记，用以宣告HTML文件为框架模式，并设定视窗如何分割。

  • <FRAME> 则只是设定某一个框窗内的参数属性。


使用Frame分割页面，需要按照2.1节“页面布局”中所描述的要求来设置<FRAMESET>和<FRAME>，以完成对页面各个部分合理的切分。


对于<FRAMESET>和<FRAME>中的一些属性设置，要求有：


  • Name，表示Frame的名字，必须有定义；

  • Framespacing，表示各个Frame之间空白距离，要求设置为非零，通常设置为5；

  • Noresize，表示是否允许使用者通过拖拉改变Frame的大小，要求在Frame设置此参数；

  • Scrolling，表示是否要显示卷轴，要求设置为“AUTO”

  • Marginhight，表示框架高度部分边缘所保留的空间，要求设置？

  • Marginwidth，表示框架宽度部分边缘所保留的空间，要求设

标签：

第1节Web页面设计规范之页面布局的评论 (共 条)

分享到微博请遵守国家法律