首頁 部落格 運用「Marvel」製作可互動網頁設計草稿
Ryan
Aug 01, 2017
讓公司平均年齡上漲的宅男,經營過動漫社團、當過電玩雜誌特約作者。 興趣是電競與科技,關注新趨勢購物,尤其是冷門商品、或尚未上市的群眾募資商品。 網路行銷一做就是十幾年,認為這個業界需要更開放交流,才能成長與突破。

運用「Marvel」製作可互動網頁設計草稿

 
或許一般人很難置信,其實今日網頁設計師進行網站設計初期,仍相當依賴紙跟筆打草稿呢!例如網頁的格局樣式、版型、想要呈現的風格等,都是可以透過紙筆加以呈現,不過網頁設計的領域越來越不容易用傳統的方式呈現時,「Marvel」就是一個很理想的網頁設計草稿工具了。
 
「Marvel」英文字面上可以稱之為驚奇的、神奇的事物,近年隨著超級英雄電影電影賣座的「漫威」剛好也是此名。而這個網頁設計草稿工具「Marvel」雖然跟上述的事物毫無關係,但卻很神奇的提供了許多功能,讓具有經驗的設計師可以呈現出細緻可互動的草稿,而沒有經驗的專案負責人,也可以使用他進行溝通。
 
 
「Marvel」有幾個主要的流程,首先是要將你想要製作的元素,將電腦檔案匯入到帳戶的雲端空間上,你也可以用Google Drive或是Dropbox雲端空間加以連結圖片至帳戶內。接著指定你想要呈現的網頁設計平台:不論是電腦、安卓手機、iPhone手機等,都有制式的尺寸規格可選擇使用。
 
接著進入草稿的流程,也是「Marvel」最重要的網頁設計機能,你可以透過簡易的線稿與圖片拖放匯入的方式,將你的草稿網頁逐漸豐富起來。當你完成了幾個網頁草稿之後,就要開始規劃點擊/互動的流程了,你可以告訴系統當用戶點擊/觸控了頁面之後,會跳入的頁面是哪一面,一個單一網頁可以設計數個點擊區域與點擊目的頁面,甚至可以安排點擊後會呈現的特效等。
 
 
比較不同的是「Marvel」很多功能都是針對智慧手機而設計,因此頁面切換時的特效也可以呈現,或是手機的手勢互動效果等也可以呈現,這是早期網頁設計草稿製作工具不可能做得到的事情,現在都能夠用工具達成。
 
 
當草稿設計好之後,你可以透過工具產生出一個URL,將這個URL交付給客戶即可進行溝通,或與不同的工程師共同作業,改善網頁設計品質,或是多人加入一起共同作業、參與意見都是可以達成的。
 
 
設計的流程對有經驗的網頁設計師來說「Marvel」用起來會十分的愉快,可以很快的理解裡面的功能後,將有一定程度的互動網頁設計草稿交付給客戶進行討論,客戶也不用自己想像頁面的呈現品質,而是真實的感受到頁面的文字、色彩、格局等。對於非專業人員來說,從頭到尾打草稿其實是有難度的,建議的方式是加入共同編輯一個專案,在草稿上可以添加注記也是參與設計的方法。
 
 
 
成功的網站,背後必有一位專案管理師
成功的網站,背後必有一位專案管理師
Ryan
Ryan
May 08, 2018
IWARE官網改版紀錄(上)
IWARE官網改版紀錄(上)
Winnie
Winnie
Nov 10, 2017
一圖比較客製網頁設計、套版網頁設計
一圖比較客製網頁設計、套版網頁設計
Ryan
Ryan
May 08, 2018