需求與原型之間有堵墻

2016-11-4    資深UI設(shè)計(jì)者

如果您想訂閱本博客內(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)他們的最終目的?!盁o障礙”是最基本的要求,強(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)容。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