經(jīng)常有人會問："設(shè)計(jì)網(wǎng)站原型的最佳方法是什么？"就像問："做一個網(wǎng)站最好的方法是什么？""沒有一個單一的"最佳"的方式。

每一個個人的網(wǎng)站原型，像每個個人的網(wǎng)站，有自己的風(fēng)格，目標(biāo)和策略。什么運(yùn)作良好的云的客戶關(guān)系管理網(wǎng)站可能不工作，以及一個電子商務(wù)業(yè)務(wù)。

在這篇文章中，我們將探討三個最常見的數(shù)字網(wǎng)站原型方法：演示軟件（主要是初學(xué)者），編碼網(wǎng)站原型（中級到高級），和專門的網(wǎng)站原型應(yīng)用程序（各級專業(yè)知識）。

01、演示軟件

主題演講正變得越來越流行的建筑網(wǎng)站原型

首先，有傳統(tǒng)的PowerPoint，一個可靠的業(yè)務(wù)主要用于演示在過去的二十年里。如果你正在尋找一個更現(xiàn)代的選擇，主題是上升的普及。

有趣的是，谷歌風(fēng)險(xiǎn)投資公司提到的主題作為他們的"設(shè)計(jì)沖刺"計(jì)劃的秘密武器。你可以在這里找到更多的演示軟件。

=== 優(yōu)缺點(diǎn) =====

讓我們看看利弊，以便你可以作出一個受過教育的決定。首先優(yōu)點(diǎn)…

• 幾乎每個人都使用過演示軟件，所以他們是一個快速的方式來啟動一個簡單的網(wǎng)站原型。

• 熟悉-你知道的基本知識，這并不是很難學(xué)習(xí)更先進(jìn)的功能，如動畫，幻燈片轉(zhuǎn)換，和鏈接幻燈片的相互作用。

• 基本元件庫-感謝簡單的線框圖的圖書館一樣，Keynotopia，你可以快速創(chuàng)建低高保真線框然后鏈接在一起的一個可點(diǎn)擊的網(wǎng)站原型。您還可以使用主模板，并在需要時再使用幻燈片或幻燈片的部分。

• 自然線性流-這些工具的幻燈片，自然需要通過一個連續(xù)的用戶流量，這迫使你去思考體驗(yàn)除了視覺效果。對于更高級的用戶，可以在復(fù)雜的方式中鏈接幻燈片，該方法將在線性進(jìn)程之外進(jìn)行。大多數(shù)網(wǎng)頁設(shè)計(jì)和網(wǎng)站原型的應(yīng)用程序仍然可以笨拙的可視化用戶流量，但UXPin，F(xiàn)linto，和愿景做了一項(xiàng)偉大的工作。

而現(xiàn)在的缺點(diǎn)…

當(dāng)我們描述在我們的免費(fèi)電子書網(wǎng)站原型的指南，一旦你開始玩了先進(jìn)的用戶流量和互動，你已經(jīng)基本上達(dá)到了演示軟件的限制。

• 非庫存元素庫-找到合適的元素庫是不容易的（如果它們存在的話）。與專用的網(wǎng)站原型工具，演示庫不經(jīng)常更新，他們的質(zhì)量通常是不好的。

• 有限的合作-大多數(shù)演示軟件不提供任何合作（除了谷歌介紹）。但權(quán)衡的是，協(xié)同演示軟件缺乏交互性，圖形處理，形狀，文本，和顏色選項(xiàng)，使他們有價(jià)值的網(wǎng)站原型。如果你想不妥協(xié)的合作，堅(jiān)持一個網(wǎng)站原型工具。

• 有限流量圖表和用戶流-正如我們討論的，你可以溝通先進(jìn)的用戶流量，因?yàn)槟憧梢枣溄踊脽羝黄鹩脩袅髁?，不是純粹的線性。但這是不容易做到的，網(wǎng)站沒有聯(lián)系的一種方式，Axure或uxpin可以做網(wǎng)站原型。

• 有限的互動性豐富的用戶可以使用所有功能在主題或PowerPoint相當(dāng)遠(yuǎn)。但是，一旦你考慮如何容易地添加基本的互動與網(wǎng)站原型工具，和純粹的廣度可用的組合元素，內(nèi)容，視圖和動畫，它可能只是更容易切換到專門的東西。

如果您想了解更多，Keynotopia對PowerPoint和主題的一些基本成型的教程。

02、編碼（Html）的網(wǎng)站原型

HTML編輯器

Anna Debenham走過編碼網(wǎng)站原型

進(jìn)一步推動討論，我們開始在指南網(wǎng)站原型設(shè)計(jì)，其中一個最大的問題是設(shè)計(jì)師對網(wǎng)站原型設(shè)計(jì)是是否使用代碼。

這種不確定性源于一些設(shè)計(jì)師缺乏對編碼的安慰：他們要么不知道如何去做，要么不喜歡這樣做。當(dāng)面對一個更有趣和直觀的方法，使用一個網(wǎng)站原型工具，甚至手繪草圖，編寫代碼可以感到乏味。

