网页线框图幻灯片.ppt

《网页线框图幻灯片.ppt》由会员分享，可在线阅读，更多相关《网页线框图幻灯片.ppt（35页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页线框图第1页，共35页，编辑于2022年，星期二网页线框图网页线框图 第2页，共35页，编辑于2022年，星期二第一章第一章 了解线框图了解线框图o1.11.1线框图简义线框图简义（Wire frame）线框图，又有提法是原型、框架图，它是网站设计方案中的重要组成部分，是网站策划师、网络产品经理的最后交付文档，通常的呈现设计是最直观有效的。我们虽然是用WORD画的，虽然粗糙，但还是符合直观有效的。o1.2线框图的本质是信息架构的表象线框图的本质是信息架构的表象。信息架构信息架构代表的是内容的层次结构，而线框图则是承载内容的立体框架。根据需要，线框图可能是一个独立页面或一整套页面序列：当针对

2、中小型项目时，可能只需要首页以及关键页面的设计；针对复杂项目和大规模的团队协作，则需要一系列相互关联的线框图，并且包含交互设计部分，比如我们正在做的事情。第3页，共35页，编辑于2022年，星期二第一章第一章 了解线框图了解线框图o1.3确定页面逻辑架构确定页面逻辑架构 画好线框图的20个步骤中有一句话“线框图是计划中的第一步也是最重要的一步”，做过的人都知道这是不对的。线框图肯定不是计划中的第一步，在没有确定页面中“到底有什么”之前，根本无从下手去设计；确定线框图的蓝图不是靠设计者拍脑门，而是基于对需求和内容分析之后的信息架构设计，这个可以参考从概念设计到信息架构一文。第4页，共35页，编辑

3、于2022年，星期二第一章第一章 了解线框图了解线框图o1.3.1所谓页面逻辑框架所谓页面逻辑框架 所谓页面逻辑框架是在整个网站信息架构确立的基础上，具体描述某个页面：都包含什么元素；这些元素的权重；页面的大概形式。页面逻辑框架可以用逻辑表和逻辑图两种形式交付，可以单独采用一种形式，也可以同时提交两者。第5页，共35页，编辑于2022年，星期二逻辑表第6页，共35页，编辑于2022年，星期二逻辑图第7页，共35页，编辑于2022年，星期二第一章第一章 了解线框图了解线框图o1.3.2项目的页面列表项目的页面列表 确定各个页面的逻辑结构是进行页面线框图的设计前提，也是界面设计、视觉设计呈现的基础

4、；在着手设计线框图之前最好能建立一个项目的页面列表，记录整个项目需要多少张线框图的支持，每张线框图的标号和使用模板的情况，如果时间充裕，甚至可以给每张线框图一个简洁的描述。第8页，共35页，编辑于2022年，星期二o这个项目的页面列表对衡量整个设计的工作量、把控进度和工作重点非常有帮助。第9页，共35页，编辑于2022年，星期二第一章第一章 了解线框图了解线框图o1.4低保真还是高保真低保真还是高保真 线框图的细节要逼真到何种程度，要根据执行团队的实际情况来决定。一般来说，线框图的细节越逼真，执行越流畅，但是给视觉设计师的发挥空间越小；相反，线框图越是粗略，对团队配合的要求越高，视觉设计师发挥

5、的空间越大。就我们来说，我觉得还是尽量做细的好，这样一来将更多问题解决在设计前期，二来也可以减少设计师自主发挥时引起的又一轮论证，延长工期。依照与最终产品的接近程度，线框图分为低保真和高保真两类。低保真原型（线框图）低保真原型（线框图）通常包括：页面的基本布局，元素的大概位置，交互的基本形式，表单项。第10页，共35页，编辑于2022年，星期二第11页，共35页，编辑于2022年，星期二第一章第一章 了解线框图了解线框图1.4低保真还是高保真低保真还是高保真 高保真原型（线框图）高保真原型（线框图）通常包括：精确到像素的页面布局，辅助设计元素的数量和位置，图片格式尺寸，屏幕划分，超级链接的标示

