工作中，我們常常拿到需求，然後就去找競品抄一個，或者直接把競品拿來當需求。尤其對於新手來說，不看競品完全不知道如何去畫這個原型圖。需求是可以完全通過一些方法轉換成一個合理的原型的。本文針對一個APP的活動頁帶大家一步一步的輸出一份合理的原型圖。
分析頁面元素
頁面=元素+元素+元素++++
頁面的每個信息都有他存在的意義。不是隨便放上來就是對的，更不是隨便抄幾個產品就是好的。我們要清晰分析每一個元素，才能更合理的產出原型圖。
頁面元素的形成由來
那麼我們怎麼來確定一個頁面到底要有哪些元素呢？
需求整理，頁面目標
首先我們會接到一個需求，（一款針對中年人以中醫養生為主的知識付費類APP）比如一個邀請有禮的活動。
假設當我們收到這樣一個需求文檔時：
根據基本需求、我們可以知道這是一個邀請有禮的活動，我們這裡以活動主頁為例子展開分析。
轉換需求
1. 梳理下架構圖
架構圖有助於我們整理思路，清晰功能點。
2. 確立頁面目的
梳理好架構圖後，我們需要明確頁面的目的，根據一些競品+經驗+與產品/老闆/業務溝通確認。
我們可以確立首頁的目的：介紹活動，刺激、促使用戶，參與活動，獲得獎勵。
3. 分解需要元素並重組
有了目的，我們不難推導出一些相關聯的元素（當然元素不是一次性就定下來的，在原型反覆調整中也會修改）。
- 介紹活動：活動標題、副標題、活動時間、活動規則等
- 刺激用戶：活動獎品、提取活動價值、突出送免費課程等
- 參與活動：參與按鈕
- 獲得獎勵：獎勵入口/列表
同時我們對內容進行優先級的判端。優先級的判斷可以結合：用戶需求、業務需求、商業目的，可以用十字交叉法。
我們可以梳理頁面內容如下：（數字表示優先級）
4. 細化頁面元素
根據上面的整理更加細化整合一些信息：
- 基本元素：返回按鈕、邀請按鈕；
- 活動信息：主標題、副標題、活動時間、活動規則、刺激獎勵說明（促使參與）；
- 邀請獎勵：當前邀請數、邀請獎勵、獎勵圖片、獎勵名稱、獎勵領取狀態；
- 排行榜：用戶當前排行（可增加鼓勵文案）、頭像、匿名暱稱、排行榜邀請數量、排行榜獎品：圖片、名稱。
畫原型
1. 參考參考競品
找一些邀請有禮的競品參考下，比如：
同時我們還找出共同點：見面簡單，操作簡單單一。
通過競品，我們可以分析出。活動利益要突出，用戶完成任務核心的方式要簡單，易操作一步到位。
然後我們以具體內容展出來，每個區塊的內容也要區分主次的依據。
當然每個內容的佈局方式是多樣的，我們拿邀請有禮這裡舉例：
這時候我們需要和業務運營等對頁面進行溝通，或找些人員進行簡單的可用性測試；經過溝通，與測試驗證，我們對頁面進行了相應的修改和增加。
當然很多人會說，每個佈局會有很多種展現形式。這個我們不需要去重點考慮，我們主要把每處的重點、次要點，表現清楚就好。
現在這個原型看著是有模有樣了，但是這樣就完了嗎？
不其實並沒有，我們還需考慮一些情況，如下：
以上綜合考慮，我們已經一步一步的將一個原型頁面畫的即合理又美觀了。
當然原型出來了，可以內部測試驗證，看有沒有需要改進的細節地方。沒問題了，還需要上線驗證，實時監測、收集用戶反饋，吸取經驗，迭代優化。
補充說明：如果，排名獎勵和邀請獎勵優先級一樣高，該怎麼辦？如下：
最後很多人會問：我只會抄別人的，沒有想法怎麼辦？
答：
- 對應新人來說，抄了沒問題，抄了之後去想為什麼這樣做。
- 多看、多用、多想，想法少是主要是因為沒見過、沒用過、沒想過。這是個慢慢積累的過程。
小結
大致流程如下：
- 梳理需求、分析需求
- 確立頁面目的
- 分解元素排列優先級
- 參考競品及梳理內容畫初稿
- 溝通細化原型
- 多維度考慮確認原型
- 測試驗證上線
- 收集反饋迭代優化
作者：Booze-kai（包子凱），一個來自草原的野生交互設計師，原華為CCO交互設計師，從事過吉利汽車，中廣核的相關設計工作
本文由 @Booze-kai 原創發佈於人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基於CC0協議。
