手机应用app系统架构 app系统功能结构图_图标类型

“axure里面可以制作网站的结构图吗?”

“结构图只能在脑图工具中才能画吗?能不能直接在axure里面直接画?”

“结构图到底需不需要做?对我来说好像没什么用呢”

 

很多人对于“结构图”存在一些疑惑,包括必要性、理解、制作方法等。刚好今天就和大家一起来看看,结构图究竟是怎样的。

 

什么是网站结构图?

也叫网站架构,一般认为是根据客户需求分析的结果,准确定位网站目标群体,设定网站整体架构,规划、设计网站栏目及其内容,制定网站开发流程及顺序,以最大限度地进行高效资源分配与管理的设计。其内容有程序架构,呈现架构,和信息架构三种表现。

 

使用Axure设计的各网站(产品)页面,生成网站(产品)结构图。这个对于了解网站整体结构很有帮助。

 

知道意思和作用之后,我们来看看如何制作网站/app的结构图呢?以我们一位朋友所做的抖音app的原型为例子,一起来看看,在axure当中,结构图可以怎么样来制作。

 

一、直接生成

 

根据页面名称及层级关系,可以直接把它生成对应结构的网站结构图。

 

手机应用app系统架构 app系统功能结构图_手机应用app系统架构_02

 

第一步:在“抖音app”上面新建一个和“抖音app”平级的页面,命名为“网站结构图”。

 

手机应用app系统架构 app系统功能结构图_手机应用app系统架构_03

 

然后选中该页面,右键选择“图标类型”中的“流程图”。

 

手机应用app系统架构 app系统功能结构图_流程图_04

 

 

会看到,“网站结构图”页面前面的图标变成了结构图的标记

 

手机应用app系统架构 app系统功能结构图_手机应用app系统架构_05

 

 

第二步:双击打开“网站结构图”页面

 

手机应用app系统架构 app系统功能结构图_图标类型_06

 

第三步:选中页面“抖音app”(选中设计的页面中的最高层级的那个页面),点击右键,点击“生成流程图”,会弹出第四步中的选择框

 

手机应用app系统架构 app系统功能结构图_手机应用app系统架构_07

 

 

第四步:选择生成流程图的图标类型,“向下”“向右”,我们选“向下”,点击“确定”

 

手机应用app系统架构 app系统功能结构图_图标类型_08

 

可以看到在“网站结构图”页面中,生成了对应结构的网站结构图

 

手机应用app系统架构 app系统功能结构图_流程图_09

 

这样我们就把app或者网站的结构图快速、直接、准确地制作出来了。操作方法非常简单易懂,层级结构一目了然。

 

需要注意的是,在生成基于HTML浏览的原型图后,点击网站结构图上任意个方块,可以链接到对应的页面中。

 

假设生成之后点击“编辑资料”的区块,就会跳转到“编辑资料”这个页面,不需要另外再去做设置。

 

手机应用app系统架构 app系统功能结构图_右键_10

手机应用app系统架构 app系统功能结构图_图标类型_11

 

 

二、绘制结构图

 

如果上面一种情况不能满足大家的要求的话,还有一个方法是用axure的流程图部件直接进行绘制

 

手机应用app系统架构 app系统功能结构图_图标类型_12

 

根据app/网站的结构,选择合适的部件,拖拽到编辑窗口。这和线框图的制作是一样的。

 

手机应用app系统架构 app系统功能结构图_流程图_13

 

 

把页面的名称按照大概的机构放置好之后,选择“连接”,即可进行部件的连接

 

手机应用app系统架构 app系统功能结构图_流程图_14

手机应用app系统架构 app系统功能结构图_图标类型_15

 

 

如果需要和前一种方法一样,进行点击跳转的话,需要额外再进行交互设置

 

手机应用app系统架构 app系统功能结构图_手机应用app系统架构_16

 

这种方法效率上比前一种要弱一些,但是这种方法比较灵活,可以进行一些修改等,而第一种则是根据页面窗口中页面的名字和结构去生成的,这种可以进行调整、说明等。

 

制作网站/app的结构图,可以根据自己的需要选择不同的方法进行制作。像同学说的,在用的顺手的软件种制作好,再进行截图、粘贴,都可以。方法是所种多样的,只要选择合适自己的就可以了。