網(wǎng)易UEDC – 麻譯天 ：無論何種模式的電商產(chǎn)品，其本質(zhì)都是商品售賣。營銷活動是其中不可或缺的賣貨方式，不僅影響GMV，也是非常重要的獲取用戶的手段。

消費(fèi)升級的時代，消費(fèi)者對于商品的品質(zhì)、產(chǎn)品的服務(wù)都有著更高的追求。營銷線作為電商產(chǎn)品的核心功能，貫穿了用戶從商品瀏覽到下單的一整個流程，本文將從交互設(shè)計的角度來談?wù)劸W(wǎng)易嚴(yán)選營銷線從0到1的設(shè)計過程。

營銷線的概念

廣義上來講，營銷就是把商家意愿包裝為活動，促進(jìn)消費(fèi)者消費(fèi)的手段和承載形式。大多數(shù)人的概念也是平時隨處可見的促銷信息，比如超市打折活動，淘寶雙11大促，朋友圈爆款H5等。

對電商而言，營銷線是一系列營銷相關(guān)功能組成的模塊體系，不同產(chǎn)品對營銷線的定義不盡相同，以嚴(yán)選為例，對現(xiàn)有產(chǎn)品功能做了如下劃分：

嚴(yán)選營銷線的設(shè)計背景

嚴(yán)選上線后以其簡約的品牌調(diào)性吸引了很多忠實(shí)用戶，但隨著產(chǎn)品不斷發(fā)展和用戶量激增，原先簡單的功能框架已不再能滿足需求，而用戶反饋中很多訴求也亟待解決，比如：

• 特殊時間段的促銷活動。
• 高粘性用戶的激勵機(jī)制。
• 最大可用優(yōu)惠、包郵、湊單等的提示和引導(dǎo)。
• 互補(bǔ)商品、替代商品的個性化推薦。
• ……

無論是從業(yè)務(wù)角度還是用戶訴求出發(fā)，營銷線都是之后優(yōu)化目標(biāo)中非常重要的一環(huán)，不僅能豐富產(chǎn)品的運(yùn)營維度，還有助于拉新促活，提高客單量和復(fù)購率。

那么營銷線應(yīng)該如何著手設(shè)計呢？

解析營銷線的設(shè)計流程

1. 優(yōu)化購物路徑

嚴(yán)選原有的流程和功能較為單薄，用戶只有瀏覽和下單等基本操作，所以首先對購物路徑進(jìn)行了優(yōu)化補(bǔ)充，如下圖所示：

△ 購物路徑優(yōu)化圖

可以看出各個節(jié)點(diǎn)都增加了營銷功能，雖然相對延長了用戶的購物路徑，增加了用戶下單的時間和決策成本，但當(dāng)營銷線是定位于提供更好的服務(wù)時，購物路徑的縮短并不是我們的終極目標(biāo)，而應(yīng)該是在滿足各種用戶訴求的情況下提高購物效率和轉(zhuǎn)化率，提升產(chǎn)品的用戶體驗。

2. 明確設(shè)計方向

功能邏輯上以業(yè)務(wù)為導(dǎo)向，在保證購物流程流暢高效的前提下維持嚴(yán)選本身的品牌調(diào)性。

設(shè)計基本方向為簡潔易用，可以從以下三點(diǎn)來體現(xiàn)：

• 樣式統(tǒng)一性。
• 交互一致性。
• 流程順暢性。

3. 搭建促銷工具

促銷工具是營銷線最常見的手段之一，玩法豐富樣式多變，所配置的營銷活動在C端能貫穿于一整個購物流程，在不同的頁面邏輯和樣式也多有不同。

商品詳情頁：商詳頁是用戶最直觀感受商品信息和優(yōu)惠的地方，所以要明確且顯眼地展示不同營銷活動的特性，現(xiàn)有營銷模塊主要體現(xiàn)在以下三個標(biāo)注區(qū)域。

△ WEB商品詳情頁

