“老師，axure里面可以制作網(wǎng)站的結(jié)構(gòu)圖嗎？”

“結(jié)構(gòu)圖只能在腦圖工具中才能畫嗎？能不能直接在axure里面直接畫？”

“結(jié)構(gòu)圖到底需不需要做？對我來說好像沒什么用呢”

在同學(xué)們的學(xué)習(xí)當(dāng)中，有部分同學(xué)對于“結(jié)構(gòu)圖”存在一些疑惑，包括必要性、理解、制作方法等。剛好今天就和大家一起來看看，結(jié)構(gòu)圖究竟是怎樣的。

什么是網(wǎng)站結(jié)構(gòu)圖？

也叫網(wǎng)站架構(gòu)，一般認(rèn)為是根據(jù)客戶需求分析的結(jié)果，準(zhǔn)確定位網(wǎng)站目標(biāo)群體，設(shè)定網(wǎng)站整體架構(gòu)，規(guī)劃、設(shè)計(jì)網(wǎng)站欄目及其內(nèi)容，制定網(wǎng)站開發(fā)流程及順序，以最大限度地進(jìn)行高效資源分配與管理的設(shè)計(jì)。其內(nèi)容有程序架構(gòu)，呈現(xiàn)架構(gòu)，和信息架構(gòu)三種表現(xiàn)。

使用Axure設(shè)計(jì)的各網(wǎng)站（產(chǎn)品）頁面，生成網(wǎng)站（產(chǎn)品）結(jié)構(gòu)圖。這個對于了解網(wǎng)站整體結(jié)構(gòu)很有幫助。

知道意思和作用之后，我們來看看如何制作網(wǎng)站/app的結(jié)構(gòu)圖呢？以我們一位朋友所做的抖音app的原型為例子，一起來看看，在axure當(dāng)中，結(jié)構(gòu)圖可以怎么樣來制作。

?

一、直接生成

根據(jù)頁面名稱及層級關(guān)系，可以直接把它生成對應(yīng)結(jié)構(gòu)的網(wǎng)站結(jié)構(gòu)圖。

第一步：在“抖音app”上面新建一個和“抖音app”平級的頁面，命名為“網(wǎng)站結(jié)構(gòu)圖”。

然后選中該頁面，右鍵選擇“圖標(biāo)類型”中的“流程圖”。

會看到，“網(wǎng)站結(jié)構(gòu)圖”頁面前面的圖標(biāo)變成了結(jié)構(gòu)圖的標(biāo)記

?

第二步：雙擊打開“網(wǎng)站結(jié)構(gòu)圖”頁面

?

第三步：選中頁面“抖音app”（選中設(shè)計(jì)的頁面中的最高層級的那個頁面），點(diǎn)擊右鍵，點(diǎn)擊“生成流程圖”，會彈出第四步中的選擇框

?

第四步：選擇生成流程圖的圖標(biāo)類型，“向下”“向右”，我們選“向下”，點(diǎn)擊“確定”

可以看到在“網(wǎng)站結(jié)構(gòu)圖”頁面中，生成了對應(yīng)結(jié)構(gòu)的網(wǎng)站結(jié)構(gòu)圖

這樣我們就把a(bǔ)pp或者網(wǎng)站的結(jié)構(gòu)圖快速、直接、準(zhǔn)確地制作出來了。操作方法非常簡單易懂，層級結(jié)構(gòu)一目了然。

需要注意的是，在生成基于HTML瀏覽的原型圖后，點(diǎn)擊網(wǎng)站結(jié)構(gòu)圖上任意個方塊，可以鏈接到對應(yīng)的頁面中。

假設(shè)生成之后點(diǎn)擊“編輯資料”的區(qū)塊，就會跳轉(zhuǎn)到“編輯資料”這個頁面，不需要另外再去做設(shè)置。

二、繪制結(jié)構(gòu)圖

如果上面一種情況不能滿足大家的要求的話，還有一個方法是用axure的流程圖部件直接進(jìn)行繪制

根據(jù)app/網(wǎng)站的結(jié)構(gòu)，選擇合適的部件，拖拽到編輯窗口。這和線框圖的制作是一樣的。

把頁面的名稱按照大概的機(jī)構(gòu)放置好之后，選擇“連接”，即可進(jìn)行部件的連接

如果需要和前一種方法一樣，進(jìn)行點(diǎn)擊跳轉(zhuǎn)的話，需要額外再進(jìn)行交互設(shè)置

這種方法效率上比前一種要弱一些，但是這種方法比較靈活，可以進(jìn)行一些修改等，而第一種則是根據(jù)頁面窗口中頁面的名字和結(jié)構(gòu)去生成的，這種可以進(jìn)行調(diào)整、說明等。

制作網(wǎng)站/app的結(jié)構(gòu)圖，可以根據(jù)自己的需要選擇不同的方法進(jìn)行制作。像同學(xué)說的，在用的順手的軟件種制作好，再進(jìn)行截圖、粘貼，都可以。方法是所種多樣的，只要選擇合適自己的就可以了。

趁著跟大家交流的機(jī)會，解決同學(xué)在學(xué)習(xí)過程中提出過的疑惑。另外，跟我們同學(xué)有同樣困擾的你，能了解網(wǎng)站/app結(jié)構(gòu)圖了嗎？