網(wǎng)站設(shè)計前，原型制做的必要性。一個成功網(wǎng)站靠的就是原型策劃

原型設(shè)計的網(wǎng)站是一個廣泛的創(chuàng)建它具有交互功能基本線框的過程。線框可以是靜態(tài)圖像或草圖，而原型通?？梢耘c所有主要頁面的功能交互。

圖形編輯程序一直是原型制作的最流行選擇。但是近年來，越來越多的開發(fā)人員正在切換到瀏覽器內(nèi)原型。構(gòu)建全新項目時，它更快，更清潔，更簡單。但是，您如何開始？

在這篇文章中，我想介紹瀏覽器中原型的基礎(chǔ)知識，并為您提供一些幫助您的工具。

瀏覽器內(nèi)原型制作的基礎(chǔ)

網(wǎng)站可以描述為構(gòu)建為在網(wǎng)頁瀏覽器中運(yùn)行的數(shù)字界面。許多設(shè)計人員喜歡在繼續(xù)進(jìn)行設(shè)計之前在圖形編輯器中創(chuàng)建這些界面。

但是，在瀏覽器中對網(wǎng)站進(jìn)行原型制作以查看每個功能的工作方式，并評估諸如布局結(jié)構(gòu)和頁面動畫之類的初始概念會更有意義。

盡管大多數(shù)設(shè)計師都有自己的例程開始新項目，但沒有唯一的最佳原型制作方法。許多設(shè)計師仍然喜歡從Photoshop開始，但從原型設(shè)計開始有很多優(yōu)點。

• 1.易于測試和更改網(wǎng)格系統(tǒng)
• 2.易于大幅度修改
• 3.下拉菜單等動態(tài)效果可以實時測試
• 4.您從一個小的代碼庫開始，然后逐步添加更多代碼

Photoshop不允許您與模型動態(tài)交互。對于需要為斷點創(chuàng)建單個文檔或圖層組的自適應(yīng)斷點，也是如此。

最終，瀏覽器原型可以更精確地表示最終接口。樣機(jī)和草圖是平坦且靜態(tài)的。這些仍然是有價值的資產(chǎn)，但是最終您需要交互式布局。這就是為什么瀏覽器原型制作可以節(jié)省大量時間的原因。

您可以從初始草圖直接跳入瀏覽器，以創(chuàng)建具有最終版本所需的所有主要功能的交互式網(wǎng)站原型。

用于實現(xiàn)原型的工具會有很大的不同。但是不要誤會該過程的工具。

您可以使用原始HTML / CSS，開放源代碼庫或其他工具（如瀏覽器附件）在瀏覽器中進(jìn)行原型設(shè)計。無論您使用什么，目標(biāo)始終是相同的：創(chuàng)建一個簡單的交互式UI，該UI對最終網(wǎng)站的行為進(jìn)行建模。

原型制作過程

我認(rèn)為最好是從紙上素描開始呈現(xiàn)想法。這些草圖可以在圖形程序中完成，但是在紙上工作時通常具有更大的自由度。

快速迭代新想法，并對設(shè)計有所了解。您可能會指出列，裝訂線并做一些書面說明來描述容器的屬性（寬度，填充等）。

一旦草圖看起來不錯，就可以進(jìn)入瀏覽器。旨在首先設(shè)計基本的灰度布局。這可以使用許多不同的資源（例如AXURE）來完成，該資源可以生成任何大小的原始灰度圖像。

使用簡單的灰色布局，您可以將更多精力放在網(wǎng)格，版式，空白和動態(tài)元素（如幻燈片顯示或下拉菜單）上。此階段的目的是設(shè)計布局應(yīng)如何表現(xiàn)而不會被美學(xué)分散注意力。

您想消除瀏覽器錯誤和響應(yīng)斷點的所有潛在問題。使整個布局在所有瀏覽器上都能正常工作。

從那里，您可以快速添加內(nèi)容，圖像和其他相關(guān)樣式，而不必?fù)?dān)心更大的畫面。這絕對是瀏覽器內(nèi)原型開發(fā)的最佳策略，因為您首先關(guān)注的是大型元素。

如果布局在Firefox中中斷，則無論是否有顏色，外觀都將相同。但是，僅關(guān)注布局時，解決布局問題要容易得多。

一旦擁有了功能齊全的原型，就可以輕松地對輔助功能（例如背景圖案，圖塊，圖標(biāo)和其他類似功能）進(jìn)行網(wǎng)頁開發(fā)。

在這個原型設(shè)計階段有很多考慮。每個項目都有其自己的目標(biāo)，但是這里是在制作原型時要考慮的目標(biāo)的快速列表。

• 布局可以在所有主流瀏覽器上使用嗎？
• 元素之間是否有足夠的空格？
• 所有動態(tài)頁面元素是否正常運(yùn)行？
• 您是否已設(shè)置所有必需的響應(yīng)斷點？

瀏覽器內(nèi)原型工具

請務(wù)必注意，您實際上不需要任何特殊工具或庫即可構(gòu)建瀏覽器原型。您可以編寫通用的HTML / CSS / JS代碼，并迅速準(zhǔn)備好可以使用的原型。

但是有太多的庫可以為您節(jié)省很多時間。jQuery是一個很好的示例，可以在編寫JavaScript時提供幫助。

您應(yīng)該隨意使用自己喜歡的任何資源。但是，如果您正在尋找新工具，我強(qiáng)烈建議您使用以下選項。所有這些都是完全免費的，而且超級容易添加到原型制作階段。

下面可以看我們派迪科技為"先臨三維”做的網(wǎng)站原型流程

成品展示

入門瀏覽器原型的最佳方法是練習(xí)。無論您有即將進(jìn)行的項目還是需要發(fā)明一個項目，只需開始做某件事，然后努力練習(xí)瀏覽器原型。