通常我們看到的旅游攻略,，游戲攻略等都是以文章資訊的形式呈現(xiàn),，只可閱讀不可交互。而電商大促活動(dòng)中的攻略頁(yè),，可不僅僅是一篇資訊文章那么簡(jiǎn)單,，除了要向用戶傳達(dá)促銷信息，往往承載著引流,，預(yù)約,，發(fā)券，傳播等營(yíng)銷目,，同時(shí)存在很多交互操作,。所以電商攻略頁(yè)可被視為一個(gè)獨(dú)立的小型產(chǎn)品，在設(shè)計(jì)這樣的產(chǎn)品時(shí),，有什么設(shè)計(jì)方法可尋呢,？本文內(nèi)容即為筆者在多次大促攻略頁(yè)設(shè)計(jì)經(jīng)驗(yàn)中總結(jié)出來(lái)的一套方法，希望能對(duì)要設(shè)計(jì)促銷攻略頁(yè)的運(yùn)營(yíng)同學(xué)和交互同學(xué)有所幫助,。

文章將從產(chǎn)品方案階段基礎(chǔ)知識(shí),，設(shè)計(jì)案例講解，表現(xiàn)模型的可用性評(píng)價(jià)三個(gè)主要部分對(duì)攻略頁(yè)設(shè)計(jì)進(jìn)行講解,。先看一張圖,，希望大家能在頭腦中能對(duì)攻略設(shè)計(jì)的方法形成一個(gè)大概的印象。

第一部分：產(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)行分類建立用戶畫像，結(jié)合用戶故事地圖挖掘用戶需求,，但攻略頁(yè)這個(gè)小型產(chǎn)品,，面向全國(guó)大眾，用戶畫像這步就可以省略了,。 “攻略”這一常見(jiàn)的詞匯在用戶心中已形成一定的認(rèn)知概念,，可以用語(yǔ)言準(zhǔn)確的描述為：在活動(dòng)中向用戶傳達(dá)活動(dòng)信息，幫助用戶更好的參與活動(dòng)并達(dá)到參與目的的指南性說(shuō)明,。所以,，曝光促銷信息，在頁(yè)面上給用戶提供參與活動(dòng)的入口（參與方式）,，告訴用戶怎么買最劃算（省錢指導(dǎo)）,，即為本次產(chǎn)品的用戶需求。

即使是攻略頁(yè)這樣的小型產(chǎn)品,，在戰(zhàn)略層階段，也是需要各利益相關(guān)者共同得出的,，當(dāng)然最終的目標(biāo)還是需要本次的產(chǎn)品決策者來(lái)確定,，那個(gè)人應(yīng)該是本次促銷活動(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)行備注性解釋,，畢竟這張圖是為了幫助我們快速的整理需求,，準(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è)攻略你知道怎么買更省錢了么？本次展示的信息看完記大概記住了百分之多少,？對(duì)應(yīng)的促銷信息知道去哪兒找怎么參與了么,？如果沒(méi)有資源進(jìn)行專業(yè)的用戶調(diào)研，也可以問(wèn)問(wèn)周圍的同事呀,！這時(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)各自的促銷時(shí)間節(jié)奏和優(yōu)惠利益點(diǎn),；各個(gè)營(yíng)銷活動(dòng)的時(shí)間節(jié)奏，獎(jiǎng)品和玩法,。通常在攻略頁(yè)的設(shè)計(jì)階段,，我們并不能收集到特別詳細(xì)的信息，只能確定一級(jí)活動(dòng)的開(kāi)始時(shí)間和最給力利益點(diǎn),，有時(shí)這種信息也收集不到,，這就需要我們選擇普適性較高的表現(xiàn)模型,，能容納的下任何類型的信息設(shè)計(jì),。

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

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

信息架構(gòu)主要的工作是設(shè)計(jì)組織分類和導(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)行組織分類,，確定信息節(jié)點(diǎn)和結(jié)構(gòu)方法,，并選擇合適的表現(xiàn)模型。

