無論何種模式的電商產(chǎn)品，其本質(zhì)都是商品售賣。營銷活動是其中不可或缺的賣貨方式，不僅影響GMV，也是非常重要的獲取用戶的手段。
消費升級的時代，消費者對于商品的品質(zhì)，產(chǎn)品的服務(wù)都有著更高的追求;營銷線作為電商產(chǎn)品的核心功能，貫穿了用戶從商品瀏覽到下單的一整個流程，本文將從交互設(shè)計的角度來談?wù)劸W(wǎng)易嚴(yán)選營銷線從0到1的設(shè)計過程。
營銷線的概念
廣義上來講，營銷就是把商家意愿包裝為活動，促進消費者消費的手段和承載形式。大多數(shù)人的概念也是平時隨處可見的促銷信息，比如超市打折活動，淘寶雙11大促，朋友圈爆款H5等。
對電商而言，營銷線是一系列營銷相關(guān)功能組成的模塊體系，不同產(chǎn)品對營銷線的定義不盡相同，以嚴(yán)選為例，對現(xiàn)有產(chǎn)品功能做了如下劃分：
嚴(yán)選營銷線的設(shè)計背景
嚴(yán)選上線后以其簡約的品牌調(diào)性吸引了很多忠實用戶，但隨著產(chǎn)品不斷發(fā)展和用戶量激增，原先簡單的功能框架已不再能滿足需求，而用戶反饋中很多訴求也亟待解決，比如：
●特殊時間段的促銷活動
●高粘性用戶的激勵機制
●最大可用優(yōu)惠，包郵，湊單等的提示和引導(dǎo)
●互補商品，替代商品的個性化推薦
......
無論是從業(yè)務(wù)角度還是用戶訴求出發(fā)，營銷線都是之后優(yōu)化目標(biāo)中非常重要的一環(huán)，不僅能豐富產(chǎn)品的運營維度，還有助于拉新促活，提高客單量和復(fù)購率。
那么營銷線應(yīng)該如何著手設(shè)計呢？
解析營銷線的設(shè)計流程
1 、優(yōu)化購物路徑
嚴(yán)選原有的流程和功能較為單薄，用戶只有瀏覽和下單等基本操作，所以首先對購物路徑進行了優(yōu)化補充，如下圖所示：
可以看出各個節(jié)點都增加了營銷功能，雖然整體上延長了用戶的購物路徑，相對增加了用戶下單的時間和決策成本，但當(dāng)我們營銷線是定位于提供更好的服務(wù)時，購物路徑的縮短并不是我們的終極目標(biāo)，而應(yīng)該是在滿足各種用戶訴求的情況下提高購物效率和轉(zhuǎn)化率，提升用戶體驗。
2 、明確設(shè)計方向
功能邏輯上以業(yè)務(wù)為導(dǎo)向，在保證購物流程流暢高效的前提下維持嚴(yán)選本身的品牌調(diào)性;
設(shè)計基本方向為簡潔易用，可以從以下三點來體現(xiàn)：
●? ?樣式統(tǒng)一性
●? ?交互一致性
●? ?流程順暢性
3、搭建促銷工具
促銷工具是營銷線最常見的手段之一，玩法豐富樣式多變，所配置的營銷活動在?端能貫穿于一整個購物流程，在不同的頁面邏輯和樣式也多有不同。
商品詳情頁：
商詳頁是用戶最直觀感受商品信息和優(yōu)惠的地方，所以要明確且顯眼地展示不同營銷活動的特性，現(xiàn)有營銷模塊主要體現(xiàn)在以下三個標(biāo)注區(qū)域：
Area?1: ?以單品變價類工具為主，通過不同樣式來強調(diào)時間與價格的強關(guān)聯(lián)，營造優(yōu)惠的緊迫感，促使用戶盡早下單；如圖所示為梯度變價（商品在一段時間內(nèi)以逐天遞減優(yōu)惠的價格銷售），因涉及時間范圍廣所以設(shè)計為日歷樣式，加強用戶對天數(shù)變價概念的感知；支持超過五日作折疊，和當(dāng)天的活動價做聯(lián)動展示，讓當(dāng)天售價始終保持在首屏頂部可見。
Area?2：以多商品/全場類工具為主，通過標(biāo)簽的加強引導(dǎo)，依次展示活動的促銷標(biāo)語；默認(rèn)最多顯示二條，超出作折疊處理，避免信息太多對用戶造成干擾。
Area 3：套裝（商品組合銷售）的邏輯和樣式較為復(fù)雜，不適合放置在頂部區(qū)域，如圖放置在商品圖下方，和推薦模塊共享空間，保證用戶可以在一屏高度內(nèi)看見活動信息；且樣式兼容和拓展性強，能夠清晰明了地展示多重套裝，也方便后期優(yōu)化。
而上圖也能看出，此頁面的Call?To?Action按鈕強調(diào)于“加入購物車”，因購物車能承載更多營銷活動，且支持個性推薦和湊單等功能，不僅有利于提升客單價還方便用戶湊單和合單發(fā)貨，所以應(yīng)多引導(dǎo)用戶去購物車操作；參照大多數(shù)電商，現(xiàn)在的商詳頁CTA按鈕也更多為加購。
CTA按鈕在設(shè)計時應(yīng)盡量確保唯一性和一致性，例如套裝、湊單頁等只允許加購，很多時候給用戶太多選擇反而會適得其反。
購物車頁：
購物車可以說是營銷線最重要的載體，滿足商品查看、商品管理、營銷支持、金額計算等基礎(chǔ)功能，在加入促銷工具后原本的購物車樣式也做了相應(yīng)調(diào)整。
以最基礎(chǔ)的滿贈為例（用戶購買滿足指定金額/件數(shù)/款式時，可獲得相應(yīng)贈品/贈券），一個完整的滿贈品活動在購物車的樣式如圖：
常態(tài)下整個營銷活動模塊包含促銷標(biāo)語、贈品、活動商品；而促銷標(biāo)語起重要的活動模塊劃分和提示作用，不僅視覺上要突出，在信息傳遞上也要簡明扼要，只需重點露出用戶當(dāng)前的活動狀態(tài)和滿足目標(biāo)需要的條件，引導(dǎo)用戶操作勾選或湊單，動態(tài)計算階梯門檻，減少用戶理解和計算的成本。
如圖滿贈標(biāo)語為多字段組合而成，在滿足檔位條件前后樣式不同：
而滿贈品還支持階梯檔和全場活動，此時又需細分樣式：
除了標(biāo)語，整個活動模塊的視覺樣式也進行了調(diào)整：活動商品組加以底色，失效商品組灰化沉底顯示，皆區(qū)分于普通商品組，保證用戶信息瀏覽和理解的高效性；
交互流程上則增加了下列幾點優(yōu)化，保證用戶付款流程的順暢性和良好的可操作性：
●? ?允許用戶在購物車切換sku，減少用戶頁面跳轉(zhuǎn)和更換操作的成本
●? ?贈品在滿足條件的情況下會自動帶出，減少用戶遺漏的情況
●? ?下單操作欄從底部跟隨優(yōu)化為懸浮常駐顯示，對字段進行重新排版縮短了高度，增強操作便捷性
適配多端方案：
營銷活動涉及多端，移動端的交互樣式與操作邏輯相較于WEB端有很大差異。考慮到大小屏幕適應(yīng)性和操作流暢性，界面的樣式布局要求也會更高，要在有限的空間內(nèi)露出對用戶最重要的信息。
舉個栗子，下圖為APP端購物車常態(tài)與編輯態(tài)的樣式，對階梯檔標(biāo)語做了最大程度的精簡：只顯示下一梯度的引導(dǎo)文案，且弱化湊單入口，通過箭頭來引導(dǎo)用戶點擊。
在全局版式上對所有字段做了優(yōu)先級排序，除商品基本信息外，優(yōu)惠活動切換的優(yōu)先級較高，所以把較低頻的數(shù)量調(diào)整和SKU切換功能進行折疊，僅在編輯狀態(tài)下可見。
而編輯狀態(tài)下用戶無法領(lǐng)取贈品、選擇活動、跳轉(zhuǎn)湊單頁，入口和熱區(qū)都做了相應(yīng)的隱藏處理，讓操作路徑和用戶行為能相對應(yīng)，減少無意義的跳轉(zhuǎn)和邏輯判斷，也能避免造成用戶的操作疑惑和失誤。
（注：上圖為前期稿子，線上購物車為最新改版樣式）
以上只列舉了部分促銷工具，其他類似的促銷工具可在現(xiàn)有基礎(chǔ)上延伸設(shè)計（滿贈—滿減、滿折，梯度變價—限時購、特價），保持促銷工具的整體一致性。
隨著促銷工具越來越多，流程也會愈加復(fù)雜，還會涉及到彼此的互斥與共享、前端后臺的限制與配合，所以在設(shè)計過程中，不僅需要考慮促銷工具當(dāng)期的邏輯樣式，還要考慮到后期的兼容拓展。
完善標(biāo)簽價格體系
營銷線的豐富也勢必帶來商品價格的多變，一個商品不同營銷場景下會存在多價格、多標(biāo)簽，在不同頁面如何展示才能吸引用戶又不會造成用戶認(rèn)知偏差呢？而標(biāo)簽作為用戶對活動最直觀的引導(dǎo)入口，如何把握這個展示的度呢？
以APP為例，價格和標(biāo)簽在不同頁面的處理方式就有較大不同：
在滿足業(yè)務(wù)需求的條件下，盡可能對頁面樣式進行精簡處理：
●? ?價格：活動下默認(rèn)取用戶能享受的最低sku價展示；詳情頁作為重要營銷載體需展示完整價格信息—活動價和原價，但列表頁、購物車則隱藏處理；
●? ?標(biāo)簽：針對不同頁面特性作不同處理，不僅要控制展示數(shù)量，位置和樣式也需靈活可變。比如購物車頁空間有限，則隱藏銷售標(biāo)簽，優(yōu)化活動標(biāo)簽為文字標(biāo)，前置于商品名；
再讓我們細化來看標(biāo)簽的展示邏輯：
現(xiàn)有標(biāo)簽數(shù)量20+，所以根據(jù)標(biāo)簽屬性進行了分類，且大類內(nèi)部再參考業(yè)務(wù)優(yōu)先級作了排序，對同一商品的顯示數(shù)量進行控制，優(yōu)先露出更重要的標(biāo)簽，提升易讀性。
視覺上對標(biāo)簽樣式作了統(tǒng)一，所有活動標(biāo)簽同一色系，銷售標(biāo)簽根據(jù)系統(tǒng)和人工配置作了細分；庫存標(biāo)簽則較特殊，打標(biāo)在購物車的圖上，需根據(jù)商品的不同狀態(tài)作明顯的區(qū)分。
此外還有多色可選／產(chǎn)地制造等各類標(biāo)簽，后續(xù)隨著功能增多也需要考慮更多的優(yōu)化樣式，我們也在持續(xù)迭代優(yōu)化中。
結(jié)語
營銷線功能復(fù)雜，因業(yè)務(wù)調(diào)整、功能增加等線上版本已迭代多次，在項目實際落地過程中也會遇到不少問題；本文篇幅有限，僅做項目前期的一個概述，綜上總結(jié)一下設(shè)計心得：
●? ?設(shè)計形式追隨功能——營銷線應(yīng)以業(yè)務(wù)需求為導(dǎo)向，避免新穎美觀卻不能解決實際問題的設(shè)計，如何提升產(chǎn)品轉(zhuǎn)化率才是交互設(shè)計師需要重點關(guān)注的。
●? ??好用易用為首要目標(biāo)——營銷活動往往信息量巨大，又容易因時間和操作等因素而變化頻繁，所以要盡量保持樣式簡潔和邏輯清晰，讓用戶能高效地瀏覽操作，減少購物中的困惑和焦慮感。
●? ?? 以用戶為中心 -深入挖掘用戶行為習(xí)慣，真正從用戶的角度去分析購物流程中可能會出現(xiàn)的問題，考慮多端多場景的兼容，保證每個觸點都能得到及時有效的反饋，在滿足業(yè)務(wù)需求下保持良好的用戶體驗。
更多營銷線好文請持續(xù)關(guān)注我們，歡迎大家來交流和探討:-D。
文章出處：網(wǎng)易UEDC公眾號
此文為原創(chuàng)內(nèi)容，著作權(quán)歸作者所有，轉(zhuǎn)載需經(jīng)過作者同意
