市場上有著大量的開發和設計工具支援在Mac上安裝使用，今天給大家強烈推薦一款Mac上的原型設計工具-Mockplus，原型工具在產品開發設計中是必不可少的，無論是現在非常火的小程式設計，還是網頁設計，移動APP設計等。在設計前期，我們都需要對產品概念進行細緻的原型設計，只有這樣才能確保為後期開發節省時間。

一、初識介面

原型工具-Mockplus Mac版的介面非常簡潔，我們分割槽域來了解一下：

頂部：頂部有主工具欄，其中包含了主選單和最常用的快捷按鈕；

中間：是你創作時的工作區。在工作區底部，你可以檢視到專案尺寸資訊，設定工作區縮放，還可以設定軟體偏好；

左上側：是專案樹面板，其中包含了專案和所屬的各個頁面或分組；

左下側：是元件面板，其中包含了元件、圖示、我的元件庫以及母版，你可以通過選項卡做切換；

右上側：是屬性面板，其中可以設定元件屬性、互動和頁連結，你可以通過選項卡做切換；

右下側：是元件大綱面板，其中包含了某個頁面中元件的層次關係。

二、互動設定

只需拖一拖滑鼠，即可完成互動原型設定（內建多種常用的互動方式，如彈出 / 關閉、內容切換、顯示 / 隱藏、移動、調整尺寸、縮放、旋轉等），互動原型設計從未如此簡單。無需程式設計，無需瞭解互動的具體過程。

領取福利

三、分享方式

當完成自己的原型設計後，可以通過匯出不同方式（8種演示方式）將其分享給自己的老闆、同事或客戶，隨時隨地檢視原型。

四、互動原型設計案例分享

下面是自己使用Mac原型設計工具-Mockplus製作的幾個互動案例供大家參考，讓你真正體會到它的好用。

案例1：時間選擇器效果圖

設計方法：

使用滾動區和文字元件，將文字元件放在滾動區內部，滾動區設定為縱向滾動。

其中滾動區裡的文字可以使用“快速格子”來做到快速填充和排版。

效果連結如下：

案例2：卡片移動效果圖

設計方法

1. 將圖片元件放入到滾動區中。

2. 將圖片元件轉換為格子，調整好間距後直接使用內部素材快速填充。

3. 選中某一圖片元件，對其它元件設定移動互動，對自己設定縮放及移動互動。下一相鄰圖片元件除對其它元件設定移動互動，對自己設定縮放及移動互動外，還需要對上一個相鄰圖片元件設定縮放互動。

效果連結如下：

案例3：下拉重新整理效果圖

設計方法

使用面板元件對自己設定2個移動互動，一個向下移動，一個向上移動（延遲執行）。

效果連結如下：

小結

以上就是Mac互動神器-最好用的原型設計工具Mockplus的一些常見操作，非常輕鬆的就能實現常見的互動原型效果。當然，能實現的效果遠遠不止這些，大家可以下載後去找如今流行的APP臨摹實操一下。相信你會很快熟悉上手並製作出自己的原型作品。

好文推薦：