页面线框图（Wire frame）是网站设计方案中的重要组成部分，无论是I-Board 、Page-Layout、UI-Draft这些不同的称呼，它们的本质都是一样的，网站策划师、网络产品经理的最后交付文档，通常的呈现设计是最直观有效的。单纯从设计的角度，线框图也可以看作一个视觉呈现过程，虽然如此，也不能把线框图的设计当作简单的视觉问题。如何看待线框图，如何着手设计线框图，如何把握线框图的详细程度，如何让其他合作者看懂线框图，就是本系列文章要解决的问题。

线框图的本质是信息架构的表象。根据需要，页面线框图可能是一个独立页面或一整套页面序列：当针对中小型项目时，可能只需要首页以及关键页面的设计；针对复杂项目和大规模的团队协作，则需要一系列相互关联的线框图，并且包含交互设计部分。

在《网页线框图教程》的第一篇文章中，主要帮助读者了解线框图之前的必要步骤：

• 确定页面逻辑架构
• 低保真还是高保真
• 规范图例与交付物
• 基本框架模板

确定页面逻辑架构

在最近流行的一篇国外译文《画好线框图的20个步骤》中有一句话“线框图是计划中的第一步也是最重要的一步”，这是大错特错的。

线框图肯定不是计划中的第一步，在没有确定页面中“到底有什么”之前，根本无从下手去设计；确定线框图的蓝图不是靠设计者拍脑门，而是基于对内容分析之后的信息架构设计，请各位读者参考《从概念设计到信息架构》一文。

线框图并非计划中的必需步骤，更谈不上什么重要步骤。当与优秀的界面设计师、视觉设计师配合一些中小项目的时候，根本不需要什么线框图，而作为网站策划师和产品经理只需要提供页面逻辑框架就可以了。

所谓页面逻辑框架，是在整个网站信息架构确立的基础上，具体描述某个页面：都包含什么元素；这些元素的权重；页面的大概形式。

页面逻辑框架可以用逻辑表和逻辑图两种形式交付，可以单独采用一种形式，也可以同时提交两者。

例：Page[List02][Article_List][T1]的页面逻辑表

元素	类型	包含	权重
Logo	图片		模板T1
导航	链接组合		模板T1
面包屑	链接组合		模板T1
列表标题	文字		重要
文章列表	序列	文章名称、作者、发布时间	明显
页码及翻页	链接组合	上一页 下一页 当前页	明显
搜索	表单		模板T1
广告	图片		模板T1

例：Page[List02][Article_List][T1]的页面逻辑图

确定各个页面的逻辑结构是进行页面线框图的设计前提，也是界面设计、视觉设计呈现的基础；非常推荐在着手设计线框图之前建立一个《项目的页面列表》，记录整个项目需要多少张线框图的支持，每张线框图的标号和使用模板的情况，如果时间充裕，甚至可以给每张线框图一个简洁的描述。

《项目的页面列表》

页面名称	文件名字	代号	模板	简介
模板01	Template_01	T1	无	这是一个通用的左右两栏模板
首页	Index	Page01	T2	首页使用T2模板，纵列三栏布局
文章列表	Article_list	List02	T1	某栏目的文章全集，使用T1模板
…	…	…	…	…

这个《项目的页面列表》对衡量整个设计的工作量、把控进度和工作重点非常有帮助。

低保真还是高保真

线框图的细节要逼真到何种程度，要根据执行团队的实际情况来决定。一般来说，线框图的细节越逼真，执行越流畅，但是给界面设计和视觉设计的发挥空间越小；相反，线框图越是粗略，对团队配合的要求越高，界面设计和视觉设计发挥的空间越大。

低保真原型（线框图）通常包括：页面的基本布局，元素的大概位置，交互的基本形式，表单项。

在低保真原型的基础上，高保真原型（线框图）通常包括；精确到像素的页面布局，辅助设计元素的数量和位置，图片格式尺寸，屏幕划分，超级链接的标示，带时间轴的FLASH关键帧，每个交互步骤的界面变化，表单项说明，具体文案。

对于三两个人配合的微型项目（比如中小企业网站）使用低保真原型配合口头沟通就可以解决实际的问题；对于复杂一些的项目，更推荐以《低保真和高保真模型混搭》的模式开展工作。

无论线框图的细节要逼真到何种程度，一定要在线框图开始设计之前明确，并且在《项目的页面列表》中标注每一个页面的逼真程度；明确交付物的细化程度，对保障工作进度和团队配合是非常重要的。

规范图例与交付物

一个团队的效率来自每一位成员的专业技能和敬业精神，而每一个人力量的集合需要通过工作流程和规范体现。在你的工作中是否存在这样的情况：交付的线框图与最后的执行结果出入悬殊，根本不是你的设计初衷，造成不对等原因是 “执行部门看不懂你的设计”。此时，就需要流程和规范出场摆平问题了。

工作流程是对项目执行上下级关系的一种描述，即上级交付给下级何种结果时，下级可以开始自己的工作；当交付结果不符合要求时，下级变为上级，要求前一环节进行返工。