6、，带时间轴的FLASH关键帧，每个交互步骤的界面变化，表单项说明，具体文案。高保真的原型，在提交的时候会更具说服力。但缺点也同样明显，同样一个原型需要投入更多的时间，一旦设计变更投入的时间就更多；而且在项目前期，一般很难有充裕的时间做一个高保真的原型，所以在整个设计流程中的应用也有局限。题外话，能做高保真原型的在我看来是高手了，应该去做设计师，做线框图实在是大材小用了。高保真原型更多情况下是商业建站的时候用到。如果只是用于内部沟通、检验交互问题的话，视觉的保真度可以退而求其次，以交互的保真度作为主要维度。应该追求速度和数量，尽可能在产品早期多尝试，多个方案，以求发现新想法并降低项目后期风险。对

7、于三两个人配合的微型项目（比如中小企业网站）使用低保真原型配合口头沟通就可以解决实际的问题；对于复杂一些的项目，更推荐以低保真和高保真模型混搭的模式开展工作。第12页，共35页，编辑于2022年，星期二第13页，共35页，编辑于2022年，星期二小 结 确定了在开始设计线框图之前，整个项目及参与团队需要完成的工作，包括了需求和内容的分析。在了解一共有多少页面，每个页面都包含什么内容，那些内容是可以复用的等等这些问题之后，细致梳理分析确定各页面要素，那么就可以开始具体的线框图设计。第14页，共35页，编辑于2022年，星期二第二章第二章 如何设计线框图如何设计线框图 在需求和内容分析之后就要开始

8、设计线框图。无论是设计低保真草稿还是高保真的模拟原型，线框图都是从基本的布局开始；良好的布局是顺畅视觉流程的开始，同时也奠定了最终访问效果的基调；布局是一个画地为牢的过程，什么东西放在哪里一旦基本确定，界面就大体确定了；设置条条框框并不是为了限制界面设计师的发挥，而是要达到页面之间的协调和整个网站的统一。第15页，共35页，编辑于2022年，星期二第二章第二章 如何设计线框图如何设计线框图 o2.1分析估算屏幕分析估算屏幕 依照页面逻辑架构，页面中有多少元素，每种元素要占用多大的屏幕面积，这是一个非常复杂的问题。引入一个“标准屏幕”的概念，即常用分辨率中最小宽度和高度尺寸的乘积。在这里可能有若

9、干种不同的声音，在宽屏显示器越来越流行的今天，网站依然要关注那些使用4:3比例显示器的人群，因此，一个相对“保守”的设计是把“800pix600pix”作为标准屏幕尺寸。当然还有一种相对“大胆”的设计是以“1024pix768pix”作为标准屏幕尺寸。第16页，共35页，编辑于2022年，星期二第二章第二章 如何设计线框图如何设计线框图 第17页，共35页，编辑于2022年，星期二第二章第二章 如何设计线框图如何设计线框图 虽然在设计低保真时只需要进行粗略的计算，但是如果有时间，还是推荐将所有元素可能占据的屏幕空间一一列出。最简便的方法是，保存其他网站上类似元素的截图，估算它们占用的屏幕面积。

10、这个估算不必十分精准，只需要简略的进行估计就可以了，毕竟线框图设计不是做精确的数学统计。第18页，共35页，编辑于2022年，星期二第二章第二章 如何设计线框图如何设计线框图 o2.2内容分块内容分块 “使用纵栏分隔内容能够获得更灵活的页面设计”，看到这句话，那些页面架构师和前端开发人员都心领神会。众所周知，Web页面是一个在纵向无限伸展的巨大创作介质，这就是为什么鼠标要设置中间的滚轮。要是非要抬杠，Web页面也可以向横向伸展的，这样的网站的确有，但不符合用户的浏览习惯。第19页，共35页，编辑于2022年，星期二第二章第二章 如何设计线框图如何设计线框图 o简单页面，完全可以不必分栏。o复杂

