本文主要總結(jié)產(chǎn)品設(shè)計中結(jié)構(gòu)層的設(shè)計方法與思路，輸出的產(chǎn)物便是產(chǎn)品結(jié)構(gòu)圖。

在講方法之前先要明白產(chǎn)品結(jié)構(gòu)層在產(chǎn)品設(shè)計中處在何處位置，這里引用《用戶體驗要素》中十分經(jīng)典的產(chǎn)品框架體系。

戰(zhàn)略層：一個清晰的產(chǎn)品戰(zhàn)略需要明確回答出兩個問題：

1. 用戶可以通過產(chǎn)品得到什么？
2. 我們可以通過產(chǎn)品得到什么？相對應(yīng)的就是用戶需求以及產(chǎn)品目標(biāo)。（我們?yōu)槭裁撮_發(fā)這個產(chǎn)品？）

范圍層：根據(jù)產(chǎn)品側(cè)重于功能型還是內(nèi)容型，來進行區(qū)別分析，對于功能性產(chǎn)品，考慮的是核心功能的確定以及功能的優(yōu)先級劃分，許多工具型app，boss直聘；對于信息型產(chǎn)品，考慮的核心內(nèi)容的確定以及內(nèi)容的優(yōu)先級劃分，例如數(shù)據(jù)分析網(wǎng)站，數(shù)據(jù)作為信息。

結(jié)構(gòu)層：搭建結(jié)構(gòu)層涉及交互設(shè)計以及信息架構(gòu)兩個方面。交互設(shè)計是做用戶在界面上的、完成任務(wù)的操作以及對信息的獲取，實則就是分析用戶、信息、用戶和信息之間的路徑；信息框架側(cè)重于高效得將信息表達(dá)給用戶。

框架層：進一步提煉結(jié)構(gòu)，確定很詳細(xì)得界面外觀，導(dǎo)航和信息設(shè)計，結(jié)構(gòu)層相當(dāng)于搭了一層骨架，框架層則需要將骨架變得充實。

表現(xiàn)層：視覺設(shè)計，輸出高保真原型。

可以看到產(chǎn)品結(jié)構(gòu)層處在中間的位置，正處在一個又抽象到具象的過渡階段，也正如此，設(shè)計產(chǎn)品結(jié)構(gòu)層也是產(chǎn)品設(shè)計中最考驗抽象能力以及具象能力的階段，在抽象層面上，需要對需求、功能、數(shù)據(jù)進行分類與組織；具象層面上，將用戶需求具象化。

本文針對結(jié)構(gòu)層進行詳細(xì)得說明，介紹產(chǎn)品設(shè)計的方法（場景分類法、功能結(jié)構(gòu)圖、信息結(jié)構(gòu)圖以及產(chǎn)品結(jié)構(gòu)圖）并希望大家學(xué)會具象化以及抽象化的思維。

講一大堆的概念會讓大家產(chǎn)生似懂非懂的感覺，總感覺差那么一點，這里以閱讀書籍產(chǎn)品為例子系統(tǒng)地講解產(chǎn)品設(shè)計的思路以及方法。

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

開始講故事

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

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

發(fā)現(xiàn)關(guān)于養(yǎng)生的書真的是太多了，小明便拿出幾本書進行仔細(xì)閱讀，小明很有方法，先是查看書籍的封面與作者，然后看看簡介與目錄，其次挑幾章進行了解，最后看看這本書在豆瓣上的評價（看書評），最后的最后選擇了流芳百世的《黃帝內(nèi)經(jīng)》。

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

回到家里的小明，興奮不已，開始將兩本小說加入自己的書架中，將《破冰行動》《長安十二辰》當(dāng)?shù)綍艿牡谝粚樱尤霑埽?，這一層全是小說（分組），然后躺在沙發(fā)上便開始閱讀《黃帝內(nèi)經(jīng)》，簡直太好看了，一定要分享給我滴朋友小花，于是小明拿起手機拍了書本的照片給小花。小明媽媽叫小明去吃飯，小明給書加了個書簽。

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

功能結(jié)構(gòu)圖

根據(jù)場景，可以很直觀地了解大致的功能模塊。并繪制出如下的功能結(jié)構(gòu)圖。

so easy有沒有，功能結(jié)構(gòu)一下子就清晰明朗起來了。

功能結(jié)構(gòu)圖的定義與作用

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

作用：

1. 梳理需求，以鳥瞰的方式對整個產(chǎn)品頁面中的功能結(jié)構(gòu)形成一個直觀的認(rèn)識。
2. 思考并明確產(chǎn)品的功能模塊及其功能組成。

信息結(jié)構(gòu)圖

然而它只是一個骨架，需要有血有肉才能成為一個產(chǎn)品啊。

那血肉是什么呢？

細(xì)心的朋友會發(fā)現(xiàn)在用戶體驗要素的結(jié)構(gòu)層中的信息架構(gòu)，沒錯血肉就是信息！大家肯定也聽說過信息結(jié)構(gòu)圖吧，這里就介紹一下信息結(jié)構(gòu)圖。

信息結(jié)構(gòu)圖定義以及作用

定義：指脫離產(chǎn)品的實際頁面，將產(chǎn)品的數(shù)據(jù)抽象出來，組合分類的圖表。

作用：

1. 梳理復(fù)雜內(nèi)容的信息組成，避免信息遺落、混亂；
2. 作為開發(fā)工程師建立數(shù)據(jù)庫的參考依據(jù)。

如何繪制呢？

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

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

NICE！現(xiàn)在有骨架，也有血肉了，但它連產(chǎn)品的雛形也不能稱上，需要將產(chǎn)品功能結(jié)構(gòu)圖圖以及信息結(jié)構(gòu)圖整合在一起，才能呈現(xiàn)產(chǎn)品雛形，于是乎，產(chǎn)品結(jié)構(gòu)圖就誕生了！

產(chǎn)品結(jié)構(gòu)圖是綜合展示產(chǎn)品信息和功能邏輯的圖表，簡單說產(chǎn)品結(jié)構(gòu)圖就是產(chǎn)品原型的簡化表達(dá)。

這里就要仔細(xì)地給分析功能結(jié)構(gòu)圖，可以大致將大致功能分別設(shè)為首頁、搜索、書籍詳情頁、個人中心、書架、閱讀頁六大功能頁面，然后根據(jù)其子功能的權(quán)重劃分優(yōu)先級，再分別給其對象填充信息，慢慢地便呈現(xiàn)出產(chǎn)品結(jié)構(gòu)圖啦！

這里就不全部繪制出閱讀書籍的產(chǎn)品結(jié)構(gòu)圖拉，就針對首頁以及書籍詳情頁進行簡單的產(chǎn)品結(jié)構(gòu)圖繪制，如下：

小結(jié)

最后以如下公式作為本章總結(jié)，化繁為簡才是王道！

功能結(jié)構(gòu)圖（骨架）+信息結(jié)構(gòu)圖（血肉）=產(chǎn)品結(jié)構(gòu)圖（產(chǎn)品原型簡化版）

本文由 @澤 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議