編輯導(dǎo)語：當(dāng)一個企業(yè)想開發(fā)一款產(chǎn)品時，原型圖可以幫助企業(yè)提前看到，產(chǎn)品的界面樣式，每個按鈕的功能和效果，也可以看到產(chǎn)品的基本框架和運作機制，獲得比較真實的感受。那么原型圖對企業(yè)的核心意義是什么？又如何做好原型圖呢？本文圍繞原型圖展開講述，推薦對此感興趣的伙伴閱讀。

在通過市場調(diào)研、數(shù)據(jù)分析，我們深入地了解行業(yè)情況、明確了建站需求，經(jīng)過項目討論會確立網(wǎng)站初步的整體構(gòu)思以及策劃，就可以著手開始【原型圖】的設(shè)計。

有接觸過UI設(shè)計的應(yīng)該都了解過原型圖，國內(nèi)廣泛使用原型圖也是因APP開發(fā)浪潮而起，簡單來講，原型圖就是一份產(chǎn)品原型圖稿，即能夠清晰呈現(xiàn)產(chǎn)品框架的圖稿，可以是草圖，也可以是高保真的圖稿。

一、原型圖核心功能：需求可視化

網(wǎng)站原型圖設(shè)計是【需求可視化】的一個過程，是讓網(wǎng)站的初步構(gòu)思有一個可視化的展示。原型圖是網(wǎng)站成型之前的一個簡單框架，網(wǎng)頁內(nèi)的重要元素和板塊功能將會通過繪制原型圖，進(jìn)行簡單的布局和排版。

可以在紙上進(jìn)行手繪原型草圖、也可以將原型圖畫成一張精美的高保真圖稿，只要能夠?qū)⑺械男枨蟪尸F(xiàn)出來，與團隊成員快速對接進(jìn)行協(xié)作即可，更為重要的是能夠?qū)⑿枨舐涞?，進(jìn)行測試、驗證、優(yōu)化、確認(rèn)，最終形成一份完善的網(wǎng)站原型。

簡而言之，原型圖是根據(jù)需求所設(shè)計出來的可視化圖稿，一個簡單實驗?zāi)Ｐ?，利于快速、便捷地驗證需求的解決方案。

二、原型圖的作用

1. 探索與實驗

原型的本質(zhì)是一種測試工具，根據(jù)自己的需求探索網(wǎng)站功能或方向，從而實驗一些想法是它最為主要的目的。我們不妨先搭建一個簡單的網(wǎng)站原型開始，只將必備的基本信息和功能體現(xiàn)出來，然后開始測試，甚至可能在紙上繪制草圖即可。

2. 理解與驗證

當(dāng)我們接收到一個個分散的需求點時，我們需要做的是將分散的需求點具象成可視化的閉環(huán)，這時就可以通過繪制原型圖來展示網(wǎng)站需求的視覺效果，直觀的看到網(wǎng)站成品交付時的理想狀態(tài)，因此越貼近理想狀態(tài)的原型圖，也就越合格。

就如很多時候你并不知道自己想要什么，可以試著繪制一個簡單的原型圖來展示自己的想法?；蛘咴诮邮盏讲蝗娴男枨?，以及沒有充分理解需求的真實意圖時，通過原型圖展示你對需求挖掘和分析的結(jié)果，可以有效驗證該需求的可行性。

3. 交付與對接

原型圖是一個可以起到很好展示作用的有力工具，更是產(chǎn)品經(jīng)理向執(zhí)行團隊進(jìn)行闡述和說明需求的高效工具，可以借助原型圖對網(wǎng)站布局和功能等進(jìn)行一一說明，給開發(fā)團隊提供一個清晰的概念，清楚各自的職責(zé)是要做什么，是怎樣的一個邏輯，明確目標(biāo)才能夠根據(jù)各自的職責(zé)進(jìn)行網(wǎng)站開發(fā)。

三、原型圖的具體應(yīng)用場景及好處

