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