使用面向設計師的原型工具改進您的工作流程

我不了解你，但我一直在為我的網頁設計工作流程尋找完美的原型製作工具。 有很多選擇，但有一件事是肯定的：您可以通過快速原型設計更有效地處理您的項目。

有任何 HTML、CSS 或 Javascript 愛好者嗎？ 如果這些是您喜歡的技術，那麼您可能只是一個快速原型製作者。 作為網頁設計師，我們中越來越多的人已經彌合了差距並進行了一些前端開發工作。 除了是超級明星視覺創意之外，我們還是專業的代碼工匠。

通過擁有一個工作的、編碼的原型，您可以快速啟動並運行，能夠與客戶共享您的站點並在此過程的早期獲得反饋。 如果編碼不是你的事，但你仍然希望快速創建原型，那麼有許多工具可以為你的客戶提供高質量的原型。

為什麼要快速原型製作？

快速原型設計通常是敏捷過程中的關鍵組成部分。 設計和開發了您網站的實時工作示例，並且原型中的代碼通常可以在以後重用於實際的開發過程。 在流程的早期尋求並提供反饋，這有助於減少開發階段的更改數量。 設計師經常同意它改進了最終設計，因為在此過程中嘗試了不同的變化。 在創建原型時，無論是否涉及代碼，選擇一個可以讓您快速高效地工作的工具非常重要。

Rapid Prototypers 為每個項目帶來價值，客戶當然喜歡看到一個可行的例子。 大多數人都是視覺的，如果他們可以使用原型，他們會發現在瀏覽器中查看設計是有益的，最好是在多個設備上。

靜態和工作原型

傳統上，設計師通常會在 Photoshop 或 Illustrator 中為原型創建靜態模型。 這些靜態模型提供了巨大的價值，但工作原型是一個很好的選擇，因為設計可以在開發時立即在瀏覽器中進行測試。 許多設計師發現，隨著他們的編碼技能越來越強，他們的編碼速度越來越快，並且在瀏覽器中進行設計成為他們的常態。 如果您願意，您不必像以前那樣依賴靜態 Photoshop/Illustrator 模型。

原型必須有多詳細？

您需要提供多少設計細節沒有正確或錯誤的答案，這取決於客戶和項目。 您可能熟悉設計界中的“保真度”一詞。 這是指設計中包含的細節和交互的數量。 低保真度是非常基本的，通常是“草圖”，並且不允許用戶與設計進行交互。 提供的設計細節很少，低保真度僅包括原型中組件放置的基本信息。 高保真原型通常允許用戶交互並且接近網站的真實表示。 設計元素往往包含很多細節，而且非常精緻。

低保真原型。

高保真原型。

您為原型選擇的工具將取決於保真度要求。 一個不一定比另一個好，它只取決於項目範圍。

出色的原型製作工具

現在我們已經了解了原型設計的基礎知識，讓我們來看看一些可用的工具。 原型製作工具具有不同的保真度和限制。 如果編碼在你的駕駛室裡，太棒了！ 但我們也會快速瀏覽一些不需要任何代碼知識的選項。

用於快速編碼的原型工具

框架是提供由 HTML、CSS、JS 等組成的標準化代碼起點的工具。在原型的情況下，框架是快速創建 Web 項目的絕佳選擇。 創建一個可以重用於下一個原型的入門主題也很有幫助。

有兩個很棒的框架可以快速構建。 即使在編碼時，您也可以選擇低保真或高保真。 在進行快速原型製作時，您可以根據需要獲得盡可能詳細或基本的信息。 一旦你了解了這些工具的細微差別，你會驚訝於事情進展得如此之快。

快速原型選項一——Twitter Bootstrap

目前 Twitter Bootstrap 是第三個版本，所以它一直在完善。 如果您想編寫一些代碼，這是創建工作原型的絕佳框架。 這很棒，因為它響應迅速、易於學習，並且有很多設計組件，如按鈕、模型、圖標等。使用這些元素，您可以快速輕鬆地啟動和運行 Web 項目。 許多網站都是使用 Bootstrap 構建的，因此原型代碼也可以在以後使用。

快速原型選項二——基礎

與 Twitter Bootstrap 一樣，Foundation 是快速創建原型的絕佳選擇。 這個框架比 Bootstrap 更基礎，並且需要更多的 CSS 樣式，因為沒有那麼多默認值。 這也是一個不錯的選擇，因為您可以在開發可重用代碼的同時快速啟動並運行。 您可以使用此工具創建低保真度或非常高保真度的原型，具體取決於您的偏好。

不需要編碼的原型選項

正如所承諾的，這裡有一些不需要任何編碼的原型設計選項。 高保真度和低保真度或介於兩者之間的選項有很多。

快速原型選項三——好的舊紙和鉛筆

這個靜態原型可以非常快速地創建。 此方法易於使用，您應該已經熟悉該功能！ 雖然它被認為是低保真度，但草圖可以減輕項目的壓力，讓想法自由流動。 信不信由你，有時這可能就是原型所需要的全部。 這僅取決於項目和客戶。

快速原型選項四 - 樣式瓷磚

如果您更喜歡靜態的原型製作方法並且還想要高保真度的東西，那麼樣式瓷磚是一個不錯的選擇。 設計模型在網頁設計中佔有重要地位（畢竟，設計元素是我們構建頁面所需要的）。 但在投入時間創建整頁模型之前，樣式圖塊是一個很好的解決方案。 在投入時間製作詳細的完整原型之前，這些是至關重要的一步。 論文包含靜態模型所具有的所有視覺信息。 包括顏色、圖像、按鈕樣式等，讓客戶了解設計元素的外觀。

快速原型選項五 - Omnigraffle

OmniGraffle 是一個不錯的選擇，可讓您快速創建網站線框，用作中低保真度原型。 您可以添加鏈接、從預先建立的樣式和對像中進行選擇，等等。 這是繪製原型然後創建客戶可以與之交互的東西的好方法。

快速原型選項六——Invision Ap

InVision 是一個獨特的選項，因為您可以上傳現有的靜態原型並使其具有交互性，而無需代碼。 這是利用靜態原型、與客戶共享並跟踪反饋的好方法。 此外，您可以進行用戶測試，並使用此工具傳達任何其他反饋。

快速原型選項七 Axure

Axure 允許您創建交互式原型。 此外，還可以使用各種 UI 元素，以便您開發和分享您的想法。 從快速線框到帶有顏色、漸變、圖像等的拋光設計，該工具提供了多種保真度選項。 它還帶有一個方便的共享選項，因此您的用戶可以單擊並查看您的項目將如何工作。

快速原型選項八 - Lucidchart

Lucidchart 是基於雲的，它適用於多種設備。 如果您有多個人參與該項目，協作也變得容易。 它允許與您的團隊實時聊天，您也可以直接在原型中發表評論。 使用提供的許多 UI 元素創建動態、中等保真度網站原型。

下一步是什麼？

在尋找您選擇的原型製作工具時，需要考慮很多因素。 無論您是否喜歡實時代碼，都有提供各種保真度選項的工具。 如果您是單獨工作或嚴重依賴團隊溝通，您會找到適合您需求的完美解決方案。

現在您已經擁有了完美的原型製作工具，您可以自豪地佩戴快速原型製作者的徽章。