場景一：原型圖設(shè)計是需求落地的第一步。

通常情況下，網(wǎng)站開發(fā)前的所有策劃和規(guī)劃大多是口頭傳達(dá)、文檔呈現(xiàn)，較為碎片化，策劃思路只停留在ppt或文檔上，存在著很多不確定因素。

我們需要真正落地，才能明確所有的規(guī)劃和策劃點，進(jìn)行測試、驗證，原型圖設(shè)計師需求落地的第一步，也是非常關(guān)鍵的一步，這也是考驗一位產(chǎn)品經(jīng)理項目落地能力的關(guān)鍵點。

優(yōu)秀的產(chǎn)品經(jīng)理能夠以原型圖的方式，把采集整理的需求概述可視化，形象地繪制出來，以便項目團隊更直觀的理解，以便快速發(fā)現(xiàn)問題后進(jìn)行溝通調(diào)整。

場景二：原型圖可有效的防止視覺效果對我們造成干擾。

一直以來，我們會把網(wǎng)站的“好用”與“好看”分為兩個階段來進(jìn)行，“好用”即通過原型圖設(shè)計完成，將網(wǎng)站的實用性和視覺的美觀性剝離，可有效的防止視覺效果對我們造成干擾，從而讓我們可以專注于做出一個實用性較高的網(wǎng)站架構(gòu)。

許多企業(yè)并沒有將網(wǎng)站原型圖設(shè)計納入建站流程中，這是因為他們僅僅將網(wǎng)站/網(wǎng)頁以平面設(shè)計的角度，去評判視覺美觀性，并不會深入考慮網(wǎng)站架構(gòu)是否合理、邏輯是否通暢、訪客會有怎樣的體驗感，這是巨大的錯誤。

畢竟企業(yè)網(wǎng)站是單向信息傳達(dá)的工具，是沒辦法與訪客做過多互動的，大多數(shù)情況下，信息都是在等待訪客去點擊查看，屬于單向的操作去完成一次信息的溝通和交流，如果訪客在操作的過程中，感到不適，都有可能是造成重大影響。

網(wǎng)站的大多數(shù)瀏覽閱讀操作，都需要鼠標(biāo)點擊交互來完成，就像手機需要手指點擊進(jìn)行交互來完成的，網(wǎng)站頁面不是一個靜態(tài)的單頁，因此我們需要用一個完全沒有美感的線稿來思考網(wǎng)站的交互邏輯，這樣在沒有任何的視覺干擾，就不需要擔(dān)心網(wǎng)站實用性會出問題。

場景三：原型圖能拉近團隊的溝通。

團隊成員之間可圍繞網(wǎng)站原型進(jìn)行交流，除了產(chǎn)品經(jīng)理之外，可以讓其他成員更好地理解整個產(chǎn)品的構(gòu)思及目的，一個好產(chǎn)品需要團隊成員們都在順暢的溝通交流下，才能得到好結(jié)果。

通過對產(chǎn)品原型的探討，可以引導(dǎo)我們思考得更深入，思考的越深，方向也會越準(zhǔn)確，原型雖然會占用一些時間，但是可以確保整個網(wǎng)站建設(shè)過程中，整個團隊的方向不會跑偏。

確定了網(wǎng)站原型，我們可以非常純粹且專注的去思考，如何去把網(wǎng)站的視覺做好，不會受到架構(gòu)的干擾。保證這兩者的完全獨立，才能保證網(wǎng)站的出品是優(yōu)秀的。

四、如何做好原型設(shè)計？

1. 產(chǎn)品思維的應(yīng)用

大多數(shù)人都不會將網(wǎng)站看作是互聯(lián)網(wǎng)產(chǎn)品，更多的是將其定位為一個信息公告窗口，這種錯誤的理解是導(dǎo)致不少網(wǎng)站缺乏競爭力的主要原因。

