网页线框图2课件

引子我们知道，一篇论文的产生，大体经过了如下过程：选题、搜集资料、论证、拟定大纲、构建框架、撰写润色、定稿、发表。我们做网站实质上也是一样的过程。网站建设是一个大课题，Boss选好了题，全公司都在为这个“论文”而努力。（此处省略1万字。）具体到产品设计呢？情况更复杂，面对的不仅是整个网站这个大课题，还有各个栏目和平台这些小论文，千头万绪。运营部（包括技术部）是具体撰写论文的执笔者，大论文的选题Boss早就定下了，从一路的修改、重构，到其他的小论文，从拟定大纲到发表，我们几乎是全程参与，责任重大呀。我们面对的有用户、Boss、业务部、资源部、客服部以及本部门等各种途径提交过来的各种需求（选题），经过对需求的整理分析、重要性排序、内容的布局、流程规划、交互和视觉设计等一系列过程，最终展现给用户一个完整的网站。我们是一个团队，既然是团队，那就会有分工。那策划组是做什么的呢？我讲不全，以后有空整理出来再讲，今天只讲与我天天在做的一项简单工作有关的东西……网页线框图

第一章了解线框图1.1线框图简义（Wireframe）线框图，又有提法是原型、框架图，它是网站设计方案中的重要组成部分，是网站策划师、网络产品经理的最后交付文档，通常的呈现设计是最直观有效的。我们虽然是用WORD画的，虽然粗糙，但还是符合直观有效的。1.2线框图的本质是信息架构的表象。

信息架构代表的是内容的层次结构，而线框图则是承载内容的立体框架。根据需要，线框图可能是一个独立页面或一整套页面序列：当针对中小型项目时，可能只需要首页以及关键页面的设计；针对复杂项目和大规模的团队协作，则需要一系列相互关联的线框图，并且包含交互设计部分，比如我们正在做的事情。第一章了解线框图1.3确定页面逻辑架构

《画好线框图的20个步骤》中有一句话“线框图是计划中的第一步也是最重要的一步”，做过的人都知道这是不对的。线框图肯定不是计划中的第一步，在没有确定页面中“到底有什么”之前，根本无从下手去设计；确定线框图的蓝图不是靠设计者拍脑门，而是基于对需求和内容分析之后的信息架构设计，这个可以参考《从概念设计到信息架构》一文。第一章了解线框图1.3.1所谓页面逻辑框架

所谓页面逻辑框架是在整个网站信息架构确立的基础上，具体描述某个页面：都包含什么元素；这些元素的权重；页面的大概形式。页面逻辑框架可以用逻辑表和逻辑图两种形式交付，可以单独采用一种形式，也可以同时提交两者。

逻辑表逻辑图第一章了解线框图1.3.2项目的页面列表

确定各个页面的逻辑结构是进行页面线框图的设计前提，也是界面设计、视觉设计呈现的基础；在着手设计线框图之前最好能建立一个《项目的页面列表》，记录整个项目需要多少张线框图的支持，每张线框图的标号和使用模板的情况，如果时间充裕，甚至可以给每张线框图一个简洁的描述。这个《项目的页面列表》对衡量整个设计的工作量、把控进度和工作重点非常有帮助。第一章了解线框图1.4低保真还是高保真

线框图的细节要逼真到何种程度，要根据执行团队的实际情况来决定。一般来说，线框图的细节越逼真，执行越流畅，但是给视觉设计师的发挥空间越小；相反，线框图越是粗略，对团队配合的要求越高，视觉设计师发挥的空间越大。就我们来说，我觉得还是尽量做细的好，这样一来将更多问题解决在设计前期，二来也可以减少设计师自主发挥时引起的又一轮论证，延长工期。依照与最终产品的接近程度，线框图分为低保真和高保真两类。

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

第一章了解线框图1.4低保真还是高保真

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

高保真的原型，在提交的时候会更具说服力。但缺点也同样明显，同样一个原型需要投入更多的时间，一旦设计变更投入的时间就更多；而且在项目前期，一般很难有充裕的时间做一个高保真的原型，所以在整个设计流程中的应用也有局限。

题外话，能做高保真原型的在我看来是高手了，应该去做设计师，做线框图实在是大材小用了。高保真原型更多情况下是商业建站的时候用到。如果只是用于内部沟通、检验交互问题的话，视觉的保真度可以退而求其次，以交互的保真度作为主要维度。应该追求速度和数量，尽可能在产品早期多尝试，多个方案，以求发现新想法并降低项目后期风险。

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

小结确定了在开始设计线框图之前，整个项目及参与团队需要完成的工作，包括了需求和内容的分析。在了解一共有多少页面，每个页面都包含什么内容，那些内容是可以复用的……等等这些问题之后，细致梳理分析确定各页面要素，那么就可以开始具体的线框图设计。第二章如何设计线框图

在需求和内容分析之后就要开始设计线框图。无论是设计低保真草稿还是高保真的模拟原型，线框图都是从基本的布局开始；良好的布局是顺畅视觉流程的开始，同时也奠定了最终访问效果的基调；布局是一个画地为牢的过程，什么东西放在哪里一旦基本确定，界面就大体确定了；设置条条框框并不是为了限制界面设计师的发挥，而是要达到页面之间的协调和整个网站的统一。

第二章如何设计线框图

2.1分析估算屏幕依照页面逻辑架构，页面中有多少元素，每种元素要占用多大的屏幕面积，这是一个非常复杂的问题。引入一个“标准屏幕”的概念，即常用分辨率中最小宽度和高度尺寸的乘积。在这里可能有若干种不同的声音，在宽屏显示器越来越流行的今天，网站依然要关注那些使用4:3比例显示器的人群，因此，一个相对“保守”的设计是把“800pix×600pix”作为标准屏幕尺寸。当然还有一种相对“大胆”的设计是以“1024pix×768pix”作为标准屏幕尺寸。第二章如何设计线框图

