功能結構圖、信息結構圖、結構圖,你還傻傻分不清嗎?(下)

86 評論 327268 瀏覽 1454 收藏 8 分鐘

你還在問產品結構圖到底是信息結構圖還是功能結構圖嗎?這里有微信的實際例圖幫助你更好地理解這組命運三姐妹圖類。在寫PRD、競品分析文檔中,我們常常會看到產品結構圖、產品功能結構圖或者產品信息結構圖的身影,但需要講清楚他們的定義和作用也真沒看上去那么簡單,這里作者嘗試分享一下自己的觀點。

特別聲明:由于篇幅和其他因素限制,本系列中所有的實例圖在完整性上有省略和簡化,僅作為舉例講解用,請讀者不要糾結圖表是否描述完整、是否有缺失模塊,主要是給讀者來對比3類圖表的聯系與區別。

信息結構圖

  • 定義:指脫離產品的實際頁面,將產品的數據抽象出來,組合分類的圖表。
  • 作用:
  1. 幫助PM梳理復雜內容的信息組成,避免信息內容在展示過程中出現遺漏、混亂、重復;
  2. 作為開發工程師建立數據庫的參考依據;

信息結構圖的繪制通常晚于功能結構圖,往往是在產品設計階段的概念化過程中,在產品功能框架已確定、功能結構已完善好的情況下才對產品信息結構進行分析設計。

在這里,我們需要強調的是脫離實際頁面這個概念,在一些產品相關文章中,我們會看到作者將信息結構圖完全按照頁面的邏輯順序來進行分類組合,嚴格意義上來說,這種圖表不是一份合格的信息結構圖。

我們用微信的個人信息模塊舉例,如下圖所示:

其結構信息圖在這部分的繪制就需要脫離產品的實際頁面,如下:

最后需要強調的是:信息結構圖主要適用于產品信息構成比較復雜需要考慮優化的情況,如內容型產品(博客、web門戶網站等),產品的信息結構對于用戶體驗就十分重要,需要用信息結構圖作為工具進行分析思考。

這里作者簡單繪制了一下微信的信息結構圖作為參考

結構圖

相較于功能結構圖和信息結構圖,產品結構圖的定義就很混亂和模糊了,為什么會出現這種情況呢?

一方面產品結構圖從文字理解上來說就容易讓人困惑:產品信息結構圖、產品功能結構圖不都可以簡稱為產品結構圖嘛。

另一方面現有網上流傳的競品分析文檔、產品體驗文檔、PRD文檔有不少是由產品新人模仿前輩流傳出來的文檔模板來寫的。但讓人尷尬的是,有部分同學沒有進行細致深入地了解。經常在一篇文章中,前面說是產品的功能結構圖,結果圖中是產品功能有,產品信息要素也有,沒有理解功能結構圖的定義。而后來的初學者又從這些文章中去了解學習產品功能結構圖、產品信息結構圖,導致惡性循環;

最重要的原因是:對于產品結構圖,產品從業人員這個群體自身都還沒有達成共識啊。作者在網上搜了搜相關文章,對于產品結構圖大家的主要理解有3種:

  • 大部分產品人認為:產品結構圖即產品功能結構圖的簡稱,可能在產品沒有強調信息結構的概念時,有部分PM開始簡稱產品功能結構圖為產品結構圖,之后便默認了這種稱呼,當出現產品信息結構圖后,概念就產生了混淆;
  • 一部分產品人認為:產品結構圖是綜合展示產品信息和功能邏輯的圖表;
  • 少部分產品人認為:產品結構圖就是產品信息架構圖。

在這里,作者更認同第2種觀念:

產品結構圖是綜合展示產品信息和功能邏輯的圖表,簡單說產品結構圖就是產品原型的簡化表達。它能夠在前期的需求評審中或其他類似場景中作為產品原型的替代,因為產品結構圖相較于產品原型,其實現成本低,能夠快速對產品功能結構進行增、刪、改操作,減少PM在這個過程中的實現成本。

產品結構圖就是通過信息架構設計,將功能和信息以一種合理自然的邏輯,把功能結構圖和信息結構圖中的內容放入產品中的每一個頁面的結果。而現在許多PRD、競品分析中提到的信息結構圖、功能結構圖其實大多數都是同時含有功能和信息元素的簡化版產品結構圖。如下圖所示:

總結

在一款產品的設計過程中,功能結構圖是必須的,信息結構圖視產品和PM自身而定,通常我們初步確定了產品功能結構圖(產品功能框架)之后才開始繪制產品信息結構圖。

在產品設計流程中,產品功能結構圖是產品概念化階段的初期輸出,產品結構圖是產品概念化的尾期階段輸出物,當產品結構圖完成后,我們對產品的基本模樣在心理就有了一個輪廓。同時以產品結構圖作為繪制原型的依據,可以避免我們在產品設計中邊畫邊改,跳進死掐細節,不見森林的陷阱。

到這里,你是否還對功能結構圖、信息結構圖、結構圖傻傻分不清呢?

相關閱讀

