Moqups：概述和回顧

如果不進行測試，你怎麼知道一個想法是好是壞？

線框圖、模型和原型設計是數字設計的必要部分。 可視化您的概念可以讓您模擬您的設計，嘗試不同的用戶體驗並在將任何內容變為現實之前測試各種用戶旅程和流程。

過去，設計師必須打印他們的設計並向客戶展示 PDF。 今天，有一些工具可以幫助您在設計公開之前找到並解決設計挑戰； 找出設計的美學和技術組成部分； 並在其他人之前測試體驗。

你也會理順你與客戶的關係——如果他們假設某事（他們會），你可以在早期階段解決這個問題，而不是聽到“哦，我以為……”後來，為時已晚.

Moqups 是一種基於 Web 的設計工具，可幫助您在一個環境中構建線框、模型和原型。 您可以在項目之間導航，並將您的設計從低保真（開始階段和草圖）提高到高保真（更徹底和詳細）。 在這篇文章中，我將其轉一圈，並向您展示該過程的每一步，包括我在文章末尾的最終想法。

你可以用 Moqups 做什麼？

您可以使用 Moqups 進行多種設計：圖表、流程圖、站點地圖、線框、模型、圖表和圖形。 讓我們來看看它們。

您會注意到我在這裡沒有專門討論原型設計。 這是有原因的，我稍後會談到。

圖表和流程圖

幾乎每個網頁設計項目都以圖表、流程圖或站點地圖開始，團隊成員往往會在此過程中返回參考。 使用 Moqups，您可以創建各種圖表：

• 概念圖
• 決策樹
• 用戶交互流程圖
• 軟件工作流程的流程圖
• 思維導圖
• 站點地圖
• 用例圖

使用流程圖模板，您可以在各種圖表上搶先一步。 您還可以根據需要使用圖表擴展器來發展流程。 此外，您可以更改圖表的外觀以對其進行自定義。

線框和模型

使用線框，您的團隊可以在項目開始時弄清楚信息層次結構、頁面密度和用戶流等內容。 簡單的形狀和占位符文本代表您將來要添加的更高級的設計元素。 您還不必擔心品牌或設計； 相反，您只需要擔心網站的結構和關鍵要求。

使用模型，您的團隊可以在設計的第一階段獲得反饋。 您將建立在線框的草圖以可視化內容並以非常基本的方式演示它的功能。 將設計置於上下文中以使其看起來更好並使最終結果可視化。 客戶可以看到設計在他們的網站或應用程序上的外觀，而不是在頁面上看到設計。

以適合您的任何順序創建

Moqups 的美妙之處在於，您可以隨心所欲地在線框和模型之間來回彈跳——而且您不必先創建一個。 例如，您可以從傳統方式開始，先是線框，然後是模型。 然後，您可以返回到線框，進行在評估模型時意識到需要的調整。 或者，您可以先創建一個模型，然後轉到線框圖階段以找出細節。 您還可以完全跳過模型並從線框創建低保真原型。

圖表和圖形

如果您需要向您的團隊、客戶或投資者直觀地呈現信息，Moqups 可讓您創建各種圖表和圖形：

• 面積圖
• 條形圖
• 柱狀圖
• 甜甜圈圖
• 折線圖
• 餅狀圖

Moqups 特點

以下是 Moqups 的主要功能，然後是附加優勢的簡要列表。

帶有圖形和字體的內置庫

• 內置庫包括數千個圖標集。 還有專為流行用例設計的即用型模板，以及適用於 Android 和 iOS 移動應用程序設計的自定義模板套件。
• 對齊、調整大小、旋轉或樣式對象。 您還可以批量編輯、分組、鎖定和重命名元素。 可以使用自定義指南、網格和標尺進行精確調整。
• Google Fonts 已集成，因此您可以從數百種字體中進行選擇。 高級控件可讓您調整文本以匹配您的設計。 （想了解如何為徽標選擇最佳字體？我們有一篇關於此的文章。）

組織您的項目

• 拖放您的頁面以在文件夾中重新排序或組織它們。
• 頁面面板使搜索和瀏覽文件夾變得容易。
• 使用母版頁，您可以將更改自動應用到所有關聯的頁面。

集成與協作

• Moqups 與 Dropbox、Google Drive 和 Slack 等工具集成。
• 借助雲，您的團隊可以在遠程工作時進行協作（您的團隊也可以通過以下方式進行聊天）。
• 獲得有關設計本身的反饋並進行編輯，而無需相互發送各種版本。

更多功能

• 易於使用的拖放編輯器（初學者可能會遇到學習曲線，但這不是主要的）
• 上傳您自己的圖片
• 排列元素時的對齊對齊
• 在不損失質量的情況下擴展
• 將您的作品導出為 PDF 或 PNG

使用 Moqups