我們在建站時需要始終要帶著「產(chǎn)品思維」，這一思維將會貫穿于整個網(wǎng)站建設(shè)的流程，網(wǎng)站作為產(chǎn)品最終導(dǎo)向是服務(wù)，服務(wù)的受眾是訪客群體，不同的訪客群體又處于不同的場景中，充分挖掘訪客來到網(wǎng)站的真實需求，從而針對網(wǎng)站體驗感等不足進(jìn)行優(yōu)化。

在這當(dāng)中，我們不僅需要發(fā)掘網(wǎng)站所服務(wù)對象的真實需求，還需要針對于制造及運營“產(chǎn)品”有一系列的解決方案，將某些產(chǎn)品或服務(wù)進(jìn)行產(chǎn)品化。

因此，做好原型設(shè)計離不開產(chǎn)品思維，產(chǎn)品思維主要包括了訪客、場景、迭代這三個方向，從這三個方向可以延伸出訪客畫像、行為特點、需求場景、數(shù)據(jù)埋點等內(nèi)容。

a. 目標(biāo)訪客是研究重心

訪客作為我們網(wǎng)站的源頭，我們檢驗網(wǎng)站是否優(yōu)質(zhì)，決定權(quán)也在訪客手里，對訪客要有充足的認(rèn)知，我們才有可能做出優(yōu)質(zhì)且成功的網(wǎng)站。

首先，我們前期的市場調(diào)研分析出網(wǎng)站的訪客畫像，針對目標(biāo)訪客畫像進(jìn)行有針對性的策劃和構(gòu)思，除此之外，我們還需要思考訪客的行為，例如有些訪客喜歡瀏覽快速閱讀內(nèi)容，有的訪客喜歡深入了解及閱讀站內(nèi)文章，我們可以將這些訪客行為特點進(jìn)行劃分。

常見的企業(yè)網(wǎng)站，我們將分訪客行為特點進(jìn)行劃分：

• 專業(yè)探索者：業(yè)內(nèi)人士，深度閱讀型群體
• 專業(yè)瀏覽者：業(yè)內(nèi)人士，快速跳讀型群體
• 非專業(yè)瀏覽者：外行人，包含應(yīng)聘者、投資人等

訪客群體劃分的目的是為了更好的進(jìn)行內(nèi)容提煉與內(nèi)容層級架構(gòu)劃分，打造逐層遞進(jìn)的網(wǎng)站架構(gòu)，滿足不同人群的不同瀏覽習(xí)慣，最終達(dá)到更好的信息傳達(dá)效果。

網(wǎng)站瀏覽者習(xí)慣快速查看信息，通過我們可以通過「信息整合」，可以在同一板塊進(jìn)行內(nèi)容切換，避免頁面板式信息重復(fù)和繁多；并且探索者可以通過「查看詳情」引導(dǎo)深入了解，這種常見方式可以同時滿足這兩類人群的瀏覽習(xí)慣和需求。

還需要注意一點，并非一個架構(gòu)就能通用于每個網(wǎng)站，我們始終堅持網(wǎng)站架構(gòu)服務(wù)于網(wǎng)站內(nèi)容，而并非先定下網(wǎng)站架構(gòu)再往架構(gòu)內(nèi)填充內(nèi)容，因為這樣的傳統(tǒng)建站思維往往無法建成一個好網(wǎng)站。

例如，增長超人在為小米的生態(tài)鏈公司云米，進(jìn)行國際官網(wǎng)規(guī)劃時，他們給到我們項目團隊的資料文件就有1000 ，經(jīng)過精準(zhǔn)提煉了產(chǎn)品賣點之后，才設(shè)計出了30 整體網(wǎng)站的原型策劃稿，而非先設(shè)計框架再進(jìn)行產(chǎn)品賣點填充：

b. 應(yīng)用場景決定建站方向

決定好網(wǎng)站建設(shè)的方向比怎么做更為關(guān)鍵，我們著手準(zhǔn)備建站肯定是先決定它的應(yīng)用場景，先有應(yīng)用場景才能規(guī)劃適用于相應(yīng)場景的方案。

