設計圖，它不是簡單的供你欣賞，他其實是架構師，產品經理，開發工程師，測試工程師等各種角色之間進行溝通的語言，溝通的一個橋樑，讓整個團隊更能有效的協調工作。

設計圖不單單是架構師要掌握的，在一個產品的開發過程中，任何一個環節，任何一個角色都可以通過掌握不同的設計圖來完成溝通的。

流程圖

流程是一系列的邏輯關係（包含因果關係、時間先後、必要條件、輸入輸出）產品經理做需求前一定要先把這些邏輯關係理清楚，如果非要用一句話概括的話“流程就是在特定的情境下滿足使用者特定需要的總結”。

圖就是將你頭腦中的邏輯關係以圖形化的形式呈現出來，具有圖形化、視覺化的特點，因為是圖，你可以像你的版本迭代一樣，當你的邏輯需要修改的時候拿出來迭代一下，同時因為有圖，你還可以更好的給專案成員進行宣講。

產品中設計的流程圖主要有三種，業務流程圖、任務流程圖、頁面流程圖，下面我們來一一介紹。

業務流程圖

業務流程圖又稱為泳道圖，就是描述那些個體在什麼條件下做了什麼事情，他們之間有何關聯。主要分三個方面：

• 涉及到哪些主體？

• 每個主體都有哪些任務？

• 各個主體之間怎麼聯絡的？一般涉及到多個主體，每個主體之間有聯絡？

任務流程圖

泳道圖一般是從戰略上分析整個業務流程，讓你對公司所做的業務有個大概的瞭解，而任務流程圖就是在你的產品操作上，使用者通過什麼樣的操作來完成它的目標，比如你去銀行ATM機器上取錢，你是如何一步步操作把錢取出來的。

頁面流程圖

如果說業務流程圖幫助你梳理戰略，任務流程圖幫助你梳理使用者操作行為（主要給程式設計師看）、頁面跳轉流程在幫助你梳理各個頁面之間的跳轉關係（主要給UI和前端程式設計師看）這是一個逐步從整體到區域性，從後端到前端的過程。

• 所有的產品都是由頁面組成的，不論是APP、PC、H5都是由一個個頁面組成的，頁面流程圖描述完成一個任務需要經過哪些步驟，你在畫圖的時候只需要清晰的表現出使用者點選頁面的什麼地方，然後跳轉到那個頁面。主要由頁面、行動點、連線線組成。

• 產品設計完成後，架構師需要對產品進行軟體的架構設計。包括技術的選型，模組的劃分，開發人員的任務分配，工作量的評估等等.....

  

  UI設計圖標註

  對於APP的頁面，UI設計師會給出UI設計標註圖，這樣APP客戶端開發人員，直接按照標註圖進行頁面的開發了。

產品設計完成後，架構師需要對產品進行軟體的架構設計。包括技術的選型，模組的劃分，開發人員的任務分配，工作量的評估等等.....

系統架構設計圖

構架將在一次又一次迭代中不斷演化、改進、精煉

系統架構決定開發框架的選型。

序列圖

架構師一般在做詳細設計的時候，會把程式模組之間的每一步呼叫過程很詳細的畫出來，這樣開發人員拿到設計文件，就能直接開發。

序列圖代表著業務流程的操作處理時序，理清後可對各個模組間的關係、介面進行明確的定義。

用例圖

用例圖需要注意的是角色、動作和邊界。

類圖

實際開發中，架構師去定義類圖的時候比較少。基本交由專案經理或開發經理根據實際情況進行定義。

設計圖有很多種，還包括線框原型圖、高保真原型圖、狀態圖，活動圖...... 不再一一介紹。畫什麼樣的設計圖，不是絕對的，不同公司，不同專案，需要畫的設計圖也是不同的，有些專案需要畫原型圖，有些專案只是對外提供服務，沒有頁面也就不需要畫原型圖。另外還要根據專案的工期，預算等等因素考慮。如果一個專案的工期也就一個月甚至更短，那基本上就是怎麼簡單怎麼快就怎麼做。