一、線框圖的分類

1. 線框圖的必要性

作為一個B端產(chǎn)品經(jīng)理，如果在工作中遇到需要從0到1搭建一個產(chǎn)品，我們該如何開始呢？

B端產(chǎn)品的特性決定了在產(chǎn)品設(shè)計時，業(yè)務(wù)流程繁多，涉及到的后期使用角色多樣化，職能分工細化，以及每個用戶對產(chǎn)品的訴求不一樣，這就需要我們在前期從0到1開始務(wù)必明確產(chǎn)品的業(yè)務(wù)流程以及角色對應(yīng)的功能。

2. 線框圖的分類

①流程圖

以特定的圖形符號加上說明，表示算法的圖，稱為流程圖或線框圖。流程圖是流經(jīng)一個系統(tǒng)的物流、信息流、資金流等的圖形代表。在線下產(chǎn)品業(yè)務(wù)流轉(zhuǎn)中，流程圖主要用來說明某一過程。是對業(yè)務(wù)流程的梳理，原型設(shè)計的基礎(chǔ)。

②實體關(guān)系圖

ER模型，全稱為實體聯(lián)系模型、實體關(guān)系模型或?qū)嶓w聯(lián)系模式圖。提供了表示實體型、屬性和聯(lián)系的方法，用來描述現(xiàn)實世界的概念模型。實體關(guān)系圖表示在信息系統(tǒng)中概念模型的數(shù)據(jù)存儲。

③數(shù)據(jù)流程圖

一種能全面地描述系統(tǒng)數(shù)據(jù)流程的主要工具，它用一組符號來描述整個系統(tǒng)中信息的全貌，綜合地反映出信息在系統(tǒng)中的流動、處理和存儲情況。抽象性指的是數(shù)據(jù)流程圖把具體的組織機構(gòu)、工作場所、物質(zhì)流都去掉，只剩下信息和數(shù)據(jù)存儲、流動、使用以及加工情況。概括性則是指數(shù)據(jù)流程圖把系統(tǒng)對各種業(yè)務(wù)的處理過程聯(lián)系起來考慮，形成一個總體。

④用例圖

用例圖是指由參與者、事件、邊界以及它們之間的關(guān)系構(gòu)成用于實現(xiàn)某一目的而進行的活動圖形展示。

二、線框圖的詳細案例

1. 流程圖要素及繪制要點

流程圖的基本要素：一般流程圖主要表明個體在什么時間干了什么，什么節(jié)點結(jié)束。下圖為一些基本流程圖要素，包含：開始/結(jié)束、判斷、流程、子流程、外部數(shù)據(jù)、注釋等，一般工作中常用的就這些。

①流程圖的繪制要點

A 確定流程圖中涉及到的系統(tǒng)

比如在電商整個系統(tǒng)中，涉及到的系統(tǒng)就有前端用戶端、訂單系統(tǒng)、客服系統(tǒng)、運營系統(tǒng)、采購系統(tǒng)、倉儲系統(tǒng)、配送系統(tǒng)、財務(wù)系統(tǒng)等，要考慮每個系統(tǒng)使用者的角色以及在整個業(yè)務(wù)流程中的作用，確定每個系統(tǒng)的邊界點，如下圖一般電商的業(yè)務(wù)流程圖，流程貫穿了不同的系統(tǒng)，在系統(tǒng)里需要流轉(zhuǎn)的業(yè)務(wù)就是系統(tǒng)設(shè)計的價值。

B 確定流程圖中涉及的角色

具體到一個系統(tǒng)中，就涉及到不同角色，這個時候就需要在繪制流程圖時具體到角色的層面，如在倉儲系統(tǒng)設(shè)計中，一個商品從入庫到出庫，進過了驗貨、簽收、確認清單、入庫房、盤點、定期質(zhì)檢、揀貨、出庫、到和配送系統(tǒng)交互，倉儲管理人員是分工比較明確的，些具體每個角色執(zhí)行哪些動作都需要在流程圖展示出來。

C 確定流程圖涉及節(jié)點狀態(tài)

