製作網頁之前，必須要先行規劃網站架構，為了方便設計師與工程師之間的配合，可以透畫出 Wireframe來進行網站Layout的初始框架，透過特定的圖示標記，可以讓設計師和工程師之見做一個流暢的銜接與溝通，所以了解該怎麼匯出網站框架是一件重要的事情。如果要畫Wireframe，該怎進行？我們可以透過MockFlow這個免費的工具，來進行規劃與繪製網站草圖。

MockFlow 這個工具有付費版本與免費版本，在免費帳號部分有一些些小小的限制，不過如果只是初始嘗試者，或者是為了交作業方便，想先了解Wireframe的使用者，其實是足夠的。又或者是客戶要跟設計師溝通，想要話個網站草圖告訴製作者自己想要的感覺，也可以透過這樣的一個工具來實現，不需要再用Word或PowerPoint繪圖囉！

其實香腸平常不使用這樣的工具，因為這次剛好有機會慕著Muki學姊的名，回世新大學聽他講課，剛好他的第一堂課中就提到此工具，所以話不多說立刻上網註冊並測試，使用後的感想是，小網站其實不需要這樣的工具，使用後會有多此一舉的感覺。但大型網站而且又有進行分工，這樣的工具可以說是非常好用。如果是客戶要跟製作廠商溝通，倒是一個頗方便的工具可以畫出自己大概想要的感覺。

透過MockFlow這工具會出來的樣板、軟體框架、網頁框架等，可以導出成圖片、PDF、Excel、HTML5等等的格式，非常多樣化。MockFlow的免費方案，可以建立1個design、1GB的儲存空間、最多2位協作者。順帶一提，他網站並不支援中文輸入或是任何地方出現中文，像是我用GMail帳戶登入，他抓到的名字卻是亂碼，所以如果你要在Wireframe打入中文，目前是無法的。

• 網站名稱：MockFlow
• 網站網址：http://www.mockflow.com/

第1步  來到MockFlow先點選左邊的﹝Create Account﹞建立帳戶。

第2步  您可以選擇使用Google帳戶註冊或是輸入資料註冊一個帳戶。建議直接點選Google進行認證，註冊步驟較為簡單。

第3步  此時請點選右側「Gmail」。

第4步 接著點選您的Google帳戶進行認證。

第5步  此時會出現需要取得權限的資訊，請點﹝接受﹞以繼續。

第6步  註冊完成後，就會看到如下畫面。

建立自己的 Wireframe

第1步  首先點選【Add Project】來新增屬於自己的專案。

第2步  這邊會有快速建立選項，您可以選擇要建立網站、行動裝置、CMS版型等專案的類型，如果要建立純網站，可以點選「Bootstrap UI」來建立，他會使用一些BootStrap的元素來呈現Wireframe。

第3步  接著請輸入這個專案的名稱並點選﹝Create﹞。

第4步  預設就會幫你產生Bootstrap UI的元素，如果不喜歡可以刪除。按下鍵盤上的Delete即可。

第5步  看到右側點選【pages】，可以替這個專案建立多個頁面，每個頁面都可以點兩下即可修改命名，但限定英文，無法輸入中文。

第6步  接著，右側部分可以切回【Components】，可以透過搜尋或者是捲動，找到適合自己使用的框架元素，找到後，請按壓點擊該元素並拖曳到空白區域，即可新增，在此我們新增一個「Image」的元素。

第7步  接著，點選該物件後，到右下角可以設定其寬度與位置，透過滑鼠點擊該方塊也可以，當然透過右下角輸入數字設定會較為精準。在Label部分，可以輸入名稱。

第8步  其他部份各位可以自行研究其元素，拖拉之後可以湊出如下的排版，下方這大概是模擬我部落格樣子，不過我知道模擬的很奇怪就是了，因為上課時間有限麻XD。官方有提供不少的Sample檔案，可以到官方這個頁面查詢看看。

第9步  不過後來選單部分我又換另外一個「Menu Bar」元素製作，你可以點該元素後，再點選右下「Ckick here to manage Links」。

第10步  進入後，可以勾選【Enable Linking】，讓選單的項目可以有超連結，然後找到你要設定超連結的項目(Item)再點選後方的「Link」。

第11步  選擇你要連結的頁面或是網站，並點【Select】。

第12步  如果想要預覽整個頁面概況，可以點右上角的【Present】。

第13步  這時候會但如下畫面，若有超連結的部分會亮個小標記。

第14步  關閉預覽畫面，每次修改好按下鍵盤上的「Ctrl+S」或者是點選上方的「Save」儲存。

導出你的 Wireframe

第1步  點選左上角的【Project】→【Export】。

第2步  接著點選你要儲存的格式，這邊提供PDF、HTML5、圖片等格式，例如我們輸出最簡單的圖片格式，請點一下「Images」。

第3步  若多個頁面要匯出，點選左測要匯出的頁面，然後按下中間的﹝Add>>﹞把要匯出的頁面丟到右側，最後點下﹝Create PNG﹞即可。

第4步  等待網站轉出成圖片後請點選【Download File】即可下載。

第5步  透過圖片預覽軟體打開，就會看到您繪製完畢並匯出的Wireframe囉！

相關文章

[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？

免用Photoshop！Adobe Express 免費線上圖片裁切服務

[教學]如何領取TPASS 悠遊卡補助100元？

免註冊帳號！ChatGPT 開放免費使用並且無任何限制！

[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告

Line Mobile 月租24元！中華電信隱藏資費方案(附邀請碼+申請教學)

[教學]如何申請台北捷運誤點證明？

[教學]如何用 ShowKeyPlus 查詢 Windows 10/11 產品金鑰序號？

菲律賓遊學攻略｜語言學校太多難以抉擇？看這篇就對了！