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

66 評論 138299 瀏覽 1093 收藏 10 分鐘

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

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

5分鐘搞定產品結構圖

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

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

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

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

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

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

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

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

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

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

開始講故事

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

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

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

小明拿著兩本書前往收銀臺,收銀員告訴小明,購買會員卡可以享受沖多少送多少的優惠獲得,天那,買100送100等于賺100?。⌒∶髁⒖棠贸鲥X包,購買了100的會員卡買單,收銀員將小明的個人信息以及購書信息記錄在書店的系統中。

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

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

功能結構圖

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

5分鐘搞定產品結構圖

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

功能結構圖的定義與作用

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

作用:

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

信息結構圖

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

那血肉是什么呢?

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

信息結構圖定義以及作用

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

作用:

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

如何繪制呢?

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

5分鐘搞定產品結構圖

產品結構圖

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

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

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

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

5分鐘搞定產品結構圖

小結

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

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

 

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

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 謝謝

    來自遼寧 回復
  2. 提出用定義,作用來描述知識點,倒是值得參考

    回復
  3. 謝謝大神科普,我學會了好多

    來自北京 回復
  4. 一個疑問,為什么交互設計在界面設計的前面?界面都沒有呢 怎么設計交互?
    界面設計、導航設計、信息設計,這些不就是在做視覺設計嗎?
    最后一個應該叫視覺優化吧?

    來自山東 回復
  5. 個人理解(UI準備轉產品的設計):功能結構圖是不是把前臺的功能梳理出來,在梳理后臺邏輯如何實現。這樣堆上去開發看的都不想看

    來自廣西 回復
  6. 哐哐哐直接堆上去,根本缺失因果聯系的內容

    來自廣東 回復
  7. 我感覺,信息結構圖應該是(肉),流程圖才是(血),組合起來是功能應該是(肢體)。如果是認定為骨頭,就說明功能,信息,流程,都是分裂開的。

    來自上海 回復
  8. 你好,我的理解是,在功能結構圖中“分享書籍”既是整理書籍功能的一部分,也是閱讀書籍功能的一部分,在這種情況下是只保留一個比較好嗎?

    來自江蘇 回復