页面线框图（Wire frame）是网站设计方案中的重要组成部分，无论是I-Board 、Page-Layout、UI-Draft这些不同的称呼，它们的本质都是一样的，网站策划师、网络产品经理的最后交付文档，通常的呈现设计是最直观有效的。单纯从设计的角度，线框图也可以看作一个视觉呈现过程，虽然如此，也不能把线框图的设计当作简单的视觉问题。如何看待线框图，如何着手设计线框图，如何把握线框图的详细程度，如何让其他合作者看懂线框图，就是本系列文章要解决的问题。
线框图的本质是信息架构的表象。根据需要，页面线框图可能是一个独立页面或一整套页面序列：当针对中小型项目时，可能只需要首页以及关键页面的设计；针对复杂项目和大规模的团队协作，则需要一系列相互关联的线框图，并且包含交互设计部分。
在《网页线框图教程》的第一篇文章中，主要帮助读者了解线框图之前的必要步骤：
- 确定页面逻辑架构
- 低保真还是高保真
- 规范图例与交付物
- 基本框架模板
确定页面逻辑架构
在最近流行的一篇国外译文《画好线框图的20个步骤》中有一句话“线框图是计划中的第一步也是最重要的一步”，这是大错特错的。
线框图肯定不是计划中的第一步，在没有确定页面中“到底有什么”之前，根本无从下手去设计；确定线框图的蓝图不是靠设计者拍脑门，而是基于对内容分析之后的信息架构设计，请各位读者参考《从概念设计到信息架构》一文。
线框图并非计划中的必需步骤，更谈不上什么重要步骤。当与优秀的界面设计师、视觉设计师配合一些中小项目的时候，根本不需要什么线框图，而作为网站策划师和产品经理只需要提供页面逻辑框架就可以了。
所谓页面逻辑框架，是在整个网站信息架构确立的基础上，具体描述某个页面：都包含什么元素；这些元素的权重；页面的大概形式。
页面逻辑框架可以用逻辑表和逻辑图两种形式交付，可以单独采用一种形式，也可以同时提交两者。
- 例：Page[List02][Article_List][T1]的页面逻辑表
-
元素 类型 包含 权重 Logo
图片
模板T1
导航
链接组合
模板T1
面包屑
链接组合
模板T1
列表标题
文字
重要
文章列表
序列
文章名称、作者、发布时间
明显
页码及翻页
链接组合
上一页 下一页 当前页
明显
搜索
表单
模板T1
广告
图片
模板T1