11、页面，通常需要有一个横栏放置Logo等内容，然后将页面分隔成若干的纵栏，便于对信息进行分块梳理；纵栏通常有两栏式、三栏式、四栏式，在极其特殊的情况下可能用到五栏式，如果栏目再多，那样每个纵栏分配的屏幕资源就极其有限了；最后还可以加上给版权等元素信息用的底栏。在进行分栏的过程中，一定要给每个栏命名，这个命名可以在心里默念，而不必写在线框图上。第20页，共35页，编辑于2022年，星期二第二章第二章 如何设计线框图如何设计线框图 o内容分块的意义内容分块的意义 将同类内容集合在一起，在页面中规划对应区域的好处非常明显：将同类内容集合在一起，在页面中规划对应区域的好处非常明显：A.对于设计者，能够在

12、增加元素的时，明确的按图索骥 B.对于用户，能够形成一定的浏览习惯，知道去哪里找到自己想要的东西（页面功能）C.对视觉设计，能够体现“格式塔视觉原理”中的贴近关系 第21页，共35页，编辑于2022年，星期二第二章第二章 如何设计线框图如何设计线框图 o内容分块通常包含这样四个大分类：内容分块通常包含这样四个大分类：A.页面识别（Page_ID）：包含商标、标语、页面标题、广告词、版权信息等 B.导航系统（Navi）：导航条、面包屑 C.交互工具（Tools）：搜索、登录、功能区、友情链接等 D.内容（Content）：内容的正文、列表、摘要第22页，共35页，编辑于2022年，星期二第二章第

13、二章 如何设计线框图如何设计线框图 o2.3向内容分块填充元素向内容分块填充元素 在完成分栏和内容区块划分的基础上，已经可以把页面逻辑框架中的元素填充到线框图当中去了。推荐先以一个项目中最复杂的页面进行填充，这样能够对其他页面中的分栏不合理进行及时的调整。低保真模型是高保真模型的基础，千万不要一次把细节描绘完美，向内容分块填充元素的过程就是低保真线框图描绘的过程，具体操作如下：第23页，共35页，编辑于2022年，星期二第二章第二章 如何设计线框图如何设计线框图 A.把每一个元素建立一个单独的组件，这个组件可以很简单的用一个方块表示 B.每个组件都要有一个独立的名字，虽然在线框图完成之后，这些

14、个名字可以删去，但是一定要进行命名 C.把元素按照分类先放置到内容区块中 D.元素放置过程中以纵向“自上而下、从左到右”的排列“从重要到普通”的权重第24页，共35页，编辑于2022年，星期二第二章第二章 如何设计线框图如何设计线框图 将所有的元素放置到对应的区块后，一个简单的线框图已经具有了雏形，当然，即便是生成低保真原型，这也仅仅是网页设计的一个开始而已。第25页，共35页，编辑于2022年，星期二小小 结结o线框图的本质是图线框图的本质是图，是一种建立在“视觉为先导”理念上的Web页面勾勒形式。o线框图产生原因是：大规模团队协作中的信息不对称。试想，如果视觉设计师懂得人机交互原理，如果交

15、互工程师熟练掌握Html语言，如果页面架构师深入理解产品策略，如果产品经理能够亲自开发数据库后台，如果程序开发人员能够规划合理的页面结构，如果内容编辑能够独立进行系统架构当这些“如果”成为现实，世界上压根不想要线框图！事实也证明，由一个人建立的个人主页往往不是从线框图开始的，因为一切尽在掌握。o线框图设计过程很简单：第一，把想法写出来；第二，从其他人那里得到反馈意见；第三，修改至定稿。第26页，共35页，编辑于2022年，星期二第三章第三章 线框图的意义线框图的意义o 线框图设计的整个过程不外乎如此：将需求讨论清楚，将页面流程图画好，将各种分支情况考虑清楚，脑子里才会逐渐对需要多少个页面形成概

16、念，哪些页面需要更高的单页面交互设计形成概念，而当完成这一步，交互的大部分工作都已经做完了，剩下的单纯去设计各个页面，占据了线框图阶段的很少的时间。更多的时间是花在：讨论讨论评审评审讨论讨论评审评审确认确认 第27页，共35页，编辑于2022年，星期二第三章第三章 线框图的意义线框图的意义o设计线框图的过程中要做些什么设计线框图的过程中要做些什么需求的了解与讨论：需求的了解与讨论：需求越清楚，以后阶段就会越高效。这个阶段，交互设计师还需要借助site map，页面流程图（page flow），或者故事板等等工具，来帮助自己和项目组了解产品需求。必须从宏观到细节，将产品的交互逻辑认认真真仔仔细细

