文、G小編

常常聽到的Wireframe是什麼?中文的意思是線框,其實就是一種低保真度的設計原型,在去除所有視覺設計細節之下,進行頁面結構、功能、內容規劃。簡單說就是當我們在做網站或app介面前,為了將自己的想法更有效的傳達給其他人,會先透過簡單的線框呈現,就像室內設計草圖一樣,透過Wireframe的繪製,能更有效的溝通,也可以免去專案還沒確認就開始執行,進行到一半才臨時喊卡,或是漏東漏西的冏境。

 

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

 

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

 

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

名稱:MockFlow

網址:https://www.mockflow.com/


 

免費使用有些限制,為了讓大家看清楚,小編將各方案反白如下圖,可以依照您的需求去選擇適合的方案喔!

 

1. 註冊帳號很方便,欄位很簡單,主要是以mail去識別你的身份,註冊成功後會收到一封系統信。

 

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

 

3. 在畫網站前,必需先有清楚的網站架構,比較好著手進行,現在就先用MockFlow來畫個簡易又不乏味的SiteMap吧!首先,輸入你的專案名稱,來建立屬於自己的網站吧!

另外一提,也可以透過匯入XML的方式來建立,有相關的格式規範文件

 

4. 不管是網站或手機設計都有許多內建的thumbnail可以選擇使用,以網站而言就包含:ArticleConversationFormHomeLayoutListingMediaMiscellaneousStatisticsTeamText…等任您挑選。

 

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

 

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

 

7. 匯出的格式也相當多元,有提供png圖檔、XMLCSVPDF…等選擇。

 

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

 

9. 同上,如果選擇Share,就可以新增成員,如果你使用的是免費版本,最多僅能新增兩位成員喔!

在輸入E-mail後,可以選擇該成員的使用權限為何。

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

 

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

 

11. 另外,可以為你的專案設定公開的網址,就可以更方便的提供給主管或需要的同仁觀看,另外,網址最少要4個字喔!

完成後就可以看到狀態列已經變更了,如果不滿意名稱,只要按下編輯,就可以重新修改名稱。

 

小編的完成檔,希望大家會喜歡!後續將為您介紹網站雛型怎麼畫?

 

官方網站:http://www.lccnet.com.tw
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

 

延伸閱讀

聯成電腦分享:美編晉升設計師的決勝點

聯成電腦資訊分享:不會寫語法,也能輕鬆做網站!

聯成電腦資訊分享:網站設計的40個靈感泉源(四)

聯成電腦資訊分享:4個線上Mockup網站,快速合成影像又不失質感(下)

聯成電腦菜鳥救星:9個免費工具,讓你成為配色達人(下)

 

 

arrow
arrow

    聯成電腦 發表在 痞客邦 留言(0) 人氣()