用戶對(duì)于交互組件將怎樣工作的觀點(diǎn)稱為概念模型（也稱心里模型）,，設(shè)計(jì)者將功能展現(xiàn)給用戶的方式稱為表現(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è)販賣多種商品的機(jī)器,，以此為表現(xiàn)模型,，用戶會(huì)疑惑“攻略售貨機(jī)”是什么，賣攻略的么,？機(jī)器里會(huì)賣很多攻略么,？我要買攻略要什么成本么？……等等造成用戶困惑的,，對(duì)產(chǎn)品沒(méi)有幫助的疑惑,。同時(shí)“售貨機(jī)”這個(gè)概念也限制住了視覺(jué)樣式，要形成售貨機(jī)的概念，視覺(jué)元素就脫離不開(kāi)售貨機(jī)本身,；即使是選取關(guān)鍵視覺(jué)元素進(jìn)行抽象表達(dá),，也不能形成很好的認(rèn)知概念。

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

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

2.當(dāng)用戶瀏覽到即將進(jìn)行的賣場(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.促銷信息分兩個(gè)頁(yè)面展示,，主頁(yè)面展示趣味版,，以主題進(jìn)行一級(jí)劃分，以品類進(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ì)包括信息分類和可視化設(shè)計(jì),，可視化設(shè)計(jì)最終也會(huì)落實(shí)為界面元素。

筆者沿用了《用戶體驗(yàn)要素》中的分類方法,，但對(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)航,。促銷信息通常以時(shí)間列表,，日歷圖表，品類列表為基礎(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é)科被稱為“感性工學(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ù)交互稿編寫《開(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大促省錢攻略》 ,，也是很合理的事情,。

第二部分：設(shè)計(jì)案例講解

下面我來(lái)講述一下京東微信購(gòu)物入口2017年雙11攻略頁(yè)的設(shè)計(jì)過(guò)程，讓大家能更好的理解攻略頁(yè)設(shè)計(jì)的方法,。

2.1,、戰(zhàn)略關(guān)鍵詞以及驗(yàn)收標(biāo)準(zhǔn)建立

除了攻略常有的基本戰(zhàn)略目標(biāo)外，加入了形式創(chuàng)新為主要目的之一,。因能提前收集到的促銷信息都為一級(jí)活動(dòng)的促銷概況，無(wú)法定制具體的省錢計(jì)劃,，所以把省錢計(jì)劃從目標(biāo)中去掉,，只曝光促銷節(jié)奏和最給力利益點(diǎn)，讓用戶自行設(shè)計(jì)購(gòu)物方案即可,。

2.2,、確定功能和部分交互形式，收集促銷信息

因本次攻略設(shè)計(jì)以形式創(chuàng)新為主要目標(biāo),，所以在范圍層階段就對(duì)表現(xiàn)模型進(jìn)行了確定,；功能比較少，也比較簡(jiǎn)單,，所以直接對(duì)功能進(jìn)行交互細(xì)化,。表現(xiàn)模型為攻略電臺(tái)，采用短視頻配合口播的形式播報(bào)促銷信息,，并配合簡(jiǎn)版時(shí)間軸列表,。對(duì)促銷信息進(jìn)行主題包裝，每個(gè)主題一個(gè)短視頻,。這一步,，我們將范圍層和結(jié)構(gòu)層內(nèi)容結(jié)合成一個(gè)文檔輸出。

2.3,、畫交互：

1)初步整理：本次設(shè)計(jì)需要有【loading頁(yè)】【教導(dǎo)頁(yè)】【主頁(yè)】【簡(jiǎn)版攻略頁(yè)】4個(gè)主要頁(yè)面,，和各種操作反饋彈窗。

2)確定每個(gè)頁(yè)面中主要信息的優(yōu)先級(jí)：【loading頁(yè)】趣味動(dòng)畫>引導(dǎo)打開(kāi)聲音,；【教導(dǎo)頁(yè)】提示用戶可滑動(dòng)切換頻道,；【主頁(yè)】信息優(yōu)先級(jí)為視頻區(qū)>主標(biāo)題>頻道主標(biāo)題>頻道副標(biāo)題>簡(jiǎn)版攻略>彩蛋紅包；【簡(jiǎn)版攻略】信息優(yōu)先級(jí)為進(jìn)入主推>SNS坑位>主會(huì)場(chǎng)引流>時(shí)間軸

