网站信息框架图_网站信息框架图怎么做

网站信息框架图_网站信息框架图怎么做

好久不见，今天我想和大家探讨一下关于“网站信息框架图”的话题。如果你对这个领域还不太熟悉，那么这篇文章就是为你准备的，让我们一起来了解一下吧。

文章目录列表:

1.网页布局结构有哪些？

2.网页设计布局包括哪些类型?

3.网页原型图怎么画-网站制作流程步骤详解

4.一张图讲清楚产品架构，手把手教你画产品框架图

5.网站框架图工具

6.网页制作的结构布局有哪些？

网页布局结构有哪些？

一、简介：布局就是以_合适浏览的方式将和文字排放在页面的不同位置。不同的制作者会有不同的布局设计。

二、网页布局有以下几种常见结构：

1“国字”型布局：

“国”字型布局由“同”字型布局进化而来，因布局结构与汉字“国”相似而得名。其页面的_上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，_下部分一般放置网站的版权信息和****等。?

2T型布局

T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。

3标题正文型

标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。

4左右框架型布局

左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容 .

5上下框架型

上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。

6综合框架型

综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术。

7POP布局

POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。?

7FLASH布局

FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。

网页设计布局包括哪些类型?

1、?国?字型

也可成为?同?字型，一般的大型网站都喜欢使用这种类型的网页布局，也是网上_常见的网页布局结构类型。在网页上方是网站标题和横幅广告条;然后是网站主要内容，左右各分列两小条内容，中间则是主要部分，一起罗列到底;_下方则是网站一些基本信息、****、版权声明等。

2、拐角型

拐角型与国字型设计很相近，只是形式上的区别。在网页上方是网站标题和广告横幅;然后左侧是一窄列链接或导航链接，右侧是网站正文;_下方也是一些网站辅助信息。

3、标题正文型

标题正文型在_上方是标题或一些类似信息;下方则是正文信息，即文章页面或注册页面等。

4、左右框架型

左右框架型是一种左右为分别两页的框架结构布局，这种类型业非常清晰且一幕了然。一般左侧是导航链接，在_上方有个小标题或标志;右侧则是正文。

5、上下框架型

上下框架型是一种上下为分别两页的框架结构布局。一般上方是导航链接，下方则是正文。

6、封面型

封面型基本上是一些网站首页的设计布局，大部分出现在企业网站和个人主页上。多数是一些精美平面设计结合一些小的动画设计，再配上几个简单的链接或是设计一个?进入?链接，也可以直接再网站首页上做链接。

7、Flash型

Flash型是采用目前非常流行的Flash，它的功能强大且网页信息表达丰富，若好好设计，其视觉效果及听觉效果是不会低于传统多媒体的。

关于网页设计布局包括哪些类型，环球青藤小编就和您分享到这里了。如果您对影视后期有浓厚的兴趣，希望这篇文章可以为您提供帮助。如果您还想了解更多关于摄像技巧、后期剪辑的方法及素材等内容，可以点击本站的其他文章进行学习。

网页原型图怎么画-网站制作流程步骤详解

产品经理必备技能|如何画原型

产品经理当然要会画原型啦~

聊聊怎么画原型吧!

在画原型之前,更重要的事情,就是画页面流程图和信息架构图!假如你没有这些东西,就开始画原型,那么等着你的就是没完没了的改改改。

页面流程图是以用户视角,看流程合理性。通常适合于跳转比较复杂的产品功能,如电商、社交产品。

为什么要画页面流程:

(1)是交互设计/原型设计的基本依据,是逻辑基础。如果你都没想好页面流转的顺序,那么你画的原型一定不是可以确定下来的版本

(2)代表了用户的操作过程,先画页面流程图能迅速发现体验问题。有了页面流程图,你可以设身处地想象用户在使用产品时的操作流程,发现其中可能出现的问题

(3)_页面重点元素与逻辑关系,提升原型的设计效率。很多页面不是全新页面,而是在原有页面做一些修改,如果你知道页面流转顺序,那么会给你画原型减轻很多工作量

页面流程图包含:

(1)四方形:业务流程中的四方形部分,异常流程或弹层通常用菱形表示

(2)流向:主干流向和辅助流向

(3)重点元素:每个流程中,重点要体现和表达的内容是什么

画页面流程图的工具:

(1)Axure:画了页面流程图可以紧接着画原型

(2)ppt:方便讲解

需要注意的地方:

(1)回归业务流程,明确主线:页面流程一定来自于业务流程,一般为业务流程中的方形部分。异常流程一般为弹层或弹窗提示。业务流程画的好,页面流程就简单。

(2)明确页面中的重点元素:功能在页面中,有哪些是需要表现元素。增加异常流程的处理逻辑。增加辅助的帮助页面。考虑下游触发点(按钮/链接/滑动...)。

