APP原型設計利器！【附】人人都是產品經理APP原型剖析

06-05

對APP進行原型設計是產品開發早期階段不可或缺的一部分，為此，如何選擇一款高效、快速、簡捷的原型工具就成為了令設計師頭疼的問題。市場上的APP原型設計工具琳琅滿目，從早期的visio到現在主流Axure、Mockplus、Justinmind、FluidUI等。的確會讓很多新手小白無從下手。

仁者見仁智者見智，不同的原型工具都有其平台獨特的特性。今天，小編將根據個人的實操經驗，來帶領大家比較幾款主流的APP原型設計工具。看到此篇文章的小夥伴有福啦，相信通過對比之後，你一定會有了自己的選擇。

看完之後，是不是感覺功能上差不多，還是無從選擇呢？不用擔心，我們先看看一款優秀的 APP原型設計工具應具備哪些特點：

①支持移動端及時演示效果(可隨時隨地給老闆、客戶演示)

②可復用的組件庫（團隊成員隨時用，提高效率）

③可快速生成流程圖(一張圖，邏輯關係清晰明了)

④團隊在線協作(多個PM狗協作設計)

⑤上手快、學習成本低（把更多時間花在設計上而非工具學習）

⑥手勢操作、轉場動畫(這些都不需要)

據個人經驗及綜上所述，小編強烈推薦大家使用國產Mockplus做APP原型設計。說到這裡，有人肯定不服了。當然，小編專治各種不服，下面，結合用Mockplus製作的「人人都是產品經理」APP原型來看看這款利器。

先來看看成品：

在線演示地址：https://run.mockplus.cn/lsgu2a12JJmHzQDV/index.html

一鍵生成頁面流程圖：

APP原型設計解讀：

從APP界面中，我們可以看出，此APP中有5個底部菜單（閱讀、問答、學院、招聘、我的）。在閱讀、問答、學院、招聘這四個頁面的布局均是通過點擊標籤組切換至不同頁面。此外，在單獨頁面中，內容的布局均一致。這些在Mockplus中均有封裝好的組件和圖標，可快速設計出原型。

1. 底部菜單欄設計

使用「帶文字圖標」組件，直接在圖標庫中填充對應圖標。布局好之後，直接將其添加至自己的組件庫，其餘頁面直接復用。

2. 菜單內的頁面切換

直接使用標籤組配合內容面板，輕鬆拖拽滑鼠即可實現頁面切換。（詳情見：http://doc.mockplus.cn/?p=387）

3. 頁面內內容布局設計

內容頁的布局均是一樣的，我們只需做好一個，然後直接將其轉換為快速格子，快速實現重複布局。而裡面的內容及圖片，可直接填充。（詳情見：http://doc.mockplus.cn/?p=2811）

表中的原型工具各有什麼優劣勢呢，下面，我將詳細一一說明。

Axure

老牌原型工具，其擁有豐富控制項庫，滑鼠拖拽即可快速製作原型。強大動態面板，可實現複雜的頁面設計；支持導出圖片、HTML和文檔，將生成的HTML地址共享發給同事或客戶，別人可直接寫批註評論，可快速、準確的與相關人員進行溝通；團隊協作，同一個項目，可實現多人共同參與設計，提高效率。

不足的是：學習難度較高，複雜的交互效果會涉及到事件及參數的使用，需具備一定的編程基礎。對於新手小白會非常棘手，讓人感覺力不從心，無處下手；卡，使用久了會明顯感覺很臃腫，頁面達到二十頁以上，會有卡頓現象。

Mockplus

國產原型工具，主打更快、更簡單。學習成本幾乎為零，無需掌握任何編程知識；內置200多個常見組件，提供3000+圖標素材。開箱即可用，輕鬆拖拽滑鼠做個鏈接即可實現交互；提供8種演示和分享原型的方式。可導出HTML、圖片、獨立演示包。項目樹等，對於APP原型，還可直接安裝手機客戶端，掃碼或輸入原型碼查看；每個項目允許多個團隊成員共同參與設計，隨時隨地，輕鬆協作。

不足的是：工作區有一定限制，編寫說明文檔不是很方便。

FluidUI

內置超過2000款的線框圖和手機UI控制項，並且還會經常進行更新；提供豐富的資源庫（包含iOS 、Android及WIndows）;支持以PNG及PDF方式導出。

不足的是：基於網頁端的原型工具，速度有點緩慢。

Justinmind

提供多種觸屏的交互效果,例如滑動、縮放、旋轉等；提供屬性窗口,支持捕獲PS等軟體的圖像屬性;提供多樣的組件,可以自定義創建組件庫;

不足的是：在通過拖拽的方式實現頁面跳轉時，需要拖動整個組件到項目樹上。由於沒有連接線，不夠直觀。

怎麼樣？是不是突然覺得做APP原型設計是如此簡單？當然，簡單的前提是選擇一款像Mockplus這樣簡單便捷的工具。