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

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

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

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

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

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

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

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

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

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

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

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

開始講故事

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

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

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

小明拿著兩本書前往收銀臺(tái)，收銀員告訴小明，購(gòu)買會(huì)員卡可以享受沖多少送多少的優(yōu)惠獲得，天那，買100送100等于賺100?。⌒∶髁⒖棠贸鲥X包，購(gòu)買了100的會(huì)員卡買單，收銀員將小明的個(gè)人信息以及購(gòu)書信息記錄在書店的系統(tǒng)中。

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

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

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

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

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

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

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

作用：

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

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

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

那血肉是什么呢？

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

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

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

作用：

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

如何繪制呢？

功能結(jié)構(gòu)圖繪制完之后，需要思考一個(gè)問(wèn)題，在這些場(chǎng)景中，涉及到了哪些對(duì)象，如果對(duì)編程有了解的朋友應(yīng)該知道基于對(duì)象的編程思維，萬(wàn)物皆是對(duì)象~這里可以提出四個(gè)對(duì)象分別是：書、我、書架、評(píng)論。記住萬(wàn)物皆是對(duì)象，評(pí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)品信息和功能邏輯的圖表，簡(jiǎn)單說(shuō)產(chǎn)品結(jié)構(gòu)圖就是產(chǎn)品原型的簡(jiǎn)化表達(dá)。

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

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

小結(jié)

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

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

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

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