如何用Mockplus來畫簡易網頁版原型圖

學習用Mockplus畫原型圖的步驟與方法

操作方法

（01）開啟Mockplus這個軟體，點選新建專案，選擇你需要用的頁面模式，如：手機、平板、網頁等，選擇好就可以進行原型圖的繪製了。

（02）首先，在畫之前引入眼簾的是Mockplus的工具欄，有元件、互動、擴充套件、佈局、移動、靜態、批註等功能；點開看看，熟悉各種功能的使用；

（03）現在，熟悉完畢後，我們可以進行簡單網頁版原型圖繪製。

方法/步驟2

（01）一、利用元件裡的線框工具進行拖拽，可隨意拖拽形成大概佈局，然後可以線上框中進行編輯，選擇需要的字型顏色大小，線框粗細等，如下圖所示；

（02）二，利用元件裡的擴充套件功能，繪製你所需要的搜尋框，表單等功能；利用圖片功能可以匯入你所需要的圖片使佈局圖變得更有直觀性；如下圖所示；匯入完後，還可以隨意縮放圖片大小。

（03）三、利用佈局裡的工具，新增選項卡、分組框等需要的功能，也可以進行編輯；

（04）四、對需要的功能元件進行拖拽，編輯，一個簡單的網頁版原型圖就畫好了！