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

是時候展現(xiàn)真正的技術了!

創(chuàng)建項目

打開Mockplus，點擊新建項目，選擇“手機”項目類型與合適的頁面尺寸，點擊“確定”即創(chuàng)建成功，是不是不能更簡單!無需任何文件創(chuàng)建操作，無需輸入任何文字!

底部導航欄制作

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

制作原型內容頁面

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

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

“發(fā)現(xiàn)”頁面用到的組件：形狀組件、圖片組件、多行文字組件

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

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

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

1.拖出內容面板，點擊“+”創(chuàng)建3個層，每層分別拖拽鏈接點連接到三個內容頁面。

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

演示與分享

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

1.直接演示。

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

2.在線發(fā)布為HTML5網(wǎng)頁。

在主工具欄，點擊“發(fā)布并分享”。發(fā)布完成后，即可獲得一個網(wǎng)頁鏈接地址，復制這個地址，將它發(fā)送給同事或客戶。

3.導出HTML5的離線包

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

4.導出可獨立運行的演示包(.exe或.app)。

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

5.輸入原型碼，在手機中查看原型。

在主工具欄，點擊“發(fā)布”。發(fā)布完成后，即可獲得一個原型碼，將這個原型碼發(fā)送給同事或客戶。

6.掃描二維碼在手機中查看原型

直接掃碼。發(fā)布項目后，用手機在瀏覽器中掃碼，或者把二維碼截圖發(fā)給同事或客戶。

7.導出圖片

主菜單，“導出”，“導出圖片”。支持JPG和PNG兩種格式。

8.導出項目樹

主菜單，“導出”、“導出項目樹”。

總結：

坦率的講，Mockplus的原型設計流程幾乎是所有原型設計軟件中最方便的。無需基礎知識可快速上手，操作簡單，預覽方式多樣，中保真度。對于需要快速制作app原型的產(chǎn)品和設計師，Mockplus也是您的不二之選。

以上就是上海網(wǎng)站建設公司——海淘科技為你整理的《Mockplus教程：APP首頁原型設計》全部內容。如果想要觀看網(wǎng)站建設案例：教育行業(yè)網(wǎng)站建設案例，以及其他精彩的企業(yè)微博運營方案可直接點擊查看。