網站企劃工具分享：Wireframe有障礙？別錯過MockFlow （上）

中文的意思是線框，其實就是一種低保真度的設計原型，在去除所有視覺設計細節之下，進行頁面結構、功能、內容規劃。

簡單說就是當我們在做網站或app介面前 ... HomeNotificationsListsStoriesWrite網站企劃工具分享：Wireframe有障礙？別錯過MockFlow（上）本篇文章於2017/3/3刊登於聯成電腦官網。

常常聽到的Wireframe是什麼？中文的意思是線框，其實就是一種低保真度的設計原型，在去除所有視覺設計細節之下，進行頁面結構、功能、內容規劃。

簡單說就是當我們在做網站或app介面前，為了將自己的想法更有效的傳達給其他人，會先透過簡單的線框呈現，就像室內設計草圖一樣，透過Wireframe的繪製，能更有效的溝通，也可以免去專案還沒確認就開始執行，進行到一半才臨時喊卡，或是漏東漏西的冏境。

「單純是世上最難的課題，簡單化也許才能創造更多的可能」，用最簡單的線稿更可以在功能、架構、操作流程與使用者體驗…等的討論上聚焦，但是多數人是視覺動物，只看到方框和文字的組合會很不習慣，甚至無法想像。

因此，許多Wireframe還以會以簡單的顏色、不同的圖形來區分，也比較美觀。

Note：Wireframe的繪製目的在確認每一個頁面的架構組成，重點在畫面上要呈現什麼內容與功能，並非外觀的設計美不美麗、特效夠不夠炫。

說了這麼多，現在就來介紹一個方便又好用的線上工具，幫助你在畫Wireframe的時候，不再驚驚受怕。

MockFlow官網截圖名稱：MockFlow網址：https://www.mockflow.com/免費使用有些限制，為了讓大家看清楚，小編將各方案反白如下圖，可以依照您的需求去選擇適合的方案喔！註冊帳號很方便，欄位很簡單，主要是以mail去識別你的身份，註冊成功後會收到一封系統信。

重新登入後就可以看到簡單的介面，左列的功能立刻清楚知道，MockFlow提供了哪些服務，而右邊的畫面就可以看到本網站為您準備的Samples。

在畫網站前，必需先有清楚的網站架構，比較好著手進行，現在就先用MockFlow來畫個簡易又不乏味的SiteMap吧！首先，輸入你的專案名稱，來建立屬於自己的網站吧！另外一提，也可以透過匯入XML的方式來建立，有相關的格式規範文件。

不管是網站或手機設計都有許多內建的thumbnail可以選擇使用，以網站而言就包含：Article、Conversation、Form、Home、Layout、Listing、Media、Miscellaneous、Statistics、Team、Text…等任您挑選。

首頁Index完成後，滑鼠移到方塊上，就會出現+的符號，只要按下去，就可以新增新方塊，操作很直覺，相當人性化。

完成後，可以在上列點選Themes，選擇其他的風格樣式。

匯出的格式也相當多元，有提供png圖檔、XML、CSV、PDF…等選擇。

如果架構圖之後還需要修改，登入會員後，只要在左列選擇該項目，就可以看到完成的檔案，上面有三個選項，選擇Open，就可以繼續編輯檔案。

同上，如果選擇Share，就可以新增成員，如果你使用的是免費版本，最多僅能新增兩位成員喔！在輸入E-mail後，可以選擇該成員的使用權限為何。

輸入後便可以直接觀看該使用者的權限為何。

同上，Settings的功能與Share一樣，進入畫面後，一樣可以開啟舊檔案。

另外，可以為你的專案設定公開的網址，就可以更方便的提供給主管或需要的同仁觀看，另外，網址最少要4個字喔！小編的完成檔和大家分享，希望大家會喜歡！下一篇將為您介紹網站雛型怎麼畫？MorefromGobbyWangFollowLovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableGetstartedGobbyWang36FollowersFollowRelated“GoHard”AtBeingYou,CreateWithLimitlessBoundaries,andOtherGreatMotivatorsWeLearned…FiddlingWhileRomeBurnsSo,hereIamtryingtoexpressmyfeelingsandmentalstatusinthesedifficulttimes.ThisismyfirstattemptatwritingonMedium…ThisorThat?XvsXSportsarticleInthenameoflovePart2:Outsourcingspecies-appropriatefoodforyourdogHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable