页面线框图教程（之二）：画地为牢的框架设计

　　无论是设计低保真草稿还是高保真的模拟原型，线框图都是从基本的布局开始;良好的布局是顺畅视觉流程的开始，同时也奠定了最终访问效果的基调;布局是一个画地为牢的过程，什么东西放在哪里一旦基本确，界面就大体确定了;设置条条框框并不是为了限制界面设计师的发挥，而是要达到页面之间的协调和整个网站的统一;本文作为系列教程的第二篇文章，将讲述如何进行基本布局和需要注意的问题。

　　分析屏幕的复杂度

　　依照页面逻辑架构，页面中有多少元素，每种元素要占用多大的屏幕面积，这是一个非常复杂的问题。

　　引入一个“标准屏幕”的概念，即常用分辨率中最小宽度和高度尺寸的乘积。在这里可能有若干种不同的声音，在宽屏显示器越来越流行的今天，网站依然要关注那些使用4:3比例显示器的人群，因此，一个相对“保守”的设计是把“800pix×600pix”作为标准屏幕尺寸。当然还有一种相对“大胆”的设计是以“1024pix×768pix”作为标准屏幕尺寸。

　　常用分辨率的交集就是标准屏幕尺寸[图片点击可看全图]

　　虽然在设计低保真时只需要进行粗略的计算，但是如果有时间，还是推荐各位线框图设计人员将所有元素可能占据的屏幕空间一一列出。最简便的方法是，保存其他网站上类似元素的截图，估算它们占用的屏幕面积。

　　所有元素占用屏幕面积的总和/标准屏幕面积= Screen值

　　公共元素占用屏幕面积的总和/标准屏幕面积=Template Screen值

　　简单的说：在排列的最拥挤的条件下(不考虑间距和留白)，Screen值代表了网页占用几个屏幕的空间。

　　通过简单的计算，可以得到整套线框图中那些重点页面(模板)的Screen值，并且可以轻松的计算出整个网站的Average Screen(平均值);将重点页面中的重复出现的公共部分提出，形成一个元素集合，将它们的屏幕面积加法求和除以标准屏幕可以得到Template Screen值。

　　(Screen值01+ Screen值02+ Screen值03……+ Screen值n)/n=Average Screen(平均值)

　　Template Screen值/ Average Screen(平均值)×100%= Template Ratio 模板比例

　　简单的说：在排列最拥挤单条件下(不考虑间距和留白)，Template Ratio 模板比例代表了整个网站的页面中公共部分的百分比。

　　已经得到了两个最重要的屏幕复杂度参数：Average Screen(平均值)与Template Ratio 模板比例。在整个布局页面的过程中，将紧紧围绕这两个参数展开工作;而针对这两个重要的指标，有如下的具体分析。

        Average Screen（平均值）分析

平均值区间	定义	描述与对策
AS<=2	简单页面	只需要两个屏幕即可以把页面中的全部信息传达清楚， 将采用最简单的方式处理，甚至是“不分栏”处理
2<AS<=6	组合式页面	最常见的页面形式， 通常使用分栏的方法进行内容区块的归并和分类，进行信息的组合
6<AS<=10	复杂页面	只有那些大型门户网站和冗长的列表才能够有这样的页面， 不推荐使用这样丰富的信息量， 如果非要采用，那么不但要使用分栏，而且要实现屏幕资源复用
AS>10	超复杂页面	必须进行减肥或拆分， 删除多余的页面元素，才能进行设计

Template Ratio 模板比例分析

Template Ratio 模板比例分析

比例区间	分析
TR<=25%	这是一个正常值范围，模板内容是非常简练的， 如果设计得当，使用起来非常方便，且富有效率
TR>25%	臃肿的公共部分，让用户不断的在不同的页面中看到相同的内容， 必须对模板的合理性进行重新的审视。 建议隐藏那些不经常使用的公共部分， 或者采用屏幕资源复用的方示压缩公共部分的比例

　　在研究屏幕复杂度的过程中，要紧紧围绕在前一章《从本质到表象》中《项目的页面列表》，通过对重点页面的屏幕分析，不断地改善公共部分的元素数量，同时确定使用模板种类和类型。

评论总数：0 条 [ 查看全部 ] 网友评论