“axure裏面可以製作網站的結構圖嗎？”
“結構圖只能在腦圖工具中才能畫嗎？能不能直接在axure裏面直接畫？”
“結構圖到底需不需要做？對我來說好像沒什麼用呢”
很多人對於“結構圖”存在一些疑惑，包括必要性、理解、製作方法等。剛好今天就和大家一起來看看，結構圖究竟是怎樣的。
什麼是網站結構圖？
也叫網站架構，一般認爲是根據客戶需求分析的結果，準確定位網站目標羣體，設定網站整體架構，規劃、設計網站欄目及其內容，制定網站開發流程及順序，以最大限度地進行高效資源分配與管理的設計。其內容有程序架構，呈現架構，和信息架構三種表現。
使用Axure設計的各網站（產品）頁面，生成網站（產品）結構圖。這個對於瞭解網站整體結構很有幫助。
知道意思和作用之後，我們來看看如何製作網站/app的結構圖呢？以我們一位朋友所做的抖音app的原型爲例子，一起來看看，在axure當中，結構圖可以怎麼樣來製作。
一、直接生成
根據頁面名稱及層級關係，可以直接把它生成對應結構的網站結構圖。
第一步：在“抖音app”上面新建一個和“抖音app”平級的頁面，命名爲“網站結構圖”。
然後選中該頁面，右鍵選擇“圖標類型”中的“流程圖”。
會看到，“網站結構圖”頁面前面的圖標變成了結構圖的標記
第二步：雙擊打開“網站結構圖”頁面
第三步：選中頁面“抖音app”（選中設計的頁面中的最高層級的那個頁面），點擊右鍵，點擊“生成流程圖”，會彈出第四步中的選擇框
第四步：選擇生成流程圖的圖標類型，“向下”“向右”，我們選“向下”，點擊“確定”
可以看到在“網站結構圖”頁面中，生成了對應結構的網站結構圖
這樣我們就把app或者網站的結構圖快速、直接、準確地製作出來了。操作方法非常簡單易懂，層級結構一目瞭然。
需要注意的是，在生成基於HTML瀏覽的原型圖後，點擊網站結構圖上任意個方塊，可以鏈接到對應的頁面中。
假設生成之後點擊“編輯資料”的區塊，就會跳轉到“編輯資料”這個頁面，不需要另外再去做設置。
二、繪製結構圖
如果上面一種情況不能滿足大家的要求的話，還有一個方法是用axure的流程圖部件直接進行繪製
根據app/網站的結構，選擇合適的部件，拖拽到編輯窗口。這和線框圖的製作是一樣的。
把頁面的名稱按照大概的機構放置好之後，選擇“連接”，即可進行部件的連接
如果需要和前一種方法一樣，進行點擊跳轉的話，需要額外再進行交互設置
這種方法效率上比前一種要弱一些，但是這種方法比較靈活，可以進行一些修改等，而第一種則是根據頁面窗口中頁面的名字和結構去生成的，這種可以進行調整、說明等。
製作網站/app的結構圖，可以根據自己的需要選擇不同的方法進行製作。像同學說的，在用的順手的軟件種製作好，再進行截圖、粘貼，都可以。方法是所種多樣的，只要選擇合適自己的就可以了。
--------------------------------------
（加微信：pexuepexue，小編邀請您進入全國產品經理交流羣）
羣內每日分享學習資料、重磅報告、面試問題、招聘信息、免費課程
