Mockplus是一款快速原型設計工具，支援包括APP原型在內的多種原型與線框圖設計。除了快速，Mockplus廣受歡迎更因為它極低的上手門檻。今天小編就為大家展示如何用Mockplus在3分鐘內完成APP首頁的原型設計，新手也能馬上掌握哦！

是時候展現真正的技術了！

建立專案

開啟Mockplus，點選新建專案，選擇“手機”專案型別與合適的頁面尺寸，點選“確定”即建立成功，是不是不能更簡單！無需任何檔案建立操作，無需輸入任何文字！

底部導航欄製作

在左側圖示選項卡中搜索你想要的圖示，配合單行文字元件，只需數秒即可完成底部導航欄製作。將圖示與單行文字編為組，大小、樣式、文字均可編輯。

製作原型內容頁面

在專案樹中新建三個內容頁面，在左側的元件選項卡中搜索需要的元件，拖拽應用即可。

“首頁”頁面用到的元件：形狀元件、搜尋框元件、圖片元件、多行文字元件。

“發現”頁面用到的元件：形狀元件、圖片元件、多行文字元件

“我的”頁面用到的元件：圖示元件、多行文字元件、按鈕元件

Mockplus提供接近200個封裝元件和3000個以上的圖示素材，同時支援訂閱元件庫，在最大程度上滿足您的原型設計需求。

使用內容面板快速切換內容

1.拖出內容面板，點選“+”建立3個層，每層分別拖拽連結點連線到三個內容頁面。

2.將底部導航欄的三個選項依次連線到內容面板的三個層

演示與分享

在Mockplus中，您可以通過8中方式演示與分享：

1.直接演示。

按下F5，或點選頂部工具欄中的“演示”即可。

2.線上釋出為HTML5網頁。

在主工具欄，點選“釋出並分享”。釋出完成後，即可獲得一個網頁連結地址，複製這個地址，將它傳送給同事或客戶。

3.匯出HTML5的離線包

在主選單中選擇“匯出”、“匯出HTML演示”。

4.匯出可獨立執行的演示包（.exe或.app）。

在主選單中選擇“匯出”、“匯出演示包”。

5.輸入原型碼，在手機中檢視原型。

在主工具欄，點選“釋出”。釋出完成後，即可獲得一個原型碼，將這個原型碼傳送給同事或客戶。

6.掃描二維碼在手機中檢視原型

直接掃碼。釋出專案後，用手機在瀏覽器中掃碼，或者把二維碼截圖發給同事或客戶。

7.匯出圖片

主選單，“匯出”，“匯出圖片”。支援JPG和PNG兩種格式。

8.匯出專案樹

主選單，“匯出”、“匯出專案樹”。

總結：

坦率的講，Mockplus的原型設計流程幾乎是所有原型設計軟體中最方便的。無需基礎知識可快速上手，操作簡單，預覽方式多樣，中保真度。對於需要快速製作app原型的產品和設計師，Mockplus也是您的不二之選。 ---------------------  作者：Mockplus  來源：CSDN  原文：https://blog.csdn.net/jongde1/article/details/74984421?utm_source=copy  版權宣告：本文為博主原創文章，轉載請附上博文連結！