產(chǎn)品方案階段基礎(chǔ)知識(shí)，電商大促攻略頁(yè)設(shè)計(jì)指南

第一部分：產(chǎn)品方案階段基礎(chǔ)知識(shí)

1.1、戰(zhàn)略層—產(chǎn)品目標(biāo)確定和用戶需求收集

不管是要做什么產(chǎn)品，在開(kāi)始之前都要問(wèn)這樣兩個(gè)問(wèn)題：

• 我們要通過(guò)這個(gè)產(chǎn)品得到什么？

• 我們的用戶要通過(guò)這個(gè)產(chǎn)品得到什么？

回答了第一個(gè)問(wèn)題，即確定了產(chǎn)品目標(biāo)；在攻略頁(yè)的設(shè)計(jì)中，通常對(duì)攻略頁(yè)定下的產(chǎn)品目標(biāo)可能有：曝光大促內(nèi)容，預(yù)約回流，為大促會(huì)場(chǎng)/自營(yíng)活動(dòng)/品牌活動(dòng)引流，分享傳播，發(fā)券，成交，品牌識(shí)別等。根據(jù)每次大促的戰(zhàn)略不同，攻略頁(yè)承擔(dān)的產(chǎn)品目標(biāo)也不一樣。在確定具體產(chǎn)品目標(biāo)后，需要對(duì)目標(biāo)優(yōu)先級(jí)進(jìn)行排序，這決定了接下來(lái)的產(chǎn)品具體形態(tài)。

回答了第二個(gè)問(wèn)題，即確定了用戶需求；通常我們會(huì)對(duì)產(chǎn)品將要面對(duì)的人群進(jìn)行分類(lèi)建立用戶畫(huà)像，結(jié)合用戶故事地圖挖掘用戶需求，但攻略頁(yè)這個(gè)小型產(chǎn)品，面向全國(guó)大眾，用戶畫(huà)像這步就可以省略了。

“攻略”這一常見(jiàn)的詞匯在用戶心中已形成一定的認(rèn)知概念，可以用語(yǔ)言準(zhǔn)確的描述為：在活動(dòng)中向用戶傳達(dá)活動(dòng)信息，幫助用戶更好的參與活動(dòng)并達(dá)到參與目的的指南性說(shuō)明。所以，曝光促銷(xiāo)信息，在頁(yè)面上給用戶提供參與活動(dòng)的入口（參與方式），告訴用戶怎么買(mǎi)最劃算（省錢(qián)指導(dǎo)），即為本次產(chǎn)品的用戶需求。

即使是攻略頁(yè)這樣的小型產(chǎn)品，在戰(zhàn)略層階段，也是需要各利益相關(guān)者共同得出的，當(dāng)然最終的目標(biāo)還是需要本次的產(chǎn)品決策者來(lái)確定，那個(gè)人應(yīng)該是本次促銷(xiāo)活動(dòng)整體的大PM，或者你的直屬領(lǐng)導(dǎo)。

可以把產(chǎn)品目標(biāo)和用戶需求提煉為關(guān)鍵詞，整合在一張雷達(dá)圖上。這個(gè)提煉過(guò)程可以幫助設(shè)計(jì)者更好的整合需求，避免需求重復(fù)或需求邊界模糊的情況。根據(jù)每個(gè)目標(biāo)的重要性進(jìn)行節(jié)點(diǎn)標(biāo)記，這樣可以直觀清晰的看出本次攻略頁(yè)戰(zhàn)略目標(biāo)的數(shù)量和每個(gè)目標(biāo)的優(yōu)先級(jí)。

你可以自由控制這張雷達(dá)圖的節(jié)點(diǎn)數(shù)量和網(wǎng)格層數(shù)。保證你的關(guān)鍵詞都是易懂的，如果簡(jiǎn)短的關(guān)鍵詞一眼看去不能明其要旨，就需要對(duì)關(guān)鍵詞進(jìn)行備注性解釋?zhuān)吘惯@張圖是為了幫助我們快速的整理需求，準(zhǔn)確的溝通需求。

