日本UX站點Uxmilk.jp對Mockplus的介紹 - 簡潔快速的原型圖設計工具Mockplu

日本UX站點對Mockplus做了專文介紹。被咱們偶然發現了。

由於Mockplus在歐美的用戶較多，因此日文的介紹，讓咱們感到榮幸，也確實有些意外。做爲日本同行，他們如何看待Mockplus？有什麼使用感覺或者意見？

原文爲日文，因此這裏全文翻譯出來，提供你們閱讀。

 

---

>> 做者 三瓶亮

>> UX MILK主編。現在的大數據時代用各類各樣的形式分享信息。喜歡朋克搖滾、電子遊戲以及動漫做品。最近DARK SOULS（黑暗之魂）的遊戲又從新回到人們的視線裏了。

>> http://uxmilk.jp/38755

 

---

 

原型圖設計是現現在網頁設計師和應用軟件的設計師工做中不可忽視的一道工序。最近隨着以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能夠做爲一款現成的既想既做的繪畫工具使用。它是一款簡潔快速的原型圖設計工具。

由於本人多少熟悉一些其它的繪圖工具，若是是初學者一開始就使用的話，毫不會像這款工具這麼方便。你能夠從這款繪圖工具中直觀的找到想要繪製的圖形，方便快捷。

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

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