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

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

操作方法

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

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

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

方法/步驟2

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

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

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

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