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