网页线框图课件.ppt

《网页线框图课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、引子我们知道，一篇论文的产生，大体经过了如下过程：选题、搜集资料、论证、拟定大纲、构建框架、撰写润色、定稿、发表。我们做网站实质上也是一样的过程。网站建设是一个大课题，Boss选好了题，全公司都在为这个“论文”而努力。（此处省略1万字。）具体到产品设计呢？情况更复杂，面对的不仅是整个网站这个大课题，还有各个栏目和平台这些小论文，千头万绪。运营部（包括技术部）是具体撰写论文的执笔者，大论文的选题Boss早就定下了，从一路的修改、重构，到其他的小论文，从拟定大纲到发表，我们几乎是全程参与，责任重大呀。我们面

2、对的有用户、Boss、业务部、资源部、客服部以及本部门等各种途径提交过来的各种需求（选题），经过对需求的整理分析、重要性排序、内容的布局、流程规划、交互和视觉设计等一系列过程，最终展现给用户一个完整的网站。我们是一个团队，既然是团队，那就会有分工。那策划组是做什么的呢？我讲不全，以后有空整理出来再讲，今天只讲与我天天在做的一项简单工作有关的东西……网页线框图第一章了解线框图1.1线框图简义（Wireframe）线框图，又有提法是原型、框架图，它是网站设计方案中的重要组成部分，是网站策划师、网络产品经理的

3、最后交付文档，通常的呈现设计是最直观有效的。我们虽然是用WORD画的，虽然粗糙，但还是符合直观有效的。1.2线框图的本质是信息架构的表象。信息架构代表的是内容的层次结构，而线框图则是承载内容的立体框架。根据需要，线框图可能是一个独立页面或一整套页面序列：当针对中小型项目时，可能只需要首页以及关键页面的设计；针对复杂项目和大规模的团队协作，则需要一系列相互关联的线框图，并且包含交互设计部分，比如我们正在做的事情。第一章了解线框图1.3确定页面逻辑架构《画好线框图的20个步骤》中有一句话“线框图是计划中的第

4、一步也是最重要的一步”，做过的人都知道这是不对的。线框图肯定不是计划中的第一步，在没有确定页面中“到底有什么”之前，根本无从下手去设计；确定线框图的蓝图不是靠设计者拍脑门，而是基于对需求和内容分析之后的信息架构设计，这个可以参考《从概念设计到信息架构》一文。第一章了解线框图1.3.1所谓页面逻辑框架所谓页面逻辑框架是在整个网站信息架构确立的基础上，具体描述某个页面：都包含什么元素；这些元素的权重；页面的大概形式。页面逻辑框架可以用逻辑表和逻辑图两种形式交付，可以单独采用一种形式，也可以同时提交两者。逻辑

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

6、真，执行越流畅，但是给视觉设计师的发挥空间越小；相反，线框图越是粗略，对团队配合的要求越高，视觉设计师发挥的空间越大。就我们来说，我觉得还是尽量做细的好，这样一来将更多问题解决在设计前期，二来也可以减少设计师自主发挥时引起的又一轮论证，延长工期。依照与最终产品的接近程度，线框图分为低保真和高保真两类。低保真原型（线框图）通常包括：页面的基本布局，元素的大概位置，交互的基本形式，表单项。第一章了解线框图1.4低保真还是高保真高保真原型（线框图）通常包括：精确到像素的页面布局，辅助设计元素的数量和位置，图片

7、格式尺寸，屏幕划分，超级链接的标示，带时间轴的FLASH关键帧，每个交互步骤的界面变化，表单项说明，具体文案。高保真的原型，在提交的时候会更具说服力。但缺点也同样明显，同样一个原型需要投入更多的时间，一旦设计变更投入的时间就更多；而且在项目前期，一般很难有充裕的时间做一个高保真的原型，所以在整个设计流程中的应用也有局限。题外话，能做高保真原型的在我看来是高手了，应该去做设计师，做线框图实在是大材小用了。高保真原型更多情况下是商业建站的时候用到。如果只是用于内部沟通、检验交互问题的话，视觉的保真度可以退而

8、求其次，以交互的保真度作为主要维度。应该追求速度和数量，尽可能在产品早期多尝试，多个方案，以求发现新想法并降低项目后期风险。对于三两个人配合的微型项目（比如中小企业网站）使用低保真原型配合口头沟通就可以解决实际的问题；对于复杂一些的项目，更推荐以《低保真和高保真模型混搭》的模式开展工作。小结确定了在开始设计线框图之前，整个项目及参与团队需要完成的工作，包括了需求和内容的分析。在了解一共有多少页面，每个页面都包含什么内容，那些内容是可以复用的