Area 1: 以單品變價類工具為主，通過不同樣式來強(qiáng)調(diào)時間與價格的強(qiáng)關(guān)聯(lián)，營造優(yōu)惠的緊迫感，促使用戶盡早下單。如圖所示為梯度變價（商品在一段時間內(nèi)以逐天遞減優(yōu)惠的價格銷售），因涉及時間范圍廣所以設(shè)計為日歷樣式，加強(qiáng)用戶對天數(shù)變價概念的感知。支持超過五日作折疊，和當(dāng)天的活動價做聯(lián)動展示，讓當(dāng)天售價始終保持在首屏頂部可見。

Area 2：以多商品/全場類工具為主，通過標(biāo)簽的加強(qiáng)引導(dǎo)，依次展示活動的促銷標(biāo)語。默認(rèn)最多顯示二條，超出作折疊處理，避免信息太多對用戶造成干擾。

Area 3：套裝（商品以組合模式銷售）的邏輯和樣式較為復(fù)雜，不適合放置在頂部區(qū)域，如圖放置在商品圖下方，和推薦模塊共享空間，保證用戶可以在一屏高度內(nèi)看見活動信息，且樣式兼容和拓展性強(qiáng)，能夠清晰明了的展示多重套裝，也方便后期優(yōu)化。

而上圖也能看出，此頁面的Call To Action按鈕強(qiáng)調(diào)于「加入購物車」，因購物車能承載更多營銷活動，且支持個性推薦和湊單等功能，不僅有利于提升客單價還方便用戶湊單和合單發(fā)貨，所以應(yīng)多引導(dǎo)用戶去購物車操作。參照其他電商，現(xiàn)在的商詳頁CTA按鈕也更多為加購。

△ 多電商平臺的商詳頁下單按鈕

CTA按鈕在設(shè)計時應(yīng)盡量確保唯一性和一致性，例如套裝、湊單頁只允許加購，很多時候給用戶太多選擇反而會適得其反。

購物車頁：購物車可以說是營銷線最重要的載體，滿足商品查看、商品管理、營銷支持、金額計算等基礎(chǔ)功能，在加入促銷工具后原本的購物車樣式也做了相應(yīng)調(diào)整。

以最基礎(chǔ)的滿贈為例（用戶購買滿足指定金額/件數(shù)/款式時，可獲得相應(yīng)贈品/贈券），一個完整的滿贈品活動在購物車的樣式如圖：

△ WEB購物車2.0版本

常態(tài)下整個營銷活動模塊包含促銷標(biāo)語、贈品、活動商品。而促銷標(biāo)語起重要的活動模塊劃分和提示作用，不僅視覺上要突出，在信息傳遞上也要簡明扼要，只需重點(diǎn)露出用戶當(dāng)前的活動狀態(tài)和滿足目標(biāo)需要的條件，引導(dǎo)用戶操作勾選或湊單，動態(tài)計算階梯門檻，減少用戶理解和計算的成本。

如滿贈的標(biāo)語為多字段組合而成，在滿足檔位條件前后樣式不同：

而滿贈品還支持階梯檔和全場活動，此時又需細(xì)分樣式：

除了標(biāo)語，整個活動模塊的視覺樣式也進(jìn)行了調(diào)整：活動商品組加以底色，失效商品組灰化沉底顯示，皆區(qū)分于普通商品組，保證用戶信息瀏覽和理解的高效性。

交互流程上則增加了下列幾點(diǎn)優(yōu)化，保證用戶付款流程的順暢性和良好的可操作性：

• 允許用戶在購物車切換sku，減少用戶頁面跳轉(zhuǎn)和更換操作的成本。
• 贈品在滿足條件的情況下會自動帶出，減少用戶遺漏的情況。
• 下單操作欄從底部跟隨優(yōu)化為懸浮常駐顯示，對字段進(jìn)行重新排版縮短了高度，增強(qiáng)操作便捷性。

4. 適配多端方案

營銷活動涉及多端，移動端的交互樣式與操作邏輯相較于WEB端有很大差異。考慮到大小屏幕適應(yīng)性和操作流暢性，界面的樣式布局要求也會更高，要在有限的空間內(nèi)露出對用戶最重要的信息。

舉個例子，下圖為APP端購物車常態(tài)與編輯態(tài)的樣式，對階梯檔標(biāo)語做了最大程度的精簡：只顯示下一梯度的引導(dǎo)文案，且弱化湊單入口，通過箭頭來引導(dǎo)用戶點(diǎn)擊。

