页面线框图教程.ppt

引 子 我们知道，一篇论文的产生，大体经过了如下过程：选题、搜集资料、论证、拟定大纲、构建框架、撰写润色、定稿、发表。我们做网站实质上也是一样的过程。网站建设是一个大课题，Boss选好了题，全公司都在为这个“论文”而努力。（此处省略1万字。） 具体到产品设计呢？情况更复杂，面对的不仅是整个网站这个大课题，还有各个栏目和平台这些小论文，千头万绪。运营部（包括技术部）是具体撰写论文的执笔者，大论文的选题Boss早就定下了，从一路的修改、重构，到其他的小论文，从拟定大纲到发表，我们几乎是全程参与，责任重大呀。我们面对的有用户、 Boss、业务部、资源部、客服部以及本部门等各种途径提交过来的各种需求（选题），经过对需求的整理分析、重要性排序、内容的布局、流程规划、交互和视觉设计等一系列过程，最终展现给用户一个完整的网站。 我们是一个团队，既然是团队，那就会有分工。那策划组是做什么的呢？我讲不全，以后有空整理出来再讲，今天只讲与我天天在做的一项简单工作有关的东西…… 网页线框图 第一章 了解线框图 1.1线框图简义（Wire frame） 线框图，又有提法是原型、框架图，它是网站设计方案中的重要组成部分，是网站策划师、网络产品经理的最后交付文档，通常的呈现设计是最直观有效的。我们虽然是用WORD画的，虽然粗糙，但还是符合直观有效的。 1.2线框图的本质是信息架构的表象。 信息架构代表的是内容的层次结构，而线框图则是承载内容的立体框架。根据需要，线框图可能是一个独立页面或一整套页面序列：当针对中小型项目时，可能只需要首页以及关键页面的设计；针对复杂项目和大规模的团队协作，则需要一系列相互关联的线框图，并且包含交互设计部分，比如我们正在做的事情。 第一章 了解线框图 1.3确定页面逻辑架构 《画好线框图的20个步骤》中有一句话“线框图是计划中的第一步也是最重要的一步”，做过的人都知道这是不对的。 线框图肯定不是计划中的第一步，在没有确定页面中“到底有什么”之前，根本无从下手去设计；确定线框图的蓝图不是靠设计者拍脑门，而是基于对需求和内容分析之后的信息架构设计，这个可以参考《从概念设计到信息架构》一文。 第一章 了解线框图 1.3.1所谓页面逻辑框架 所谓页面逻辑框架是在整个网站信息架构确立的基础上，具体描述某个页面：都包含什么元素；这些元素的权重；页面的大概形式。页面逻辑框架可以用逻辑表和逻辑图两种形式交付，可以单独采用一种形式，也可以同时提交两者。 第一章 了解线框图 1.3.2项目的页面列表 确定各个页面的逻辑结构是进行页面线框图的设计前提，也是界面设计、视觉设计呈现的基础；在着手设计线框图之前最好能建立一个《项目的页面列表》，记录整个项目需要多少张线框图的支持，每张线框图的标号和使用模板的情况，如果时间充裕，甚至可以给每张线框图一个简洁的描述。 这个《项目的页面列表》对衡量整个设计的工作量、把控进度和工作重点非常有帮助。 第一章 了解线框图 1.4低保真还是高保真 线框图的细节要逼真到何种程度，要根据执行团队的实际情况来决定。一般来说，线框图的细节越逼真，执行越流畅，但是给视觉设计师的发挥空间越小；相反，线框图越是粗略，对团队配合的要求越高，视觉设计师发挥的空间越大。就我们来说，我觉得还是尽量做细的好，这样一来将更多问题解决在设计前期，二来也可以减少设计师自主发挥时引起的又一轮论证，延长工期。 依照与最终产品的接近程度，线框图分为低保真和高保真两类。 低保真原型（线框图）通常包括：页面的基本布局，元素的大概位置，交互的基本形式，表单项。 第一章 了解线框图 1.4低保真还是高保真 高保真原型（线框图）通常包括：精确到像素的页面布局，辅助设计元素的数量和位置，图片格式尺寸，屏幕划分，超级链接的标示，带时间轴的FLASH关键帧，每个交互步骤的界面变化，表单项说明，具体文案。 高保真的原型，在提交的时候会更具说服力。但缺点也同样明显，同样一个原型需要投入更多的时间，一旦设计变更投入的时间就更多；而且在项目前期，一般很难有充裕的时间做一个高保真的原型，所以在整个设计流