日活提升37%！用一個實戰案例，幫你了解B端高手的設計思路

推薦閱讀

圍繞衫海精 APP 直播專區設計，跟大家分享一些我做項目的過程和思考。通過本文，您將了解到以下內容：

1. 如何全鏈路思考需求以及推進落地；
2. 如何在設計過程中充分考慮電腦端和移動端用戶的需求和使用習慣；
3. 如何平衡設計方案和技術實現之間的卡點；

業務方需求

響應公司業務發展，布局直播業務，讓直播零售商更高效的選到適合直播的商品，進一步帶動平臺履約、金融等相關業務，需要在衫海精各端(APP、小程序、電腦端)增加直播專區的模塊。

需求分析

1. 直播款怎么來？如何管理？需要哪些設置項？
2. 電腦端、APP、小程序展示方案需要包括哪些內容，如何呈現？呈現方式有什么差異？

解決策略

一、后臺方案

1. 增加獨立的直播款管理后臺，對款式進行管理

依據系統現有的款式庫管理后臺，將打了直播款標簽的款式從中抽離，形成獨立的直播款管理后臺。

①直播款管理后臺功能梳理：

管理后臺共分為：系統導航、查詢條件、列表批量設置、商品列表、分頁器和列表設置 5 個部分。

系統導航：在已有導航中增加子菜單-直播款管理后臺

查詢條件：商品名稱/貨號、工廠/檔口、商品狀態、賣點標簽、所屬樓層、類目、風格、適用年齡、城市

列表批量設置：樓層設置、批量設置直播價、批量設置傭金比例、批量設置賣點標簽、批量設置所屬樓層、批量設置庫存、批量設置快返時間

商品列表：序號、操作、商品圖片、商品名稱、工廠/檔口、商品狀態、進貨價、直播價、傭金比例、庫存、快返時間、賣點標簽、所屬樓層、展示順序

分頁器：分頁器

②設計思路

后臺頁面的設計準則為：功能清晰、交互明確、反饋及時，保證客戶的操作效率。

③頁面呈現

功能嵌套在現有的 BOSS 系統中，頁面采用“T”字型結構。

入口菜單設計

頁面設計

彈窗設計

二、前端方案

1. APP/小程序

①首頁方案

結合業務定位以及公司對直播業務的資源傾斜，需要給直播專區足夠高的曝光量，保證功能在首頁的露出，可以吸引和引導直播零售商的點擊，助力業務的轉化。

直播專區位置確定思路：

1. 需要保證直播專區在首頁可以有效露出。
2. 買手精選、金剛區是流量分發入口，不易調整。
3. 優質檔口、選品中心、爆款推薦，與直播專區是為“逛”的零售商客戶所準備，根據本次的業務要求，直播專區優先級更高

具體位置：直播專區入口在金剛區和瓷片區之間展示

小程序和 APP 展示

②直播專區入口方案設計

③直播專區詳情頁設計

直播專區詳情頁交互方案制定

方案一:

設定商品以瀑布流的方式按樓層分層展示，頁面上滑到一定位置樓層名稱吸頂，選中狀態跟隨樓層滑動自動切換；開發實際情況為：單個樓層的商品數量不確定，所以每個樓層商品數據后端全部返給前端。但是當樓層商品數量較少，標題相互切換時，頁面容易出現大幅度跳動，影響使用體驗。

方案二:

所有樓層橫向平鋪展示，橫向滑動可依次查看全部樓層，單個樓層的商品數量后端全部返回，稍顯不足的是不同樓層分區的直觀感受會差些，但是整體方案兼容性高，交互流暢，使用體驗良好。

④直播商品價格展示

設計難點：

因為直播款同樣可以是電商款，所以在之前價格規則不變的前提下，同時要展示建議直播價和傭金比例，所以排版方式是本次設計的重點。

全部頁面展示

2. PC 端

①首頁方案

保證直播專區模塊可以在首屏露出。以 1920*1080 的分辨率為準，1080 的高度并不是全部展示設計的內容，經過計算(以 Chrome 瀏覽器為準)有效展示高度為 942px。

直播商品卡片在 PC 端首頁應該如何展示

相比于移動端，PC 端的大屏幕在展示內容方面有天然的優勢。

直播專區

②直播專區詳情頁

交互體驗方案

單個樓層的商品，后端數據全部返給前端，前端不做分頁處理全部請求，左側錨點自動定位到對應樓層，內容呼應。

直播款詳情頁

數據驗證

經過三周開發，順利上線，衫海精日活提升 32%，月活提升 27%，收到了業務方一致的好評。

謝謝！

歡迎關注作者微信公眾號：「西城門設計」