工作中，我們常常拿到需求，然后就去找競(jìng)品抄一個(gè)，或者直接把競(jìng)品拿來(lái)當(dāng)需求。尤其對(duì)于新手來(lái)說(shuō)，不看競(jìng)品完全不知道如何去畫(huà)這個(gè)原型圖。需求是可以完全通過(guò)一些方法轉(zhuǎn)換成一個(gè)合理的原型的。本文針對(duì)一個(gè)APP的活動(dòng)頁(yè)帶大家一步一步的輸出一份合理的原型圖。

分析頁(yè)面元素

頁(yè)面=元素+元素+元素++++

頁(yè)面的每個(gè)信息都有他存在的意義。不是隨便放上來(lái)就是對(duì)的，更不是隨便抄幾個(gè)產(chǎn)品就是好的。我們要清晰分析每一個(gè)元素，才能更合理的產(chǎn)出原型圖。

頁(yè)面元素的形成由來(lái)

那么我們?cè)趺磥?lái)確定一個(gè)頁(yè)面到底要有哪些元素呢？

需求整理，頁(yè)面目標(biāo)

首先我們會(huì)接到一個(gè)需求，（一款針對(duì)中年人以中醫(yī)養(yǎng)生為主的知識(shí)付費(fèi)類(lèi)APP）比如一個(gè)邀請(qǐng)有禮的活動(dòng)。

假設(shè)當(dāng)我們收到這樣一個(gè)需求文檔時(shí)：

根據(jù)基本需求、我們可以知道這是一個(gè)邀請(qǐng)有禮的活動(dòng)，我們這里以活動(dòng)主頁(yè)為例子展開(kāi)分析。

轉(zhuǎn)換需求

1.?梳理下架構(gòu)圖

架構(gòu)圖有助于我們整理思路，清晰功能點(diǎn)。

2. 確立頁(yè)面目的

梳理好架構(gòu)圖后，我們需要明確頁(yè)面的目的，根據(jù)一些競(jìng)品+經(jīng)驗(yàn)+與產(chǎn)品/老板/業(yè)務(wù)溝通確認(rèn)。

我們可以確立首頁(yè)的目的：介紹活動(dòng)，刺激、促使用戶(hù)，參與活動(dòng)，獲得獎(jiǎng)勵(lì)。

3.?分解需要元素并重組

有了目的，我們不難推導(dǎo)出一些相關(guān)聯(lián)的元素（當(dāng)然元素不是一次性就定下來(lái)的，在原型反復(fù)調(diào)整中也會(huì)修改）。

• 介紹活動(dòng)：活動(dòng)標(biāo)題、副標(biāo)題、活動(dòng)時(shí)間、活動(dòng)規(guī)則等
• 刺激用戶(hù)：活動(dòng)獎(jiǎng)品、提取活動(dòng)價(jià)值、突出送免費(fèi)課程等
• 參與活動(dòng)：參與按鈕
• 獲得獎(jiǎng)勵(lì)：獎(jiǎng)勵(lì)入口/列表

同時(shí)我們對(duì)內(nèi)容進(jìn)行優(yōu)先級(jí)的判端。優(yōu)先級(jí)的判斷可以結(jié)合：用戶(hù)需求、業(yè)務(wù)需求、商業(yè)目的，可以用十字交叉法。

我們可以梳理頁(yè)面內(nèi)容如下：（數(shù)字表示優(yōu)先級(jí)）

4. 細(xì)化頁(yè)面元素

根據(jù)上面的整理更加細(xì)化整合一些信息：

• 基本元素：返回按鈕、邀請(qǐng)按鈕；
• 活動(dòng)信息：主標(biāo)題、副標(biāo)題、活動(dòng)時(shí)間、活動(dòng)規(guī)則、刺激獎(jiǎng)勵(lì)說(shuō)明（促使參與）；
• 邀請(qǐng)獎(jiǎng)勵(lì)：當(dāng)前邀請(qǐng)數(shù)、邀請(qǐng)獎(jiǎng)勵(lì)、獎(jiǎng)勵(lì)圖片、獎(jiǎng)勵(lì)名稱(chēng)、獎(jiǎng)勵(lì)領(lǐng)取狀態(tài)；
• 排行榜：用戶(hù)當(dāng)前排行（可增加鼓勵(lì)文案）、頭像、匿名昵稱(chēng)、排行榜邀請(qǐng)數(shù)量、排行榜獎(jiǎng)品：圖片、名稱(chēng)。