(3)沟通与优化:首先要尽可能穷举涉及的页面,然后做减法,有些页面合并或删除。通过原型草图,优化调整页面关键元素。与UI、UE、前端研发多沟通会有更好的效果。

页面流程图一般规则:

页面流程图例:

一个具体案例:

业务流程:

页面流程:

主要是分离出了普通用户的操作流程,加异常处理。

对于普通用户的关键页面和关键流向:

页面流程图:

(1)分离出5个页面,确定流程流向

(2)固定元素,例如在“1购物车”中,“提交订单”就是下游触发点,点击后流向下一个页面;在“2输入优惠码”中有关键元素“填写优惠码”,另外还有下游触发点“确认订单”...

(3)针对每个页面去画对应的原型图

信息架构图,以产品视角,看包含多少功能点。适合于层级分明的,如音乐产品、新闻客户端、阅读类产品等。

信息架构图例1:

有了页面流程图或信息架构图,现在终于可以开始画原型啦。首先,什么是产品原型设计?

产品原型,俗称线框图,大概就是草图的意思吧。它是产品落地的关键点,是从虚拟概念到用户接触的节点。同时也是产品经理产出的关键内容,上传下达,上给老板,下给UI、UE同事。

产品从原型到上线的流程:

大公司的产品经理只需要做手绘和低保真的部分,小公司可能还要_交互设计...

案例:

好的原型有什么特点:

(1)整体:页面结构清晰、跳转关系明确、与业务流程一致、完整表达用户需求

(2)独立页面:功能元素明确有序、位置关系清晰、不同状态变化清晰

(3)交互设计:清晰的交互逻辑、一致交互方式、界面_

常用工具:

(1)纸笔:自己画画,快速学习和定位

(2)白板:多人讨论

(3)软件Axure/Sketch/墨刀:产出正式文档

案例:

(1)研究流程:业务流程->页面流程

(2)确定页面框架:大概确定页面布局和大的框架

(3)画原型:画模块,确定交互细节

注意事项:

(1)尽可能用真实比例、真实文案,使元素更真实,也避免在需求评审时被之一。尽可能真实模拟极端情况,并示例清楚。

(2)紧扣需求主体,不横生枝节。如果原型需要增加新功能,一定要是来源于需求,并且要考虑后端数据来源。

(3)不要上颜色!原型就用黑白灰,不要给UI、UE挖坑

(4)目录树清晰,阅读流畅

(5)保存修改记录,关键修改重新保存文件

画/改原型的时间尽量控制在20%工作时间之内,否则就要问问自己是不是哪里出问题了哦。

产品需求想明白了没

产品流程理清楚了没

手绘草图画了没

手绘草图和Boss确认了没

网站制作流程步骤详解

简单来说,网页设计的目的就是产生网站。一个好的网站是做推广的基础,下面YJBSY我为大家收集整理了关于网站制作流程步骤,希望对大家有帮助!

_步:明确网站的定位

我们要明确自己网站的定位,清楚公司的产品优势以及访问的目标群体。这是我们首先要做分析的,只有根据自己公司的实际情况,来制作网站的风格定位。众所周知,网站风格分营销型网站、品牌型网站、电商网站、_网站等,关于我们的类型我下次可以给大家具体讲解。档你明确了自己网站的定位后,开始收集相关的网站案例,作为下一步工作的参考。

第二步:制作网页原型图

