iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
1
自我挑戰組

軟體開發商新手 PM 30 個第一次系列 第 28

【第 28 個第一次】 Prototype 好重要,Marvelapp 讓點子瞬間視覺飛起來 !

Day 28 - 你們服務項目有 Prototype,通常會位於流程的哪一階段呢?

在目前短暫的在外的拋頭露面當中,在 Prototype 這邊我都會多分享一些情境,因為多半專門指定需要 Prototype 的夥伴都是希望先看自己的想像可視化後的樣子,拿出去簡報試水溫也好或是做市場調查都很好使用,比起簡報的靜態說明,有一個看似真實的 Prototype 在印象上都是非常加分的 /images/emoticon/emoticon07.gif

大家好,我是 Jade Chang
先前任職於科技外商,主要負責對於 Developers 的開發經驗體驗,過去 5-6 年出沒於技術社群以及大專院校。嘗試過直播節目、技術黑客松、帶狀節目系列以及線上短期活動等行銷策略,半年前轉職到台灣在地的軟體開發商,從事行銷與專案經理,也合夥新創了一間數位公司,超展開職涯要開始囉!!!

先來談談,甚麼是 Prototype

Prototype 沒有一個很正式的翻譯名稱,多半我們會說「雛形」或是「原型」,指的是很初期的產品模樣,又可以說是發起者腦袋想像的樣子,也許功能不是非常齊全,又或許很多邏輯上的設定還不完全,主打的是整體主軸的商業模式與概念有 8-9 成定案並視覺出來

甚麼情形會需要製作 Prototype

較多遇到的情境會是落在新創團隊剛起步,資金有限以及正在尋找合適的開發人員時、或是有意製作 App 的時候(通常不做網站做 App 都是功能較為複雜的應用),又或是製作大型網站/系統時,透過圖示可以明確的與客戶對主要架構與視覺上的建議。

  • 有 Prototype,拿去新創投資人場合做 pitching,比起純粹簡報與精彩的演說外,有 Prototype 的加持更能傳遞新點子的商業模式,有準備 Prototype 的團隊通常也會被認為在創業的誠意與成熟度上都相較高出一些。
  • 有 Prototype,在創業初步的市場調查時可以讓一般大眾更有畫面與透過 Prototype 實際操作時可以最直接的收到第一線的回饋,不會太憑空的發散產品功能,能更具焦的優化且規劃版本進行後續開發。
  • 有 Prototype,在尋找人才上也是有很大的加分,可以實體視覺呈現商業價值,更有素材號召有志一同的夥伴。
  • 有 Prototype,比起直接完整開發,相對的製作成本較小,也能從製作的過程重新審視流程與目標。
  • 有 Prototype,不論是內部的工程師或是即將接手開發的人都能先評估工時與適合技術。

Prototype 通常會在流程的哪個位置

通常在與客戶討論需求的時期,會是按照以下的流程來討論,目的是確保雙方的共識在同一個水平上,透過一個一個步驟地確認來達成最終雙贏的局面。 PM 前面討論的越明確到後續的 UI/UX 發揮就會在一個框架內盡情發揮,到最後的工程師也能有明確的指令來把產品實際製作出來,也能先透過前面的 Wireframe + Prototype 事先評估合適的技術與做法。
https://ithelp.ithome.com.tw/upload/images/20201012/20094570Ou32cUTkK0.png
(圖片來源:現今 UI 設計流程 中少不了的 PROTOTYPING !

想推推現在團隊使用的 Prototype 工具 - Marvel !

因為我覺得無敵方便且好用又很漂亮! 可以讓點子在很快的時間內變成可以互動的樣式,跳脫平面的 wireframe 大家看圖想向外,有 Marvel 的協助就像寶寶在出生前就可以用超音波看到形狀一樣的興奮!

https://ithelp.ithome.com.tw/upload/images/20201013/20094570uf4CdeMEwJ.png
(圖片來源:Marvelapp FB)

他是一款可以不用寫任何一行程式,就能讓設計師做出一個「可互動」的類用程式,運用靜態圖片堆疊出整個應用程式的視覺+流程 不需等到真正寫出 App 就讓使用者有感體驗到 UI/UX。

全部功能請洽官網 > https://marvelapp.com/

  • 可與 Sketch 串聯,將設計的圖稿一鍵佈署到 Marvel,更新上與移轉上都非常方便。
  • 版型上可選擇多種現在市面上常見的行動裝置,依據不同尺寸能展示不同版型。
  • 跟 Day 17 PM 與設計師與前端開發者的溝通工具 - Zeplin提到的功能雷同,匯入的設計稿能提供建議的程式碼,加速開發流程。
  • 可匯入公開的 App 模板,快速做出成品示意。
  • 支援一般的圖片檔案 png、jpg 之外,還能將 ps、gif 檔上傳。
  • 頁面可指定位置標註留言,促進協做溝通的交流。
  • 提供手機 App 版本,能直接在螢幕上繪製 wireframe 以及上傳圖片等功能,在極短時間內就能做出簡單的流程結構。

https://ithelp.ithome.com.tw/upload/images/20201013/20094570dOOiH2mvQx.png
(圖片情境 : 手機體驗)

One more thing!

歡迎訂閱我 Medium 或是透過 Facebook 一起來交流<3

https://ithelp.ithome.com.tw/upload/images/20200915/20094570oG1ujl6HbX.png


上一篇
【第 27 個第一次】 抓住每個企業識別展示的機會 ! 快速導覽網站瀏覽時視覺上需要準備的基本資訊
下一篇
【第 29 個第一次】 沒創業也該看看的最小可行性產品 MVP 概念,是人生哲學。
系列文
軟體開發商新手 PM 30 個第一次30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言