你所確定的每一個(gè)戰(zhàn)略目標(biāo)，都應(yīng)該有一個(gè)驗(yàn)收標(biāo)準(zhǔn)；有些直接體現(xiàn)為業(yè)務(wù)KPI，比如預(yù)約占比達(dá)到50%，引流占比5%，發(fā)券率100%，流量擴(kuò)散倍數(shù)1.1等。

有些目標(biāo)貌似沒(méi)那么容易檢測(cè)數(shù)據(jù)，可以通過(guò)用戶調(diào)查來(lái)實(shí)現(xiàn)，比如曝光大促信息這條目標(biāo)，可以問(wèn)用戶，看完這個(gè)攻略你知道怎么買(mǎi)更省錢(qián)了么？本次展示的信息看完記大概記住了百分之多少？對(duì)應(yīng)的促銷(xiāo)信息知道去哪兒找怎么參與了么？如果沒(méi)有資源進(jìn)行專(zhuān)業(yè)的用戶調(diào)研，也可以問(wèn)問(wèn)周?chē)耐卵?！這時(shí)確定的驗(yàn)收標(biāo)準(zhǔn)，也有助于在可用性測(cè)試階段設(shè)計(jì)測(cè)試問(wèn)題。

1.2、范圍層—產(chǎn)品功能確定和內(nèi)容網(wǎng)羅

當(dāng)你把用戶需求和產(chǎn)品目標(biāo)轉(zhuǎn)變成產(chǎn)品應(yīng)該提供給用戶什么樣的內(nèi)容和功能時(shí)，戰(zhàn)略就變成了范圍。 —–《用戶體驗(yàn)要素》Jesse James Garrett

根據(jù)上一步我們確定的戰(zhàn)略目標(biāo)，可以提煉出具體的產(chǎn)品功能，比如：本次發(fā)券，以抽獎(jiǎng)的方式實(shí)現(xiàn)，用戶首次抽獎(jiǎng)必中。這時(shí)的功能描述沒(méi)必要具體到產(chǎn)品使用場(chǎng)景上，因?yàn)槟鞘窍乱粋€(gè)層級(jí)，結(jié)構(gòu)層—交互設(shè)計(jì)的工作，當(dāng)然你也可以先想好幾個(gè)備選的表現(xiàn)模型和產(chǎn)品使用場(chǎng)景。這里功能的確定主要用于執(zhí)行開(kāi)發(fā)調(diào)研和與交互設(shè)計(jì)師進(jìn)行溝通。

通常在攻略頁(yè)的設(shè)計(jì)中，我們能確定產(chǎn)品需要的功能有：

1. 直接跳轉(zhuǎn)：當(dāng)某子活動(dòng)正在進(jìn)行中，或某件商品正在參與活動(dòng)，需要給一個(gè)入口直接引流到對(duì)應(yīng)活動(dòng)頁(yè)或商品詳情頁(yè)；

2. 預(yù)約提醒：當(dāng)某子活動(dòng)即將開(kāi)始，或某件商品即將參與活動(dòng)，需要給一個(gè)預(yù)約按鈕，以便于用戶得到活動(dòng)提醒，這時(shí)就需要考慮用戶收到消息的方式，可以是短信告知（需獲取用戶手機(jī)號(hào)），app發(fā)送系統(tǒng)消息（需提示開(kāi)啟通知權(quán)限），調(diào)用系統(tǒng)日歷提醒（獲取系統(tǒng)日歷權(quán)限），微信公眾號(hào)提醒（需引導(dǎo)關(guān)注大賬號(hào)）等；

3. 一鍵預(yù)約：是否需要提供一鍵預(yù)約所有優(yōu)惠功能；這個(gè)功能需要慎重考慮，需要考慮各子活動(dòng)的開(kāi)始時(shí)間，若全部提醒會(huì)過(guò)度打擾用戶，就會(huì)面臨取消關(guān)注，關(guān)閉通知權(quán)限，拉黑等不良后果。

4. 抽獎(jiǎng)：發(fā)券的形式通常是用戶抽獎(jiǎng)得券，引導(dǎo)用戶分享的機(jī)制通常是獲得抽獎(jiǎng)機(jī)會(huì)，就需確定抽獎(jiǎng)形式，進(jìn)行獎(jiǎng)池搭建和風(fēng)險(xiǎn)控制等

