MockFlow 網站框架規劃工具,畫出 Wireframe

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

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


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

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

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

建立自己的 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

導出你的 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe

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

MockFlow 網站框架規劃工具,畫出 Wireframe