如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

從最初的一個(gè)產(chǎn)品概念到最終的產(chǎn)品上線，中間凝聚著一個(gè)IT團(tuán)隊(duì)的心血和付出。產(chǎn)品經(jīng)理作為其中的主導(dǎo)者，在一定程度上影響著產(chǎn)品的成敗和優(yōu)劣。在整個(gè)產(chǎn)品研發(fā)流程中，每一環(huán)節(jié)都需要產(chǎn)品經(jīng)理穩(wěn)扎穩(wěn)打的來推動(dòng)項(xiàng)目前進(jìn)，那主要的環(huán)節(jié)有哪些呢？我感覺從概要層面上可以將產(chǎn)品經(jīng)理的工作分為三個(gè)步驟：需求整理、原型設(shè)計(jì)、開發(fā)跟蹤。

其中每一個(gè)環(huán)節(jié)都有很多的知識(shí)技能以及方法論需要我們?nèi)フ莆?，今天主要是探討一下從需求到原型的過程，有哪些地方是值得產(chǎn)品人去學(xué)習(xí)掌握的。畢竟，在一個(gè)好需求的框架之上設(shè)計(jì)出適用的原型才是打造一款優(yōu)秀產(chǎn)品的基礎(chǔ)條件。

需求與原型之間有堵墻？

很多產(chǎn)品新人，一般都習(xí)慣整理好需求之后直接動(dòng)手畫原型，在畫原型的過程中再不斷的回過頭看需求，然后對(duì)原型進(jìn)行修改或增添內(nèi)容，偶然還要為某個(gè)突然想起的需求點(diǎn)在原型上不斷打補(bǔ)丁。在這樣一種沒有嚴(yán)謹(jǐn)思路的情況下，制作出來的原型圖不僅容易遺漏數(shù)據(jù)或功能，更重要的是很容易沒有清晰的系統(tǒng)邏輯性和結(jié)構(gòu)性，這樣的原型無論是對(duì)于開發(fā)人員還是最終的用戶都是很令人頭疼的事情。

也許，出現(xiàn)這種情況的原因與產(chǎn)品經(jīng)理所要求的產(chǎn)出物有關(guān)：產(chǎn)品需求文檔 和 產(chǎn)品原型圖（沒有專業(yè)的交互設(shè)計(jì)師來完成的情況），所以造成了產(chǎn)品新人慣性的思維，完成需求文檔之后，馬上就去制作原型圖，這是個(gè)誤區(qū)。其實(shí)需求和原型之間還隔著一堵墻，如果很生硬的翻墻而過必然會(huì)造成一定的損傷，我們只有通過一定的手段把這堵墻一磚一瓦的拆解掉，才能從需求順暢的過渡到原型，設(shè)計(jì)出的擁有行云流水般體驗(yàn)的產(chǎn)品。

設(shè)計(jì)規(guī)劃：需求到原型之間的過渡

拆解需求和原型之間這堵墻的過程，我們可以稱之為設(shè)計(jì)規(guī)劃，這個(gè)過程雖然沒有很必要的產(chǎn)出物，但其實(shí)無論是在我們的腦海中還是借助一些工具表達(dá)，都是需要我們經(jīng)過深思熟慮、不斷對(duì)比取舍，對(duì)產(chǎn)品設(shè)計(jì)形成一個(gè)嚴(yán)謹(jǐn)?shù)南到y(tǒng)性的規(guī)劃方案，然后最終只是把成熟的方案通過原型圖表現(xiàn)出來而已。

那設(shè)計(jì)規(guī)劃的過程具體有哪些手段呢，我感覺可以總結(jié)為兩個(gè)步驟、一個(gè)思想。兩個(gè)步驟分別是：組織信息結(jié)構(gòu)、設(shè)定任務(wù)流程；一個(gè)思想是說要時(shí)刻通過思考用戶場(chǎng)景的手段，來幫助自己更好的融合以上兩個(gè)步驟的成果，從而制作出優(yōu)秀的交互原型。

步驟一：組織信息結(jié)構(gòu)

