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

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

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

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

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

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

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

二、原型圖的作用

1. 探索與實(shí)驗(yàn)

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

2. 理解與驗(yàn)證

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

就如很多時(shí)候你并不知道自己想要什么，可以試著繪制一個(gè)簡(jiǎn)單的原型圖來展示自己的想法。或者在接收到不全面的需求，以及沒有充分理解需求的真實(shí)意圖時(shí)，通過原型圖展示你對(duì)需求挖掘和分析的結(jié)果，可以有效驗(yàn)證該需求的可行性。

3. 交付與對(duì)接

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

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

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

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

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

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

場(chǎng)景二：原型圖可有效的防止視覺效果對(duì)我們?cè)斐筛蓴_。

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

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

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

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

場(chǎng)景三：原型圖能拉近團(tuán)隊(duì)的溝通。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

頁面流程圖

③ 驗(yàn)證需求可行性，輸出低保真原型圖

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

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

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

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

五、總結(jié)

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

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

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

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

題圖來自u(píng)nsplash，基于CC0協(xié)議。