2016-11-4 資深UI設計者
如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里
從最初的一個產(chǎn)品概念到最終的產(chǎn)品上線，中間凝聚著一個IT團隊的心血和付出。產(chǎn)品經(jīng)理作為其中的主導者，在一定程度上影響著產(chǎn)品的成敗和優(yōu)劣。在整個產(chǎn)品研發(fā)流程中，每一環(huán)節(jié)都需要產(chǎn)品經(jīng)理穩(wěn)扎穩(wěn)打的來推動項目前進，那主要的環(huán)節(jié)有哪些呢？我感覺從概要層面上可以將產(chǎn)品經(jīng)理的工作分為三個步驟：需求整理、原型設計、開發(fā)跟蹤。
其中每一個環(huán)節(jié)都有很多的知識技能以及方法論需要我們去掌握，今天主要是探討一下從需求到原型的過程，有哪些地方是值得產(chǎn)品人去學習掌握的。畢竟，在一個好需求的框架之上設計出適用的原型才是打造一款優(yōu)秀產(chǎn)品的基礎條件。
需求與原型之間有堵墻？
很多產(chǎn)品新人，一般都習慣整理好需求之后直接動手畫原型，在畫原型的過程中再不斷的回過頭看需求，然后對原型進行修改或增添內容，偶然還要為某個突然想起的需求點在原型上不斷打補丁。在這樣一種沒有嚴謹思路的情況下，制作出來的原型圖不僅容易遺漏數(shù)據(jù)或功能，更重要的是很容易沒有清晰的系統(tǒng)邏輯性和結構性，這樣的原型無論是對于開發(fā)人員還是最終的用戶都是很令人頭疼的事情。
也許，出現(xiàn)這種情況的原因與產(chǎn)品經(jīng)理所要求的產(chǎn)出物有關：產(chǎn)品需求文檔 和 產(chǎn)品原型圖（沒有專業(yè)的交互設計師來完成的情況），所以造成了產(chǎn)品新人慣性的思維，完成需求文檔之后，馬上就去制作原型圖，這是個誤區(qū)。其實需求和原型之間還隔著一堵墻，如果很生硬的翻墻而過必然會造成一定的損傷，我們只有通過一定的手段把這堵墻一磚一瓦的拆解掉，才能從需求順暢的過渡到原型，設計出的擁有行云流水般體驗的產(chǎn)品。
設計規(guī)劃：需求到原型之間的過渡
拆解需求和原型之間這堵墻的過程，我們可以稱之為設計規(guī)劃，這個過程雖然沒有很必要的產(chǎn)出物，但其實無論是在我們的腦海中還是借助一些工具表達，都是需要我們經(jīng)過深思熟慮、不斷對比取舍，對產(chǎn)品設計形成一個嚴謹?shù)南到y(tǒng)性的規(guī)劃方案，然后最終只是把成熟的方案通過原型圖表現(xiàn)出來而已。
那設計規(guī)劃的過程具體有哪些手段呢，我感覺可以總結為兩個步驟、一個思想。兩個步驟分別是：組織信息結構、設定任務流程；一個思想是說要時刻通過思考用戶場景的手段，來幫助自己更好的融合以上兩個步驟的成果，從而制作出優(yōu)秀的交互原型。
步驟一：組織信息結構
首先說第一個步驟——組織信息結構。所有的產(chǎn)品必然都對應的著實體對象，而每一個實體對象必然又對應著不同分類或屬性。比如谷歌搜索對應的實體對象可以看為是一個個的搜索結果，而搜索結果有網(wǎng)頁、圖片、視頻等各種分類，同時圖片等搜索結果也可以看成是一個實體對象，對應著圖片格式、分辨率等不同的字段屬性。組織信息結構就是需要將這些實體對象以及對應的分類屬性進行系統(tǒng)的組織、劃分、歸類，從而對產(chǎn)品的所有涉及到的元素有個統(tǒng)籌的認知。
以在線購買電影票產(chǎn)品為例，最重要的兩個實體對象就是電影和電影院。其中電影按照上映狀態(tài)可以分為正在熱映和即將上映兩類（因為是購票類應用，所以排除了那些歷史電影），然后每個影片都對應著不同的屬性值，包括：電影名稱、類型、評分、上映時間、導演、演員、劇情、劇照、預告片、用戶評論等等；電影院則可以按照地理位置行政區(qū)進行劃分、或按照影院品牌等分類方式劃分，每個電影院同樣可以包含不同的屬性值：影院名稱、具體地理位置、聯(lián)系電話、評分、用戶評論、距離用戶距離等等；然后影片和電影院一一對應后，就會有場次時間、價格、座位選擇情況等等信息。
我們首先要對所有這些產(chǎn)品中可能要呈現(xiàn)出的信息進行分析組織，然后要進一步從產(chǎn)品全局的角度進行考量，通過信息重要性等因素出發(fā)，進行分類規(guī)劃則可以初步形成整個產(chǎn)品的導航結構。這個步驟的產(chǎn)出物可以是信息E-R圖或者思維導圖，不僅能幫助我們整理思路，同時也可以作為文檔中很好的溝通資料。
步驟二：設定任務流程
然后是第二個步驟——設定任務流程。用戶使用任何產(chǎn)品肯定都是抱著一個目的而來，而為了達到這個目的用戶都需要按照產(chǎn)品設定流程采取一系列的動作來不斷趨近最終想要的結果。比如用戶想到淘寶中買一雙跑步鞋，他首先需要打開淘寶頁面，然后在搜索欄中輸入“跑步鞋”點擊搜索，可能會通過選定品牌、尺碼等條件進一步篩選，接下來就是一個個查看搜索結果，直到找到喜歡的一雙鞋加入購物車，最后就是填寫收貨地址，確認下單后付款。設定任務流程就是需要將不同的靜態(tài)信息內容用一條條線串聯(lián)起來，引導用戶無障礙的來實現(xiàn)他們的最終目的?！盁o障礙”是最基本的要求，強調的是任務可完成，不能設計成一個迷宮一樣，用戶像個無頭蒼蠅一樣不知道下一步該如何做，所以設定一個無障礙的任務流程也是畫原型圖之前非常重要的一個步驟。
同樣以購買電影票整個流程為例。用戶涉及到的任務可能是這樣一個流程：選擇影片->選擇電影院->選擇場次->選擇座位->確定手機號->確認訂單->付款。其中每個任務可能還包含著一些子任務，比如選擇影片時用戶可能希望能查看影片簡介或者查看用戶發(fā)表的影評等等；選擇電影院時可能需要通過行政區(qū)縣進行篩選、查看影院是否提供停車服務等等。
每個任務都有不同的優(yōu)先級，可以從潛在用戶數(shù)、使用頻率、重要程度三個維度進行綜合考慮。通過梳理產(chǎn)品中包含的任務流程以及主要任務和次要任務的區(qū)分，可以明確業(yè)務流程，加上第一個步驟梳理的信息結構，進一步可以得出頁面流程（跳轉邏輯）?？梢钥吹竭@個步驟的產(chǎn)出物就是業(yè)務流程圖以及大致的頁面流程，從某個角度來看也就是通過一個個的用例將需求、信息、頁面串聯(lián)起來，其中用例所區(qū)分的概要層、用戶層也就是對應著主任務、子任務。
一個思想：思考用戶場景
有了以上兩個步驟的準備，我們則可以進入到原型設計階段。我們先看一下截止目前都做了哪些工作：
基于此，制作原型就是將成熟的思考內容，即將這兩個步驟的成果融合在一起，用界面形式表達出來而已：信息結構+任務流程=交互原型。在畫原型的過程中，我們要時刻牢記一個思想——思考用戶場景。
站在用戶的角度去考慮，可能會在什么場景下使用我們的產(chǎn)品，能夠讓我們明確在原型交互上如何更好的支持不同場景。比如買電影票時主要存在兩種場景：一種是先選擇電影然后再選擇電影院；另一種可能是先確定電影院再挑選該影院上映的影片。那在產(chǎn)品的信息結構中就很有必要將「影片」「電影院」這兩個實體對象放置于應用中（無論是appbar tab，還是bottom tab）平級對立的兩個位置。
站在用戶的角度去考慮，在完成任務的流程過程中哪些信息是非常重要的，能夠讓我們明確信息在展示上的重要程度來進行組織分類。比如在選擇電影院時，電影名稱、地址、以及上映的影片和場次對購票用戶來說是比較重要的信息，而該電影院評價、聯(lián)系電話等其它屬性信息則是相對無關緊要的信息，那么則可以把這些信息歸集到深一層頁面進行展示。
站在用戶的角度去考慮，我最常用的功能可能是哪些？能夠讓我們明確哪些功能可能需要提供快捷入口。比如電商類的應用，在瀏覽商品的時候隨時都有可能需要快速到購物車頁面，那么提供一個購物車的快速通道是再好不過的了。
時刻思考用戶場景，能上讓制作的原型更具人性化，人性化的另一層含義就是更好用。當然，站在用戶場景下能幫助我們考慮的問題不止以上提到的三點，還可以有很多細節(jié)的層面，主要的是要養(yǎng)成這樣一種習慣，但是要注意不能鉆入到自己主觀的用戶想法中不能自拔，否則很容易設計出“只有你以為很好用的交互功能”。
總結
本篇文章主要探討了一下在需求和原型之間，我們到底有哪些工作需要做，而不是上來就一頭扎到原型圖中。當我們在設計規(guī)范階段思考的足夠多足夠詳細，畫原型就成很了很輕松很的一項內容。
