產品設計流程與文檔規範
最近項目中遇到了需求、UE、UI到前端工作銜接不順暢的問題：
- 前端設計之前到底需求需要分析到哪一層？
- 哪些文檔就可以支持前端設計？
- 這些文檔的結構和規範都是什麽樣的？
- 以及，前端設計到什麽程度就可以進入開發階段？
為了解決這些問題，參考了網上一些文章簡單的把產品設計流程歸納總結成了下面的內容
一、通用的產品設計流程
二、我理解的認知分析
這裏可以歸納總結出對事物分析的通用方法：深入、分析（發散）、聚焦（收斂）、擴展的過程
針對我們項目成員特點：產品、需求、UI/UE（一人兼顧）、前端開發、服務端開發、測試
對開發前的分析過程理解成下圖的樣子
三、我對交互原型階段的理解
|
核心任務 |
通用標準 |
我的理解 |
|
概念模型分析 |
概念模型，是對產品構成結構和操作方式的系統化、結構化描述 ?設計者是通過一系列視覺線索，以及使用過程將設計模型傳遞給用戶，並最終轉換為用戶概念模型 |
這裏只是系統化結構化的描述（線框圖） 構成結構（靜態）： 頁面的劃分 頁面內容的定義 操作方式（動態）： 交互的類型 跳轉的流程 |
|
功能結構分析 |
交互組件設計 組件間的結構關系 |
UE階段的功能不同於需求階段，應該理解成組件 根據功能逐步添加組件形成組件庫 結構關系：復雜組件是由簡單組件組成 |
|
使用場景分析 |
典型場景經歷的關鍵功能鏈 |
驗證組件庫能否滿足典型場景 |
|
交互流程分析 |
支持使用場景的關鍵操作過程（鼠標點擊步驟、屏幕引導路徑等） |
動作規範，應該對應我們驗收列表動作部分的系統化的設計 |
|
信息架構 |
控件的數量、類型 控件之間的邏輯、組織關系 用戶通過組件理解背後的功能 |
組件庫的架構層次 |
|
原型設計 |
所有界面組成完整的可模擬產品的原型 |
四、我對視覺設計階段的理解
交互設計階段一些文章中的概念比較感性，對於我這個純理科生理解起來有些困難，所以沒做太多的解讀，靠意會吧
|
核心任務 |
通用標準 |
我的理解 |
|
設計定位 |
定義產品性格，賦予感情 |
|
|
風格探索 |
根據情緒板、直覺對產品進行風格設定 |
?情緒板借助圖像，啟發和探索用戶體驗 ?解決“不是我想要的”問題 |
|
視覺設計 |
視覺設計與評估叠代 |
?對已有原型安照既定風格實現視覺效果 ?交付規範和標註 |
|
評估 |
||
|
輸出交付物 |
界面標註、規範 |
上述部分參考文章
五個階段，了解產品設計流程：http://www.woshipm.com/pd/487017.html
用戶體驗UE與用戶界面UI設計：https://blog.csdn.net/playkid123/article/details/44562231
UI/UE設計流程：https://blog.csdn.net/bingdianlanxin/article/details/45674441
五、交互說明文檔
1、文檔的結構包含以下內容：
- 封面
- 版本說明
- 優化目錄（需求優化的信息）
- 修改記錄
- 內容目錄
- 產品框架
- 頁面流程圖
- 頁面展示及交互說明（核心內容）
- 封底
參考：BAT如何做交互原型設計文檔 https://wenku.baidu.com/view/71f4e5e6581b6bd97e19ea08.html
2、交互說明都包括什麽內容
- 字符限制：是否要做限制？多少字出現截斷？截斷後是顯示為省略號還是不顯示？註意中英文不同
- 鏈接具體化：不一定是具體url，但要給出線框圖或demo的鏈接
- 交互細節
- 表單校驗
- 瀏覽器兼容性
參考：手把手教你寫交互設計文檔 http://www.woshipm.com/ucd/3809.html
六、視覺設計規範
一個移動端APP的視覺規範示例範文，內容、結構可供參考
規範實例（APP）http://www.xueui.cn/tutorials/app-tutorials/app-code-examples-with-ui-design-method.html
產品設計流程與文檔規範