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

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

創(chuàng)建項目

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

底部導(dǎo)航欄制作

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

制作原型內(nèi)容頁面

在項目樹中新建三個內(nèi)容頁面，在左側(cè)的組件選項卡中搜索需要的組件，拖拽應(yīng)用即可。

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

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

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

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

使用內(nèi)容面板快速切換內(nèi)容

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

2.將底部導(dǎo)航欄的三個選項依次連接到內(nèi)容面板的三個層

演示與分享

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

1.直接演示。

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

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

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

3.導(dǎo)出HTML5的離線包

在主菜單中選擇“導(dǎo)出”、“導(dǎo)出HTML演示”。

4.導(dǎo)出可獨(dú)立運(yùn)行的演示包(.exe或.app)。

在主菜單中選擇“導(dǎo)出”、“導(dǎo)出演示包”。

5.輸入原型碼，在手機(jī)中查看原型。

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

6.掃描二維碼在手機(jī)中查看原型

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

7.導(dǎo)出圖片

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

8.導(dǎo)出項目樹

主菜單，“導(dǎo)出”、“導(dǎo)出項目樹”。

總結(jié)：

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

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