網(wǎng)站作為互聯(lián)網(wǎng)產(chǎn)品，同樣依賴于場景，我們常見的思路是從訪客的角度以及業(yè)務(wù)出發(fā)，判斷每個應(yīng)用場景中所存在的需求。

網(wǎng)站策劃的過程是先發(fā)散后收斂的過程，在動手設(shè)計原型、輸出文檔前，我們要做大量的思考、調(diào)研，基礎(chǔ)邏輯是每個訪客群體面臨的實際情況是怎樣的，這也是回歸場景。

我們除了需要回歸場景，同樣應(yīng)該從網(wǎng)站角度進(jìn)行思考，不僅要考慮功能、流程和瀏覽體驗，還應(yīng)該重點考慮，怎么讓訪客對我們呈現(xiàn)出來的網(wǎng)站內(nèi)容，產(chǎn)生深刻的認(rèn)知和理解，信息層的設(shè)計也應(yīng)該為應(yīng)用場景服務(wù)。

舉個例子，一家做智能變色玻璃的企業(yè)，對于大眾來說，這不是一項常見的技術(shù)和產(chǎn)品，如果是普通圖片和文案展示，必然會缺乏想象，無法直觀地傳達(dá)產(chǎn)品價值。

所以，我們可以通過一些巧妙的交互，與訪客進(jìn)行互動，讓訪客產(chǎn)生良好的參與感和體驗感。

增長超人出品-光羿官網(wǎng)產(chǎn)品展示

我們可以設(shè)計訪客與網(wǎng)站發(fā)生交互的場景，更好地訪客理解和感知網(wǎng)站的價值，從而讓網(wǎng)站站得住腳，我們的網(wǎng)站功能也會因此形成差異化，設(shè)計出有特色的網(wǎng)站結(jié)構(gòu)和功能，提升網(wǎng)站的競爭力。

c. 為迭代提供數(shù)據(jù)支持

優(yōu)質(zhì)的網(wǎng)站難以一次成型是現(xiàn)實問題，我們見到的好網(wǎng)站都是經(jīng)過多次迭代和運營而成，網(wǎng)站建設(shè)從0到1容易，用個簡單的模板也能完成，但是從1到N才是最難的，而我們在最初的0-1的環(huán)節(jié)上，盡可能做到完善，才能減輕1-N的難度。

產(chǎn)品迭代是產(chǎn)品思維中非常重要的方向，大家都知道，網(wǎng)站建成之后是需要進(jìn)行維護、分析及優(yōu)化，從而進(jìn)行更新迭代，持續(xù)保持網(wǎng)站的競爭力，因此，我們在建站過程中，要提前為后續(xù)的迭代工作做好準(zhǔn)備，打好牢固的基礎(chǔ)。

這就類似于，我們常說的“不能讓孩子輸在起跑線上”，而“起跑線”分為三種，第一種是基礎(chǔ)知識，第二種是環(huán)境，第三種則是思維。

網(wǎng)站的設(shè)計、前端就相當(dāng)于「基礎(chǔ)知識」，最顯而易見；網(wǎng)站的「環(huán)境」則是域名、服務(wù)器等配套設(shè)備這種基本環(huán)境；最后「思維」就是為長期發(fā)展所部署的數(shù)據(jù)埋點、用戶反饋、統(tǒng)計端口等，為將來做準(zhǔn)備的課題。

數(shù)據(jù)是迭代的基礎(chǔ)，原型圖設(shè)計之時，我們就需要確定好數(shù)據(jù)采集的規(guī)劃，實現(xiàn)后期數(shù)據(jù)埋點，配套的數(shù)據(jù)分析工具、統(tǒng)計工具，為迭代提供最可靠最科學(xué)的支持。數(shù)據(jù)驅(qū)動下的網(wǎng)站迭代，是維持網(wǎng)站競爭力的核心，是數(shù)字時代下不可忽視的關(guān)鍵點，切勿輕視。

