前言
當看到這篇文章你是不是很疑惑，納尼？產品功能結構圖不是PM畫的嗎？什麼時候輪到我們UI設計師來做這部分工作了。確實通常情況下我們UI設計師甚至都不去關心功能結構圖，一般情況下都是PM把產品原型圖給到我們，我們只針對原型圖做高保真設計。
如果你是在大廠裡那喬治說的這種情況可能不太會遇到，大多數現實場景中你期望的產品原型圖是這樣的：
而大多數PM給到你的原型圖恐怕會讓你大跌眼鏡，有的是用筆隨便畫的線稿，有的不知道是哪裡截圖給你的變形失真圖片，東拼西湊出了整張界面原型等等奇葩經歷。
當你看到這樣的原型之後肯定是滿臉的黑人問號，但現實就是這麼殘忍。接下來的工作你就得去梳理原型中界面的交互邏輯，這會花費你工作中大部分的時間，到最後你可能甚至連做設計的那份美麗的心情也被破壞掉了。
那麼在遇到這種情況下有沒有什麼好的解決辦法哪？
答案是：當然有了！接下來喬治要說的就是論產品功能結構圖在UI設計師工作中的重要性。
什麼是產品功能結構圖？
定義
功能結構圖就是按照功能的從屬關係畫成的圖表，圖中的每一個框都稱為一個功能模塊。功能模塊可以根據具體情況分的大一點或小一點，分解得最小功能模塊可以是一個程序中的每個處理過程，而較大的功能模塊則可能是完成某一個任務的一組程序。簡單講就是：如果產品是一棵大樹，那麼核心功能模塊就是樹上的樹幹，子功能模塊就是樹幹的分支；這樣以核心功能模塊為整體，再細分模塊下各個子功能的圖表就是功能結構圖。
作用
以文章剛開始的情景為例，當你看到一個雜亂無章的原型圖時，雖然每個界面上的內容都很清楚，可你就是沒有辦法去系統的了解到整個產品的全貌，功能結構圖以一種簡潔明了的圖表結構形式向你清晰展示了整個產品的功能模塊及子功能組成邏輯關係。以上帝視角對整個產品界面中的功能結構形成了直觀的認識，從而避免了UI設計師在高保真實現過程中的盲目性，反而在設計界面的過程中對產品結構有了更深刻的理解，或許還能從中找出一些隱形的紕漏。
功能結構圖的適用場景及繪製方法
適用場景
功能結構的建立是設計者的設計思維由發散趨向於收斂、由理性化變為感性化的過程。它是在設計空間內對不完全確定設計問題或相當模糊設計要求的一種較為簡潔和明確的表示，它以圖框形式簡單地表示系統間輸入與輸出量的相互作用關係，是概念設計的關鍵環節。
在現實場景中我們要對一個產品進行功能結構圖的繪製，通常情況一般分為兩種：
當你的PM還處在對產品原型繪製中，不定時更新時，你可以將當前已經確定的主功能模塊進行提煉繪製，這樣你可以通過功能結構圖看出產品的進展程度，以及對現有的功能模塊做出層級劃分，方便自身後期的UI界面在設計過程中的工作進度安排。
當你的PM對產品當前版本功能已經確定，原型已經繪製完畢時，將各個功能模塊進行提煉，從而得出核心功能模塊，然後再針對你當前產品的業務流程進行走查，這樣可以幫助你分析並傳遞當前產品的功能結構，以及發現在對界面交互邏輯進行梳理時，是否有遺漏的子功能模塊。
繪製方法
最便捷的方法就是參考PM給的原型圖中的Tab模塊，按照功能層級關係進行歸類，並找出某功能模塊下屬的子功能模塊。
這裡我們以美團外賣APP的首頁為例，假設這是一個繪製很精細的低保真原型圖：
通過上圖的分析歸納我們可以得出美團外賣APP首頁的功能結構圖：
最後需要注意的是控制好功能結構圖中的顆粒度，通俗講就是你每個功能模塊下屬的子功能模塊的細化程度。剛開始繪製時的顆粒度都比較大，一般以主功能模塊為主線進行層層細化，隨著原型圖的不斷完善，顆粒度也會不斷細化，所以在繪製前你需要明確你的用途，是幫助你梳理產品的核心功能模塊還是需要整理並分析整個產品所有的功能模塊。
總結
通過學習上述的方法，身為UI設計師的你在日後的工作過程中，對於產品的整體把控能力會更加的得心應手，同時也對於一個合格的PM所應具備的專業技能有了一些認識，對自身未來的職業轉型方面也會有所幫助。
最後希望大家多多轉發訂閱，有什麼疑惑的地方可以在評論區留言，喬治看到後也會第一時間回復大家。