我只想直接告訴你我對 Moqups 的體驗。 發生了很多事情——這並不令人困惑，只是那裡有很多——所以我要談談我玩過的那些我認為很酷或有用的功能。 在文章的最後，我將向您介紹我對 Moqups 的整體想法和感受，包括常見的缺點以及它最適合誰。

Moqups 入門

使用 Moqups 進行設置非常簡單，我建議您從免費帳戶開始（我稍後會在定價部分討論該帳戶中包含的內容）。

創建設計

我真的很喜歡拖放式編輯器。 在某些編輯器中，您單擊一個元素，它會立即出現在項目中，然後刪除它可能會很麻煩。 Moqups 讓我覺得我對我添加的內容有更多的控制權，讓我探索選項而不必擔心我會不小心點擊某些東西並在不知不覺中添加它。 此外，當您將一個元素拖到您的項目中時，您可以看到它的外觀，如果您決定不想要它，然後將其放回原處。

使用設計

當您將鼠標懸停在設計中的不同元素上時，會出現一個藍色輪廓，向您顯示不同的頁面元素。 要使用元素，請單擊以選擇它。 右側會打開一個帶有自定義選項的菜單。

項目顏色

我喜歡顏色選擇器的“項目顏色”部分。 這樣可以輕鬆地將左上角的心形顏色與文本顏色相匹配。

將元素保存為模板

Moqups 的一個有用功能是您可以將元素保存為模板，然後輕鬆地將它們按原樣添加到其他頁面。 將保留原始設計——顏色、尺寸等。這有助於在您的設計中創造連續性。

協作功能

如果您是 Google 雲端硬盤用戶，評論的外觀和行為將與您熟悉。 添加評論非常簡單，您可以在撰寫評論之前或之後四處移動評論，以便其放置合理。

但是，如果您有很多合作者和評論，那麼這個小評論窗格可能會很快失控。 您可能希望為您的團隊創建一個規則，將不再需要的評論標記為已解決。

Moqups 定價

使用免費計劃，您可以製作一個最多包含 200 個對象的項目。 在使用空白文檔和使用模板之間進行選擇時，需要考慮這一點。 我選擇了著陸頁線框模板，它立即用完了 200 個對像中的 125 個。 當然，我可以進去刪除一些對象，但對於某些人來說，從頭開始可能更有意義。

免費計劃唯一的好處是測試 Moqups，因為您可能不會只設計一個項目。 起價為每月 13 美元，按年支付。 每個計劃都允許您創建無限的項目並使用無限的對象，因此主要考慮的是有多少人將使用 Moqups。

除非您是一個設計團隊，否則您將需要 Creative Team 包。 您添加的人數越多，每位用戶的成本就越低。 例如，如果您有 50 個用戶，則每個用戶的費用為 3 美元，總共每月 149 美元（每年支付）。

有些人可能會覺得 Moqups 的定價很划算，而另一些人會認為它太貴了。 這取決於您將使用多少以及從中獲得的價值。

PS 使用免費計劃，不需要信用卡——如果你想測試一下然後決定它不適合你，你不必記得在被收費之前取消。

Moqups 弱點

• Moqups 最大的缺點是不能離線使用。 另一方面，它基於瀏覽器的事實對某些人來說非常方便。
• 如果您有高級原型設計需求或者您對功能很挑剔，這可能不適合您。
• 我讀過評論說 Moqups 可能會滯後，需要很長時間才能加載甚至意外關閉，但我沒有經歷過任何這些。 但是，在您添加豐富的內容和創建其他頁面時需要注意這一點。 我的設計中沒有任何照片或視頻，所以這可能有助於保持速度。 如果您的項目將包含許多豐富的元素，請利用免費計劃進行測試。

Moqups 最適合誰？

Moqups 非常適合非開發人員在項目規劃的第一階段進行概念化。 例如，企業主或項目經理可以將他們的想法傳達給開發和設計團隊，然後他們將繼續使用更高級的方法來創建實際產品或高保真渲染。

Moqups 對於模型和線框圖特別有用，但在原型製作方面則沒有那麼強大。 Moqups 沒有其他原型工具那麼多的功能，而且樣式元素也不能像競爭工具那樣以多種方式定制。 在他們的網站上甚至幾乎沒有提到它。

最後的想法

總的來說，我喜歡使用 Moqups——我希望我在設計我的網站時就知道它，因為它比我草擬的紙筆設計要真實得多。 它按照它所說的方式工作，即使有很多選擇，也沒有什麼很難弄清楚的。 如果您曾經使用過任何類型的圖形設計工具——我猜你已經使用過——這個工具不會很難上手。 您可以第一次使用它並在一天結束（或一小時結束）之前完成一個項目，然後您可以返回並探索您第一次錯過的所有選項。

可視化工具的重點是獲得最終產品，對嗎？ 查看我們的 Divi 設計展示以及來自我們很棒的社區的作品。

特色圖片來自 Visual Generation/shutterstock.com