產品結構圖=功能結構圖+信息結構圖

55 評論 7萬 瀏覽 561 收藏 10 分鐘

本文主要總結產品設計中結構層的設計方法與思路輸出的產物便是產品結構圖。

在講方法之前先要明白產品結構層在產品設計中處在何處位置,這里引用《用戶體驗要素》中十分經典的產品框架體系。

5分鐘搞定產品結構圖

戰略層:一個清晰的產品戰略需要明確回答出兩個問題:

  1. 用戶可以通過產品得到什么?
  2. 我們可以通過產品得到什么?相對應的就是用戶需求以及產品目標。(我們為什么開發這個產品?)

范圍層:根據產品側重于功能型還是內容型,來進行區別分析,對于功能性產品,考慮的是核心功能的確定以及功能的優先級劃分,許多工具型app,boss直聘;對于信息型產品,考慮的核心內容的確定以及內容的優先級劃分,例如數據分析網站,數據作為信息。

結構層:搭建結構層涉及交互設計以及信息架構兩個方面。交互設計是做用戶在界面上的、完成任務的操作以及對信息的獲取,實則就是分析用戶、信息、用戶和信息之間的路徑;信息框架側重于高效得將信息表達給用戶。

框架層:進一步提煉結構,確定很詳細得界面外觀,導航和信息設計,結構層相當于搭了一層骨架,框架層則需要將骨架變得充實。

表現層:視覺設計,輸出高保真原型。

可以看到產品結構層處在中間的位置,正處在一個又抽象到具象的過渡階段,也正如此,設計產品結構層也是產品設計中最考驗抽象能力以及具象能力的階段,在抽象層面上,需要對需求、功能、數據進行分類與組織;具象層面上,將用戶需求具象化。

本文針對結構層進行詳細得說明,介紹產品設計的方法(場景分類法、功能結構圖、信息結構圖以及產品結構圖)并希望大家學會具象化以及抽象化的思維。

講一大堆的概念會讓大家產生似懂非懂的感覺,總感覺差那么一點,這里以閱讀書籍產品為例子系統地講解產品設計的思路以及方法。

前置條件:在范圍層中確定了關于閱讀書籍的各種功能,比如挑選書、加入書架管理自己的書,對書進行分組,曬書,讀書,加入書簽,瀏覽內容等等等,功能多且亂,如何做到有序的分類呢,運用場景分類法可以聯系現實中的場景,并根據場景進行大致分類。

開始講故事

小明最近迷上了養生,想買一本關于養生的書進行鉆研學習,于是乎,他便找到附近的一家書店。這家書店十分會做生意,門店有各種宣傳海報,有本月暢銷書籍的海報(暢銷書推薦),名家推薦的海報(作者推薦),新書的宣傳海報(新書推薦)等等,這些書籍都在書店的門口,讀者可以十分方便的購買。哇,有最近熱播的《長安十二辰》還有《破冰行動》,鐵粉小明立刻各拿下一本。

開心之余,小明差點忘了自己是要買養生的書的,于是便往里開始尋找。聰明的小明發現書店的書架上都有分類名(分類),于是小明問服務員養生的書架在哪里(搜索),得知在2樓之后,小明便前往挑選,但是小明還是沒找到,于是又問了邊上的服務員(歷史記錄搜索),最后終于找到了養生的書架。

發現關于養生的書真的是太多了,小明便拿出幾本書進行仔細閱讀,小明很有方法,先是查看書籍的封面與作者,然后看看簡介與目錄,其次挑幾章進行了解,最后看看這本書在豆瓣上的評價(看書評),最后的最后選擇了流芳百世的《黃帝內經》。

小明拿著兩本書前往收銀臺,收銀員告訴小明,購買會員卡可以享受沖多少送多少的優惠獲得,天那,買100送100等于賺100啊!小明立刻拿出錢包,購買了100的會員卡買單,收銀員將小明的個人信息以及購書信息記錄在書店的系統中。

回到家里的小明,興奮不已,開始將兩本小說加入自己的書架中,將《破冰行動》《長安十二辰》當到書架的第一層(加入書架),這一層全是小說(分組),然后躺在沙發上便開始閱讀《黃帝內經》,簡直太好看了,一定要分享給我滴朋友小花,于是小明拿起手機拍了書本的照片給小花。小明媽媽叫小明去吃飯,小明給書加了個書簽。