在具體到某個系統(tǒng)某個角色在執(zhí)行到某個動作時，我們需要單獨出這些執(zhí)行點不同的狀態(tài)。如在電商系統(tǒng)中，對于用戶來說訂單的狀態(tài)有：待付款、待發(fā)貨、待收貨、待評價。流程圖的狀態(tài)圖對于后期開發(fā)幫助很大，一般這種流程圖需要放到一個單獨文件里，供開發(fā)閱讀。

D 流程圖的分級

一個產(chǎn)品涉及的業(yè)務(wù)很多，這個時候我們需要對流程圖分層，比如在B端產(chǎn)品中，會涉及到付款和收款流程，在畫一級流程圖中，主要還是明確業(yè)務(wù)流程，對于收款和付款，只是在流程表明有這個動作，具體收款和付款的細則，比如哪些人審核，哪些人付款，哪些人核銷，在在子流程中去展示，這個流程一般就是收款或者說付款流程。

如下圖是一般B端產(chǎn)品付款流程，這個流程對于一級流程來說就是一個子流程，相關(guān)人員在一級流程中只會看到收款這一動作，想看具體如何收款，需要到二級流程中繼續(xù)查看。即下方這個詳細流程。

E 繪制注意點

一般流程圖都是上進、左進，右出、下出，多個流程節(jié)點最好不要交叉，不然閱讀起來不舒服，尤其遇到業(yè)務(wù)流程比較復(fù)雜的，最好按照規(guī)范，看起來干凈，容易理解，會節(jié)省大家的閱讀成本。尤其是多個相關(guān)人士閱讀時，節(jié)省下來的價值就很高了。

2. 實體關(guān)系圖要素及繪制要點

①基本要素

一般包含數(shù)據(jù)對象、數(shù)據(jù)對象之間的聯(lián)系等，詳見下方圖例。

②實體圖的繪制要點

主要是讓開發(fā)明白當(dāng)前主體和其對應(yīng)關(guān)系的圖例，如在物流系統(tǒng)設(shè)計中，一個托運人托運的貨物，可能被配載到不同車上，即一個運單對應(yīng)幾個配載單。這些都需要標(biāo)示清楚。又比如一批貨需要存放到倉庫里，這批貨有多個貨物，全部放到一個倉庫里，同時這個倉庫又對應(yīng)多個管理員。如下圖圖例。

3. 用例圖

用例圖主要的作用有三個：獲取需求、指導(dǎo)測試，在整個過程中的其它工作流起到指導(dǎo)作用。

元素之間的關(guān)系用例圖中包含的元素除了系統(tǒng)邊界、角色和用例，另外就是關(guān)系。關(guān)系包括用例之間的關(guān)系，角色之間的關(guān)系，用例和角色之間的關(guān)系。如下圖：

用戶在電商查看商品詳情并購買下單，商家確定訂單信息，包含付款信息、商品信息、收貨地址等信息，這些都屬于具體的用例。

三、后話

在調(diào)研并整理出這些流程圖、用例圖后，我們需要和研發(fā)評審這些業(yè)務(wù)流程，讓開發(fā)人員早點介入項目中，當(dāng)然這時候開發(fā)并不需要多做什么，只是早點熟悉業(yè)務(wù)。

產(chǎn)品人員在和開發(fā)確定沒問題后，把這些圖形分類打包，并上傳到大家都可以看到的地方，注意流程圖的一級、二級等一定要命名標(biāo)示清楚，不然相關(guān)人員閱讀起來費力。

在確定業(yè)務(wù)流程沒問題后，我們就需要考慮產(chǎn)品的形態(tài)和展示，具體到原型圖的繪制。搞明白每個角色對應(yīng)的角色和功能后，我們就可以根據(jù)場景、使用者的不同，去細分產(chǎn)品。

比如在物流系統(tǒng)中，有業(yè)務(wù)人員只負責(zé)錄單，那我們就可以考慮把這個功能做到手持設(shè)備上，這些業(yè)務(wù)員只使用這一個功能，避免了和其他功能冗雜在一起，輕便，同時又符合業(yè)務(wù)場景，做到真正系統(tǒng)為業(yè)務(wù)服務(wù)。

作者：Shirley的折騰。 ?公眾號：Shirley的折騰，一個關(guān)于產(chǎn)品、心理、哲學(xué)的碎碎念小窩！