上一篇《做交互，別急著畫原型》中說到畫原型前先要理解功能，并且從用戶角度思考如何繪制適合用戶的流程圖。而今天將和大家講講，畫原型圖前比較重要的兩個(gè)因素：“流程圖”與“信息結(jié)構(gòu)”。

首先，當(dāng)拿到一個(gè)功能需求時(shí)，需要大致知道這個(gè)功能是干什么的：哪些角色有需求要通過這個(gè)功能來完成什么目標(biāo)（具體的用戶需求不細(xì)說）。如果這個(gè)整體方向都不能確定，那這個(gè)需求要么是不完整的要么是不成立的。在這種不確定需求的情況下畫原型，過程肯定是磕磕絆絆甚至是無用功的。

（所以，如果設(shè)計(jì)師接到的是這種不確定的需求時(shí)，要么說明原因選擇不做，要么在有足夠多時(shí)間的情況下自己去分析需求。）

我們先假設(shè)有這么一個(gè)功能：大致是給團(tuán)隊(duì)的成員協(xié)調(diào)配合完成任務(wù)的那么一個(gè)功能，其中任務(wù)需要被發(fā)起，被完成和被批閱。而且它有可能存在以下兩種情況：

情況1：

只涉及到兩種角色，“角色A”既是任務(wù)的發(fā)起者也是任務(wù)的批閱者，“角色B”是任務(wù)完成人員。屬于來往關(guān)系。

情況2：

涉及到三種角色，“角色A”只是任務(wù)發(fā)起者，由“角色B”來完成，進(jìn)行批閱需要通過“角色C”，屬于上級(jí)關(guān)系。

所以，在設(shè)計(jì)開始前必須確定該功能是情況1呢還是情況2呢甚至還有情況N，不同的情況會(huì)導(dǎo)致我們的流程圖的方向有所不一樣，最終導(dǎo)致原型圖的不一樣，因此整體方向很重要。

這里我們不糾結(jié)哪個(gè)情況是對的，我們選擇情況2，并且進(jìn)行簡單細(xì)化：

• 角色A：簡單地發(fā)起任務(wù)
• 角色B：可以拒絕任務(wù)，也可以接受任務(wù)
• 角色C：批閱任務(wù)是否完成

整理而得的流程圖如下：

通過這個(gè)流程圖，就可以比較清晰的知道各個(gè)角色之間的關(guān)系，然后對每個(gè)角色涉及到的操作進(jìn)行“加工”：

• 用戶A布置任務(wù)可能包括：任務(wù)標(biāo)題、任務(wù)內(nèi)容、任務(wù)時(shí)間等等
• 用戶B的任務(wù)涵蓋任務(wù)標(biāo)題、任務(wù)內(nèi)容和任務(wù)時(shí)間等等，并且對任務(wù)有一定的操作
• 用戶C等到任務(wù)完成后批閱任務(wù)是否通過，如果不通過原因是什么
• 以及等等（冥想中~）

更加可視化可以整理出信息結(jié)構(gòu)（以用戶A為例）：

通過這么一簡單整理，每個(gè)流程步驟可能涉及的頁面或者是內(nèi)容就都有了。

那為什么要搞出個(gè)這么一個(gè)所謂“腦圖”的東西呢？

我們在做原型時(shí)，肯定是通過流程來確定頁面，但是流程上并沒有說角色發(fā)起任務(wù)需要填寫哪些信息，需要包含哪些內(nèi)容，就算我們腦子里有這些信息，但是我們也有可能會(huì)遺漏，所以在做原型前更好地是思考用戶操作會(huì)涉及哪幾個(gè)頁面，頁面里有哪些信息，哪些操作是如何跳轉(zhuǎn)的，而信息結(jié)構(gòu)圖能很好的解決這一點(diǎn)：頁面結(jié)構(gòu)，頁面內(nèi)容，頁面關(guān)系和頁面狀態(tài)等。

剩下的就看把流程和內(nèi)容應(yīng)用到原型上的功力了。做原型時(shí)更多的從用戶角度思考，并且參考一些交互原則，同時(shí)平時(shí)可以多觀察觀察其他app，不斷積累。不過也別想一次性就把所有細(xì)節(jié)都考慮到，大體方向確定了，后面的細(xì)節(jié)可以慢慢補(bǔ)充，慢慢完善。

總結(jié)

拿到功能先要理解功能，理解用戶在用這個(gè)功能時(shí)會(huì)是怎么操作的，用戶之間的關(guān)系又是怎么樣的，也許腦子里有大概的流程，但是更好的辦法是把流程畫出來，畫出流程后，對每個(gè)流程中可能涉及到的操作和內(nèi)容進(jìn)行整理，將這些內(nèi)容合理的整理到直觀的信息結(jié)構(gòu)中，然后在帶入到具體的頁面，并且不斷思考流程和改進(jìn)細(xì)節(jié)。

先有方向才有框架，有了框架才能填入內(nèi)容，有了內(nèi)容才能不斷進(jìn)行更細(xì)致的調(diào)整和修改。

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