2. 網(wǎng)站原型圖設(shè)計流程指南

這里分解一下原型圖設(shè)計的流程，可以作為指南進(jìn)行參考：

① 填寫需求調(diào)研表

首先，在市場調(diào)研中，我們重點需要對項目進(jìn)行信息采集和需求調(diào)研，是原型圖設(shè)計可以同步進(jìn)行的工作，這里我們分別采用兩張表單進(jìn)行關(guān)鍵信息采集，內(nèi)容主要是項目需求、設(shè)計風(fēng)格、參考資料、受眾人群屬性等等。

② 初步構(gòu)思，大框架繪制初稿

根據(jù)上述這些信息采集及研究之后，基本就有了初步的想法，將這個想法可視化出來，也就是大框架草繪原型圖，可以是手繪也可以是軟件繪制。

草繪原型圖：從字面上理解就能知道是相對“簡陋”的一種繪制形態(tài)，僅展示大概的網(wǎng)站頁面框架、核心的網(wǎng)頁布局以及關(guān)鍵內(nèi)容。這種形態(tài)更多是在團隊內(nèi)部協(xié)作時會采用的，快速繪制調(diào)整，有利于盡快得到反饋，推進(jìn)網(wǎng)站建設(shè)的進(jìn)程。

如果頁面較為復(fù)雜時，我們還需要輸出「頁面流程圖」，進(jìn)行頁面邏輯和需求邏輯的說明，把頁面的功能、需求、目的、行為說明清楚，既能方便設(shè)計師理解，又能理清框架，驗證功能可行性。

頁面流程圖

③ 驗證需求可行性，輸出低保真原型圖

根據(jù)原型圖的討論、頁面流程探討，進(jìn)一步優(yōu)化網(wǎng)站整體框架和邏輯，輸出完善的低保真原型圖，進(jìn)行90%的確認(rèn)。

低保真原型：這類繪制形態(tài)和草繪原型圖相比要更完整，是我們網(wǎng)站原型圖設(shè)計階段常會采用的一種形態(tài)，低保真沒有視覺設(shè)計，大多數(shù)使用灰色色階和占位符來指示內(nèi)容，多為黑白灰的視覺風(fēng)格?？梢暂^為完整地展示網(wǎng)站頁面框架、內(nèi)容布局等，更有助于建站過程中的視覺、交互設(shè)計協(xié)作。

④ 最終輸出高保真，及需求文檔，對接設(shè)計

最后，如果功能較為復(fù)雜，或者希望更為直觀表達(dá)，我們可以輸出更加完善的高保真原型圖，包含一些靜態(tài)DEMO，作為參考提供給設(shè)計師和技術(shù)人員，同時要輸出相應(yīng)的需求文檔，進(jìn)行100%確認(rèn)。

五、總結(jié)

在原型圖設(shè)計這個節(jié)點上，“畫”不是最重要的，而是先想清楚畫的目的是什么、為誰畫才能做到有效輸出，匹配網(wǎng)站建設(shè)場景的成果。

不管是低保真還是高保真，最核心的都是需求和邏輯，需求正確、邏輯正確都能為后續(xù)工作提供有力支持。

有很多建站公司會為了趕時間、節(jié)省成本，而砍掉原型圖設(shè)計這一環(huán)節(jié)，沒用采用原型圖工具來進(jìn)行全站的規(guī)劃，這就容易出現(xiàn)實用性問題，并且造成整體網(wǎng)站邏輯不清晰，訪客體驗差等情況，這也是我們團隊為什么始終堅持原型圖設(shè)計這一環(huán)節(jié)，網(wǎng)站作為產(chǎn)品，服務(wù)于用戶，以用戶為本才是產(chǎn)品的本質(zhì)。

本文由@增長超人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自unsplash，基于CC0協(xié)議。