淺析互聯網產品的設計流程是怎樣的？

01-26

原創作者：Massuer

前段時間按照自己的經驗和理解，梳理了下互聯網產品的設計常規流程。

當時是因為前公司產品總監讓我三天內出產品改版UI效果圖，我拒絕了，他並不理解，於是我需要告訴他，在UI效果圖之前，都需要什麼...

1.戰略層

自身目標與用戶需求是什麼？

成功的用戶體驗，其基礎是一個被明確表達的「戰略」，知道公司與用戶雙方對網站的期許和目標，有助於確立用戶體驗各方面策略的制定。

解決問題：**希望從Q1design得到什麼？用戶希望從Q1design得到什麼？（老用戶注入更多的資金、更多的P2P用戶去購買基金和股票、更多的新用戶；**提供了更多優質用戶體驗的高收益理財產品、**能幫我理財...）
執行者：BOSS為主 PM為輔
輸出物：上述問題的結論

2.範圍層

我們做什麼？

帶著「我們想要什麼」「我們的用戶想要什麼」的明確認識，我們就能弄清楚如何去滿足所有這些戰略的目標。把用戶需求和網站目標轉變成網站應該提供給用戶什麼樣的內容和功能。

解決問題：需求怎麼用功能破（更多的P2P用戶去購買基金>>>基金和P2P賬戶打通、購買基金的基礎知識、基金的購買體驗、基金產品的優勢費率低？用**的分析師文章推介基金組合...）
執行者： PM為主 UE為輔
輸出物：功能列表（1級：用**的分析師文章推介基金組合-2級：文章初期自己找人寫，用戶可對文章進行閱讀、評論、點贊、轉載、一鍵購買基金。一鍵購買：可調購買總額...）並對應用戶需求優先順序和產品戰略，對功能列表進行優先順序的劃分。1-100級

轉：某個手機APP的功能列表，包含一二級功能和說明、備註。

3.結構層

怎麼分？

在收集完用戶需求並將功能排列好優先順序之後，我們對於最終產品將會包括什麼特性已經有了清楚的圖像，然而，這些仍是一個分散的片段，需要創建一個概念結構（內容的組織結構、功能呈現的行為）。

解決問題：一個個的功能怎麼分？（固收、公益、積分、消息這些零散的功能點怎麼串起來？誰和誰是一個體系？固收作為理財產品、公益作為增益輔助類產品、積分是用戶賬戶指標、消息是通訊模塊）
執行者： PM、UE共同
輸出物：信息架構圖

轉：頁面思維的信息架構圖1

轉：頁面思維的信息架構圖2

轉：反應了更全面信息的信息架構圖3

4.框架層

怎麼布局？

進一步的提煉框架結構，確定很詳細的界面外觀、導航和信息設計，明確每個頁面使用那些組件，這能夠讓晦澀的結構變得更實在。

解決問題：一個個的功能怎麼擺？都有什麼欄位？使用流程是什麼？提示、反饋...（****提供完資產配置建議，到了具體買賣產品階段，提供給用戶兩個選擇，只用老錢或者老錢+新錢，列出什麼樣的數據用戶接受並願意加入新錢？怎麼擺放這些數據？輸入新錢數字的框怎麼放？）
執行者： UE為主（輸出交互圖）、PM為輔（配合輸出欄位）
輸出物：交互效果圖交互規範/流程

轉：不同精細程度的UE稿1

轉：不同精細程度的UE稿2

5.表現層

長什麼樣？

內容、功能、美學彙集到一起來產生一個最終設計，滿足其他四個層面的所有目標。

解決問題：產品氣質、品牌認知、情感化的傳遞、操作引導、信息的優先順序別不同呈現（財富中心列出數據應該什麼字體顏色和字型大小能引導用戶接受並願意加入新錢？怎麼傳達給用戶他的資產配置分數低需要引起注意了？（紅色？預警標識？））
執行者： UI為主、UE為輔
輸出物：視覺效果圖視覺規範

轉：混亂的交互稿清晰地交互稿視覺稿

轉：設計規範