好用原型設計軟體 Mockplus 免費畫互動 App 與網頁


前幾天在友站小眾軟件上看到一個免費易用的原型設計軟體:「 摩客 Mockplus 」,由大陸團隊開發,在去年(2014)下半年推出,是一個同時具備線上版、 Windows 與 Mac OS X 電腦版的 Prototype 設計工具, Mockplus 自詡為:「 如果把 Axure 看作一頭大象,Mockplus 是一隻輕快的小鹿。」

原型( Prototype )設計,可以幫助專案企劃時有效的溝通網頁功能、軟體介面、 App 互動,透過畫出原型,讓產品經理、設計師、程式開發師、主管、客戶之間能夠了解產品本身的使用流程,把想像或文字化為具體可用的示範。

相比許多其他 Prototype 原型設計工具,「 摩客 Mockplus 」這個軟體最大特色就是非常簡潔易用,並且可以設計出「具備實際操作互動功能」的 App、 網頁、軟體原型,兼顧了專業與好上手,免費版就基本上夠用,值得有需要的朋友試試看。




  • 快速好上手的 App、 網頁、軟體原型設計軟體

進入「 摩客 Mockplus 」後,完成免費註冊,就能開始使用線上版的原型設計工具。

因為這是由中國團隊所開發的工具,所以一開始預設就是簡體中文版,對台灣用戶來說閱讀應該沒有太大的問題。





  • 專注在設計,而非工具

「 摩客 Mockplus 」的主要介面和知名的 Axure RP ,或是其他線上製圖工具基本上是一致的格局,例如:
左方是圖庫、模板,只要拖曳到中間的繪圖畫面就能隨意組合使用。而且「 摩客 Mockplus 」聚焦在軟體原型的設計,盡可能地考慮了大家規劃介面時的需求,讓企劃人員可以「專注在設計上」,而幾乎不用花時間學習工具操作。





  • 設計「可互動」的原型

說到「 摩客 Mockplus 」最大的特色,就是在免費使用的情況下,就能設計出可以互動操作示範的原型。

如何設計出可互動介面?首先在右方的頁面清單裡,隨時能夠新增刪減 App 、網頁、軟體的多層頁面。


在軟體原型圖上,就可以設定每一個物件的「交互(互動)」連結,例如指定這個按鈕點擊後要連結到哪一個頁面。

透過建立互動連結,就能產生可互動的多層介面原型。





  • 數百個實用的 App、 網頁設計素材

「 摩客 Mockplus 」免費版中就已經內建了數百種圖標,如果升級到專業版又能額外獲得兩倍以上的圖庫。


而無論我們想要設計的是軟體介面、 App 介面或網頁介面,都可以在左方的素材庫里,找到這些介面的原型模板,直接拖曳到畫面中就能開始設計內容原型。





  • 素描或線條風格

在整體的原型風格上,「 摩客 Mockplus 」也支援了大家喜愛的素描風格,或是正統的線條風格。





  • 物件自訂性與註釋

點擊「 摩客 Mockplus 」原型圖中的每一個物件,還能自訂其大小、圖片,或是加上解說註解。

「 摩客 Mockplus 」也允許我們在設計原型時上傳自己的圖片素材來使用。





  • 「線上互動展示」你的 App 原型

而當設計完成後,如果要跟其他人展示你的軟體原型,可以點擊右上方的「播放」按鈕,就能打開獨立網頁開始線上展示,展示過程中就跟真的在操作這個軟體一樣,透過前面的互動連結設定,可以在原型中實際體驗操作的反應過程。

有興趣的朋友可以看看我的粗淺範例效果:https://www.mockplus.cn/project/run/kz95gIW8aejSvYB0





  • 「 摩客 Mockplus 」線上版、電腦版

「 摩客 Mockplus 」不只擁有線上版,我們還可以「下載免費的 Windows 與 Mac OS X 軟體」,在軟體端使用原型設計,並且軟體端還可以下載線上版的原型來繼續修改。





  • 免費版:只能公開、無法導出其他格式

不過「 摩客 Mockplus 」的免費版確實有一些限制,最大的兩個限制就是:免費版設計的原型只能設定為公開,免費版無法把原型圖導出成其他格式。

如果你希望自己設計的原型是私密的,但是又想暫時先試試看免費版,那麼你可以透過邀請朋友新加入「 摩客 Mockplus 」的方式,每邀請一位朋友,就能獲得額外增加一個私密原型圖的額度,最多可以增加 10 個私密原型圖。

有興趣的朋友,可以使用我的邀請連結:https://www.mockplus.cn/referral?r=rw8nlf

整體來說,「 摩客 Mockplus 」是一個兼顧專業與易用的 App、 網頁、軟體原型設計工具,在快速的組合中就能產生可以互動操作的原型圖,有需要的朋友可以試試看。

轉貼本文時禁止修改,禁止商業使用,並且必須註明來自電腦玩物原創作者 esor huang(異塵行者),及附上原文連結:好用原型設計軟體 Mockplus 免費畫互動 App 與網頁


留言

  1. 感覺是個向 Balsamiq Mockups 致敬的產品...

    回覆刪除
  2. Made in china......怕怕,,,不想mock up後,不用一星期有一個複製的網站。
    或者有第三方公司搶了自己的客人.

    回覆刪除
    回覆
    1. 作者已經移除這則留言。

      刪除
    2. 同意 200%
      別為了一時方便 失去整座江山
      狼群已兵臨城下

      希望拒絕使用MIC

      刪除
  3. 謝謝esor介紹~ 已加入。想請教您怎麼獲得自己的 referral code 的? web 版遍尋不著... 是要裝 win 或 mac 版本裡面有嗎? (話說他應該很想要大家安裝,那個線上版入口超級小的,但其實用起來很順暢。頗滿意的 ^^ )

    回覆刪除
    回覆
    1. 能夠告知在哪裡進入線上版嗎?
      我找不到~~

      刪除
  4. 你好!怎么和您联系?我是mockplus公司的,我的联系方式qq:178793913

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Google Maps 我的地圖完全教學!規劃自助旅行攻略

Slack 完整教學與上手心得:找到正確的團隊溝通之道

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

Miro 遠距工作開視覺會議的免費強大白板,專案圖解實例教學

Google 表單自動關閉回覆教學:時間人數到達就過期

畫張圖說得更清楚! Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

少記筆記,減少整理,高效輸出:6 原則打造任務驅動型第二大腦

Google 表單的 10 個專業問卷調查設計秘密教學