未完待續(讀者可以試試自己腦補之后的閱讀場景)。

功能結構圖

根據場景,可以很直觀地了解大致的功能模塊。并繪制出如下的功能結構圖。

5分鐘搞定產品結構圖

so easy有沒有,功能結構一下子就清晰明朗起來了。

功能結構圖的定義與作用

定義:以功能模塊為類別,介紹模塊下其各功能組成的圖表。

作用:

  1. 梳理需求,以鳥瞰的方式對整個產品頁面中的功能結構形成一個直觀的認識。
  2. 思考并明確產品的功能模塊及其功能組成。

信息結構圖

然而它只是一個骨架,需要有血有肉才能成為一個產品啊。

那血肉是什么呢?

細心的朋友會發現在用戶體驗要素的結構層中的信息架構,沒錯血肉就是信息!大家肯定也聽說過信息結構圖吧,這里就介紹一下信息結構圖。

信息結構圖定義以及作用

定義:指脫離產品的實際頁面,將產品的數據抽象出來,組合分類的圖表。

作用:

  1. 梳理復雜內容的信息組成,避免信息遺落、混亂;
  2. 作為開發工程師建立數據庫的參考依據。

如何繪制呢?

功能結構圖繪制完之后,需要思考一個問題,在這些場景中,涉及到了哪些對象,如果對編程有了解的朋友應該知道基于對象的編程思維,萬物皆是對象~這里可以提出四個對象分別是:書、我、書架、評論。記住萬物皆是對象,評論也可以是!

5分鐘搞定產品結構圖

產品結構圖

NICE!現在有骨架,也有血肉了,但它連產品的雛形也不能稱上,需要將產品功能結構圖圖以及信息結構圖整合在一起,才能呈現產品雛形,于是乎,產品結構圖就誕生了!

產品結構圖是綜合展示產品信息和功能邏輯的圖表,簡單說產品結構圖就是產品原型的簡化表達。

這里就要仔細地給分析功能結構圖,可以大致將大致功能分別設為首頁、搜索、書籍詳情頁、個人中心、書架、閱讀頁六大功能頁面,然后根據其子功能的權重劃分優先級,再分別給其對象填充信息,慢慢地便呈現出產品結構圖啦!

這里就不全部繪制出閱讀書籍的產品結構圖拉,就針對首頁以及書籍詳情頁進行簡單的產品結構圖繪制,如下:

5分鐘搞定產品結構圖

小結

最后以如下公式作為本章總結,化繁為簡才是王道!