3)觀察全平臺(tái)界面設(shè)計(jì)：保證攻略頁(yè)與全平臺(tái)操作體驗(yàn)一致,。

4)邊畫交互稿邊理順邏輯：想象用戶正在使用已上線的攻略頁(yè),，從入口開(kāi)始à第一屏內(nèi)容à第二屏內(nèi)容…，先考慮功能主線流程,，再考慮支流,，先考慮正常狀態(tài),，再補(bǔ)充異常狀態(tài)，檢查全流程保證用戶路徑閉環(huán),。

2.4,、感知設(shè)計(jì)：

在進(jìn)行視覺(jué)設(shè)計(jì)和音效設(shè)計(jì)之前，最重要的工作就是搜集資料并做整理,，完整的把你思維中的形象落實(shí)到資料上并傳達(dá)給設(shè)計(jì)師,；本次感知設(shè)計(jì)的工作分為三方面，1)主頁(yè)面的視覺(jué)元素感知確定,，2）各個(gè)分場(chǎng)景的動(dòng)畫感知確定和靜態(tài)視覺(jué)元素感知確定,，動(dòng)畫場(chǎng)景腳本編寫3）聲音腳本編寫和聲音風(fēng)格確定。有些感知比較難用語(yǔ)言表達(dá),，直接給圖片,，視頻，或音頻參考即可,。最終視覺(jué)表現(xiàn)如下圖,，項(xiàng)目已下線，只能提供重構(gòu)稿體驗(yàn)鏈接給大家觀看,。http://jdc.jd.com/fd/h5/1710/dbl11strategy/strategy.html#1

2.5,、用研問(wèn)題整理，數(shù)據(jù)埋點(diǎn)需求整理,，開(kāi)發(fā)需求文檔

2.6,、用戶調(diào)查總結(jié)：

這次攻略頁(yè)設(shè)計(jì)本沒(méi)有申請(qǐng)用研資源，但請(qǐng)用研同事幫了個(gè)忙在其它項(xiàng)目訪談時(shí)進(jìn)行了攻略頁(yè)的簡(jiǎn)單訪談,，調(diào)查結(jié)果如下：

• ? 能感知到這是個(gè)攻略頁(yè)
• ? 來(lái)不及仔細(xì)看動(dòng)畫中的促銷信息,，看到了預(yù)約按鈕也來(lái)不及點(diǎn)預(yù)約
• ? 能夠注意到簡(jiǎn)版攻略，覺(jué)得動(dòng)畫好看,，簡(jiǎn)版攻略方便預(yù)約
• ? 能夠注意到彩蛋紅包,，并且愿意點(diǎn)擊，知道點(diǎn)擊可以抽獎(jiǎng)
• ? 場(chǎng)景合適的話愿意看完所有內(nèi)容

其中第二個(gè)問(wèn)題,，產(chǎn)品在線上時(shí)我們通過(guò)調(diào)整每段動(dòng)畫最后一幀停留時(shí)長(zhǎng)進(jìn)行了改善,。

2.7、產(chǎn)品下線后的數(shù)據(jù)分析

具體數(shù)據(jù)為敏感消息,，這里就不做具體展示,。只羅列幾條本次數(shù)據(jù)分析中得出的用戶體驗(yàn)方面的結(jié)論，希望為大家以后的設(shè)計(jì)提供幫助,。