以上四點(diǎn)功能中，跳轉(zhuǎn)和預(yù)約可以說(shuō)是每個(gè)攻略頁(yè)的必備功能，其它功能需視本次攻略的產(chǎn)品目的而添加，因每次產(chǎn)品的目的不甚相同，還可能有其它更多的功能，視情況而定即可。

內(nèi)容方面，需要收集本次大促會(huì)場(chǎng)的數(shù)量，各個(gè)會(huì)場(chǎng)各自的促銷(xiāo)時(shí)間節(jié)奏和優(yōu)惠利益點(diǎn)；各個(gè)營(yíng)銷(xiāo)活動(dòng)的時(shí)間節(jié)奏，獎(jiǎng)品和玩法。通常在攻略頁(yè)的設(shè)計(jì)階段，我們并不能收集到特別詳細(xì)的信息，只能確定一級(jí)活動(dòng)的開(kāi)始時(shí)間和最給力利益點(diǎn)，有時(shí)這種信息也收集不到，這就需要我們選擇普適性較高的表現(xiàn)模型，能容納的下任何類(lèi)型的信息設(shè)計(jì)。

1.3、結(jié)構(gòu)層-交互設(shè)計(jì)和信息架構(gòu)

交互設(shè)計(jì)關(guān)注于描述“可能的用戶行為”，同時(shí)定義“系統(tǒng)如何配合與響應(yīng)”這些用戶行為；

信息架構(gòu)主要的工作是設(shè)計(jì)組織分類(lèi)和導(dǎo)航結(jié)構(gòu)。

讓用戶獲得良好的行為引導(dǎo)和操作反饋，并高效的瀏覽內(nèi)容是進(jìn)行交互設(shè)計(jì)和信息架構(gòu)的目的。范圍層階段我們提煉出了跳轉(zhuǎn)，預(yù)約提醒，一鍵預(yù)約，抽獎(jiǎng)四個(gè)功能和一個(gè)信息文檔；在結(jié)構(gòu)層我們對(duì)功能進(jìn)行場(chǎng)景化描述，對(duì)信息進(jìn)行組織分類(lèi)，確定信息節(jié)點(diǎn)和結(jié)構(gòu)方法，并選擇合適的表現(xiàn)模型。

用戶對(duì)于交互組件將怎樣工作的觀點(diǎn)稱(chēng)為概念模型（也稱(chēng)心里模型），設(shè)計(jì)者將功能展現(xiàn)給用戶的方式稱(chēng)為表現(xiàn)模型，表現(xiàn)模型越接近于用戶心理模型，用戶就會(huì)感覺(jué)到產(chǎn)品容易使用和理解。在設(shè)計(jì)攻略頁(yè)時(shí)，首先要設(shè)計(jì)個(gè)整體的表現(xiàn)模型，比如“攻略播報(bào)電臺(tái)”，“內(nèi)部泄密文件表格”，“新年醒獅送攻略”等會(huì)形成具體認(rèn)知概念的模型，也可以不選擇任何具象的趣味概念，直接以抽象的表現(xiàn)形式承載。但要注意，你選擇的具象概念，不論是從視覺(jué)上還是從文字語(yǔ)義上，都要符合用戶的原有認(rèn)知。

舉個(gè)例子，我們?cè)?jīng)有過(guò)一個(gè)“攻略售貨機(jī)”的表現(xiàn)方案，這個(gè)表現(xiàn)模型就存在認(rèn)知沖突：用戶對(duì)售貨機(jī)的認(rèn)知是，一個(gè)販賣(mài)多種商品的機(jī)器，以此為表現(xiàn)模型，用戶會(huì)疑惑“攻略售貨機(jī)”是什么，賣(mài)攻略的么？機(jī)器里會(huì)賣(mài)很多攻略么？我要買(mǎi)攻略要什么成本么？……等等造成用戶困惑的，對(duì)產(chǎn)品沒(méi)有幫助的疑惑。同時(shí)“售貨機(jī)”這個(gè)概念也限制住了視覺(jué)樣式，要形成售貨機(jī)的概念，視覺(jué)元素就脫離不開(kāi)售貨機(jī)本身；即使是選取關(guān)鍵視覺(jué)元素進(jìn)行抽象表達(dá)，也不能形成很好的認(rèn)知概念。

