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

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

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

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

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

可以在紙上進行手繪原型草圖、也可以將原型圖畫成一張精美的高保真圖稿，只要能夠將所有的需求呈現出來，與團隊成員快速對接進行協作即可，更為重要的是能夠將需求落地，進行測試、驗證、優(yōu)化、確認，最終形成一份完善的網站原型。

簡而言之，原型圖是根據需求所設計出來的可視化圖稿，一個簡單實驗模型，利于快速、便捷地驗證需求的解決方案。

二、原型圖的作用

1. 探索與實驗

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

2. 理解與驗證

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

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

3. 交付與對接

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

三、原型圖的具體應用場景及好處

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

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

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

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

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

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

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

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

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

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

團隊成員之間可圍繞網站原型進行交流，除了產品經理之外，可以讓其他成員更好地理解整個產品的構思及目的，一個好產品需要團隊成員們都在順暢的溝通交流下，才能得到好結果。

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

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

四、如何做好原型設計？

1. 產品思維的應用

大多數人都不會將網站看作是互聯網產品，更多的是將其定位為一個信息公告窗口，這種錯誤的理解是導致不少網站缺乏競爭力的主要原因。

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

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

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

a. 目標訪客是研究重心

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

首先，我們前期的市場調研分析出網站的訪客畫像，針對目標訪客畫像進行有針對性的策劃和構思，除此之外，我們還需要思考訪客的行為，例如有些訪客喜歡瀏覽快速閱讀內容，有的訪客喜歡深入了解及閱讀站內文章，我們可以將這些訪客行為特點進行劃分。

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

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

訪客群體劃分的目的是為了更好的進行內容提煉與內容層級架構劃分，打造逐層遞進的網站架構，滿足不同人群的不同瀏覽習慣，最終達到更好的信息傳達效果。

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

還需要注意一點，并非一個架構就能通用于每個網站，我們始終堅持網站架構服務于網站內容，而并非先定下網站架構再往架構內填充內容，因為這樣的傳統建站思維往往無法建成一個好網站。

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

b. 應用場景決定建站方向

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

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

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

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

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

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

增長超人出品-光羿官網產品展示

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

c. 為迭代提供數據支持

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

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

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

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

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

2. 網站原型圖設計流程指南

這里分解一下原型圖設計的流程，可以作為指南進行參考：

① 填寫需求調研表

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

② 初步構思，大框架繪制初稿

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

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

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

頁面流程圖

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

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

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

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

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

五、總結

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

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

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

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

題圖來自unsplash，基于CC0協議。