17、思考清楚，细枝末节的东西如果不关心，到了项目进行过程中，还一定会被开发工程师追着补充各种流程中的页面。创造性的方案探索与尝试：创造性的方案探索与尝试：设计就意味着尝试各种方案，并对方案进行筛选与确认。设计本身是一种在期望和限制下进行的探索，并且将探索后的成果实施。交互设计师需要不断围绕需求与期望，进行探索并在逐步的限制中，缩小设计范围。设计方案的讨论与确认：设计方案的讨论与确认：线框图基本完成后，应该召集需求方以及技术方就线框图展开讨论，需求方能确认是否满足期望，技术方的参与能够就可行性方面给出意见，并且能够根据线框图进行初步的开发资源评估。讨论后，对线框图做一些调整，再次讨论确定后，就进入视

18、觉设计阶段，到时候将不再做轻易的结构与内容块定义的调整，让大家足够重视并对线框图达成一致。第28页，共35页，编辑于2022年，星期二第三章第三章 线框图的意义线框图的意义把问题解决在线框图阶段把问题解决在线框图阶段o设计线框图的关键在于对于需求的把握、挖掘与快速呈现，在于全程中对于各种想法的吸收与管理，在于能不能让大家都快速明白了解设计的原因和背景，并对方案达成一致。o有很多有创造力的人，却不善于空想，对着需求文档，无法让创造力的脑细胞活跃起来，大家都只能对着方案点头称是，但是到了线框图阶段，具体的产品原型会激发更多的想法，因此这个阶段，最适合进行产品开发过程中的第二次头脑风暴。o在视觉设计

19、阶段，修改的成本非常高，视觉设计师是对每一个像素精雕细琢，产品定位的改变，也许对于他们是“灭顶之灾”，这可能会意味着很多个页面要重新开始设计，当视觉设计已经到了一定的地步时，视觉设计师对“修改”慢慢会变得有点抗拒。o而交互设计师是很乐意在线框图上进行任何的可能性的探索，他会更加包容这个阶段涌入的任何想法，因为他明白这个是中间产物，需要不断完善优化。而且线框修改起来是非常容易高效的，它故意做得如此简陋难看，就是想把最核心的需求呈现给大家。所以，不要让争议、问题带入到真正的实施环节，比如视觉设计，比如开发。第29页，共35页，编辑于2022年，星期二第三章第三章 线框图的意义线框图的意义从以上的学

20、习我们可以了解到线框图的意义所在：从以上的学习我们可以了解到线框图的意义所在：o1.线框图能够帮我们将需求具体化，从而引入更多的想法，完善产品；o2.线框图能够帮助我们理清思路，怎么做，如何做有了更加系统化的认识；o3.线框图制作起来非常容易，因此能够帮助我们在各种方案里评估和筛选；o4.线框图是用来讨论的，交互设计师需要欢迎讨论、包容各种想法。o5.让项目组成员在初期就可以对网站有个清晰明了的认知；o6.能激发设计师想象力，使其在创作过程中有更多发挥空间；o7.给开发者提供一个清晰的架构，让他们知道他们需要编写的功能模块；o8.让每个页面的跳转关系都变得清晰明了；第30页，共35页，编辑于2022年，星期二第四章第四章 线框图设计工具线框图设计工具第31页，共35页，编辑于2022年，星期二第五章第五章 线框图实例线框图实例o简单纸面原型简单纸面原型 第32页，共35页，编辑于2022年，星期二第五章第五章 线框图实例线框图实例o低保真的低保真的HTML原型原型 第33页，共35页，编辑于2022年，星期二第五章第五章 线框图实例线框图实例o低保真的布局原型低保真的布局原型 第34页，共35页，编辑于2022年，星期二第五章第五章 线框图实例线框图实例o线框图原型线框图原型 第35页，共35页，编辑于2022年，星期二