首先說第一個(gè)步驟——組織信息結(jié)構(gòu)。所有的產(chǎn)品必然都對(duì)應(yīng)的著實(shí)體對(duì)象，而每一個(gè)實(shí)體對(duì)象必然又對(duì)應(yīng)著不同分類或?qū)傩浴１热绻雀杷阉鲗?duì)應(yīng)的實(shí)體對(duì)象可以看為是一個(gè)個(gè)的搜索結(jié)果，而搜索結(jié)果有網(wǎng)頁(yè)、圖片、視頻等各種分類，同時(shí)圖片等搜索結(jié)果也可以看成是一個(gè)實(shí)體對(duì)象，對(duì)應(yīng)著圖片格式、分辨率等不同的字段屬性。組織信息結(jié)構(gòu)就是需要將這些實(shí)體對(duì)象以及對(duì)應(yīng)的分類屬性進(jìn)行系統(tǒng)的組織、劃分、歸類，從而對(duì)產(chǎn)品的所有涉及到的元素有個(gè)統(tǒng)籌的認(rèn)知。

以在線購(gòu)買電影票產(chǎn)品為例，最重要的兩個(gè)實(shí)體對(duì)象就是電影和電影院。其中電影按照上映狀態(tài)可以分為正在熱映和即將上映兩類（因?yàn)槭琴?gòu)票類應(yīng)用，所以排除了那些歷史電影），然后每個(gè)影片都對(duì)應(yīng)著不同的屬性值，包括：電影名稱、類型、評(píng)分、上映時(shí)間、導(dǎo)演、演員、劇情、劇照、預(yù)告片、用戶評(píng)論等等；電影院則可以按照地理位置行政區(qū)進(jìn)行劃分、或按照影院品牌等分類方式劃分，每個(gè)電影院同樣可以包含不同的屬性值：影院名稱、具體地理位置、聯(lián)系電話、評(píng)分、用戶評(píng)論、距離用戶距離等等；然后影片和電影院一一對(duì)應(yīng)后，就會(huì)有場(chǎng)次時(shí)間、價(jià)格、座位選擇情況等等信息。

我們首先要對(duì)所有這些產(chǎn)品中可能要呈現(xiàn)出的信息進(jìn)行分析組織，然后要進(jìn)一步從產(chǎn)品全局的角度進(jìn)行考量，通過信息重要性等因素出發(fā)，進(jìn)行分類規(guī)劃則可以初步形成整個(gè)產(chǎn)品的導(dǎo)航結(jié)構(gòu)。這個(gè)步驟的產(chǎn)出物可以是信息E-R圖或者思維導(dǎo)圖，不僅能幫助我們整理思路，同時(shí)也可以作為文檔中很好的溝通資料。

步驟二：設(shè)定任務(wù)流程

然后是第二個(gè)步驟——設(shè)定任務(wù)流程。用戶使用任何產(chǎn)品肯定都是抱著一個(gè)目的而來，而為了達(dá)到這個(gè)目的用戶都需要按照產(chǎn)品設(shè)定流程采取一系列的動(dòng)作來不斷趨近最終想要的結(jié)果。比如用戶想到淘寶中買一雙跑步鞋，他首先需要打開淘寶頁(yè)面，然后在搜索欄中輸入“跑步鞋”點(diǎn)擊搜索，可能會(huì)通過選定品牌、尺碼等條件進(jìn)一步篩選，接下來就是一個(gè)個(gè)查看搜索結(jié)果，直到找到喜歡的一雙鞋加入購(gòu)物車，最后就是填寫收貨地址，確認(rèn)下單后付款。設(shè)定任務(wù)流程就是需要將不同的靜態(tài)信息內(nèi)容用一條條線串聯(lián)起來，引導(dǎo)用戶無障礙的來實(shí)現(xiàn)他們的最終目的。“無障礙”是最基本的要求，強(qiáng)調(diào)的是任務(wù)可完成，不能設(shè)計(jì)成一個(gè)迷宮一樣，用戶像個(gè)無頭蒼蠅一樣不知道下一步該如何做，所以設(shè)定一個(gè)無障礙的任務(wù)流程也是畫原型圖之前非常重要的一個(gè)步驟。

同樣以購(gòu)買電影票整個(gè)流程為例。用戶涉及到的任務(wù)可能是這樣一個(gè)流程：選擇影片->選擇電影院->選擇場(chǎng)次->選擇座位->確定手機(jī)號(hào)->確認(rèn)訂單->付款。其中每個(gè)任務(wù)可能還包含著一些子任務(wù)，比如選擇影片時(shí)用戶可能希望能查看影片簡(jiǎn)介或者查看用戶發(fā)表的影評(píng)等等；選擇電影院時(shí)可能需要通過行政區(qū)縣進(jìn)行篩選、查看影院是否提供停車服務(wù)等等。