规范并不是某一个部门强制规定的（虽然的确可能存在这样的情况），而是工作流程的上下级默认的一种约定；非常建议把工作流程中上下级的约定整理成手册，提供给所有的执行部门；如果整个执行团队规模在20人以下，没有必要单独设立Workflow这样的职位，但是确定质量监督人员是非常重要的。

一些常用的WireFrame图例

无论手绘、纸面模型、Visio、Dream Weaver、Axure、PowerPoint甚至Word都可能成为线框图设计工具，使用何种工具进行设计并不重要，然而这些文档能否被其他执行部门理解，是另外一回事；各个执行环节的默认约定成为线框图的图例，是保证所有的设计被理解、被合理执行的前提。

基本框架模板

感谢模板给设计带来的便捷！站在用户的角度，需要在大致相同的浏览环境中学习网站的使用；站在界面设计的角度，应用模板能够大大缩减设计与实现的时间；站在程序开发的角度，复用结构能够提升整体的开发进度和系统效率；最后站在线框图设计者自己的角度，合理的使用模板能够缩减相当的工作量……全都受益，何乐不为。

在编写《项目的页面列表》的过程中，已经逐渐确立了大体的模版种类和应用范围；构建线框图的第一步就是针对那些常用的页面模板进行设计。

一张页面线框图模板的实例，其中包含了可编辑部分[图片点击可看全图]

模版可以包含Logo&Slogan、页面导航面包屑、广告、常用功能、侧边栏和页底版权栏；每个模板都包含一些可编辑的部分。在确立了模板之后，剩下的工作无非就是根据每个页面逻辑架构的区别，设计那些可编辑的部分而已。

本章小结

在本章节中，确定了在开始设计线框图之前，整个项目及参与团队需要完成的工作。在了解一共有多少页面，每个页面都包含什么内容，那些内容是可以复用的……这些问题之后，必须确认已经完成《项目的页面列表》《线框图图例》《基本框架模版》这三个文档，那么就可以开始具体的线框图设计。

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

分析屏幕的复杂度

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

引入一个“标准屏幕”的概念，即常用分辨率中最小宽度和高度尺寸的乘积。在这里可能有若干种不同的声音，在宽屏显示器越来越流行的今天，网站依然要关注那些使用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（平均值）分析

Average Screen（平均值）分析

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

Template Ratio 模板比例分析

Template Ratio 模板比例分析

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

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

对于那些计算，也完全不必十分精准，只需要简略的进行估计就可以了，毕竟线框图设计不是做精确的数学统计。

从纵栏入手进行内容分块

“使用纵栏分隔内容能够获得更灵活的页面设计”，看到这句话，那些页面架构师和前端开发人员都心领神会。

众所周知，Web页面是一个在纵向无限伸展的巨大创作介质，这就是为什么鼠标要设置中间的滚轮。要是非要抬杠，Web页面也可以向横向伸展的，这样的网站的确有，但不符合用户的浏览习惯，可以完全理解为行为艺术的范畴。

Web页面存在一种纵向的空间延展

对于AS<=2的简单页面，完全可以不必分栏，元素内容就像编写普通Word文档一样，逐行展开；上古时代的万维网，页面几乎都是这样组织内容的；即便现在的HTML语言也都是为了编写这样的“极简梳形”页面准备的。

对于AS>2的组合式页，通常需要有一个横栏放置Logo等内容，然后将页面分隔成若干的纵栏，便于对信息进行分块梳理；纵栏通常有两栏式、三栏式、四栏式，在极其特殊的情况下可能用到五栏式，如果栏目再多，那样每个纵栏分配的屏幕资源就极其有限了；最后还可以加上给版权等元素信息用的底栏。在进行分栏的过程中，一定要给每个栏命名，这个命名可以在心里默念，而不必写在线框图上。

一种典型的两栏布局，每个栏都有命名

内容分块的意义是将同类内容集合在一起，在页面中规划对应区域的好处非常明显：

• 对于设计者，能够在增加元素的时，明确的按图索骥
• 对于用户，能够形成一定的浏览习惯，知道去哪里找到自己想要的东西（页面功能）
• 对视觉设计，能够体现“格式塔视觉原理”中的贴近关系

内容分块通常包含这样四个大分类：

• 页面识别（Page_ID）：包含商标、标语、页面标题、广告词、版权信息等
• 导航系统（Navi）：导航条、面包屑
• 交互工具（Tools）：搜索、登录、功能区、友情链接等
• 内容（Content）：内容的正文、列表、摘要

其中的内容（Content）可以根据实际的网站内容主题进行细分。

将不同的内容分块以颜色进行区分，就可以得到一个大体的页面安排，这些颜色分区可以在线框图最终完稿之前删除，但是在此之前，一定牢记这些区块的划分；由于整体设计是可以纵向延伸的，因此今后需要添加元素的时候，只要确定这些元素从属的分类，进行填充和重新排列就可以了。

用颜色区分内容分块的图例

一种两栏的组合式内容分块的页面实例

一种“极简梳形”内容分块的页面实例

横导航还是纵导航

