設計並不是隨心所欲，也不是每時每刻都需要創意。你需要一個嚮導為你指明方向- 這就是原型。

什麼是原型？

原型可以概括的說是整個產品面市之前的一個框架設計。設計師可以利用它引導每個人都參與到專案中來。原型展示了各個部分之間的比重以及各個部分之間的聯絡。原型不僅僅只是表面的東西，它能夠說明使用者將如何與產品進行互動。舉個栗子，一個下拉選單，通過原型設計，你可以直觀的感受到每次點選或者滑鼠劃過時選單如何相應。

高效的原型設計工具

與其他工作一樣，完成原型設計需要相應的工具協助。在眾多原型工具中，這裡推薦5款高效的工具。

1. Mockplus

簡單易上手，摩客已經逐漸成為很多設計師們的選擇。寫程式碼是很討厭的事情。因此，摩客給大家提供了拖拽設計原型的功能。

對於還在使用紙和筆的設計師來說，摩客提供了更多的靈活性。你可以使用素描風格的元件來畫原型。摩客豐富的元件庫和圖示也讓設計更加快捷。

摩客的易用性還表現在建立原型的速度。如果使用其他工具，你可能需要花大量的時間完成一個原型。但使用摩客，只需5分鐘。你還可以通過掃描二維碼，快速的預覽原型。

今年摩客團隊推出了2.1版本，這就意味著你可以使用簡單的拖拽完成互動功能的設計。高度封裝的互動元件（例如彈出面板、彈窗、彈出選單、抽屜、內容面板、輪播、滾動區等）讓原型設計變得更加簡單，快速。想了解摩客更多功能，請檢視摩客官方教程。文章中提到的功能只是很小的一部分，摩客還有更多簡單好用的功能等著你去挖掘。

2. UXpin

Uxpin，另外一款值得推薦的原型設計工具。這款工具的優點就是簡單易用。它的介面十分簡潔，你可以輕易的把圖片和檔案合併到你的設計中去。這款工具的預覽功能也很好用，不僅可以預覽原型，也可以預覽點選時或者滑鼠劃過時各個頁面的狀態。其他人也可以對原型進行評論，方便了同事間的協作。

談到評論功能，如果UXpin 能夠在有新評論的時候增加一個提醒就更好了。目前沒有這個功能，如果有新的評論，你需要手動的去檢查。

3. Proto.io

與其他原型工具不一樣，Proto.io 是一款線上工具，因此使用它的時候需要聯網。如果你經常線上，那麼使用這款工具就沒什麼問題。其中很重要的一個功能就是內建的元件庫，設計師都知道從第三方尋找元件是很痛苦的事情。即使軟體中沒有你想要的元件，你也可以輕易的從第三方匯入。

如果你只是需要一個常規的佈局，proto.io 的啟動專案能夠讓你的工作變得簡單。你也可以儲存不同的變數，並且能夠預覽使用者與各個頁面之間的互動。 正因為這是一款線上的功能，在使用的時候有一些侷限。例如，不能單獨備份某一個頁面，而只能備份整個專案；不能新增需求文件。

4. MockFlow

MockFlow簡單的介面讓原型設計十分容易。它沒有花哨的東西—為你提供了一個整潔的設計介面。頂部是標準的選單和工具欄。如果需要更多的設計空間，可以隱藏選單和工具欄。這款工具也提供了內建的元件。

你可以使用這款工具免費建立一個原型，這樣就可以在購買之前體驗所有的功能。簡單的拖拽和雙擊功能讓你很容易的新增元件，不需寫任何程式碼。匯出功能同樣也很簡單。

MockFlow 也提供了協作功能，以便你邀請其他人預覽專案或者檢視專案進度。它提供了聊天功能，這樣就可以交流意見。但是有一個問題，如果有一個人在重新整理頁面，其他人就不能重新整理該頁面。

5. InVision

這款工具很大的一個優勢就是它可以讓你免費建立一個專案。這對於學生和初學者來說是一個不錯的福利，這樣一開始的時候就不用擔心預算問題了。這款工具的付費版本也是比較便宜的。 功能的分享和協作功能也很簡單。你的團隊成員或者客戶都可以給你的設計新增評論，並且你能夠很輕鬆的追蹤評論。

專案狀態是此工具另外一個強大的功能，你可以向你的整個團隊分享專案進度。每一個程序都可以標為“進行中”或者“需測評”或者某部分也可以標為“積壓”或者“通過”。

Invison提供了版本控制功能。你也可以與其他工具進行協作，例如 DropBox，PS，Sketch等。

以上五款原型設計工具都有自身的優劣點，但它們是目前市場上最高效的原型設計工具。

更高效的設計原型儘管有很多原型設計工具可以為你的工作帶來便利，但是也還會有不少的工作需要我們去做。下面有一些小建議，希望可以讓你的原型設計更優秀。

尋找靈感

儘管各個原型設計工具都提供了大量的元件，你只需要簡單的拖拽，但是如果沒有靈感，原型設計也是做不好的。不停的尋找靈感，學習其他設計者的專案，找出你喜歡的地方和不喜歡的地方。清楚的知道你的原型中需要避免的東西，這樣可以更容易畫出自己需要的原型。

形成自己的工作流程

每個人的工作方式都不一樣，對別人適用的方法對你不一定適用。形成最適合自己的工作流程，最大化的利用好時間和精力。某些人可能覺得先畫線框圖，然後畫原型，最後再進行視覺設計是很有效的流程。但是你可能覺得畫完線框圖就直接寫程式碼更高效。這些都取決於你自己。

選擇適合自己的工具

大部分設計師都在使用同一款原型工具，並不意味著你也需要使用這款工具。由於每個人的工作流程不一樣，其他人使用的工具不一定適合你。對比市場上不同的工具，尋找一款與你性格和風格最匹配的工具。擔心其他人都不用你使用的工具？ 但此工具可以給你帶來最好的效率才是最重要的。

層次清楚的大綱

每個頁面都有一個焦點。大綱可以讓你知道每個頁面中應該重點突出哪一部分。如果沒有大綱，想要畫出理想的原型很困難。如果你很清楚的知道頁面中哪部分最重要，那你就很容易判斷某些文字是否需要加粗。

從灰度圖開始

顏色很重要，但是需要謹慎。從灰度圖開始設計，然後新增圖片，然後再添顏色。如果你一開始就使用顏色，很有可能你的頁面看起來像一個小丑。

原型設計並不簡單，但是會一次比一次好。通過不停的練習，選擇正確的工具，你就可以設計出讓客戶滿意的原型。