功能和信息可以細(xì)化成類(lèi)似以下的描述：

1. 當(dāng)用戶瀏覽到正在進(jìn)行的賣(mài)場(chǎng)或活動(dòng)時(shí)，可直接點(diǎn)擊進(jìn)入相應(yīng)頁(yè)面

2. 當(dāng)用戶瀏覽到即將進(jìn)行的賣(mài)場(chǎng)或活動(dòng)時(shí)，可進(jìn)行預(yù)約，通過(guò)微信公眾號(hào)獲得提醒消息，未關(guān)注大賬號(hào)的用戶先引導(dǎo)其關(guān)注大賬號(hào)

3. 正在進(jìn)行的活動(dòng)總是優(yōu)先展示，其次展示即將進(jìn)行的活動(dòng)，再次展示已過(guò)期的活動(dòng)

4. 一鍵預(yù)約所有活動(dòng)這一功能經(jīng)評(píng)估，會(huì)對(duì)用戶造成過(guò)度打擾且開(kāi)發(fā)成本較大，不做此功能

5. 抽獎(jiǎng)的形式確定為彩蛋紅包，用戶首次進(jìn)入頁(yè)面并停留4s后出現(xiàn)動(dòng)效紅包引導(dǎo)點(diǎn)擊，首次點(diǎn)擊必中優(yōu)惠券，在反饋彈框上提示用戶分享可獲得現(xiàn)金紅包引導(dǎo)分享。

6. 促銷(xiāo)信息分兩個(gè)頁(yè)面展示，主頁(yè)面展示趣味版，以主題進(jìn)行一級(jí)劃分，以品類(lèi)進(jìn)行二級(jí)劃分，以時(shí)間進(jìn)行三級(jí)劃分，不設(shè)利益維度劃分；簡(jiǎn)單版以時(shí)間維度和活動(dòng)維度進(jìn)行劃分。兩個(gè)頁(yè)面分別設(shè)置互跳按鈕，趣味版頁(yè)內(nèi)設(shè)計(jì)主題導(dǎo)航。

一些比較抽象的描述可以配合原型圖來(lái)展示，一切都是為了方便溝通的快速表達(dá)?；谶@樣的描述和確定好的表現(xiàn)模型，我們就可以進(jìn)入框架層階段了。

1.4、框架層—界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì)

界面設(shè)計(jì)涵蓋的范圍比較大，包括基礎(chǔ)交互組件的運(yùn)用，創(chuàng)新交互樣式的呈現(xiàn)，抽象信息的視覺(jué)符號(hào)化表現(xiàn)，信息呈現(xiàn)，和整體界面排版等；

導(dǎo)航設(shè)計(jì)是指引導(dǎo)用戶在各種信息節(jié)點(diǎn)之間穿梭的方式，并告知用戶在信息架構(gòu)中的位置，最終會(huì)落實(shí)為界面元素；

信息設(shè)計(jì)包括信息分類(lèi)和可視化設(shè)計(jì)，可視化設(shè)計(jì)最終也會(huì)落實(shí)為界面元素。

筆者沿用了《用戶體驗(yàn)要素》中的分類(lèi)方法，但對(duì)界面設(shè)計(jì)和信息設(shè)計(jì)的定義進(jìn)行了小幅改動(dòng)，可能這樣的定義劃分不是最準(zhǔn)確，但保證了各個(gè)概念之間沒(méi)有交叉，方便分析和處理問(wèn)題。

攻略頁(yè)中，涉及到的功能性交互組件很少，通常使用按鈕、彈框，反饋toast。導(dǎo)航樣式通常是頁(yè)內(nèi)錨點(diǎn)導(dǎo)航；如果攻略頁(yè)本身包含多個(gè)頁(yè)面，也需要頁(yè)面間導(dǎo)航。促銷(xiāo)信息通常以時(shí)間列表，日歷圖表，品類(lèi)列表為基礎(chǔ)樣式進(jìn)行展示。