第二章如何设计线框图

虽然在设计低保真时只需要进行粗略的计算，但是如果有时间，还是推荐将所有元素可能占据的屏幕空间一一列出。最简便的方法是，保存其他网站上类似元素的截图，估算它们占用的屏幕面积。这个估算不必十分精准，只需要简略的进行估计就可以了，毕竟线框图设计不是做精确的数学统计。第二章如何设计线框图

2.2内容分块

“使用纵栏分隔内容能够获得更灵活的页面设计”，看到这句话，那些页面架构师和前端开发人员都心领神会。众所周知，Web页面是一个在纵向无限伸展的巨大创作介质，这就是为什么鼠标要设置中间的滚轮。要是非要抬杠，Web页面也可以向横向伸展的，这样的网站的确有，但不符合用户的浏览习惯。第二章如何设计线框图

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

内容分块的意义将同类内容集合在一起，在页面中规划对应区域的好处非常明显：A.对于设计者，能够在增加元素的时，明确的按图索骥B.对于用户，能够形成一定的浏览习惯，知道去哪里找到自己想要的东西（页面功能）C.对视觉设计，能够体现“格式塔视觉原理”中的贴近关系第二章如何设计线框图

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

A.页面识别（Page_ID）：包含商标、标语、页面标题、广告词、版权信息等B.导航系统（Navi）：导航条、面包屑C.交互工具（Tools）：搜索、登录、功能区、友情链接等D.内容（Content）：内容的正文、列表、摘要第二章如何设计线框图

2.3向内容分块填充元素

在完成分栏和内容区块划分的基础上，已经可以把页面逻辑框架中的元素填充到线框图当中去了。推荐先以一个项目中最复杂的页面进行填充，这样能够对其他页面中的分栏不合理进行及时的调整。低保真模型是高保真模型的基础，千万不要一次把细节描绘完美，向内容分块填充元素的过程就是低保真线框图描绘的过程，具体操作如下：第二章如何设计线框图

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

将所有的元素放置到对应的区块后，一个简单的线框图已经具有了雏形，当然，即便是生成低保真原型，这也仅仅是网页设计的一个开始而已。小结线框图的本质是图，是一种建立在“视觉为先导”理念上的Web页面勾勒形式。线框图产生原因是：大规模团队协作中的信息不对称。试想，如果视觉设计师懂得人机交互原理，如果交互工程师熟练掌握Html语言，如果页面架构师深入理解产品策略，如果产品经理能够亲自开发数据库后台，如果程序开发人员能够规划合理的页面结构，如果内容编辑能够独立进行系统架构……当这些“如果”成为现实，世界上压根不想要线框图！事实也证明，由一个人建立的个人主页往往不是从线框图开始的，因为一切尽在掌握。线框图设计过程很简单：第一，把想法写出来；第二，从其他人那里得到反馈意见；第三，修改至定稿。第三章线框图的意义线框图设计的整个过程不外乎如此：将需求讨论清楚，将页面流程图画好，将各种分支情况考虑清楚，脑子里才会逐渐对需要多少个页面形成概念，哪些页面需要更高的单页面交互设计形成概念，而当完成这一步，交互的大部分工作都已经做完了，剩下的单纯去设计各个页面，占据了线框图阶段的很少的时间。更多的时间是花在：

讨论——评审——讨论——评审——确认

第三章线框图的意义设计线框图的过程中要做些什么需求的了解与讨论：需求越清楚，以后阶段就会越高效。这个阶段，交互设计师还需要借助sitemap，页面流程图（pageflow），或者故事板等等工具，来帮助自己和项目组了解产品需求。必须从宏观到细节，将产品的交互逻辑认认真真仔仔细细思考清楚，细枝末节的东西如果不关心，到了项目进行过程中，还一定会被开发工程师追着补充各种流程中的页面。创造性的方案探索与尝试：设计就意味着尝试各种方案，并对方案进行筛选与确认。设计本身是一种在期望和限制下进行的探索，并且将探索后的成果实施。交互设计师需要不断围绕需求与期望，进行探索并在逐步的限制中，缩小设计范围。设计方案的讨论与确认：线框图基本完成后，应该召集需求方以及技术方就线框图展开讨论，需求方能确认是否满足期望，技术方的参与能够就可行性方面给出意见，并且能够根据线框图进行初步的开发资源评估。讨论后，对线框图做一些调整，再次讨论确定后，就进入视觉设计阶段，到时候将不再做轻易的结构与内容块定义的调整，让大家足够重视并对线框图达成一致。第三章线框图的意义把问题解决在线框图阶段设计线框图的关键在于对于需求的把握、挖掘与快速呈现，在于全程中对于各种想法的吸收与管理，在于能不能让大家都快速明白了解设计的原因和背景，并对方案达成一致。有很多有创造力的人，却不善于空想，对着需求文档，无法让创造力的脑细胞活跃起来，大家都只能对着方案点头称是，但是到了线框图阶段，具体的产品原型会激发更多的想法，因此这个阶段，最适合进行产品开发过程中的第二次头脑风暴。在视觉设计阶段，修改的成本非常高，视觉设计师是对每一个像素精雕细琢，产品定位的改变，也许对于他们是“灭顶之灾”，这可能会意味着很多个页面要重新开始设计，当视觉设计已经到了一定的地步时，视觉设计师对“修改”慢慢会变得有点抗拒。而交互设计师