學(xué)習(xí)：如何使用Axure制作網(wǎng)站、app結(jié)構(gòu)圖

時(shí)間：2023-08-29 19:48:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-08-29 19:48:01 來源：網(wǎng)站運(yùn)營

學(xué)習(xí)：如何使用Axure制作網(wǎng)站、app結(jié)構(gòu)圖：“老師，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)圖。這個(gè)對于了解網(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”上面新建一個(gè)和“抖音app”平級的頁面，命名為“網(wǎng)站結(jié)構(gòu)圖”。



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






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






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



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



第四步：選擇生成流程圖的圖標(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)圖上任意個(gè)方塊，可以鏈接到對應(yīng)的頁面中。

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








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

如果上面一種情況不能滿足大家的要求的話，還有一個(gè)方法是用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ī)會(huì)，解決同學(xué)在學(xué)習(xí)過程中提出過的疑惑。另外，跟我們同學(xué)有同樣困擾的你，能了解網(wǎng)站/app結(jié)構(gòu)圖了嗎？