1.5、表現(xiàn)層—感知設(shè)計(jì)

表現(xiàn)層是用戶會(huì)首先注意到的地方，這里，內(nèi)容，功能和美學(xué)匯集到一起，完成其他四個(gè)層面的所有目標(biāo)，并同時(shí)滿足用戶的感官感受。攻略頁(yè)的表現(xiàn)層涉及到視覺(jué)感受和聽(tīng)覺(jué)感受兩個(gè)部分。因?yàn)槭谴蟠僬麄€(gè)產(chǎn)品的子產(chǎn)品，在表現(xiàn)層設(shè)計(jì)時(shí)需確定攻略頁(yè)的感知設(shè)計(jì)是否要遵循大促整體感知規(guī)范，如果遵循，要遵循到什么程度，攻略本身的可設(shè)計(jì)空間有多大。

工業(yè)設(shè)計(jì)界有個(gè)新的學(xué)科被稱(chēng)為“感性工學(xué)”，致力于研究人的感受與具體產(chǎn)品形態(tài)的對(duì)應(yīng)，產(chǎn)品的視覺(jué)，觸覺(jué)，聽(tīng)覺(jué)，嗅覺(jué)，味覺(jué)都可以通過(guò)感覺(jué)形容詞進(jìn)行描述，并落實(shí)到具體的產(chǎn)品形態(tài)上。攻略頁(yè)表現(xiàn)層設(shè)計(jì)時(shí)，也可以用這種方法。我們收集視覺(jué)資料，確定預(yù)期的感覺(jué)形容詞，比如年輕活力、熱鬧，復(fù)古，現(xiàn)代，未來(lái)科技感等等，在與視覺(jué)設(shè)計(jì)師溝通時(shí)，最好給形容詞配上具體的圖片，保證大家對(duì)形容詞的認(rèn)知理解在同一層面上。動(dòng)效設(shè)計(jì)也同樣，Q彈可愛(ài)、炫酷閃耀、平緩柔和等形容詞都可以幫助你與視覺(jué)設(shè)計(jì)師溝通你想要的效果。

以上五個(gè)步驟并不是循序依次進(jìn)行的，實(shí)際工作中經(jīng)常會(huì)遇到反復(fù)的情況。比如進(jìn)行到交互設(shè)計(jì)階段發(fā)現(xiàn)需要加一個(gè)新功能才能實(shí)現(xiàn)產(chǎn)品目標(biāo)，這時(shí)就要對(duì)范圍層進(jìn)行修改，并重新進(jìn)行功能開(kāi)發(fā)調(diào)研。為設(shè)計(jì)出好的產(chǎn)品這種情況不可避免，好的方法是，讓每一個(gè)層面的工作在下一個(gè)層面可以結(jié)束之前完成即可。

對(duì)應(yīng)的，我們每個(gè)階段輸出的文檔，都可能要面臨很多次修改，每次修改都需要周知流程各相關(guān)人員以保證大家對(duì)產(chǎn)品進(jìn)程理解一致。

以上五個(gè)步驟完成之后，產(chǎn)品方案階段就完成了。運(yùn)營(yíng)同學(xué)根據(jù)交互稿編寫(xiě)《開(kāi)發(fā)需求文檔》 和《數(shù)據(jù)需求文檔》 ，前端同學(xué)根據(jù)視覺(jué)稿進(jìn)行前端設(shè)計(jì)。作為攻略頁(yè)負(fù)責(zé)人，運(yùn)營(yíng)同學(xué)還需要考慮的就是攻略頁(yè)的入口資源。

攻略頁(yè)作為大促整體產(chǎn)品的一個(gè)信息節(jié)點(diǎn)，其入口也是大促整體的一個(gè)界面元素，具體如何設(shè)計(jì)，那是大促整體產(chǎn)品設(shè)計(jì)的范疇了。攻略頁(yè)也可以作為一個(gè)完整的產(chǎn)品進(jìn)行單獨(dú)資源投放，如果你在今日頭條看到一條咨詢，標(biāo)題為《京東雙11大促省錢(qián)攻略》 ，也是很合理的事情。