畫(huà)原型

1. 參考參考競(jìng)品

找一些邀請(qǐng)有禮的競(jìng)品參考下，比如：

同時(shí)我們還找出共同點(diǎn)：見(jiàn)面簡(jiǎn)單，操作簡(jiǎn)單單一。

通過(guò)競(jìng)品，我們可以分析出?；顒?dòng)利益要突出，用戶(hù)完成任務(wù)核心的方式要簡(jiǎn)單，易操作一步到位。

然后我們以具體內(nèi)容展出來(lái)，每個(gè)區(qū)塊的內(nèi)容也要區(qū)分主次的依據(jù)。

當(dāng)然每個(gè)內(nèi)容的布局方式是多樣的，我們拿邀請(qǐng)有禮這里舉例：

這時(shí)候我們需要和業(yè)務(wù)運(yùn)營(yíng)等對(duì)頁(yè)面進(jìn)行溝通，或找些人員進(jìn)行簡(jiǎn)單的可用性測(cè)試；經(jīng)過(guò)溝通，與測(cè)試驗(yàn)證，我們對(duì)頁(yè)面進(jìn)行了相應(yīng)的修改和增加。

當(dāng)然很多人會(huì)說(shuō)，每個(gè)布局會(huì)有很多種展現(xiàn)形式。這個(gè)我們不需要去重點(diǎn)考慮，我們主要把每處的重點(diǎn)、次要點(diǎn)，表現(xiàn)清楚就好。

現(xiàn)在這個(gè)原型看著是有模有樣了，但是這樣就完了嗎？

不其實(shí)并沒(méi)有，我們還需考慮一些情況，如下：

以上綜合考慮，我們已經(jīng)一步一步的將一個(gè)原型頁(yè)面畫(huà)的即合理又美觀了。

當(dāng)然原型出來(lái)了，可以?xún)?nèi)部測(cè)試驗(yàn)證，看有沒(méi)有需要改進(jìn)的細(xì)節(jié)地方。沒(méi)問(wèn)題了，還需要上線驗(yàn)證，實(shí)時(shí)監(jiān)測(cè)、收集用戶(hù)反饋，吸取經(jīng)驗(yàn)，迭代優(yōu)化。

補(bǔ)充說(shuō)明：如果，排名獎(jiǎng)勵(lì)和邀請(qǐng)獎(jiǎng)勵(lì)優(yōu)先級(jí)一樣高，該怎么辦？如下：

最后很多人會(huì)問(wèn)：我只會(huì)抄別人的，沒(méi)有想法怎么辦？

答：

1. 對(duì)應(yīng)新人來(lái)說(shuō)，抄了沒(méi)問(wèn)題，抄了之后去想為什么這樣做。
2. ?多看、多用、多想，想法少是主要是因?yàn)闆](méi)見(jiàn)過(guò)、沒(méi)用過(guò)、沒(méi)想過(guò)。這是個(gè)慢慢積累的過(guò)程。

小結(jié)

大致流程如下：

1. 梳理需求、分析需求
2. 確立頁(yè)面目的
3. 分解元素排列優(yōu)先級(jí)
4. 參考競(jìng)品及梳理內(nèi)容畫(huà)初稿
5. 溝通細(xì)化原型
6. 多維度考慮確認(rèn)原型
7. 測(cè)試驗(yàn)證上線
8. 收集反饋迭代優(yōu)化

作者：Booze-kai（包子凱），一個(gè)來(lái)自草原的野生交互設(shè)計(jì)師，原華為CCO交互設(shè)計(jì)師，從事過(guò)吉利汽車(chē)，中廣核的相關(guān)設(shè)計(jì)工作

本文由 @Booze-kai 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。