功能結構圖、信息結構圖、結構圖,你還傻傻分不清嗎?(上)

 

作者:藍調Lee,微博號:藍調L

本文由 @藍調Lee 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖由作者提供

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 假如有兩個主信息模塊都分有相同的子信息模塊。但是第二個主模塊在第一個主模塊的基礎上增加/刪改了一些信息。這樣該怎么整理?

    來自廣東 回復
    1. 看你畫什么圖呢,如果是信息結構圖,第二個模塊假的內容算不算在里頭?算就只畫一個取并集,不算那加的部分算哪歸哪。我覺得

      來自廣東 回復
    2. 你在說啥

      來自重慶 回復
  2. 你這結構圖是結構圖么,明明是功能結構圖吧,我的理解是結構圖=產品架構,信息結構圖是=細化搬功能結構圖

    來自中國 回復
  3. 請問一下,信息結構圖就是信息架構圖嗎?還有PRD中一般是放哪種圖?

    來自浙江 回復
  4. 整理的不錯!

    來自廣東 回復
  5. 信息結構圖我明白了,產品結構圖和功能結構圖還是有點模糊的

    來自上海 回復
    1. 我理解的是,產品結構圖是原型的頁面框架,簡陋的原型。功能結構圖是以功能為基點,比如搜索功能包含哪些,支付功能有哪些小功能小功能。

      來自河北 回復
    2. 感謝解答~

      來自上海 回復
    3. 看了很多,目前基本明白了三者的意思和三者之間的關系。
      1、產品信息結構圖:主要表達的是你的產品整個的信息層面的前后關系,跟頁面層級是可有可無的關系,這句話怎么理解呢?拿筆者舉例的微信來說,微信其實已經算是將產品信息一級已經放在了底部導航,是微信產品的核心所在。所以在“聯系人”這個信息結構里面又有了訂閱號等等其他的信息
      2、產品功能結構圖:主要表達你的產品功能層面的關系,同樣,和頁面層級先后順序也是可有可無的關系,比如微信里面有支付功能,支付功能里面又細分很多種支付方式;又有登錄注冊的功能,又有聊天功能中細分的文字聊天、語音聊天,這其實已經脫離頁面的概念了
      3、產品結構圖:是“功能”和“信息”的結合,至于怎么結合,按照頁面層級的關系結合!基本是整理你的產品怎么搭建,每個頁面層級要放置什么信息&功能。也就是尼莫船長說的,原型的簡陋版,不過也可以形容是原型的鳥瞰圖 哈哈哈:lol:

      來自北京 回復
    4. 看這么多篇文章,最終在評論區找到了解答,感謝

      來自廣東 回復
    5. 哈哈,不客氣,持續學習,不斷理解。

      來自北京 回復
    6. 1+1=2 信息+功能=結構 類似點+線 成為一個面

      來自河南 回復
    7. 是的

      來自北京 回復
    8. 解讀的清晰明了,很好理解~ 贊個~

      來自浙江 回復
    9. 哈哈,我也是看了很多才理解,能幫助大家理解就好,可能在后期的理解中再次推翻當前的理解,但是有進步總是好的,對不對,哈哈哈

      來自北京 回復
  6. 確定,取消 這些按鈕需要展示出來嗎

    來自廣東 回復
    1. 不用

      來自北京 回復
  7. 謝謝,對初學很有幫助 ??

    來自江西 回復
  8. 一直不明不白 反反復復看 受教了終于懂了…

    來自北京 回復
  9. 只能學習能使我快樂

    來自廣東 回復
  10. 只有我發現本文的「結構圖」和作者上篇文章中的「功能結構圖」似乎是一模一樣的嗎?

    來自北京 回復
  11. a

    來自河北 回復
  12. 功能結構圖會涉及后臺邏輯么?
    比方說:“紅包金額限制(0.01~200)”

    來自浙江 回復
    1. 不涉及,比如你說的紅包金額限制是屬于產品規則,不屬于功能。功能最小顆粒度是一個操作,而不是操作的規則。

      來自廣東 回復
    2. 那么后臺邏輯應該在什么文檔表達呢?

      來自浙江 回復
    3. 流程圖或者文字都可以,關鍵是用最簡單的方式把邏輯表達清楚

      來自廣東 回復
    4. 如果像你說這個紅包的限制規則,可以在需求文檔里寫,或者,你如果用axure寫需求文檔,那就需要在原型注釋里面寫

      來自河北 回復
  13. 如果產品功能結構圖認為是產品原型的簡化表達,那我有個疑問,頁面層級關系和功能層級關系不一定是完全一致的,因為功能結構圖是按照功能抽象出來的。作者對此是如何理解的呢?

    來自北京 回復
    1. 每一步都有它的作用,固定范疇內逐步推演才能反復優化的,產品功能結構圖是原型的由來了,更不是簡化版原型。。。產品經理的矛盾很多來自于決策者的業余表現,祝君好運

      來自北京 回復
    2. 首先要明白結構圖=結構+圖,是以圖的形式可視化結構,結構分為縱向層級結構和橫向關系結構。頁面結構的產生是在功能結構和信息結構之后,可以在原型之前或之后。在原型之前主要作用是梳理原型頁面量,頁面流程關系,避免漏畫頁面;在原型之后,是為了宏觀向組內人展示頁面的層級關系,也便于前端理解整個產品的跳轉關系,便于測試檢查和驗證。

      來自廣東 回復
    3. 作者沒有說產品功能圖是產品原型的簡化表達,作者說的是產品結構圖是產品原型的簡化表達。產品結構圖和產品功能結構圖是不一樣的。

      來自北京 回復
  14. 如果產品功能結構圖認為是產品原型的簡化表達,那我有個疑問,頁面層級關系和功能層級關系不一定是完全一致的,因為功能結構圖是按照共軛能抽象出來的。作者對此是如何理解的呢?

    來自北京 回復
  15. 我可不可以理解,產品結構圖就是現在很多人說的頁面結構圖?

    三個圖:功能結構圖(也可以用功能列表代替),信息架構圖和頁面結構圖

    來自上海 回復
    1. 看了這篇文章后我也是這么想的。。但是作者并沒有指出頁面結構圖是一種什么樣的存在……

      來自北京 回復
    2. 被互聯網這些大咖們整的名詞給繞暈了

      來自上海 回復
    3. 同感

      來自北京 回復
    4. 他說的這個應該是功能和信息組合起來叫產品結構吧

      來自福建 回復
    5. 作者好像是這個意思,又好像不是。

      來自上海 回復
    6. 感覺可以理解為:頁面+功能 描述完整的整個產品 信息沒啥必要,現在看來是這樣

      來自福建 回復
    7. 信息結構圖比較抽象,給開發看了有益

      來自上海 回復
    8. 你這個有益是啥,建表?比如上圖的 我的信息/好友信息 其實都屬于用戶信息,開發一張表就解決了。你抽象成兩個,沒啥用啊

      來自福建 回復
  16. 給你點贊,一直傻傻分不清楚的人說的就是我,謝謝啦

    來自廣東 回復
  17. 收銀管理系統分C端和管理后端的產品結構圖如何制作,C端有的功能,B端也有例如訂單管理,支付方式配置等,求大神指點

    來自江蘇 回復
    1. 可以嘗試泳道圖 Swinlane ??

      來自上海 回復
  18. 寫的很棒,滿滿噠干貨,受益匪淺

    來自福建 回復
  19. 產品結構圖就是信息架構圖嘛

    來自廣東 回復
    1. 簡單來說,產品結構圖就是產品有哪些功能模塊,而信息架構圖就是,功能模塊是干啥的

      來自廣東 回復
    2. 描述功能模塊

      來自廣東 回復
  20. 很迷惑,看了里面的很多PRD;看了這篇文章實戰了一下,并且邊實戰邊回來看,受益匪淺,真的感謝

    回復
  21. 寫得很嚴謹呢,搜到的prd都是新人的倒推練習,不免對定義產生疑惑,搜到這兩篇文章受益匪淺~

    來自北京 回復
  22. 功能結構到產品結構,信息結構可能是當中的一個過度,最終結果為了完善產品結構圖。

    來自江蘇 回復
    1. 大哥你頭像咋動起來的呀,挺好看的,我能設置不? ??

      來自廣東 回復
    2. 我也挺好奇 哈哈

      來自北京 回復
    3. 贊同

      來自廣東 回復
    4. 你這句話好精髓,本來還迷糊的,看到你這句話有點突然感覺了

      來自浙江 回復
  23. 畫的最多的就是產品功能結構圖,信息結構圖和結構圖沒有畫過。
    像文中所說的,在功能結構圖中不可避免的糅雜了信息描述。

    來自上海 回復
  24. 請問,結構圖例包含了信息架構與功能架構嗎?

    來自河南 回復
    1. 因為不同人對信息架構和功能架構的理解不一樣,可以這樣說:結構圖中包含了功能結構和信息結構

      來自廣東 回復
  25. 請問大神,后臺管理與前端的產品結構圖如何放到一起結合起來畫?

    來自北京 回復
    1. 為什么需要放到一起畫呢?可以先使用流程圖梳理其中的聯系,如果確實有必要的話腦圖的二級項目分為一個前端和一個后臺管理就可以了,建議有問題到問答模塊提問,會有真正的大神幫你回答的,也會得到更多的詳細的回答,提問描述記得要闡述問題背景和你想要達到的目的 ??

      來自廣東 回復
  26. 解決了我一直以來的疑惑!受教!感謝!

    來自福建 回復
  27. 好文

    來自浙江 回復
  28. 我對功能結構和信息結構圖到時經常畫,產品結構圖沒畫過(或者自己畫了卻不自知)。。。不過還是從您的文章中學到了很多,吃水不忘挖井人,謝謝!

    來自四川 回復
    1. 吃井不忘挖水人?。?/p>

      來自福建 回復
    2. 井好吃么? ??

      來自北京 回復
  29. 受用,辛苦了

    來自江蘇 回復
  30. 辛苦大大,分析的很到位,

    來自北京 回復