• ? 有趣的內(nèi)容形式能拉長(zhǎng)用戶停留時(shí)間,，可間接提高預(yù)約量和引流量
• ? 用戶對(duì)朋友圈中帶“促銷攻略”字樣的分享比較感興趣，只要想辦法讓用戶分享此鏈接出去,，就可帶來(lái)可觀的流量擴(kuò)散,。
• ? 用戶觀看動(dòng)畫耐性不足,，人均動(dòng)畫觀看時(shí)長(zhǎng)只占動(dòng)畫總時(shí)長(zhǎng)的三分之一左右
• ? 相比于左右按鈕切換頻道，用戶更喜歡滑動(dòng)切換
• ? 相比于邊看視頻邊預(yù)約活動(dòng),，用戶更喜歡在簡(jiǎn)版攻略中一次性預(yù)約所有感興趣的內(nèi)容總的來(lái)說(shuō),，以視頻展示攻略信息的表現(xiàn)模型效果一般。但我們證實(shí)了提高界面趣味性和視覺(jué)豐富度確實(shí)可以提高用戶瀏覽時(shí)長(zhǎng)的結(jié)論,，而且是基于數(shù)據(jù)的準(zhǔn)確結(jié)論（因?yàn)楹芏嗳私?jīng)常認(rèn)為產(chǎn)品趣味性和優(yōu)秀的用戶體驗(yàn)耗費(fèi)了大量的資源卻沒(méi)什么明顯效果,，運(yùn)營(yíng)同學(xué)在給項(xiàng)目申請(qǐng)資源時(shí)經(jīng)常得不到足夠的設(shè)計(jì)支持，有了這條結(jié)論,，下次我們就可以理直氣壯的申請(qǐng)資源啦?。＞C合以上,，可以總結(jié)出如何提高界面趣味性,，保證高效傳達(dá)信息，方便用戶操作,，是每次攻略頁(yè)設(shè)計(jì)時(shí)首要考慮的問(wèn)題,。以上就是本次攻略頁(yè)設(shè)計(jì)的全過(guò)程,。攻略頁(yè)這樣的產(chǎn)品最重要的就是選擇合適的表現(xiàn)模型,，表現(xiàn)模型選對(duì)了，接下來(lái)的交互操作和信息可視化設(shè)計(jì)和趣味性的提高就都很簡(jiǎn)單了,。所以本文的最后一部分,，就對(duì)各種筆者已經(jīng)見(jiàn)過(guò)的攻略頁(yè)表現(xiàn)模型做一個(gè)可用性評(píng)價(jià)，希望對(duì)以后設(shè)計(jì)攻略頁(yè)的小伙伴有幫助,，至少,，前輩們踩過(guò)的坑后輩們可以不要再踩啦~

第三部分：表現(xiàn)模型可用性評(píng)價(jià)

3.1、EXCEL表格：

趣味性：        ★★★☆☆

信息承載度：★★☆☆☆

易操作度：    ★★★★★

每逢大促網(wǎng)上總會(huì)流傳出一些標(biāo)題類似《這些寶貝不剁會(huì)后悔》的EXCEL表格,，里面就是各種商品的鏈接,，機(jī)密感很強(qiáng)；電商運(yùn)營(yíng)常借用EXCEL絕密文件的形式,，激發(fā)用戶的好奇心,，吸引用戶觀看和分享。此形式因排版比較單一,，適合羅列同質(zhì)性內(nèi)容（比如單品曝光）,。內(nèi)容排列緊湊，操作區(qū)域集中,，易操作度較高,。這種設(shè)計(jì)形式的頁(yè)面通常比較長(zhǎng)，視覺(jué)樣式同質(zhì)化嚴(yán)重,，頁(yè)面尾部流量不足,。當(dāng)活動(dòng)信息眾多,，信息優(yōu)先級(jí)都很高的時(shí)候不建議使用此方式。

3.2,、頁(yè)內(nèi)短視頻：

趣味性：        ★★★★★

信息承載度：★☆☆☆☆

易操作度：    ★☆☆☆☆

將促銷內(nèi)容分類成主題,，每個(gè)主題配以趣味性動(dòng)畫視頻，配合切換主題的導(dǎo)航,，用戶可以查看自己感興趣的視頻并預(yù)約視頻中自己感興趣的活動(dòng),。趣味性高，也可承載大量信息,。但因視頻播放速度塊,，視頻中的大量的利益點(diǎn)很難形成用戶感知，所以此方式也不是很適合作為信息量龐大的攻略頁(yè)的載體,。內(nèi)容和操作都比較分散,，易操作度較差。若要以短視頻形式作為主要表現(xiàn)模型,，一定要配合列表式簡(jiǎn)版攻略,，減少操作難度。

3.3,、全屏長(zhǎng)視頻：

趣味性：        ★★★★★

