一、頁面流程與頁面結構圖
原型設計之前的工作，極大提升產品原型的效率
1.瞭解一下頁面流程圖
a：交互設計/原型設計的底子，基本依據
b：代表用戶的操作過程，先做頁面流程能快速發現體驗問題
c：突出頁面重點元素與邏輯關係，提升原型設計效率
頁面流程圖例子
2.頁面流程圖與信息架構圖的區別
左爲信息架構圖右爲頁面流程圖
a：頁面流程圖，以用戶視角，主要看流程的合理性
b：信息架構圖，以產品視角，主要看包含多少功能點
c：頁面流程圖適合於跳轉比較複雜的產品功能，如電商、社交產品
d：信息架構圖適合於層級分明的，如音樂產品、新聞客戶端、閱讀類產品
3.頁面流程圖包含什麼？
a：四方形：業務流程中四方形部分，異常流程爲tips或者彈層
b：流向：主幹流向和輔助流向
c：重點元素：每個流程中，重點體現和表達的內容是什麼？
4.案例
給產品增加一個優惠碼功能，可以讓運營人員通過向用戶發放優惠碼，用戶在下訂單的時候使用優惠碼，抵相應折扣（金額）的功能
a：迴歸業務流程，明確主線
頁面流程一定來自於業務流程
一般爲業務流程中的方形部分
異常流程一般爲彈層或彈窗
業務流程畫的好，頁面流程就很簡單
如果工作不斷停留在修改原型應反思業務流程是不是沒畫好
b.明確頁面中重點元素
功能在頁面中，有哪些是需要表現元素
增加異常流程的處理邏輯
增加輔助的幫助頁面
考慮下游觸發點
c：溝通和優化
儘可能窮舉涉及的頁面，然後做減法
通過原型草圖，優化調整頁面關鍵元素
與UIUE前端研發等多溝通有更好的效果
二、原型設計
產品原型在產品畫布上的位置
1.什麼是產品原型
a：產品原型，也叫線框圖，是用線條、圖形繪製出的產品框架
b：產品落地的關鍵點，從虛擬概念到用戶接觸的節點
c：產品經理產出的關鍵內容，上傳下達，傳送給UI\UE同事，而且會成爲研發參考的重要材料
2.五大原型設計常用工具
紙+筆
axure + sketch+墨刀
3.好的原型的特點
4.從原型到上線的過程
5.畫低保真原型之前一定要做
a：產品需求沒想明白之前，不要模Axure
b：產品流程沒理清楚之前，不要摸Axure
c：在你沒有手繪草圖之前，不要摸Axure
d：在你沒把草圖和boss過了基本確定前，不要摸Axure
避免花大量時間去修改低保真原型
6.開始原型設計
原型修改時間儘量控制在20%以內，原型修改通常是因爲需求沒封閉
7.原型設計的好習慣
a:一定先手繪
b：真實比例，真實文案
c：不要上顏色，不要上顏色（黑白灰就好）
d：目錄樹清晰，閱讀流暢
e記錄下來
f有修改要重新保存一個文件
g：緊扣需求主題，不橫生枝節
熱門課程是後機器標記的，不要爲了好看自己加
8.基本功要好好練
三、如何寫需求文檔
1.什麼是需求文檔
a：俗稱：MRD、PRD、BRD等，概念不重要
b：效果：說明爲什麼要感，怎麼幹，幹了後有什麼效果
c：內容：明確產品背景、需求、流程、原型、交互等內容
d：需求文檔的閱讀對象：設計、研發、測試
需求文檔有什麼用？
2.用什麼工具寫需求文檔？
a：word：傳統的需求文檔都是word的，如果大的項目，我還是建議用word來寫
b：axure標註：直接用axure中寫標註，小功能，初創團隊的首選，團隊配合融洽，可以用這個
3.高顏值的需求文檔有什麼特點
a：結構：邏輯清晰，層次分明VS沒有標準過程
b：背景：要求背景描述清楚VS一上來講功能和原型
c：流程圖：業務流程、頁面流程均有VS一上來講原型
d：目標：考覈指標、算法清楚VS沒指標 憑感覺
e：變更過程清楚VS改來改去改回第一版
4.需求文檔怎麼寫？
a：項目背景與需求分析
誰提的需求？什麼場景？遇到什麼問題了？
簡要描述分析過程：決策過程和依據是什麼？解決方案是什麼？
有沒有相關的背景數據資料？
明確本次需求：用戶、場景、需求、解決方案是什麼？
b：本次需求的目的及功能列表
這個需求整體是什麼樣子的？是否需要分階段?
本次需求做哪些？前後關係是什麼？
本次需求的功能清單有什麼？
涉及的功能或頁面有什麼？
c：流程與所處的產品模塊關係
業務邏輯圖
業務流程圖
頁面流程圖
d：功能詳細描述
交互設計圖
原型圖
e:簡要的測試用例（可選）
關鍵的用例是什麼？
重點關注點
錯誤提示表等
f：考覈指標
本此需求要統計哪些指標？
怎麼計算的？
怎麼埋點的？（商業產品等）