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

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

創(chuàng)建項(xiàng)目

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

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

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

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

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

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

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

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

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

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

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

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

演示與分享

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

1.直接演示。

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

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

在主工具欄，點(diǎn)擊“發(fā)布并分享”。發(fā)布完成后，即可獲得一個(gè)網(wǎng)頁(yè)鏈接地址，復(fù)制這個(gè)地址，將它發(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ā)布完成后，即可獲得一個(gè)原型碼，將這個(gè)原型碼發(fā)送給同事或客戶。

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

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

7.導(dǎo)出圖片

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

8.導(dǎo)出項(xiàng)目樹(shù)

主菜單，“導(dǎo)出”、“導(dǎo)出項(xiàng)目樹(shù)”。

總結(jié)：

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

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