这是一个费脑活,目前大多数人都是采用Axure的软件制作,画原型图需要参考很多网站风格,通过不断的借鉴,才能总结自己的网站风格。目前设计流行的元素是采用图标配文字,界面扁平化,尺寸做成宽屏风格。在制作原型图的过程中,我们需要看很多的网站风格,如果你是要做外贸网站,那么你需要寻找很多国外_的网站,看一下他们的`网站风格,才能很好的找到那种思维感觉。国内的网站相对来说还是比较保守一些,尽管也是扁平化设计,但是从布局上大多数网站是异曲同工。

第三步:上色/UI界面设计

当原型图做好以后,可以开始交给设计师做UI设计,设计师会根据原型图的布局进行上色设计,但是不局限于原型图,_的设计师不会按部就班执行,会根据自己的经验适度做一些细节布局上的更改,此举的目的是为了提高界面美观和用户体验度。

第四步:DIV+CSS切图/排版

当设计工作完成后,要开始做切图,如果网站只是PC站,切图只要做一套样式,如果是响应式网站开发,切图就需要做三套样式,分别为PC端、平板、手机端。响应式网站会根据不同分辨率和屏幕大小自动适应,以达到_好的体验效果,但是在这里我需要补充一句,不是所有的网站都适合做成响应式,因站而异,具体原因下一步文章在分享。

第五步:程序开发

切图完成后,就进入程序开发阶段,程序开发就是做后台管理,让网站后期能有一个管理后台来更新前端的资料内容,目前开发网站的开发语言比较流行的有两种:一是PHP语言,二是.net语言。

第六步:网站Bug测试和资料填充

程序开发出来后,交给专职客服来测试Bug,边填充资料边测试页面效果,刚开发出来的网站都会存在Bug漏洞,因为是纯手工制作的项目,靠键盘一个一个字母敲出来的代码,有Bug实属正常现象,所以就需要客服进行测试,测试出来的问题点整理文档形式交给程序员进行修复。

原型是产品经理或者交互设计师所设计的某一需求或者某一问题的具体的解决方案。绘制原型的工具有很多,我们公司大多的产品用的都是Axure。用这个软件,高保真或者低保真原型都能做的很好。那么,怎样的原型才适合团队交流?

毕竟绘制出来的原型并不是只给自己看的,还要讲解给团队里的成员,UI/前端/开发。特别是进行小组内评审的时候,通过演示原型,需要向他们讲解产品内部的逻辑、具体的页面、动效等,还要向他们询问设计是否合理,能否实现等,静心倾听他们的意见。这时候,原型就是一个思维传达的工具,将你的想法,翻译并灌输给你的团队成员。同样,原型是也团队的交流工具,针对绘制出来的原型,每个人都可以谈谈自己的看法,交流思想,完善原型不足的地方。

所以原型绘制出来,必须要有基本的交付标准。

一、原型设计的基本交付标准

1.清楚------让他人能明白产品是干什么的,包括什么功能,有哪些页面。

需要清楚地表达页面有哪些内容模块

需要清楚地表达模块内部的构成元素

2.清晰------让队友知道具体有哪些要求,指导他们如何做

1功能操作

某一个功能可以进行哪些操作,点击/鼠标悬浮/拖动等操作,以及页面会有什么反应。(方便开发的工作)。

2操作路径

有一些操作是要跳转页面,跳转的路径需要标清楚,跳到哪去了,涉及哪些页面,页面之间是如何联系的。防止用户迷失。

3点击状态

一些链接,按钮,需要标明它初始的时候是什么样,鼠标悬浮有什么效果(颜色/下划线/提示语等),点击的样式变化,以及点击后的样式。(这些可以为前端的工作提供方便)

4信息组合

相关的信息需要组合在一起,比如一些基本信息,姓名/_/年龄等_好放一块,不要分开。不相关的保持距离。

5位置排序

页面的布局应该适应用户的习惯,浏览方式、工作任务。_强调重点,方便用户的工作。一些数据可以思考一下它们的排列方式,按什么排序,能方便用户查找,仍旧是“以用户为中心”。

3.周全-----产品的各种细节,不能疏忽

1交互状态

某些重要的操作,交互样式是怎样的,效果如何,_好单独抽出来做成高保真,演示给他人看,让他们对产品有深入的体验和感受。

2数据显示

原型上涉及的相关数据做好有真实的案例,将需要获取的关键数据全部展示出来,比如一篇文章,需要的数据:作者、发布时间、浏览量、喜欢数、收藏数等,方便开发准备必要的数据接口。

3异常考虑

需要考虑一些突_况的应对,比如断网、加载太慢、数据已经被删除了、数据找不到了、没有访问权限等等情况。

4配套页面

产品里的一些功能可能和其他产品有关联,需要将可能涉及的其他页面包括到项目内。比如页面在wap上手机的浏览样式、一些发送给用户的消息/短信的内容和样式等等。

4.基本审美

1对齐

2间距

3颜色

4字体

推荐大家看看《写给大家看的设计书》这类易上手的书籍。

5.基本规范

1页面尺寸

web的宽度有960px、1000px、1200px,_有安卓、iphone5、iphone6等,需要与已有的产品保持_的尺寸。

2字体大小

标题可以是18px或者16px,内容可以是14px。既要考虑用户是否看到清,又要考虑美观。

3颜色

原型不要有太多的颜色,坚持黑白灰,除非要_,可以用其他的颜色。

4弹窗

弹唱的样式_好做_,弹窗名+内容+操作按钮+关闭

5元件

不在原型正文添加过多的截图、图标样式,会对UI的设计造成干扰。

二.Axure的快捷使用技巧

工欲善其事必先利其器,工具使用的越娴熟,才能节省大量时间用于方案的思考。下面将简要分享Axure绘制原型时的一些快捷操作:

首先在顶部菜单栏中找到<视图>,把需要的部件显示,就可以设置了。

1.组件库的建立(能提_率,保证产品层面的_一致)

2.母版的使用(适用于多页面通用的部分,修改后,集体自动更新)

3.设置页面样式(页面的字体、背景能一次性设置好)

4.元件的交互样式

5.元件组合

把要组合的原件用鼠标框在一起,按住ctrl+G,成为组合后就可方便复制拖动了。许下按住ctrl+shift+G,也可以点击选中后,点击下图的两个图标来组合和取消组合。

6.对齐、居中、平均分布

选中要对其的内容,选择一种分布样式,就能快速得到整齐的原型样式,而不用一个个手动调整。

7.输入框类型的设置(预设好类型)

一些输入框,可能需要设置默认文字,可以直接选中了输入框后,在原件属性里设置提示文字和一些限制。

8.元件的提示语

有些文字需要有鼠标悬浮显示提示语的动作,可以直接在原件的属性里设置“原件提示”,输入要显示的内容,即可。

三、制作原型的过程

1.梳理功能点-------------------将需求转化为功能清单,标出重要等级(前提是需求已经梳理清楚)

2.规划产品结构----------------用Xmind或者笔和纸等工具画出产品有几个页面,每个页面包含哪些元素

3.整理原型目录----------------用Axure添加原型的几个页面,考虑页面之间的跳转关系

4.设计页面的布局(打格子)-----用不同的色块,方框来表示这部分将要表示什么板块,设计好页面的布局

5.填充各模块的细节----------在方框里把具体的信息和数据填充完整

6.增加少量的交互动作--------------体现在一些涉及到任务的操作

7.页面注释-------------完善交互说明

8.审查自检------------------功能是否覆盖完全;页面有没有缺失;流程是否明确;状态是否完备

四、原型应用中的经验

因为我多是负责后台系统的优化,所以是直接和开发打交道,如果涉及前台页面,就需要UI先将原型做成,再由前端制作含有动效的demo,开发再按照demo开发。但是不论哪种,绘制出来的原型一定需要让队友都明白你的逻辑和要表达的重点。

_次负责项目的时候,我用的是高保真,画完整的原型就花了一星期多,各种动作和交互,恨不得做个虚拟的产品。但是和开发讲了原型后,等来验收项目的时候,才发现,开发大部分都没有按照原型上的动作来,甚至连细节都有遗漏。一个个催着补上后,我开始思考这种方式是不是不太划算,太费事费力,结果又不太好。

后来我看了我上级绘制的原型,都是以静态页面为主,可以说是低保真,但是每一种情况都详细地用图文描述清楚,点击之后是什么样子,将要获取什么数据,失败了会怎么样都有。而且这种方式,完成的特别快。于是我就选取低保真模式的开始画原型,结果发现,开发有时候并不能将一些动作做好。

于是我开始“T式原型”。“T式原型”就是大部分是以低保真铺展开,将整个产品的逻辑都直接呈现出来,再在某些需要重点描述的地方用高保真描述深入。所以,我的原型大部分是以低保真+注释说明和高保真+动作演示的组合。不过对于交互简单的产品来说,低保真模型足够了。

每个产品绘制原型的习惯和风格都有所不同,但关键还是需要进行小组会议来向队友们讲解原型和逻辑,在开发的过程中,需要多沟通。

另外,分享大家关于AXURE学习的网站,可以在里面找到免费的软件安装包和教学课程。

/

如果对文章感兴趣,欢迎评论留言,坚持喜欢的事情,加油~

一张图讲清楚产品架构，手把手教你画产品框架图

什么是产品架构图

产品架构图是产品经理用来表达自己产品设计机制的一张概念图：

它将可视化的具象产品功能，抽象成信息化、模块化、层次清晰的架构，并通过不同分层的交互关系、功能模块的组合、数据和信息的流转，来传递产品的业务流程、商业模式和设计思路。

由于产品架构图通常用于比较复杂的产品项目中，目前介绍产品架构图的相关书籍和资料极少（尤其是入门级别的资料很少提及），却是设计复杂产品时不可或缺的文档之一。

没有资料的探索过程漫长且没有方向，在终于有所沉淀后，我花了四周写下了这篇总结，希望可以为你绘制产品框架图时提供简明的参考。

为什么要画

梳理自己对产品方向的判断：

思考这张图如何设计的过程，也是帮助你梳理“半年内自己的产品该往何处去、需求应该如何分期和落地、和其他产品的依赖&竞争关系是什么、未来的可拓展性在哪里”等问题的过程。

为技术&运营的输出形成支撑：

当这张图被设计出来后，按照产品架构图的结构和路径，项目的里程碑（RoadMap）就可以被清晰的拆解出来，同时项目成员也可以根据这张架构图产出运营计划、技术系统架构方案等强依赖产品方向的方案。

让他人可视化的理解你的产品架构：

能较为清晰简单的呈现自己的思路、明确自己的产品边界、指明发展的方向，常用于在项目规划或项目总结中进行演示，帮助不了解你的产品的人快速的建立对你的产品结构、功能、复杂度的认知。

何时需要画

建议在复杂项目开始前写：

当你要开始设计一个系统性、完整的需求时，如果跳过画产品架构图的步骤，直接开始画原型、写PRD、kick off，就很容易发生“改了又改”、“做了一版需求然后又_”的情况。

但“种一棵树_好的时间是十年前，其次是现在”：

如果你的项目已经进行到一半，自己却从未产出过这张图，那么就从此刻开始，按照下文的步骤尝试为自己的产品产出一张产品架构图吧。

如何画

之前我们分享了AR_全干货及资料设计AR产品，你一定要看的总结?，你可能对AR相关的背景知识已经有所了解。为了分享的延续性，我们来做一个大胆的假设*：

假设你是 微信-扫码功能 的产品经理，有一天老板把你叫到办公室，一番鼓励后拍着你的肩对你说：

“苹果发布会看了没？苹果这么重视对AR能力的支持，我们微信也要赶紧把AR功能做起来。这是个Allen（张小龙）很重视的项目，你回去好好设计一下，明天来跟我过方案。记住，要能够一炮打响，全民参与喔！”

啊，张小龙级别的项目啊！明天就要出方案，怎么办 ？

画前准备

列出问题域

在需求初期，产品经理得到的往往只是一句比较模糊的需求描述，它们可能来自于老板、运营或用户。

直接把这句话作为核心产品功能是不恰当的，合理的做法是先把这个产品所有的问题域列清楚。

“问题域”是指自己的产品能够解决的所有问题的空间集合。从核心需求出发，将所有当前需要解决、未来可能要解决的问题放入产品框架的范围，能够帮助你的产品架构图拥有更高的可拓展性，在后续具备迭代和优化的空间。

以微信AR的需求为例，问题域是这样一个集合：

详细操作步骤：

1. 找到收到的需求中，跟产品形态、产品目标相关的词句，去列出“XX的流程会是什么样”、“XX该怎么达成”之类的问题，直到如果这些问题解决，能够实现核心需求的方向和业务目标。

2. 去逐次寻找这些问题需求被解决的过程中，是否有其他要先解决掉的问题、或者其他跟业务相关的问题能够被解决/改善。

3. 按照层级去罗列出所有的问题，并附上自己的初步回答，从而形成一个初步的、自己的产品能够解决的“问题域”。

确定产品方向

在经过问题域的罗列后，你应该能够得到一个模糊的产品方向和功能范围。把这些问题域的答案抽象总结成一个确定的产品需求。

以微信AR的需求为例，根据问题域，我们发现需求不只是扫码组件增加AR识别能力这么简单，整个需求里需要引入广告主的角色，并且需要和广点通、腾讯开放_等团队合作。_终得到的产品方向描述是这样的:

详细操作步骤：

问题域的环节非常发散，这一步需要回归基础，把模糊的需求补充、拓展和翻译成一个在商业模式和用户体验上能够形成闭环的产品需求。

1. 核心需求确定：我的产品核心解决的是哪批用户、哪个用户需求？

2. 产品目标：如果以一个数字指标衡量我的产品，它应该是什么？

3.用户场景：核心需求基本的产品形态、用户使用的路径是怎样的？

清晰的业务流程

这一步需要根据核心产品需求和问题域的答案，画出简单的业务流程。业务流程是产品设计中常见的图表，绘制方法就不再多做说明。

以微信AR的需求为例，从广告主准备AR互动，到用户在前台使用摄像头参与互动，整个业务流程如下:

着手绘制

搭建基础框架

基础的产品框架脱胎于业务流程，但相比业务流程，更加注重产品功能的枚举、功能模块之间的分界。

详细操作步骤：

1. 对照业务流程，根据自己设想的产品机制、基本产品形态和用户的使用路径，列出需要的页面&功能&模块等前后端逻辑。

2.?将刚刚得到的多个流程图中所有功能类似或者范围有包含关系的机制/功能放在一起，以模块化的形式形成一张简单的矩阵图。

3. 将明显是同一个产品范围、同一组产品功能的模块放在同一层级，得到一个基础的产品框架。

明确架构分层

一个具备前后台关系的产品架构图至少分为三层：用户感知层（在何种场景下通过何种方式触达用户）、功能模块层（通过哪些功能模块实现产品的核心功能、和哪些外部_功能有信息交互）、数据层（产品的数据从哪里来、产品的数据沉淀到何处去）。

在上一步进行简单分层后，我们已经得到一个初步框架，但是难免会有分层不明确的问题。此时需要按照两种维度来处理架构图的层级：不同信息层级的边界、同一层级内模块和模块的边界。

1.?处理不同信息层级的边界：

架构图的层级表达的其实是信息之间的流转关系，不同信息层级之间一定是有逻辑关系的。

其中用户感知层和数据层通常可以简化为一层（用户端的功能表达往往逻辑简单、数据的来源问题则不是自己产品的核心功能），而功能模块层则需要按照自己产品的逻辑去将功能模块层内的主要模块变成新的层级。

2.?处理同一层级内子模块的边界：

各层次之间虽然相关，但同一层次内的子模块之间一定是互相独立、界限分明的（常常对应着不同的开发团队和系统应用）。将解决不同问题的功能拆分成两个子模块，做到一个问题只在同一层解决，避免牵一发而动全身的情况出现。

3. 明确产品间的边界：

产品边界对于开发设计系统架构、业务间的合作模式都非常重要。用不同颜色标识清楚产品框架中，各个部分所属产品的边界，通常其中属于自己团队的部分用亮色表示。

加入信息流转机制

产品架构图在表达产品的核心功能外，也应该体现信息流动的路径：当前层级数据的交互形成产品功能，产品功能又产生新的数据，从而推动下一层级的功能运转起来。

如果当前产品的主要使用角色只有一个，则只需要用箭头标明模块间信息流动的方式即可。如果当前产品会涉及的主要角色比较多，则需要用不同颜色的线条将他们和各个模块之间的信息交互关系外化出来。

_终检查

一张好的产品架构图，应该具备以下特点。

清晰的模块功能边界

功能经过抽象，做到标准化、互相独立

上下游产品功能边界清晰，架构分层明确合理

具备迭代优化的能力

记得不断根据你的产品的发展情况来更新产品架构图，每次修改的过程对提升产品架构能力的帮助非常巨大。

————————————————

原文地址：/pmcaff2008/article/details/78111282

网站框架图工具

Word（产品经理比较常用）

Fireworks（交互组内推广的）

BalsamiqMockups（近期曝光率比较高）

AuxreRP（业界圈子内广为流传）

综合比较，4个原型工具在绘制wireframe的基本操作上不相上下，各具特色。但AxureRP快捷而简便的创建基于目录组织的原型文档、功能说明、交互界面以及带注释的wireframe网页，并可自动生成用于演示的网页文件和word文档，以提供演示与开发等方面完胜

网页制作的结构布局有哪些？

布局就是以_合适浏览的方式将和文字排放在页面的不同位置。不同的制作者会有不同的布局设计。网页布局有以下几种常见结构：

1.“同”字型结构布局

所谓同字型就够就是指页面顶部为“网站标志+广告条+主菜单”或主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体内容的布局。

这种布局的优点是充分利用版面，页面结构清晰，左右堆成，主次分明，信息量大；缺点是页面拥挤，太规矩呆板，如果细节色彩上缺少变化调剂，很容易让人感到单调缺乏。

2.“国”字型布局

“国”字型布局是在“同”字型布局基础上演化而来的，在保留“同”字型的同时，在页面的下方增加一横条状的菜单或广告，是一些大型网站所喜欢的类型。一般_上面是网站标题及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，_下面是网站的一些基本信息、****、版权声明等。这种结构是在网上见到的_多的一种结构类型。

这种布局的优点是充分利用版面，信息量大，与其他页面的链接切换方便，缺点是页面拥挤，四面封闭，令人感到憋气。

3.T型布局

这是一个形象的说法，是指页面的顶部是“网站标志+广告条”，左面是主菜单，右面是主要内容。这种布局的优点是页面结构清晰、主次分明，是初学者_容易上手的布局方法；缺点是页面呆板，如果不注意细节上的色彩，很容易让人“看之无味”。

4.“三”字型布局

这种布局多用于国外站点，国内用得不多。特点是在页面上有横向两条色块，将页面整体分割为但部分，色块中大多放广告条、更新和版权提示。

5.对比布局

顾名思义，这种布局采用左右或者上下对比的方式：一半深色，一半浅色。一般用于设计型站点。优点是视觉冲击力强；缺点是将两部分有机地结合比较困难。

6.POP布局

POP引自广告术语，是指页面布局像一张宣传海报，一一张精美的作为页面的设计中心。这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接，甚至直接在首页的上做链接而没有任何提示。这种布局大部分出现在企业网站和个人主页，如果处理得好的话，会给人带来赏心悦目的感觉。

7.Flash布局

这种布局是指整个或大部分幅面的网页本身就是一个Flash动画，它本身就是动态的，画面一般不叫绚丽、有趣，是一种比较新潮的布局方式。其实这与封面型结构是类似的，只是这种类型才采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。不同性质的网站，其页面内容安排是不同的。一般网页的基本内容包括标题、网站标识图案（LOGO）、页眉、页脚、主体内容、广告栏等。下面简单说明：A、页面标题在站点的没一个页面中都有一个标题，用来提示页面的主要内容，着一信息将出现在浏览器的标题栏中，而不是在页面的布局中。它的重要作用就是引导访问者清楚地浏览网站的各项内容，不至于迷失方向。标题的加入在HTML语言中比较简单

电子商务网站的主页内容布局授课：花小琴常见的网页布局结构国字型布局——国字型布局由同字型布局进化而来，因布局结构与汉字国相似而得名。其页面的_上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，_下部分一般放置网站的版权信息和****等。常见的网页布局结构T型布局——T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。常见的网页布局结构标题正文型——标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。常见的网页布局结构左右框架型布局——左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容常见的网页布局结构上下框架型——上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。常见的网页布局结构综合框架型——综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术常见的网页布局结构POP布局——POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。常见的网页布局结构FLASH布局——FLASH布局是指网页页面以一个或多个Flash作为页面主体的学习前端_步：划分网页结构，网页的结构的划分应该遵循哪些原则，如何去划分网页的结构呢？

对于一个前端初学者，_步就是要学会如何划分一个网页的结构。当设计师给到你一张设计图，你需要根据这张图做出一个符合标准的页面，这里所说的标准，即w3c标准，参考w3school_教程。那么做出一个完整的符合标准的网页_步就是要划分网页的结构。一般来讲，网页结构的划分需要遵循几个原则：

一、自上而下原则

因为浏览器在渲染一个网页的顺序是自上而下的。这里提到了渲染这一个词，所谓的渲染就是浏览器将代码转换为页面显示内容的过程。浏览器会自上而下读取你写的代码并自上而下的显示。

二、从左至右原则

在自上而下的同时，同一行的内容是从左至右渲染，所以在划分结构的时候有从左至右的顺序。

三、一像素原则

这个原则对于初学者来说必须坚持，但也并不是说无论什么时候都得死认这个道理。前期我们在划分网页的时候一定要划分准确，尤其是横向。试想，如果外面的盒子宽度是1200像素，里面两个盒子一个600像素另一个601像素，加起来超过了父级的宽度那么必然第二个盒子会换到下一行进行显示。

在说完上述三个原则过后有些人就会一味地追求遵循这些原则，比如在划分结构的时候一定要分为上下部分，但是比如下面我截取这个网页的一部分，和文字其实是属于一个整体，文字是对的说明，所以就不应该分为上下，而应该水平方向划分，每一个图文作为一部分内容，水平分为四部分：

我们说一般网页有header（头部区）、banner（广告横幅区）、main（主体内容区）、footer（底部区），单页并非所有网页都是这样，有些网页没有banner但是初学者容易将header下面那一部分硬划分为banner，有些网页除了这几部分还会有比如icon等区域由喜欢将他们划分到main中去。

说到main区，这个结构划分就多种多样了。有些网页是有一个从左到右通栏的背景色甚至背景，这样我们结构的划分也应该有外层一个通栏的盒子，将背景色或者背景图给他，里面再嵌套一个inner盒，给可视区域的固定宽度并居中。如果没有通栏的背景那么这个时候是不需要给通栏的盒子，直接main区给固定宽度居中就好了。

那么在结构划分的时候有些盒子区域之间的空隙怎么去划分这也是初学者_容易犯难的问题。其实严格意义来讲这些空白在结构划分的时候并不会造成影响，因为空白区域在都可以用代码来实现。不过一些文字区域你不能贴着文字的上下来划分，因为文字都是自带行高的。

另外，有些地方可能会有一部分小或者一部分内容覆盖在外面大盒子上，这部分在划分结构的时候可以不用管，因为后期在代码实现的时候我们可以利用定位技术实现。

如何做框架图?

问题一：如何用WORD文本做框架图 在视图―工具栏―绘图，打开绘图工具，里面有文本框、箭头、各种形状等等，可以用这些做框架图。

问题二：在Word里，怎样建立框架图 比较麻烦,用自选图形里面的文本框及直线就可以画了.位置需要调整的按Alt键微调.

问题三：word怎么画框架图 从菜单栏中找到“视图”，再从中找到“工具栏”，再“绘图”前单击一下。WORD下面便有了绘图工具。从“自选图形”里选择您需要的，在文档中画出即可。

问题四：word里如何制作框架图 5分 可以从_上面的一个文本框开始，先点击”插入“鼠标指向”文本框“，根据需要选择”横排“或”竖排“，这时，文档的页面会出现”在此创建图形“的画布（画布可以根据需要拉大拉小），然后在画布上画出所需文本框，可以根据需要调整大小和位置，需要几个就画几个文本框。在添加第二层文本框时，先根据需要画横线或带箭头的线（如果你的”绘图“工具已出现在文档的下方可以直接点击，如果文档下方没有，可以点击”工具――自定义――把”绘鼎“打对号”），这个过程可以根据框架的需要调整大小和位置。在相应的文本框里输入文字即可。

问题五：用word怎么做架构图 你好 仔细看看 好好学学

_、我们首先执行“插入”――“”――“组织结构图”，然后先在文件中插入一个基本结构图，展开“组织结构图”工具条。

第二、然后我们可以选中下面其中的一个框图，按下Del键，而把多余的一个框图删除。

第三、接下来选中_上面框图，按然后“组织结构图”工具条上的“插入形状”旁的下拉按钮，在随后出现的下拉列表中，添加相应选项。

第四、再选中下面其中一个，右击，选“下属”可以发现增加一个“下属”框图；我们选中这个“下属”框图，右击，在随后弹出的快捷菜单中，选“同事”选项可以增加若干个“同事”框图。

第五、接下来我们输入相应的文字，并设置好字体、字号、字符颜色等。

第六、_后我们选中组织结构图，按“组织结构图”工具条上的“版式”旁的下拉按钮，选中“调整组织结构图以适应内容”选项，而让“画布”与制作完成的结构图相适应。

问题六：请问高人,怎样用word做一个框架图啊？ 执行“插入→→组织结构图”命令，先在文件中插入一个如图2所示的基本结构图，并展开“组织结构图”工具条（参见图2）。

2、选中下面其中的一个框图，按下Del键，将多余的一个框图删除。

注意：在删除框图时，系统会智能化地删除相应的连接线。

3、选中_上面框图，按“组织结构图”工具条上的“插入形状”旁的下拉按钮，在随后出现的下拉列表中，选“助理”选项，添加“经理助理”框图。

4、再选中下面其中一个，右击，选“下属”选项，增加一个“下属”框图；选中这个“下属”框图，右击，在随后弹出的快捷菜单中，选“同事”选项，增加若干个“同事”框图（如图1）。

注意：右击框和按“插入形状”旁的下拉按钮均能达到同样的添加目的。

5、仿照上面的操作，完成整个框图的添加和删除。

6、输入相应的文字，并设置好字体、字号、字符颜色等。

注意：如果多个框图的字符格式相同，可以先设置好其中一个，然后用“格式刷”复制。

7、选中组织结构图，按“组织结构图”工具条上的“版式”旁的下拉按钮，在随后出现的下拉列表中，选中“调整组织结构图以适应内容”选项，让“画布”与制作完成的结构图相适应。

至此，一个较为复杂的“组织结构图”就制作完成了（如图1）。

注意：①如果你对“组织结构图”的格式不在满意，可以这样调整：选中_上面一个框图（也可以是下面某一个框图），按“组织结构图”工具条上的“版式”旁的下拉按钮，在随后出现的下拉列表中，选中一种版式（如“右悬挂”），版式即刻被调整（如图3）。

②如果你对“组织结构图”的外观不在满意，可以这样调整：选中组织结构图，按“组织结构图”工具条上的“自动套用格式”按钮，打开“组织结构图样式库”对话框（如图4）。

选定一种样式（可以预览其效果，如图4），然后按下“应用”按钮即可（如图5）。

百度知道不支持功能,给你个网址,你自己看吧.

问题七：WORD2007里面如何做框架图 如下图所示。

问题八：如何用word做知识结构图 像这种大括号，在自选图形里有，自己画。然后插入文本框写字就可以了。字要在哪里有，就把文本框放到哪里。

另一种

不知道用不用的上组织结构图，插入菜单 \ \ 组织结构图你也可以试试看

问题九：如何让用word制作一个组织结构图 制作组织结构图我个人比较喜欢的还是用Visio，但是网上很多人咨询用word如何做企业组织结构图，所以在此跟大家共同学习一下。

1、打开一个新建的word问文档，单击“插入”选项卡中的“SmartArt”按钮，在选择图形中的“层次结构”中选择要应用的图形样式

2、按照层次开始填写内容

3、如果同一层次的图形数量太少，可以如下图所示，选中这一层的一个图形，进行同级别图形的添加

4、添加下级部门，选中这个部门的图形后，如图所示为这个部门添加下级部门

5、如果董事长或者总经理有助理，可以通过如下图所示的步骤选中董事长或总经理侯添加助理，这样基本就完成了一个组织结构图

6、组织结构图内容完成后需要我们对图形界面进行优化，我个人比较喜欢横向显示组织结构，如下图所示，在“页面设置”中设置即可，用户可根据自己的喜好进行设置

7、更改图形，不同的层次_好用不同的图形，单击选中需要更改的图形，在“格式”选项卡下的“更改格式”中选择要更改成的格式单击即可

8、修改布局，点击需要修改布局的图形，在“设计”选项卡下单击“布局”，修改为“两者”

9、布局修改后，如果总裁办公室和其他几个中心不再同一层次，可左键点中不松手进行拖动

10、修改图形颜色，在“设计”选项卡下，单击“更改颜色”，选择想要设置的颜色单击

11、全都设置完成后，一个完善的组织结构图就完成了.

问题十：如何制作漂亮的组织架构图 插入 SmartArt 层次结构 选择相应的样式 确定

输入相应的内容

选择此结构 通过SmartArt工具下的设计和格式选项 进行更精细的设置

好了，关于“网站信息框架图”的话题就讲到这里了。希望大家能够对“网站信息框架图”有更深入的了解，并且从我的回答中得到一些启示。