最實用易懂的教程「mockplus教程怎麼樣」

原型圖設計是現如今網頁設計師和應用軟件的設計師工作中不可忽視的一道工序。最近隨着以adobe為首的圖形軟件公司不斷研發，在全世界許多圖形製作工具應運而生。

原型圖設計由於處於不同的開發階段以及追求的效果不同又萌生出很多小的需求，使操作性更加靈活多變。與其說在眾多的圖形軟件中選出最好的圖形工具不如根據自己的需求選擇操作最方便快捷的圖形製作工具才是最重要的。

基於以上需求，現在此介紹目前日本國內還未廣泛使用的原型圖設計工具Mockplus。

Mockplus的定義

Mockplus是Jongde Software公司研發的一款簡潔快速的原型設計工具。就像宣傳標語WYSIWYG（What You See is What You Get =既“所見即所得”）說的一樣，Mockplus是一款直觀可視、操作方便快捷的圖形製作工具。

在此之後，我草擬了一份關於此圖形製作工具的操作流程報告，全文幾乎沒有任何的指導教程。本人初次使用此工具就是在無任何指導的情況下獨立完成所有操作，製作過程中未碰到任何疑難問題。我可以直言不諱的說它雖然沒有華麗的用戶界面，但絕對是“直觀可視、操作方便快捷”的圖形製作工具。

所謂百聞不如一見，所以我從初級開始循序漸進的講解原型圖製作流程並以報告形式呈獻給大家。

Mockplus使用指南

Mockplus支持Win/Mac系統。甚至還有輔助iOS/Android的應用軟件。大部分功能可以免費試用，只有雲功能等一小部分功能需要付費後才能使用。

下載應用程序，啟動後會彈出會員登錄界面。

按界面要求填寫登錄後進入用戶界面。

界面提供線框和素描兩種模式。此時如果作圖不美觀、不細心的話,系統會自動識別並向用戶作出提示。可以顯示工具的狀態。

接下來試着讀取樣圖設計信息。

此時立即在作圖區沿邊框頂格生成圖像。

首先進入主畫面。畫面的左側一欄為工具欄，右側為畫圖區域和狀態屬性欄。畫面最上方當中位置是預覽設置，可以演示原型圖。

看上去總感覺只要一觸碰該工具就會馬上開始製作圖形。

原型圖製作指南

此次我試着製作某媒體網站的應用軟件的初級階段的原型圖。

就是這樣的感覺。順便提一下，此時很想用Sketch模式在PDF上書寫試試看。

交互工具

首先在左側的工具欄里有交互工具，可以試着加入Sliding Drawer（抽屜組件）。直接拖曳工具欄中的圖標使其移動＆下拉。因為評價不高的漢堡菜單會在桌面上滾動，所以請適當放入。

雙擊抽屜組件就彈出該畫面。

可以在抽屜中插入圖片組件。

可以按照自己所想的圖案添加圖形。系統自動默認為x圖形，並且支持嵌入自己想要的圖片。

因為這是應用程序的副菜單可以試着放入列表視圖。

左側的工具欄里會看到桌面視圖。拖曳＆下拉該圖標會產生樣圖。雙擊此圖標後…

畫面上出現文本區。只可以在文本區進行編輯。文字組合和象形圖隨即出現。這是該軟件的獨到之處，使用順手後，編輯處理圖形很容易。

馬上開始編輯。

編輯處理好後，圓形圖立即呈現。果然很方便！

如果想啟動畫圖界面可以返回主頁面。

若單擊漢堡圖標，會顯示許多細分圖標。上面的圖標是和圖片組件相關的，方框中的三個圖標又是代表什麼呢。

若拖動圖標後面的鏈接點，它可以拉伸至抽屜組件處，所以就先試着連着看看。此處看不見效果，但會彈出確認窗口，請點擊確認按鍵。讓我們試試看吧。

可交換的圖像文件雖然有點雜亂無章，但可以輕而易舉的移動。簡單極了！

跟帖

好玩極了。製作貼子很方便，不如試着製作一篇記事貼和報道吧。

該軟件為您準備了各種各樣的標籤。只要拖曳和下拉一看便知的記事貼圖標就可以了。圖標設計的雖然不華麗但配有樣本標籤，方便快捷，一學就會。

這和剛才所介紹的列表視圖一樣只能在編輯區編輯製作。可以用逗號分隔。仔細觀察後發現各圖標上面有個拖曳用的小鏈接點。果然這裡也是可以鏈接的。

帖子下方需要留有一定的空間作說明。所以可以使用內容面板。這裡真實的反映了我大腦中的構想，雖然有點讓人難以捉摸，但結果和想象的完全一致。

動態面板可以將幾頁同時綁定，方框區域可以記載頁數。

畫面的右側有項目列表，新增頁面時會生成新的頁面導覽圖。

將剛才介紹的動態面板設置在標籤的正下方，點擊圖標後馬上會生成一個黑色的方框，用鼠標適當拖動調整方框大小。

試着連一下，和Panel 1相連的記事表也隨之發生變化。按「＋」按鍵後新增Panel 2，同樣連接推薦記事一覽表。

在此可以記載兩頁的信息。

這裡還有一個功能，可以將記事貼和所述內容面板聯繫到一起。

將消息貼→記事貼，推薦貼→推薦記事一覽表聯繫到一起。這裡只是摸索着操作。我本想可以連接到一起的就試着操作了一下，還真的連接到一起了。太好了。

那麼就給大家演示一下吧

我這次想將記事貼的內容和所述內容的範疇對換一下。要是內容範疇的記事一覽表可以循環變換就好了，於是就根據自己的想法試着做了，不知道會不會成功。

按下預覽圖標（F5）

腦海中浮現的想法幾乎都實踐了！

沒有花多少時間學習就三下五除二的完成了製作，感覺自己好厲害呀。

這裡順便提一下，如果下載了iOS/Android應用軟件的話可以通過掃描QR（二維碼）在手機端預覽。這個操作很簡單。（但是，日語字體有點怪怪的感覺，但如果想寫得漂亮得體的話最好是使用美術字體功能）

總結

Mockplus可以作為一款現成的既想既作的繪畫工具使用。它是一款簡潔快速的原型圖設計工具。

因為本人多少熟悉一些其它的繪圖工具，如果是初學者一開始就使用的話，絕不會像這款工具這麼方便。你可以從這款繪圖工具中直觀的找到想要繪製的圖形，方便快捷。

你既可以利用這款工具仔細做圖，也可以像本人一樣追求速度，大膽的潦草作圖。

如果能通過在線等方式分享，那就再好不過了，但好像幾乎都是收費的功能。話說回來，這款繪圖工具可以滿足你匆匆忙忙作圖的需求，有機會的話不妨嘗試一下如何？