△ APP購物車2.0版本

在全局版式上對所有字段做了優(yōu)先級排序，除商品基本信息外，優(yōu)惠活動切換的優(yōu)先級較高，所以把較低頻的數(shù)量調(diào)整和SKU切換功能進(jìn)行折疊，僅在編輯狀態(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)簽在不同頁面的處理方式就有較大不同：

△ APP端的列表頁、商詳頁、購物車

在滿足業(yè)務(wù)需求的前提下，盡可能對頁面樣式進(jìn)行精簡處理：

• 價格：活動下默認(rèn)取用戶能享受的最低sku價展示。詳情頁作為重要營銷載體需展示完整價格信息——活動價和原價，但列表頁、購物車則隱藏處理。
• 標(biāo)簽：針對不同頁面特性做不同處理，不僅要控制展示數(shù)量，位置和樣式也需靈活可變。比如購物車頁空間有限，則隱藏銷售標(biāo)簽，優(yōu)化活動標(biāo)簽為文字標(biāo)，前置于商品名。

再讓我們細(xì)化來看標(biāo)簽的展示邏輯：

△ 部分主標(biāo)簽樣式

現(xiàn)有標(biāo)簽數(shù)量20+，所以根據(jù)標(biāo)簽屬性進(jìn)行了分類，且大類內(nèi)部再參考業(yè)務(wù)優(yōu)先級做了排序，對同一商品的顯示數(shù)量進(jìn)行控制，優(yōu)先露出更重要的標(biāo)簽，提升易讀性。

視覺上對標(biāo)簽樣式做了統(tǒng)一，所有活動標(biāo)簽同一色系，銷售標(biāo)簽根據(jù)系統(tǒng)和人工配置作了細(xì)分。庫存標(biāo)簽則較特殊，打標(biāo)在購物車的圖上，需根據(jù)商品的不同狀態(tài)作明顯的區(qū)分。

此外還有多色可選／產(chǎn)地制造等各類標(biāo)簽，后續(xù)隨著功能增多也需要考慮更多的優(yōu)化樣式，我們也在持續(xù)迭代優(yōu)化中。

編者注：面對各種標(biāo)簽屬性，如何設(shè)計出最符合當(dāng)前場景的標(biāo)簽，這篇好文給你答案→《進(jìn)階知識！超全面的標(biāo)記系統(tǒng)設(shè)計總結(jié)》

結(jié)語

營銷線功能復(fù)雜，因業(yè)務(wù)調(diào)整、功能增加等線上版本已迭代多次，在項目實(shí)際落地過程中也會遇到不少問題。本文篇幅有限，僅做了項目前期的一個概述，綜上總結(jié)一下設(shè)計心得：

• 設(shè)計形式追隨功能——營銷線應(yīng)以業(yè)務(wù)需求為導(dǎo)向，避免新穎美觀卻不能解決實(shí)際問題的設(shè)計，如何提升產(chǎn)品轉(zhuǎn)化率才是交互設(shè)計師需要重點(diǎn)關(guān)注的。
• 好用易用為首要目標(biāo)——營銷活動往往信息量巨大，又容易因時間和操作等因素而變化頻繁，所以要盡量保持樣式簡潔和邏輯清晰，讓用戶能高效地瀏覽操作，減少購物中的困惑和焦慮感。
• 以用戶為中心——深入挖掘用戶行為習(xí)慣，真正從用戶的角度去分析購物流程中可能會出現(xiàn)的問題，考慮多端多場景的兼容，保證每個觸點(diǎn)都能得到及時有效的反饋，在滿足業(yè)務(wù)需求下保持良好的用戶體驗。

歡迎關(guān)注作者「網(wǎng)易UEDC」的微信公眾號：

「看網(wǎng)易嚴(yán)選！你還能學(xué)到這些」

• 《設(shè)計實(shí)戰(zhàn)！網(wǎng)易嚴(yán)選APP的品牌設(shè)計過程全揭秘》
• 《設(shè)計實(shí)戰(zhàn)案例！談?wù)劸W(wǎng)易嚴(yán)選企業(yè)購的交互設(shè)計》
• 《網(wǎng)易嚴(yán)選設(shè)計師：如何提高產(chǎn)品思維？》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com