通常我們看到的旅游攻略，游戲攻略等都是以文章資訊的形式呈現，只可閱讀不可交互。而電商大促活動(dòng)中的攻略頁(yè)，可不僅僅是一篇資訊文章那么簡(jiǎn)單，除了要向用戶(hù)傳達促銷(xiāo)信息，往往承載著(zhù)引流，預約，發(fā)券，傳播等營(yíng)銷(xiāo)目，同時(shí)存在很多交互操作。
所以電商攻略頁(yè)可被視為一個(gè)獨立的小型產(chǎn)品，在設計這樣的產(chǎn)品時(shí)，有什么設計方法可尋呢？本文內容即為筆者在多次大促攻略頁(yè)設計經(jīng)驗中總結出來(lái)的一套方法，希望能對要設計促銷(xiāo)攻略頁(yè)的運營(yíng)同學(xué)和交互同學(xué)有所幫助。
文章將從產(chǎn)品方案階段基礎知識，設計案例講解，表現模型的可用性評價(jià)三個(gè)主要部分對攻略頁(yè)設計進(jìn)行講解。先看一張圖，希望大家能在頭腦中能對攻略設計的方法形成一個(gè)大概的印象。
第一部分：產(chǎn)品方案階段基礎知識
1.1、戰略層—產(chǎn)品目標確定和用戶(hù)需求收集
不管是要做什么產(chǎn)品，在開(kāi)始之前都要問(wèn)這樣兩個(gè)問(wèn)題：
- 我們要通過(guò)這個(gè)產(chǎn)品得到什么？
- 我們的用戶(hù)要通過(guò)這個(gè)產(chǎn)品得到什么？
回答了第一個(gè)問(wèn)題，即確定了產(chǎn)品目標；在攻略頁(yè)的設計中，通常對攻略頁(yè)定下的產(chǎn)品目標可能有：曝光大促內容，預約回流，為大促會(huì )場(chǎng)/自營(yíng)活動(dòng)/品牌活動(dòng)引流，分享傳播，發(fā)券，成交，品牌識別等。根據每次大促的戰略不同，攻略頁(yè)承擔的產(chǎn)品目標也不一樣。在確定具體產(chǎn)品目標后，需要對目標優(yōu)先級進(jìn)行排序，這決定了接下來(lái)的產(chǎn)品具體形態(tài)。
回答了第二個(gè)問(wèn)題，即確定了用戶(hù)需求；通常我們會(huì )對產(chǎn)品將要面對的人群進(jìn)行分類(lèi)建立用戶(hù)畫(huà)像，結合用戶(hù)故事地圖挖掘用戶(hù)需求，但攻略頁(yè)這個(gè)小型產(chǎn)品，面向全國大眾，用戶(hù)畫(huà)像這步就可以省略了。
“攻略”這一常見(jiàn)的詞匯在用戶(hù)心中已形成一定的認知概念，可以用語(yǔ)言準確的描述為：在活動(dòng)中向用戶(hù)傳達活動(dòng)信息，幫助用戶(hù)更好的參與活動(dòng)并達到參與目的的指南性說(shuō)明。所以，曝光促銷(xiāo)信息，在頁(yè)面上給用戶(hù)提供參與活動(dòng)的入口（參與方式），告訴用戶(hù)怎么買(mǎi)最劃算（省錢(qián)指導），即為本次產(chǎn)品的用戶(hù)需求。
即使是攻略頁(yè)這樣的小型產(chǎn)品，在戰略層階段，也是需要各利益相關(guān)者共同得出的，當然最終的目標還是需要本次的產(chǎn)品決策者來(lái)確定，那個(gè)人應該是本次促銷(xiāo)活動(dòng)整體的大PM，或者你的直屬領(lǐng)導。
可以把產(chǎn)品目標和用戶(hù)需求提煉為關(guān)鍵詞，整合在一張雷達圖上。這個(gè)提煉過(guò)程可以幫助設計者更好的整合需求，避免需求重復或需求邊界模糊的情況。根據每個(gè)目標的重要性進(jìn)行節點(diǎn)標記，這樣可以直觀(guān)清晰的看出本次攻略頁(yè)戰略目標的數量和每個(gè)目標的優(yōu)先級。
你可以自由控制這張雷達圖的節點(diǎn)數量和網(wǎng)格層數。保證你的關(guān)鍵詞都是易懂的，如果簡(jiǎn)短的關(guān)鍵詞一眼看去不能明其要旨，就需要對關(guān)鍵詞進(jìn)行備注性解釋?zhuān)吘惯@張圖是為了幫助我們快速的整理需求，準確的溝通需求。
你所確定的每一個(gè)戰略目標，都應該有一個(gè)驗收標準；有些直接體現為業(yè)務(wù)KPI，比如預約占比達到50%，引流占比5%，發(fā)券率100%，流量擴散倍數1.1等。
有些目標貌似沒(méi)那么容易檢測數據，可以通過(guò)用戶(hù)調查來(lái)實(shí)現，比如曝光大促信息這條目標，可以問(wèn)用戶(hù)，看完這個(gè)攻略你知道怎么買(mǎi)更省錢(qián)了么？本次展示的信息看完記大概記住了百分之多少？對應的促銷(xiāo)信息知道去哪兒找怎么參與了么？如果沒(méi)有資源進(jìn)行專(zhuān)業(yè)的用戶(hù)調研，也可以問(wèn)問(wèn)周?chē)耐卵?！這時(shí)確定的驗收標準，也有助于在可用性測試階段設計測試問(wèn)題。
1.2、范圍層—產(chǎn)品功能確定和內容網(wǎng)羅
當你把用戶(hù)需求和產(chǎn)品目標轉變成產(chǎn)品應該提供給用戶(hù)什么樣的內容和功能時(shí)，戰略就變成了范圍。 —–《用戶(hù)體驗要素》Jesse James Garrett
根據上一步我們確定的戰略目標，可以提煉出具體的產(chǎn)品功能，比如：本次發(fā)券，以抽獎的方式實(shí)現，用戶(hù)首次抽獎必中。這時(shí)的功能描述沒(méi)必要具體到產(chǎn)品使用場(chǎng)景上，因為那是下一個(gè)層級，結構層—交互設計的工作，當然你也可以先想好幾個(gè)備選的表現模型和產(chǎn)品使用場(chǎng)景。這里功能的確定主要用于執行開(kāi)發(fā)調研和與交互設計師進(jìn)行溝通。
通常在攻略頁(yè)的設計中，我們能確定產(chǎn)品需要的功能有：
- 直接跳轉：當某子活動(dòng)正在進(jìn)行中，或某件商品正在參與活動(dòng)，需要給一個(gè)入口直接引流到對應活動(dòng)頁(yè)或商品詳情頁(yè)；
- 預約提醒：當某子活動(dòng)即將開(kāi)始，或某件商品即將參與活動(dòng)，需要給一個(gè)預約按鈕，以便于用戶(hù)得到活動(dòng)提醒，這時(shí)就需要考慮用戶(hù)收到消息的方式，可以是短信告知（需獲取用戶(hù)手機號），app發(fā)送系統消息（需提示開(kāi)啟通知權限），調用系統日歷提醒（獲取系統日歷權限），微信公眾號提醒（需引導關(guān)注大賬號）等；
- 一鍵預約：是否需要提供一鍵預約所有優(yōu)惠功能；這個(gè)功能需要慎重考慮，需要考慮各子活動(dòng)的開(kāi)始時(shí)間，若全部提醒會(huì )過(guò)度打擾用戶(hù)，就會(huì )面臨取消關(guān)注，關(guān)閉通知權限，拉黑等不良后果。
- 抽獎：發(fā)券的形式通常是用戶(hù)抽獎得券，引導用戶(hù)分享的機制通常是獲得抽獎機會(huì )，就需確定抽獎形式，進(jìn)行獎池搭建和風(fēng)險控制等
以上四點(diǎn)功能中，跳轉和預約可以說(shuō)是每個(gè)攻略頁(yè)的必備功能，其它功能需視本次攻略的產(chǎn)品目的而添加，因每次產(chǎn)品的目的不甚相同，還可能有其它更多的功能，視情況而定即可。
內容方面，需要收集本次大促會(huì )場(chǎng)的數量，各個(gè)會(huì )場(chǎng)各自的促銷(xiāo)時(shí)間節奏和優(yōu)惠利益點(diǎn)；各個(gè)營(yíng)銷(xiāo)活動(dòng)的時(shí)間節奏，獎品和玩法。通常在攻略頁(yè)的設計階段，我們并不能收集到特別詳細的信息，只能確定一級活動(dòng)的開(kāi)始時(shí)間和最給力利益點(diǎn)，有時(shí)這種信息也收集不到，這就需要我們選擇普適性較高的表現模型，能容納的下任何類(lèi)型的信息設計。
1.3、結構層-交互設計和信息架構
交互設計關(guān)注于描述“可能的用戶(hù)行為”，同時(shí)定義“系統如何配合與響應”這些用戶(hù)行為；
信息架構主要的工作是設計組織分類(lèi)和導航結構。
讓用戶(hù)獲得良好的行為引導和操作反饋，并高效的瀏覽內容是進(jìn)行交互設計和信息架構的目的。范圍層階段我們提煉出了跳轉，預約提醒，一鍵預約，抽獎四個(gè)功能和一個(gè)信息文檔；在結構層我們對功能進(jìn)行場(chǎng)景化描述，對信息進(jìn)行組織分類(lèi)，確定信息節點(diǎn)和結構方法，并選擇合適的表現模型。
用戶(hù)對于交互組件將怎樣工作的觀(guān)點(diǎn)稱(chēng)為概念模型（也稱(chēng)心里模型），設計者將功能展現給用戶(hù)的方式稱(chēng)為表現模型，表現模型越接近于用戶(hù)心理模型，用戶(hù)就會(huì )感覺(jué)到產(chǎn)品容易使用和理解。在設計攻略頁(yè)時(shí)，首先要設計個(gè)整體的表現模型，比如“攻略播報電臺”，“內部泄密文件表格”，“新年醒獅送攻略”等會(huì )形成具體認知概念的模型，也可以不選擇任何具象的趣味概念，直接以抽象的表現形式承載。但要注意，你選擇的具象概念，不論是從視覺(jué)上還是從文字語(yǔ)義上，都要符合用戶(hù)的原有認知。
舉個(gè)例子，我們曾經(jīng)有過(guò)一個(gè)“攻略售貨機”的表現方案，這個(gè)表現模型就存在認知沖突：用戶(hù)對售貨機的認知是，一個(gè)販賣(mài)多種商品的機器，以此為表現模型，用戶(hù)會(huì )疑惑“攻略售貨機”是什么，賣(mài)攻略的么？機器里會(huì )賣(mài)很多攻略么？我要買(mǎi)攻略要什么成本么？……等等造成用戶(hù)困惑的，對產(chǎn)品沒(méi)有幫助的疑惑。同時(shí)“售貨機”這個(gè)概念也限制住了視覺(jué)樣式，要形成售貨機的概念，視覺(jué)元素就脫離不開(kāi)售貨機本身；即使是選取關(guān)鍵視覺(jué)元素進(jìn)行抽象表達，也不能形成很好的認知概念。
功能和信息可以細化成類(lèi)似以下的描述：
- 當用戶(hù)瀏覽到正在進(jìn)行的賣(mài)場(chǎng)或活動(dòng)時(shí)，可直接點(diǎn)擊進(jìn)入相應頁(yè)面
- 當用戶(hù)瀏覽到即將進(jìn)行的賣(mài)場(chǎng)或活動(dòng)時(shí)，可進(jìn)行預約，通過(guò)微信公眾號獲得提醒消息，未關(guān)注大賬號的用戶(hù)先引導其關(guān)注大賬號
- 正在進(jìn)行的活動(dòng)總是優(yōu)先展示，其次展示即將進(jìn)行的活動(dòng)，再次展示已過(guò)期的活動(dòng)
- 一鍵預約所有活動(dòng)這一功能經(jīng)評估，會(huì )對用戶(hù)造成過(guò)度打擾且開(kāi)發(fā)成本較大，不做此功能
- 抽獎的形式確定為彩蛋紅包，用戶(hù)首次進(jìn)入頁(yè)面并停留4s后出現動(dòng)效紅包引導點(diǎn)擊，首次點(diǎn)擊必中優(yōu)惠券，在反饋彈框上提示用戶(hù)分享可獲得現金紅包引導分享。
- 促銷(xiāo)信息分兩個(gè)頁(yè)面展示，主頁(yè)面展示趣味版，以主題進(jìn)行一級劃分，以品類(lèi)進(jìn)行二級劃分，以時(shí)間進(jìn)行三級劃分，不設利益維度劃分；簡(jiǎn)單版以時(shí)間維度和活動(dòng)維度進(jìn)行劃分。兩個(gè)頁(yè)面分別設置互跳按鈕，趣味版頁(yè)內設計主題導航。
一些比較抽象的描述可以配合原型圖來(lái)展示，一切都是為了方便溝通的快速表達?；谶@樣的描述和確定好的表現模型，我們就可以進(jìn)入框架層階段了。
1.4、框架層—界面設計、導航設計和信息設計
界面設計涵蓋的范圍比較大，包括基礎交互組件的運用，創(chuàng )新交互樣式的呈現，抽象信息的視覺(jué)符號化表現，信息呈現，和整體界面排版等；
導航設計是指引導用戶(hù)在各種信息節點(diǎn)之間穿梭的方式，并告知用戶(hù)在信息架構中的位置，最終會(huì )落實(shí)為界面元素；
信息設計包括信息分類(lèi)和可視化設計，可視化設計最終也會(huì )落實(shí)為界面元素。
筆者沿用了《用戶(hù)體驗要素》中的分類(lèi)方法，但對界面設計和信息設計的定義進(jìn)行了小幅改動(dòng)，可能這樣的定義劃分不是最準確，但保證了各個(gè)概念之間沒(méi)有交叉，方便分析和處理問(wèn)題。
攻略頁(yè)中，涉及到的功能性交互組件很少，通常使用按鈕、彈框，反饋toast。導航樣式通常是頁(yè)內錨點(diǎn)導航；如果攻略頁(yè)本身包含多個(gè)頁(yè)面，也需要頁(yè)面間導航。促銷(xiāo)信息通常以時(shí)間列表，日歷圖表，品類(lèi)列表為基礎樣式進(jìn)行展示。
1.5、表現層—感知設計
表現層是用戶(hù)會(huì )首先注意到的地方，這里，內容，功能和美學(xué)匯集到一起，完成其他四個(gè)層面的所有目標，并同時(shí)滿(mǎn)足用戶(hù)的感官感受。攻略頁(yè)的表現層涉及到視覺(jué)感受和聽(tīng)覺(jué)感受兩個(gè)部分。因為是大促整個(gè)產(chǎn)品的子產(chǎn)品，在表現層設計時(shí)需確定攻略頁(yè)的感知設計是否要遵循大促整體感知規范，如果遵循，要遵循到什么程度，攻略本身的可設計空間有多大。
工業(yè)設計界有個(gè)新的學(xué)科被稱(chēng)為“感性工學(xué)”，致力于研究人的感受與具體產(chǎn)品形態(tài)的對應，產(chǎn)品的視覺(jué)，觸覺(jué)，聽(tīng)覺(jué)，嗅覺(jué)，味覺(jué)都可以通過(guò)感覺(jué)形容詞進(jìn)行描述，并落實(shí)到具體的產(chǎn)品形態(tài)上。攻略頁(yè)表現層設計時(shí)，也可以用這種方法。我們收集視覺(jué)資料，確定預期的感覺(jué)形容詞，比如年輕活力、熱鬧，復古，現代，未來(lái)科技感等等，在與視覺(jué)設計師溝通時(shí)，最好給形容詞配上具體的圖片，保證大家對形容詞的認知理解在同一層面上。動(dòng)效設計也同樣，Q彈可愛(ài)、炫酷閃耀、平緩柔和等形容詞都可以幫助你與視覺(jué)設計師溝通你想要的效果。
以上五個(gè)步驟并不是循序依次進(jìn)行的，實(shí)際工作中經(jīng)常會(huì )遇到反復的情況。比如進(jìn)行到交互設計階段發(fā)現需要加一個(gè)新功能才能實(shí)現產(chǎn)品目標，這時(shí)就要對范圍層進(jìn)行修改，并重新進(jìn)行功能開(kāi)發(fā)調研。為設計出好的產(chǎn)品這種情況不可避免，好的方法是，讓每一個(gè)層面的工作在下一個(gè)層面可以結束之前完成即可。
對應的，我們每個(gè)階段輸出的文檔，都可能要面臨很多次修改，每次修改都需要周知流程各相關(guān)人員以保證大家對產(chǎn)品進(jìn)程理解一致。
以上五個(gè)步驟完成之后，產(chǎn)品方案階段就完成了。運營(yíng)同學(xué)根據交互稿編寫(xiě)《開(kāi)發(fā)需求文檔》 和《數據需求文檔》 ，前端同學(xué)根據視覺(jué)稿進(jìn)行前端設計。作為攻略頁(yè)負責人，運營(yíng)同學(xué)還需要考慮的就是攻略頁(yè)的入口資源。
攻略頁(yè)作為大促整體產(chǎn)品的一個(gè)信息節點(diǎn)，其入口也是大促整體的一個(gè)界面元素，具體如何設計，那是大促整體產(chǎn)品設計的范疇了。攻略頁(yè)也可以作為一個(gè)完整的產(chǎn)品進(jìn)行單獨資源投放，如果你在今日頭條看到一條咨詢(xún)，標題為《京東雙11大促省錢(qián)攻略》 ，也是很合理的事情。
第二部分：設計案例講解
下面我來(lái)講述一下京東微信購物入口2017年雙11攻略頁(yè)的設計過(guò)程，讓大家能更好的理解攻略頁(yè)設計的方法。
2.1、戰略關(guān)鍵詞以及驗收標準建立
除了攻略常有的基本戰略目標外，加入了形式創(chuàng )新為主要目的之一。因能提前收集到的促銷(xiāo)信息都為一級活動(dòng)的促銷(xiāo)概況，無(wú)法定制具體的省錢(qián)計劃，所以把省錢(qián)計劃從目標中去掉，只曝光促銷(xiāo)節奏和最給力利益點(diǎn)，讓用戶(hù)自行設計購物方案即可。
2.2、確定功能和部分交互形式，收集促銷(xiāo)信息
因本次攻略設計以形式創(chuàng )新為主要目標，所以在范圍層階段就對表現模型進(jìn)行了確定；功能比較少，也比較簡(jiǎn)單，所以直接對功能進(jìn)行交互細化。表現模型為攻略電臺，采用短視頻配合口播的形式播報促銷(xiāo)信息，并配合簡(jiǎn)版時(shí)間軸列表。對促銷(xiāo)信息進(jìn)行主題包裝，每個(gè)主題一個(gè)短視頻。這一步，我們將范圍層和結構層內容結合成一個(gè)文檔輸出。
2.3、畫(huà)交互：
- 初步整理：本次設計需要有【loading頁(yè)】【教導頁(yè)】【主頁(yè)】【簡(jiǎn)版攻略頁(yè)】4個(gè)主要頁(yè)面，和各種操作反饋彈窗。
- 確定每個(gè)頁(yè)面中主要信息的優(yōu)先級：【loading頁(yè)】趣味動(dòng)畫(huà)>引導打開(kāi)聲音；【教導頁(yè)】提示用戶(hù)可滑動(dòng)切換頻道；【主頁(yè)】信息優(yōu)先級為視頻區>主標題>頻道主標題>頻道副標題>簡(jiǎn)版攻略>彩蛋紅包；【簡(jiǎn)版攻略】信息優(yōu)先級為進(jìn)入主推>SNS坑位>主會(huì )場(chǎng)引流>時(shí)間軸
- 觀(guān)察全平臺界面設計：保證攻略頁(yè)與全平臺操作體驗一致。
- 邊畫(huà)交互稿邊理順邏輯：想象用戶(hù)正在使用已上線(xiàn)的攻略頁(yè)，從入口開(kāi)始à第一屏內容à第二屏內容…，先考慮功能主線(xiàn)流程，再考慮支流，先考慮正常狀態(tài)，再補充異常狀態(tài)，檢查全流程保證用戶(hù)路徑閉環(huán)。
2.4、感知設計：
在進(jìn)行視覺(jué)設計和音效設計之前，最重要的工作就是搜集資料并做整理，完整的把你思維中的形象落實(shí)到資料上并傳達給設計師；本次感知設計的工作分為三方面：
- 主頁(yè)面的視覺(jué)元素感知確定
- 各個(gè)分場(chǎng)景的動(dòng)畫(huà)感知確定和靜態(tài)視覺(jué)元素感知確定，動(dòng)畫(huà)場(chǎng)景腳本編寫(xiě)
- 聲音腳本編寫(xiě)和聲音風(fēng)格確定。
有些感知比較難用語(yǔ)言表達，直接給圖片，視頻，或音頻參考即可。最終視覺(jué)表現如下圖，項目已下線(xiàn)，只能提供重構稿體驗鏈接給大家觀(guān)看。http://jdc.jd.com/fd/h5/1710/dbl11strategy/strategy.html#1
2.5、用研問(wèn)題整理，數據埋點(diǎn)需求整理，開(kāi)發(fā)需求文檔
2.6、用戶(hù)調查總結：
這次攻略頁(yè)設計本沒(méi)有申請用研資源，但請用研同事幫了個(gè)忙在其它項目訪(fǎng)談時(shí)進(jìn)行了攻略頁(yè)的簡(jiǎn)單訪(fǎng)談，調查結果如下：
- ? 能感知到這是個(gè)攻略頁(yè)
- ? 來(lái)不及仔細看動(dòng)畫(huà)中的促銷(xiāo)信息，看到了預約按鈕也來(lái)不及點(diǎn)預約
- ? 能夠注意到簡(jiǎn)版攻略，覺(jué)得動(dòng)畫(huà)好看，簡(jiǎn)版攻略方便預約
- ? 能夠注意到彩蛋紅包，并且愿意點(diǎn)擊，知道點(diǎn)擊可以抽獎
- ? 場(chǎng)景合適的話(huà)愿意看完所有內容
其中第二個(gè)問(wèn)題，產(chǎn)品在線(xiàn)上時(shí)我們通過(guò)調整每段動(dòng)畫(huà)最后一幀停留時(shí)長(cháng)進(jìn)行了改善。
2.7、產(chǎn)品下線(xiàn)后的數據分析
具體數據為敏感消息，這里就不做具體展示。只羅列幾條本次數據分析中得出的用戶(hù)體驗方面的結論，希望為大家以后的設計提供幫助。
- ? 有趣的內容形式能拉長(cháng)用戶(hù)停留時(shí)間，可間接提高預約量和引流量
- ? 用戶(hù)對朋友圈中帶“促銷(xiāo)攻略”字樣的分享比較感興趣，只要想辦法讓用戶(hù)分享此鏈接出去，就可帶來(lái)可觀(guān)的流量擴散。
- ? 用戶(hù)觀(guān)看動(dòng)畫(huà)耐性不足，人均動(dòng)畫(huà)觀(guān)看時(shí)長(cháng)只占動(dòng)畫(huà)總時(shí)長(cháng)的三分之一左右
- ? 相比于左右按鈕切換頻道，用戶(hù)更喜歡滑動(dòng)切換
- ? 相比于邊看視頻邊預約活動(dòng)，用戶(hù)更喜歡在簡(jiǎn)版攻略中一次性預約所有感興趣的內容、
總的來(lái)說(shuō)，以視頻展示攻略信息的表現模型效果一般。但我們證實(shí)了提高界面趣味性和視覺(jué)豐富度確實(shí)可以提高用戶(hù)瀏覽時(shí)長(cháng)的結論，而且是基于數據的準確結論（因為很多人經(jīng)常認為產(chǎn)品趣味性和優(yōu)秀的用戶(hù)體驗耗費了大量的資源卻沒(méi)什么明顯效果，運營(yíng)同學(xué)在給項目申請資源時(shí)經(jīng)常得不到足夠的設計支持，有了這條結論，下次我們就可以理直氣壯的申請資源啦?。?。綜合以上，可以總結出如何提高界面趣味性，保證高效傳達信息，方便用戶(hù)操作，是每次攻略頁(yè)設計時(shí)首要考慮的問(wèn)題。以上就是本次攻略頁(yè)設計的全過(guò)程。攻略頁(yè)這樣的產(chǎn)品最重要的就是選擇合適的表現模型，表現模型選對了，接下來(lái)的交互操作和信息可視化設計和趣味性的提高就都很簡(jiǎn)單了。所以本文的最后一部分，就對各種筆者已經(jīng)見(jiàn)過(guò)的攻略頁(yè)表現模型做一個(gè)可用性評價(jià)，希望對以后設計攻略頁(yè)的小伙伴有幫助，至少，前輩們踩過(guò)的坑后輩們可以不要再踩啦~
第三部分：表現模型可用性評價(jià)
3.1、EXCEL表格：
趣味性： ★★★☆☆
信息承載度：★★☆☆☆
易操作度： ★★★★★
每逢大促網(wǎng)上總會(huì )流傳出一些標題類(lèi)似《這些寶貝不剁會(huì )后悔》的EXCEL表格，里面就是各種商品的鏈接，機密感很強；電商運營(yíng)常借用EXCEL絕密文件的形式，激發(fā)用戶(hù)的好奇心，吸引用戶(hù)觀(guān)看和分享。此形式因排版比較單一，適合羅列同質(zhì)性?xún)热荩ū热鐔纹菲毓猓?。內容排列緊湊，操作區域集中，易操作度較高。這種設計形式的頁(yè)面通常比較長(cháng)，視覺(jué)樣式同質(zhì)化嚴重，頁(yè)面尾部流量不足。當活動(dòng)信息眾多，信息優(yōu)先級都很高的時(shí)候不建議使用此方式。
3.2、頁(yè)內短視頻：
趣味性： ★★★★★
信息承載度：★☆☆☆☆
易操作度： ★☆☆☆☆
將促銷(xiāo)內容分類(lèi)成主題，每個(gè)主題配以趣味性動(dòng)畫(huà)視頻，配合切換主題的導航，用戶(hù)可以查看自己感興趣的視頻并預約視頻中自己感興趣的活動(dòng)。趣味性高，也可承載大量信息。但因視頻播放速度塊，視頻中的大量的利益點(diǎn)很難形成用戶(hù)感知，所以此方式也不是很適合作為信息量龐大的攻略頁(yè)的載體。內容和操作都比較分散，易操作度較差。若要以短視頻形式作為主要表現模型，一定要配合列表式簡(jiǎn)版攻略，減少操作難度。
3.3、全屏長(cháng)視頻：
趣味性： ★★★★★
信息承載度：★☆☆☆☆
易操作度： ★☆☆☆☆
看個(gè)視頻聽(tīng)個(gè)RAP，是當下很火的H5廣告的形式，常用于活動(dòng)宣傳，塑造品牌形象等。此方式觀(guān)賞性和信息承載量高于短視頻，缺點(diǎn)同短視頻，用戶(hù)視頻看完后，只會(huì )記得：哦，這里有個(gè)大促，但具體的促銷(xiāo)信息完全記不住。
3.4、幻燈片：
趣味性 ： ★☆☆☆☆→★★★★★
信息承載度：★★★★★
易操作度： ★★★☆☆
類(lèi)似于支付寶的年終賬單，分頁(yè)查看內容，長(cháng)度通?？刂圃?-8屏。此形式?jīng)]什么不好，適合承載各種類(lèi)型的信息，就是過(guò)于常見(jiàn)，不夠新穎；為提高趣味性，可在轉場(chǎng)動(dòng)畫(huà)上做特殊效果，或在單頁(yè)內插入趣味GIF圖，具體趣味性到底如何，就要看動(dòng)畫(huà)和內容的創(chuàng )意啦！
3.5、時(shí)間軸或類(lèi)別列表：
趣味性： ★☆☆☆☆
信息承載度：★★★★☆
易操作度： ★★★★☆
把促銷(xiāo)信息按時(shí)間軸或類(lèi)別列表的樣式告知給用戶(hù)，簡(jiǎn)單清晰；此種樣式可以理解為是表格的變種，去掉了“表格”的樣式限制，設計可發(fā)揮空間較大。當大促中的子活動(dòng)存在明顯的時(shí)間節奏時(shí)推薦使用時(shí)間軸，沒(méi)有明顯的時(shí)間節奏時(shí)使用類(lèi)別列表。但此種樣式趣味性較低，很難融入營(yíng)銷(xiāo)玩法，也很難激發(fā)用戶(hù)的分享欲望。若一定要使用時(shí)間軸樣式，建議以最簡(jiǎn)化的形式呈現，以一個(gè)模塊或蒙層的形式插入在促銷(xiāo)主會(huì )場(chǎng)或其它頁(yè)面中即可（這種攻略就是一個(gè)嵌入在別的產(chǎn)品中的功能模塊，而不是一個(gè)獨立的攻略頁(yè)產(chǎn)品了）。因信息和操作排列緊湊，此種樣式易操作度較高
3.6、長(cháng)海報：
趣味性： ★☆☆☆☆→★★★★☆
信息承載度：★★★★★
易操作度： ★★★☆☆
可以理解為把“幻燈片樣式”中的每個(gè)頁(yè)面接起來(lái)，直接下滑無(wú)需翻頁(yè)，信息傳達效率較高，趣味性較低，若視覺(jué)樣式同質(zhì)性較高，也存在尾部流量過(guò)低的風(fēng)險?？梢圆捎脤㈨?yè)面內容模塊化，各模塊做視覺(jué)樣式的區分，可隨機調整模塊順序的機制，保證主要內容的信息優(yōu)先級。也可以給每個(gè)模塊配以趣味動(dòng)畫(huà)，提高趣味性，吸引用戶(hù)觀(guān)看到底。
以上幾種形式各有優(yōu)劣，需視項目情況選擇具體的樣式，當然還是有更多新奇的樣式等你來(lái)發(fā)掘，創(chuàng )新永無(wú)止境哈~
結語(yǔ)
好了，本次攻略頁(yè)設計方法就寫(xiě)完了，感興趣的小伙伴，是不是可以擼起袖子設計個(gè)大促攻略頁(yè)出來(lái)了，哈哈。以上內容也是筆者據個(gè)人經(jīng)驗寫(xiě)的設計方法總結，如對內容有意見(jiàn)或建議，歡迎溝通。
作者： snowshine321
來(lái)源：http://jdc.jd.com/archives/211930
題圖來(lái)自PEXELS，基于CC0協(xié)議