今天比以往任何時候都要早開始編碼的原因較多，如Andy Fitzgerald的UX Booth的文章解釋說，德勤數(shù)字高級用戶體驗(yàn)設(shè)計(jì)師。"我設(shè)計(jì)它，你建立它"瀑布的心態(tài)，由設(shè)計(jì)師在過去是過時的，因?yàn)榧夹g(shù)進(jìn)步在大的進(jìn)步和合作成為強(qiáng)制性。

利弊

在代碼中有幾個明顯的優(yōu)勢，主要是由于這樣的事實(shí)，你開始設(shè)計(jì)的東西，類似于最終的形式。正如在指南中解釋的網(wǎng)站原型，一些優(yōu)勢包括：

• 平臺無關(guān)的HTML網(wǎng)站原型在任何操作系統(tǒng)，不需要外部軟件來使用它。

• 模塊化- HTML組件，它可以幫助生產(chǎn)力。

• 低成本（除了時間）有很多免費(fèi)的HTML文本編輯器，但你需要花一些時間學(xué)習(xí)語言是很有幫助的。

• 技術(shù)基礎(chǔ)為產(chǎn)品提供你創(chuàng)造生產(chǎn)就緒的代碼（而不是用于快速網(wǎng)站原型的緣故，一次性的），你可以結(jié)束在發(fā)展節(jié)約時間。

編碼的網(wǎng)站原型可以建立在各種不同的方式像HTML（或Python），根據(jù)你自己的喜好。Ash MAUrya的spark59設(shè)計(jì)揚(yáng)聲器的創(chuàng)始人和首席執(zhí)行官，建議使用Ruby on Rails的緩解因?yàn)樗梢栽O(shè)置占位符的每個頁面和鏈接在一起的導(dǎo)航。然而，對于網(wǎng)站原型最流行的選擇可能仍然是HTML代碼。

當(dāng)然，真正的考慮在決定是否使用代碼在你的網(wǎng)站原型是你的技能水平。不是所有的設(shè)計(jì)師都對代碼的能力，所以不要急于求成，除非你技術(shù)過硬。此外，直線跳水到代碼可能會抑制創(chuàng)造力-問問自己有多少交互和頁面流可以在一個網(wǎng)站原型工具和代碼如HTML或Javascript創(chuàng)建30分鐘。

真實(shí)世界的例子

Verity宣傳片

驗(yàn)證是一個應(yīng)用程序，讓你收集你自己的網(wǎng)站和應(yīng)用程序的反饋

一個最成功的互動設(shè)計(jì)公司，網(wǎng)站如易趣網(wǎng)，臉譜網(wǎng)，Photobucket的設(shè)計(jì)好Zurb下一人，紐約。在所有他們的工作中，他們強(qiáng)調(diào)在網(wǎng)站原型階段編碼的重要性。

在他們的經(jīng)驗(yàn)中，編碼網(wǎng)站原型（特別是快速網(wǎng)站原型）是最有價(jià)值的可用性測試，即在發(fā)現(xiàn)什么是錯誤的早期和糾正它。如果網(wǎng)站原型失敗了可用性測試，另一輪的修訂是為了；如果它通過，那么它的時間進(jìn)行下一步。

驗(yàn)證是Zurb下一應(yīng)用程序讓用戶收集反饋在自己的網(wǎng)站和應(yīng)用程序。雖然這是一個有用的應(yīng)用程序的設(shè)計(jì)師和開發(fā)人員，它是混合設(shè)計(jì)過程中的應(yīng)用程序，我們要專注于這里：

喜歡素描寫生- Zurb下一是因?yàn)樗且粋€快速和有效的方式產(chǎn)生的想法。在第一周，他們經(jīng)歷了大約80個草圖屏幕。

前端網(wǎng)站原型-然后他們立即鴿子創(chuàng)建的前端，他們在2周內(nèi)完成。他們的信用一個網(wǎng)格全局樣式表使用（global.css文件），一個已經(jīng)存在的視覺風(fēng)格的工作，沒有妄想，第一個版本可能是粗糙的。

工程-兩個多星期后，第一次通過，該團(tuán)隊(duì)有他們的應(yīng)用程序的工作版本，雖然粗糙。與工程工作有助于抑制明顯的技術(shù)問題。

經(jīng)過一個多月創(chuàng)建應(yīng)用程序的第一個版本，用他們保存最后修飾Zurb下一時間。

03、專業(yè)網(wǎng)站原型軟件和應(yīng)用程序

渴望直接進(jìn)入一個計(jì)算機(jī)程序，這是一個實(shí)際的代表你的想法？網(wǎng)站原型軟件和應(yīng)用程序的美麗是，它是專門為這個目的而設(shè)計(jì)的，所以他們提供了功能，學(xué)習(xí)曲線，和易用性之間的完美平衡。

初學(xué)者和資深設(shè)計(jì)師都使用專門的工具，如下面的那些-初學(xué)者的易用性。

