“老师,axure里面可以制作网站的结构图吗?”
“结构图只能在脑图工具中才能画吗?能不能直接在axure里面直接画?”
“结构图到底需不需要做?对我来说好像没什么用呢”
在同学们的学习当中,有部分同学对于“结构图”存在一些疑惑,包括必要性、理解、制作方法等。刚好今天就和大家一起来看看,结构图究竟是怎样的。
什么是网站结构图?
也叫网站架构,一般认为是根据客户需求分析的结果,准确定位网站目标群体,设定网站整体架构,规划、设计网站栏目及其内容,制定网站开发流程及顺序,以最大限度地进行高效资源分配与管理的设计。其内容有程序架构,呈现架构,和信息架构三种表现。
使用Axure设计的各网站(产品)页面,生成网站(产品)结构图。这个对于了解网站整体结构很有帮助。
知道意思和作用之后,我们来看看如何制作网站/app的结构图呢?以我们一位朋友所做的抖音app的原型为例子,一起来看看,在axure当中,结构图可以怎么样来制作。
一、直接生成
根据页面名称及层级关系,可以直接把它生成对应结构的网站结构图。
第一步:在“抖音app”上面新建一个和“抖音app”平级的页面,命名为“网站结构图”。
展开全文
然后选中该页面,右键选择“图标类型”中的“流程图”。
会看到,“网站结构图”页面前面的图标变成了结构图的标记
第二步:双击打开“网站结构图”页面
第三步:选中页面“抖音app”(选中设计的页面中的最高层级的那个页面),点击右键,点击“生成流程图”,会弹出第四步中的选择框
第四步:选择生成流程图的图标类型,“向下”“向右”,我们选“向下”,点击“确定”
可以看到在“网站结构图”页面中,生成了对应结构的网站结构图
这样我们就把app或者网站的结构图快速、直接、准确地制作出来了。操作方法非常简单易懂,层级结构一目了然。
需要注意的是,在生成基于HTML浏览的原型图后,点击网站结构图上任意个方块,可以链接到对应的页面中。
假设生成之后点击“编辑资料”的区块,就会跳转到“编辑资料”这个页面,不需要另外再去做设置。
二、绘制结构图
如果上面一种情况不能满足大家的要求的话,还有一个方法是用axure的流程图部件直接进行绘制
根据app/网站的结构,选择合适的部件,拖拽到编辑窗口。这和线框图的制作是一样的。
把页面的名称按照大概的机构放置好之后,选择“连接”,即可进行部件的连接
如果需要和前一种方法一样,进行点击跳转的话,需要额外再进行交互设置
这种方法效率上比前一种要弱一些,但是这种方法比较灵活,可以进行一些修改等,而第一种则是根据页面窗口中页面的名字和结构去生成的,这种可以进行调整、说明等。
制作网站/app的结构图,可以根据自己的需要选择不同的方法进行制作。像同学说的,在用的顺手的软件种制作好,再进行截图、粘贴,都可以。方法是所种多样的,只要选择合适自己的就可以了。
趁着跟大家交流的机会,解决同学在学习过程中提出过的疑惑。另外,跟我们同学有同样困扰的你,能了解网站/app结构图了吗?