信息承載度：★☆☆☆☆

易操作度：    ★☆☆☆☆

看個(gè)視頻聽(tīng)個(gè)RAP,，是當(dāng)下很火的H5廣告的形式，常用于活動(dòng)宣傳,，塑造品牌形象等,。此方式觀賞性和信息承載量高于短視頻，缺點(diǎn)同短視頻,，用戶視頻看完后,，只會(huì)記得：哦，這里有個(gè)大促,，但具體的促銷信息完全記不住,。

3.4、幻燈片：

趣味性 ：       ★☆☆☆☆→★★★★★

信息承載度：★★★★★

易操作度：    ★★★☆☆

類似于支付寶的年終賬單,，分頁(yè)查看內(nèi)容,，長(zhǎng)度通常控制在4-8屏,。此形式?jīng)]什么不好,，適合承載各種類型的信息，就是過(guò)于常見(jiàn),，不夠新穎,；為提高趣味性，可在轉(zhuǎn)場(chǎng)動(dòng)畫上做特殊效果，或在單頁(yè)內(nèi)插入趣味GIF圖,，具體趣味性到底如何,，就要看動(dòng)畫和內(nèi)容的創(chuàng)意啦！

3.5,、時(shí)間軸或類別列表：

趣味性：        ★☆☆☆☆

信息承載度：★★★★☆

易操作度：    ★★★★☆

把促銷信息按時(shí)間軸或類別列表的樣式告知給用戶,，簡(jiǎn)單清晰；此種樣式可以理解為是表格的變種,，去掉了“表格”的樣式限制,，設(shè)計(jì)可發(fā)揮空間較大。當(dāng)大促中的子活動(dòng)存在明顯的時(shí)間節(jié)奏時(shí)推薦使用時(shí)間軸,，沒(méi)有明顯的時(shí)間節(jié)奏時(shí)使用類別列表,。但此種樣式趣味性較低，很難融入營(yíng)銷玩法,，也很難激發(fā)用戶的分享欲望,。若一定要使用時(shí)間軸樣式，建議以最簡(jiǎn)化的形式呈現(xiàn),，以一個(gè)模塊或蒙層的形式插入在促銷主會(huì)場(chǎng)或其它頁(yè)面中即可（這種攻略就是一個(gè)嵌入在別的產(chǎn)品中的功能模塊,，而不是一個(gè)獨(dú)立的攻略頁(yè)產(chǎn)品了）。因信息和操作排列緊湊,，此種樣式易操作度較高3.6,、長(zhǎng)海報(bào)：

趣味性：        ★☆☆☆☆→★★★★☆

信息承載度：★★★★★

易操作度：    ★★★☆☆

可以理解為把“幻燈片樣式”中的每個(gè)頁(yè)面接起來(lái)，直接下滑無(wú)需翻頁(yè),，信息傳達(dá)效率較高,，趣味性較低,，若視覺(jué)樣式同質(zhì)性較高,，也存在尾部流量過(guò)低的風(fēng)險(xiǎn)?？梢圆捎脤㈨?yè)面內(nèi)容模塊化,，各模塊做視覺(jué)樣式的區(qū)分，可隨機(jī)調(diào)整模塊順序的機(jī)制,，保證主要內(nèi)容的信息優(yōu)先級(jí),。也可以給每個(gè)模塊配以趣味動(dòng)畫，提高趣味性,，吸引用戶觀看到底,。

以上幾種形式各有優(yōu)劣，需視項(xiàng)目情況選擇具體的樣式,，當(dāng)然還是有更多新奇的樣式等你來(lái)發(fā)掘,，創(chuàng)新永無(wú)止境哈~

結(jié)語(yǔ)

好了，本次攻略頁(yè)設(shè)計(jì)方法就寫完了,，感興趣的小伙伴,，是不是可以擼起袖子設(shè)計(jì)個(gè)大促攻略頁(yè)出來(lái)了,，哈哈。以上內(nèi)容也是筆者據(jù)個(gè)人經(jīng)驗(yàn)寫的設(shè)計(jì)方法總結(jié),，如對(duì)內(nèi)容有意見(jiàn)或建議,，歡迎溝通。