在分栏和内容分块的过程中，所有的设计人员都在面临一个问题，页面中的主导航条，应该采用横排还是纵列结构；而实际上，基于两种导航条模式甚至形成了两大页面设计流派；选择横纵两种导航模式，不是设计人员去决定的，而是需要去用一些数值衡量。

相信在阅读《网站导航设计杂谈》一文之后，读者能够明确“导航是被逼无奈的产物”，那么，在什么时候选择横排导航？什么时候选择纵列导航呢？需要引入一个“导航最大宽度”的概念。

无论在信息架构中设置了多么复杂的分类，无论你打算设计多少导航级别，将所有的导航项目无差别的横向排列，类似研究屏幕复杂度问题时的方法，计算所有导航项目以横排一列时（绝对扁平化）的最大宽度，就是Navi Max Width（导航最大宽度） 。

绝对扁平化之后的导航最大宽度[图片点击可看全图]

Navi Max Width（导航最大宽度）/标准屏幕宽度=Navi值

导航最大宽度是一个像素值约数，除以标准屏幕的宽度，可以得到一个Navi值，这个值对页面导航条设计具有非常重要的意义。

当Navi值大于4的时候，亲爱的朋友，你的导航项目实在太多了，无论使用弹出效果还是其他的什么方法去缩减一级导航的长度，都无法改变臃肿的现实，要么应该选择纵列导航，要么你应该学习一下卓越网的作法，给导航一个全景的展示。

卓越网首页弹出一个全景导航展示

正如所料，极力的推荐横排导航条，而在Navi值很大，又无法缩减的情况下，使用纵列导航解决访问分流问题。

在横排导航条的设计中要注意如下的问题：

• 一级导航项目的数量尽量不要超过8个
• 如果一级导航项目超过8个，那么请使用多行的横排导航
• 多行横排导航不要再使用弹出效果
• 弹出的导航项目条不要超过标准屏幕高度的2/3
• 尽量不要让弹出的导航条遮挡主重要内容，比如Page_ID内容区块

纵列导航是一种“权宜之计”，当然很多网站都在使用它们，比如w3c.org的首页和Yahoo英文版；实际上纵列导航比横排导航更具弹性和灵活，只是在中文万维网当中，横排导航实在是太主流了，用户已经形成了某种习惯；如果页面有比较大的空间，强烈建议在设置横排导航的同时提供一个纵列导航的映射，二者并不矛盾，是可以相辅相成的。

左边还是右边

越来越的网页使用两栏或者两栏半的纵栏布局，特别是那些博客系统和SNS社区。通常设计者会把一些辅助导航、交互工具规划到一些“侧栏”里面，那么就出现了一个问题：“侧栏是应该设置在左边还是右边？”

哈，其实把侧栏设置在那一边只是一个浏览习惯的问题；设置在那一边并不重要，重要的是整个网站的统一，让用户形成一种习惯。

需要注意，把Logo放在左上角已经成为所有网站的共识；另外还要明确最基本的视觉流程原理，用户的视觉注意力总是“从左到右，从上到下”进行衰减。可以简单的把左边和右边进行一下划分，这种划分不是绝对的，但是的确存在，即：“侧栏左置的网站，更注重品牌和导航功能；侧栏右置的网站，更注重内容”。于是，很容易去理解为什么SNS网站要把它们的交互工具条设置在左边，而搜索引擎的结果页面要把辅助的搜索信息放在右边。

侧栏左置的网站，更注重品牌和导航功能

侧栏右置的网站，更注重内容

这些左边和右边的区分，并不是什么科学道理，也不是硬性规定，只是很多线框图设计人员自发的遵守的某些惯例，用户也逐渐的熟悉了这些区分，所以还是需要认真考虑的。

向内容分块填充元素

在完成分栏和内容区块划分的基础上，已经可以把页面逻辑框架中的元素填充到线框图当中去了。推荐先以一个项目中最复杂的页面进行填充，这样能够对其他页面中的分栏不合理进行及时的调整。

低保真模型是高保真模型的基础，千万不要一次把细节描绘完美，向内容分块填充元素的过程就是低保真线框图描绘的过程，具体操作如下：

1. 把每一个元素建立一个单独的组件，这个组件可以很简单的用一个方块表示
2. 每个组件都要有一个独立的名字，虽然在线框图完成之后，这些个名字可以删去，但是一定要进行命名
3. 把元素按照分类先放置到内容区块中
4. 元素放置过程中以纵向 “自上而下、从左到右”的排列“从重要到普通”的权重

给页面逻辑框架中的每个元素命名

将所有的元素放置到对应的区块后，一个简单的线框图已经具有了雏形，当然，即便是生成低保真原型，这也仅仅是一个开始而已。

有些“丑陋”的线框图雏形[图片点击可看全图]

本章小结

通过屏幕复杂度分析，区分了简单页面、组合式页面、复杂页面的种类；并且基于Web页面的特点，提出了纵向延伸的灵活设计概念；以纵栏分隔页面，按内容分块进行基本排列让元素填充工作有的放矢；但是这些仅仅是一个开始，目前的线框图还只搭建了基本框架，要领略线框图设计的进阶技巧

评论 (0) All

登陆 还没注册？