每個(gè)任務(wù)都有不同的優(yōu)先級(jí)，可以從潛在用戶數(shù)、使用頻率、重要程度三個(gè)維度進(jìn)行綜合考慮。通過梳理產(chǎn)品中包含的任務(wù)流程以及主要任務(wù)和次要任務(wù)的區(qū)分，可以明確業(yè)務(wù)流程，加上第一個(gè)步驟梳理的信息結(jié)構(gòu)，進(jìn)一步可以得出頁(yè)面流程（跳轉(zhuǎn)邏輯）?？梢钥吹竭@個(gè)步驟的產(chǎn)出物就是業(yè)務(wù)流程圖以及大致的頁(yè)面流程，從某個(gè)角度來看也就是通過一個(gè)個(gè)的用例將需求、信息、頁(yè)面串聯(lián)起來，其中用例所區(qū)分的概要層、用戶層也就是對(duì)應(yīng)著主任務(wù)、子任務(wù)。

一個(gè)思想：思考用戶場(chǎng)景

有了以上兩個(gè)步驟的準(zhǔn)備，我們則可以進(jìn)入到原型設(shè)計(jì)階段。我們先看一下截止目前都做了哪些工作：

• 組織信息結(jié)構(gòu)——讓我們對(duì)產(chǎn)品中包含的元素有了清楚的認(rèn)識(shí)并且形成了嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)，在此基礎(chǔ)上進(jìn)一步可以形成初步的導(dǎo)航體系；
• 設(shè)定任務(wù)流程——讓我們從每一條任務(wù)線出發(fā)，將用戶行為按照次序有邏輯的串聯(lián)了起；

基于此，制作原型就是將成熟的思考內(nèi)容，即將這兩個(gè)步驟的成果融合在一起，用界面形式表達(dá)出來而已：信息結(jié)構(gòu)+任務(wù)流程=交互原型。在畫原型的過程中，我們要時(shí)刻牢記一個(gè)思想——思考用戶場(chǎng)景。

站在用戶的角度去考慮，可能會(huì)在什么場(chǎng)景下使用我們的產(chǎn)品，能夠讓我們明確在原型交互上如何更好的支持不同場(chǎng)景。比如買電影票時(shí)主要存在兩種場(chǎng)景：一種是先選擇電影然后再選擇電影院；另一種可能是先確定電影院再挑選該影院上映的影片。那在產(chǎn)品的信息結(jié)構(gòu)中就很有必要將「影片」「電影院」這兩個(gè)實(shí)體對(duì)象放置于應(yīng)用中（無論是appbar tab，還是bottom tab）平級(jí)對(duì)立的兩個(gè)位置。

站在用戶的角度去考慮，在完成任務(wù)的流程過程中哪些信息是非常重要的，能夠讓我們明確信息在展示上的重要程度來進(jìn)行組織分類。比如在選擇電影院時(shí)，電影名稱、地址、以及上映的影片和場(chǎng)次對(duì)購(gòu)票用戶來說是比較重要的信息，而該電影院評(píng)價(jià)、聯(lián)系電話等其它屬性信息則是相對(duì)無關(guān)緊要的信息，那么則可以把這些信息歸集到深一層頁(yè)面進(jìn)行展示。

站在用戶的角度去考慮，我最常用的功能可能是哪些？能夠讓我們明確哪些功能可能需要提供快捷入口。比如電商類的應(yīng)用，在瀏覽商品的時(shí)候隨時(shí)都有可能需要快速到購(gòu)物車頁(yè)面，那么提供一個(gè)購(gòu)物車的快速通道是再好不過的了。

時(shí)刻思考用戶場(chǎng)景，能上讓制作的原型更具人性化，人性化的另一層含義就是更好用。當(dāng)然，站在用戶場(chǎng)景下能幫助我們考慮的問題不止以上提到的三點(diǎn)，還可以有很多細(xì)節(jié)的層面，主要的是要養(yǎng)成這樣一種習(xí)慣，但是要注意不能鉆入到自己主觀的用戶想法中不能自拔，否則很容易設(shè)計(jì)出“只有你以為很好用的交互功能”。

總結(jié)

本篇文章主要探討了一下在需求和原型之間，我們到底有哪些工作需要做，而不是上來就一頭扎到原型圖中。當(dāng)我們?cè)谠O(shè)計(jì)規(guī)范階段思考的足夠多足夠詳細(xì)，畫原型就成很了很輕松很的一項(xiàng)內(nèi)容。