一、功能結構圖和信息結構圖

“功能”在百度百科上的解釋為指事物或方法所發(fā)揮的有利作用；效能。

“信息”在百度百科上解釋為指音訊、消息、通訊系統(tǒng)傳輸和處理的對象，泛指人類社會傳播的一切內容。

這種解釋或許過于文藝，于我而言，于軟件而言，“功能”指每個模塊界面上點擊產(chǎn)生的效果，如點擊刪除按鈕產(chǎn)生的刪除數(shù)據(jù)效果、點擊發(fā)送按鈕將信息發(fā)送給對方。“信息”指每個模塊界面上展示內容和需要填寫的表單內容，比如在一個登錄界面上，密碼、賬號、手機號等需要填寫的內容便屬于信息。

功能結構圖意在分析模塊功能組成部分。

信息結構圖意在分析頁面所展示的信息。

可是當我們玩弄app的時候，偶爾會覺得不知道該從哪里開始分析功能，繁瑣的操作容易讓我們迷茫，無從下手。

下面我分析淘寶的購物車（木的辦法，淘寶過于龐大，我們可以拿小模塊練手）：

?

如圖1.1是淘寶購物車截圖。

首先分析信息，觀察當前界面所展示的內容，堅持從上至下，自左往右的原則，如圖所示，在淘寶購物車首頁中，展示了購物車內商品總數(shù)量、默認收貨地址、商品所屬店鋪名稱、店鋪圖標、商品圖標、商品名稱、商品價格、商品數(shù)量、所選商品規(guī)格參數(shù)、商品對比價、合計價格、所選商品數(shù)量。

然后分析功能，我們可以先從按鈕入手，顯而易見的結算、管理、全選、增加商品數(shù)量、減少商品數(shù)量。

點擊結算，即前往訂單確認頁面；

點擊全選，即選擇購物車內所有商品；

點擊增加商品數(shù)量，即加購相應商品的數(shù)量；

點擊減少商品數(shù)量，即減少相應商品在購物車中的數(shù)量；

上述的四個按鈕都有明顯產(chǎn)生的效果，而點擊管理，僅僅是頁面發(fā)生了變化，如下圖所示：

?

點擊管理后，依舊是購物車模塊的首頁，結算按鈕消失不見了，取而代之的是 移入收藏夾、刪除和清理。而展示信息內容并沒有變化。雖然合計價格和所選商品數(shù)量并沒有展示出來，但它們仍然存在這個界面里。

分析功能：

點擊移入收藏夾，即將物品加入收藏夾；

點擊刪除，即將所選的商品從購物車中移除；

而點擊清理，跟點擊管理那樣，頁面產(chǎn)生了變化，如下圖所示：

?

如圖1.3淘寶購物車截圖所示，點擊清理后，便彈出了彈窗，顯示的按鈕有 移入收藏夾和刪除，與上述的功能如出一轍，便無需再分析了。而展示的信息內容卻大有不同，展示了30天前加入購物車的商品和7天前加入購物車的商品。

這就完了嗎？不不不，并沒有。

分析軟件產(chǎn)品需要不斷的玩弄軟件，四處點擊，看有沒有意外的驚喜

?

當點擊圖中所選商品的規(guī)格參數(shù)“S;橘色短袖”，就會展示相應商品的SPU（Standard Product Unit （標準產(chǎn)品單位）SPU是商品信息聚合的最小單位，是一組可復用、易檢索的標準化信息的集合，該集合描述了一個產(chǎn)品的特性），供用戶選擇。

于功能而言，簡單來說，規(guī)格參數(shù)選擇。

除了提供規(guī)格參數(shù)選擇外，我們還能看到 查看詳情 按鈕。

雖然點擊查看詳情后，跳轉到商品詳情頁，但它也是所謂一個功能存在。

頁面分析完后，便開始繪制 信息結構圖和功能結構圖，如下圖所示是信息結構圖：

?

如圖下圖所示為功能結構圖：

?

當當當~

淘寶購物車的功能結構圖和信息結構圖完成了，細品細品。

二、產(chǎn)品結構圖

在我剛獨自設計公司的電商產(chǎn)品的時候，有點不知所措，雖然我的生活早已融入淘寶、京東、當當網(wǎng)等電商系統(tǒng)，但是當真正要獨當一面的時候，才發(fā)現(xiàn)他們功能很多，信息很雜。雖說照虎畫貓，就算知道從畫頭開始，也不知道是先畫耳朵還是先畫眼睛。此時便需要產(chǎn)品結構圖，梳理我們的設計思路。

產(chǎn)品結構圖是功能結構圖和信息結構圖的組合，在原型圖設計未開始，產(chǎn)品結構圖便可以幫助我們梳理信息和邏輯，是原型圖的簡易表達方式。除此之外，也是產(chǎn)品和研發(fā)溝通的橋梁，便于研發(fā)初期評估開發(fā)計劃。

將上述中的功能結構圖和信息結構圖結合起來，便是下圖所示的產(chǎn)品結構圖：

?