網頁設計, 網頁資源

Moqups HTML5 網設必備的線框圖,線上即時設計工具

梅干2017/12/18
梅問題-Moqups HTML5網設必備的網頁線框圖設計工具
  以前學生時代,老師總是會要我們畫草圖,但說真的在當下,覺得好浪費時間,所以每次都是隨手畫畫虎弄一下,出了社會開始工作後,也幾乎沒在畫什麼草稿,都是與客戶討論好,就直接出精稿給客戶看,但自從RWD響應式網頁後,讓梅干慢慢開始重視草稿這件事,最主要的原因就在於,RWD控制了所有裝置的版面,因此在前期的溝通就相當的重要,當今天頁面在電腦時會長怎樣、平板會長怎樣、手機會長怎樣,當確認這樣的區塊版型沒問題後,才會進入第二階段的設計稿模式。
  而以前梅干都會用Illustrator來繪製網頁的框架圖,雖然說都只是線稿,但有時在繪製或調整時,還是挺時間的,再加上當設計好的框架圖,也無法立即分享給對方看,需把檔案轉成存JPG後,再透過通訊軟體或Email寄給對方確認,當要修正時,就得來來回回好幾時,有光是存檔,都忘了存到那一版了,所以梅干試用好幾套的線框工具,找到一款相當簡易好上手,且繪製完畢後,還能分享給對方看,甚至內建還有許多常用的ICOM圖示可套用,相當的方便,而免費版的部分,只有物件的限制,因此還沒找到合用的線框工具的朋友,這一款不防可參考看看囉!
Moqup
網站名稱:Moqups HTML5
網站連結:https://moqups.com/

Step1
進到網站後,點畫面中的,黃色試用鈕。
梅問題-Moqups HTML5網設必備的網頁線框圖設計工具
Step2
這就是Moqup的操作環境,相當的簡潔清爽,同時也很容易上手。
梅問題-Moqups HTML5網設必備的網頁線框圖設計工具
Step3
由於Moqup支援的框線圖相當多,從手機、APP、網頁...等,所以第一件事,就是設定版面的大小。
梅問題-Moqups HTML5網設必備的網頁線框圖設計工具
Step4
接著輸入所需的版面大小與底色。
梅問題-Moqups HTML5網設必備的網頁線框圖設計工具
Step5
而所有的工具都集中在左側,當要使用時,直接從左拖拉到右邊的工作區。
梅問題-Moqups HTML5網設必備的網頁線框圖設計工具
Step6
當拖曳到工作區後,可由右邊的設定面板,來設定這個區塊大小與樣式。
梅問題-Moqups HTML5網設必備的網頁線框圖設計工具
Step7
甚至切到ICONS時,還可搜尋一般常用的ICON圖示,相當的方便。
梅問題-Moqups HTML5網設必備的網頁線框圖設計工具
Step8
就這樣依續的,就可把所需的版面一一的規畫出來,當一切都規畫好後,也可直接分享給客戶看,完全不用再儲存後傳送,而免費版的部分,則有物件數量的限制,因此若覺得不錯用,也可考慮它的付費版。
梅問題-Moqups HTML5網設必備的網頁線框圖設計工具
梅問題講堂-2018/5/26-WordPress佈景主題設計入門-實體課程