页面线框图教程.docVIP

网页设计——页面线框图教程 转自 页面线框图教程（之一）：从本质到表象 2 确定页面逻辑架构 2 低保真还是高保真 4 规范图例与交付物 5 基本框架模板 6 本章小结 7 页面线框图教程（之二）：画地为牢的框架设计 8 分析屏幕的复杂度 8 从纵栏入手进行内容分块 10 横导航还是纵导航 14 左边还是右边 16 向内容分块填充元素 17 本章小结 18 页面线框图教程（之三）：模板的活字印刷术 18 确定模板数量 19 最简模板 20 模板之间不是简单的外观区别 21 Logo 22 登录注册 22 逐个设计模板 22 本章小结 25 页面线框图教程（之四）：再谈网站导航系统 25 为导航建立场景映射 25 压扁！压扁！再压扁 26 突破一条主导航的局限 28 线框图中的导航应该细化到何种程度 30 本章小结 30 面线框图教程（之五）：玩转内容形式主义 31 区分“可交互”的部分 32 无处不在的栅格系统 33 优势一：通过栅格控制屏幕资源 34 优势二：轻松实现整站图片尺寸规划 34 优势三：形成线框图的块级复用 35 图还是文？ 36 块级内容变形记 39 本章小结 44 页面线框图教程（之六）：用交互实现屏幕复用 45 稀奇古怪“层”的概念 45 覆盖与切换 45 不要吝惜用户的点击 47 新内容的屏幕定位 48 本章小结 50 页面线框图教程（之七）：不需要存在的原型 50 以前不存在 51 纸绘草图 51 线框图原型的本质 51 原型的窘境 52 说不清的为什么 52 从来都不敏捷的中间件 52 折腾人的原型测试 52 原型最终将向内容回归 52 页面线框图教程（之一）：从本质到表象 返回首页页面线框图教程（之一）：从本质到表象 2009/9/13 页面线框图（Wire frame）是网站设计方案中的重要组成部分，无论是I-Board 、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 P