uxpin

像UXPin這樣的工具可以幫助非程序員建立工作網(wǎng)站原型

這些工具的功能各不相同，有一些是更迎合某些情況下比別人，所以最好是找到一個最適合你的需要。開始你的搜索，你可以查看工具，像UXPin一樣，侵襲，MockFlow，justinmind，Axure，OmniGraffle，flinto，或驚奇。

==利弊===

在樣機(jī)指南描述，這些工具，他們是專門為網(wǎng)頁設(shè)計(jì)和網(wǎng)站原型建立優(yōu)勢。一旦你學(xué)習(xí)了基本的功能，你可能會發(fā)現(xiàn)它甚至更快的網(wǎng)站原型與這些與傳統(tǒng)的方法，如紙網(wǎng)站原型。

• 速度-從對我們自己的客戶來說，我們發(fā)現(xiàn)，電力用戶可以在專業(yè)化的工具，甚至比紙網(wǎng)站原型的速度更快，因?yàn)樗麄兛梢詣?chuàng)建，復(fù)制，并產(chǎn)生先進(jìn)的互動與只是幾個鼠標(biāo)點(diǎn)擊。

• 元庫而喜歡侵襲快速點(diǎn)擊網(wǎng)站原型，多屏幕一起簡單的互動環(huán)節(jié)極大的工作工具（如點(diǎn)擊和懸停），其他工具，像JustInMind，justproto，和uxpin內(nèi)置元件庫（讓你創(chuàng)建你自己的重復(fù)使用）。

• 先進(jìn)的流程圖和用戶流流和功能網(wǎng)站原型設(shè)計(jì)的最重要的方面，大多數(shù)的工具來利用這些特征建立。大多數(shù)的工具允許你生成網(wǎng)站地圖為您創(chuàng)建網(wǎng)站原型的新屏幕，讓你看到了這些屏幕并排所以你可以瀏覽。

• 內(nèi)置的協(xié)作-首先，請確保您選擇的工具具有基本的注釋和解決注釋功能。其次，該工具需要能夠允許協(xié)同編輯和共享的網(wǎng)站原型（如鏈接）。最后，修訂歷史和云存儲通過設(shè)備無關(guān)的簡化你的工作流程。而uxpin和侵襲是最強(qiáng)大的，justinmind，justproto、Flinto和奇跡也有一定程度的合作。

• 精簡的介紹-這意味著輸出到PDF，內(nèi)置的呈現(xiàn)方式，或出口到Web或移動應(yīng)用程序，一個真正的網(wǎng)站原型經(jīng)驗(yàn)。大多數(shù)工具將導(dǎo)出到PDF，而只有少數(shù)像Mockflow口來演示軟件，只有少數(shù)像uxpin讓你文件導(dǎo)出為HTML為基礎(chǔ)的網(wǎng)站原型。一些工具如UXPin和侵襲也有表現(xiàn)和屏幕共享功能。

所有的網(wǎng)站原型工具需要一點(diǎn)點(diǎn)的時間來熟悉，但他們可以很值得的努力。盡管如此，讓我們確保你在決定之前考慮所有的方面。這里有一些潛在的缺點(diǎn)…

缺乏熟悉-像生活中的任何東西，如果你從來沒有用過，你需要學(xué)習(xí)它。但少數(shù)喜歡侵襲和UXPin工具被稱為學(xué)習(xí)的可用性和易用性。

像富達(dá)公司&功能-使用UXPin和Axure工具外，大部分是低保真網(wǎng)站原型工具和/或低功能。例如，入侵主要用于快速點(diǎn)擊的網(wǎng)站原型，所以它局限于兩種相互作用（懸停和點(diǎn)擊），你不能創(chuàng)建任何應(yīng)用高保真（從其他地方進(jìn)口的）。侵襲和Flinto也讓你從PS圖象處理軟件和草圖導(dǎo)入文件，但文件是扁平的，你失去了你的層。

另外：

采取一個刺傷的問題"什么是最好的方式網(wǎng)站原型？"，我們將與答案："無論哪一種方式對你最有效"。這不是一個"最容易的"或"以任何需要最少的工作"的委婉說法，雖然。網(wǎng)站原型的最好方法是這樣的，對你，會產(chǎn)生最好的結(jié)果。

您必須考慮產(chǎn)品和設(shè)計(jì)團(tuán)隊(duì)的具體細(xì)節(jié)。哪一個平臺和方法是設(shè)計(jì)師和開發(fā)者最好的或最舒適的？什么是特定的目標(biāo)，時間框架，和與你一起工作的產(chǎn)品的局限性。知道你要去哪里是最重要的部分-我們只是在解釋不同的路線到達(dá)那里。

對于更實(shí)用的建議，在低或高保真度的網(wǎng)站原型，下載免費(fèi)指南網(wǎng)站原型。了解如何以及何時使用不同的網(wǎng)站原型工具和策略，在Zurb，谷歌公司，IDEO的最佳實(shí)踐，以及更多。