熟練掌握一些工具，能提高工作效率。對(duì)B端產(chǎn)品來(lái)說(shuō)更是如此。本文作者分享了B端產(chǎn)品需要掌握的3種框架圖，熟練掌握，可以加速我們的工作流程。

作為B端產(chǎn)品經(jīng)理，設(shè)計(jì)和管理復(fù)雜的產(chǎn)品功能是日常工作的一部分。

在這個(gè)過(guò)程中，功能框架圖、信息架構(gòu)圖和產(chǎn)品結(jié)構(gòu)圖是我們必須要三種重要的工具，能幫助我們準(zhǔn)確表達(dá)需求的產(chǎn)品邏輯、信息范疇和用戶界面。

01 功能框架圖

功能框架圖是梳理產(chǎn)品功能的起點(diǎn)，它幫助我們理解產(chǎn)品需要實(shí)現(xiàn)的所有功能。有時(shí)候也稱為功能結(jié)構(gòu)圖，通過(guò)羅列出所有的功能，用于項(xiàng)目流程的早期階段。

目的

功能框架圖的目的是展示產(chǎn)品或服務(wù)中包含的所有功能，幫助團(tuán)隊(duì)理解產(chǎn)品的功能組成。

梳理方法與步驟

（1）確定用戶需求：與利益相關(guān)者溝通，了解用戶的基本需求。  

（2）記錄功能：基于需求，列出產(chǎn)品需要實(shí)現(xiàn)的所有功能。

（3）組織功能：將功能按照邏輯分組得到模塊，通常用名詞+“管理”組成，如用戶管理、訂單管理等。

（4）使用動(dòng)詞+名詞：為每個(gè)功能點(diǎn)使用動(dòng)詞+名詞的形式命名，如“創(chuàng)建訂單”、“管理用戶”。

示例

在一款外賣App中，根據(jù)功能框架圖的概念梳理可以得到如下的內(nèi)容：

（1）用戶管理模塊：創(chuàng)建用戶、編輯用戶信息、刪除用戶。

（2）訂單管理模塊：創(chuàng)建訂單、查看訂單、修改訂單、取消訂單。

02 信息架構(gòu)圖

這個(gè)圖通常在功能框架圖之后使用，當(dāng)產(chǎn)品的功能確定后，信息架構(gòu)圖幫助確認(rèn)各模塊包含的信息。它以「xx信息」的形式描述，展示信息的細(xì)項(xiàng)和分類，幫助我們確定在產(chǎn)品中需要找到的信息和內(nèi)容。

用一句話概括就是：信息架構(gòu)圖是幫助我們定義和組織如何在產(chǎn)品中展示信息的工具。

梳理方法與步驟

（1）確定信息類型：識(shí)別產(chǎn)品中需要展示的信息類型。

（2）分類信息：將信息按照邏輯分類，如用戶信息、訂單信息等。

（3）定義信息層級(jí)：確定信息的層級(jí)關(guān)系，如基本信息、詳細(xì)資料。  

（4）使用xx信息：為每個(gè)信息點(diǎn)使用“xx信息”的形式命名，如“賬戶信息”、“流水號(hào)信息”。

目的

– 設(shè)計(jì)信息展示邏輯，確保用戶能夠容易地找到所需信息。

– 優(yōu)化用戶體驗(yàn)，通過(guò)合理的信息架構(gòu)提高用戶滿意度。

示例

繼續(xù)以外賣App為例，信息架構(gòu)以拆解為：

（1）用戶管理模塊：基本資料信息、收貨地址信息、賬戶信息等。

（2）訂單管理模塊：流水號(hào)信息、狀態(tài)信息、訂單快照信息、支付信息等。

03 產(chǎn)品結(jié)構(gòu)圖

完成了前面的兩個(gè)圖，最后一步就是設(shè)計(jì)用戶界面（畫(huà)原型了），這里就是要用到產(chǎn)品結(jié)構(gòu)圖了。

產(chǎn)品結(jié)構(gòu)圖是界面的直觀表達(dá)，具體展示界面的布局和元素。它反映了用戶實(shí)際看到的產(chǎn)品界面，幫助團(tuán)隊(duì)理解產(chǎn)品的視覺(jué)和交互樣式。

梳理方法與步驟

1. 確定界面元素：根據(jù)前面的模塊/功能/信息，逐一翻譯為界面上需要展示的所有元素，如XX功能按鈕、XX信息輸入框等。

2. 布局規(guī)劃：設(shè)計(jì)元素的布局，確保界面清晰、邏輯性強(qiáng)。

3. 交互設(shè)計(jì)：考慮元素之間的交互，如點(diǎn)擊按鈕后的操作。  

4. 視覺(jué)呈現(xiàn)：使用線框圖或原型圖展示界面的視覺(jué)設(shè)計(jì)。

適用場(chǎng)景

（1）用于在設(shè)計(jì)初期確定界面的基本結(jié)構(gòu)和布局。

（2）用戶測(cè)試：通過(guò)原型圖收集用戶反饋，優(yōu)化設(shè)計(jì)。

示例

產(chǎn)品結(jié)構(gòu)：

（1）導(dǎo)航欄：為了承載前面已經(jīng)定義出的模塊與功能，在App的底部導(dǎo)航選項(xiàng)，必須包含用戶圖標(biāo)、訂單圖標(biāo)。

（2）用戶中心：為了承載前面定義的信息架構(gòu)展示，在用戶中心頁(yè)需要包含如下信息展示元素：基本資料信息、收貨地址信息、賬戶信息。

04 綜上

作為B端產(chǎn)品經(jīng)理熟練掌握這些工具，不僅可以幫助我們快速梳理產(chǎn)品邏輯，還有助于準(zhǔn)確傳達(dá)你的想法給到研發(fā)團(tuán)隊(duì)，加速我們的工作流程。