功能結構圖(骨架)+信息結構圖(血肉)=產品結構圖(產品原型簡化版)

 

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

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 為什么沒有供應鏈體系

    回復
  2. 臥…了個…棒,先是跟著你的用戶故事用筆紙寫下了基本功能,然后和你后邊羅列的功能結構圖對比,和你相差不大,甚至我還排出了優先級。然而你說這才是骨架,還得再加點血肉(信息架構圖)才是雛形(產品)。哈哈哈,說明什么,說明你這篇文章太通俗易懂了,一個做設計的都能看明白,好棒棒,果斷關注!

    回復
  3. 這篇我終于悟了!

    回復
  4. 通俗易懂的干貨

    回復
  5. 當業務信息維度較多,這種產品結構圖還能通用?

    回復
  6. 太棒了!找了這么久的信息架構什么意思,通過這篇文章終于搞明白了!贊

    回復
  7. 作者辛苦了,第一個關注的作者

    回復
  8. 言簡意賅,最喜歡讀這種干貨,支持

    回復
  9. 特別棒

    回復
  10. 溫故而知新,第三遍來看作者這篇文章了,有新得,感謝!

    回復
  11. 非常喜歡,受益良多,有個不太明白的地方想請教一下,就是到功能結構吐的時候還能看明白,但是從功能結構圖帶信息結構圖有點不是很明白怎么來的了,求大神指教

    回復
  12. 解釋的很清楚,例子也是通俗易懂,謝謝作者的分享。

    回復
  13. 收獲良多 但是你這里的信息只是指前端吧?不包括管理后臺看到的

    回復
  14. 太贊了,加雞腿

    回復
  15. 可是每次實際操作起來,比如去倒推別人的APP的PRD,想完整走個流程。畫功能結構圖的時候總是不知所措,那比如一個電商,是說登錄,注冊,然后下單,購物車,提交訂單,填寫地址,展示物流,其實簡單就是這幾個功能嘛。其它的都是信息。 因為電商無非最低的子集是商品詳情頁,其它都是各種促銷活動,其實就是把所有的商品詳情頁分了一個類。我真的就不知道怎么下手了

    回復
    1. 你也是做電商網站嗎?每次看別人寫的好像都是似懂非懂 ??

      回復
    2. 深入理解業務訴求,加上通用標準框架就是你的產品

      回復
  16. 寫得很好,我看了很久,收獲很多,謝謝

    回復
  17. 舉得例子通俗易懂,用戶體驗非常好,超贊,果斷關注了,加油,gongzhonghao 也關注了,期待你的新的分享

    回復
  18. 我一直有一個想說的,就是經常被提到的“場景”“用戶畫像”,在實際工作中,對于成熟產品的更新迭代,難免有以“場景”或“畫像”去貼近產品的誤區,因為現實生活中的場景和角色遠沒有那么理想化,劇情也是全靠自己編的,不確定性太多。B端產品還好,至少甲方可以明確表述自己要做哪些事,而C端產品就顯得,誰講的有道理誰就是對的,所以想請教一下,場景的編寫,怎么樣做到言之有物的同時,又能避開以“場景”往現有“功能”上靠的誤區

    回復
    1. 怎么說呢,就是我們公司現在有個產品,已經成型了,但是如果我從生活中的場景出發,感覺這個產品真沒人用,可是工作總還是要做的吧

      回復
    2. c端產品的畫像與場景是基于用戶調研、訪談的,是實打實定性分析出來的。如果是主觀臆測的話,作用不大。對于b端的話,場景具市源于業務,相對明確。

      回復
  19. 講真,這是我看完之后,讓我豁然開朗的一篇文章

    回復
    1. 謝謝您的喜歡??

      回復
    2. +1

      回復
    3. 1

      回復
  20. 通俗易懂 解惑啊!

    回復
    1. 謝謝肯定

      回復
  21. 為啥在產品功能圖中,沒有登錄注冊。。。

    回復
    1. 好奇+1

      回復
    2. 的確是沒加上去,考慮主次,就沒加上去了

      回復
    3. 我再請教一下,這個登錄注冊如果加上,加在哪里?應該在一級添加?還是在類似“我的”里面添加?,這是我目前有些困惑的地方。

      回復
    4. 首先,登錄注冊是一個單獨的功能模塊,其次,在功能結構圖中沒有“我的”,因此我覺得應該作為一級添加。

      回復
    5. 是的,贊同

      回復
  22. 不過,信息架構圖是指信息結構圖還是產品結構圖,我看到好多文章都把app信息架構圖畫成產品機構圖了??

    回復
    1. 信息結構圖~

      回復
    2. 結構就是架構.

      回復
  23. 寫的非常好,感謝

    回復
    1. 謝謝~

      回復
  24. 超級棒,感謝作者!!!

    回復
    1. 謝謝~

      回復
  25. 這里就要仔細地給分析功能結構圖,可以大致將大致功能分別設為首頁、搜索、書籍詳情頁、個人中心、書架、閱讀頁六大功能頁面,

    請問這一步 有什么方法嗎

    回復
    1. 按照場景,以及需要考慮功能之間要相互獨立。

      回復
  26. 謝謝

    回復
    1. 回復
    2. 還帶自己回復自己的?哈哈哈

      回復
  27. 不錯,講的有血有肉,下次可以分享一下關于流程圖的制作,平時處理業務邏輯做流程圖還是挺多的。感謝仁兄! ??

    回復
    1. 好的,哈哈,需要研究研究~

      回復
    2. 回復
  28. 簡單易懂!

    回復
    1. 3Q~

      回復
  29. 最清楚的一篇了

    回復
    1. 承蒙夸獎!!!

      回復
  30. 寫的很好,我之前也看到過許多文章介紹功能結構和信息結構的,不過作者的這個例子,能將二者做出更加簡單明了的區分,非常生動形象,贊一個。

    回復
    1. 哈哈!謝謝!

      回復