以米家有品為例,談談電商產品封面功能設計

1 評論 7087 瀏覽 38 收藏 12 分鐘

本文主要是講電商產品封面功能設計,以米家有品為例,功能主要借鑒了網易嚴選的商品封面功能,一起來看看吧~

該設計主要是對米家有品平臺的商品分享功能進行了一次優化,功能主要借鑒了當時網易嚴選的商品封面功能。文檔撰寫的時候,有品(版本為V1.13.6)還沒有推出該功能,所以就有了這樣的一次練習。

當然在自己練習之后,有品更新了相應的功能,這樣也可以在對比中,看看思路和有品的產品經理們有什么樣的一些區別,作為自己練習之后的學習總結吧。

一、需求背景

當前有品app存在的問題:

我們在后臺的數據監測中,發現一些在商品分享功能中的一些數據問題,用戶有較高的分享熱情,會將商城中的商品分享至其他社交平臺中,但是分享出來的圖文消息形式的鏈接打開率卻不是很高,這樣不利于用戶通過鏈接來到有品平臺查看商品,進而下單購買。

所以現在需要一種能夠吸引用戶打開鏈接的新的分享模式,而在新的模式下,用戶可以通過直白的說明和較明顯的商品圖片,來獲得直觀的商品感受,進而增加用戶打開鏈接查看商品詳情的愿望。

二、需求目的及明細

主要競品已有的解決方案:

觀察競品“網易嚴選”現有的分享路徑,提供了一個可以借鑒的解決思路,即“生成封面”功能。在商品詳情中選取了商品圖片、商品名、簡要商品介紹、商品價格與鏈接二維碼構成的一個圖片形式商品分享介紹,功能的實際效果比較切合有品分享打開率較低的解決思路。

但是在嚴選的“生成封面”中也還有一個不足的地方,就是在生成封面之后,是將封面圖片保存到了系統相冊之中,沒有引導用戶到其他平臺進行分享,用戶想分享該封面時需要有更多的操作,一定程度上降低了封面功能的效果。

針對有品app問題提出以下解決方案:

  1. 更改商品詳情頁中分享彈窗的樣式,增加“生成封面”選項;
  2. 利用現有商品詳情信息,生成物品詳情圖片—“封面”,并引導用戶進行分享。

三、相關流程

生成封面功能的業務邏輯:

生成封面的功能主要是將用戶和商品詳情之間緊密的聯系起來,通過較為有吸引力的商品展示方式,可以較好的吸引查看封面的用戶進入到有品中進一步了解商品詳情,從而在平臺里完成下單。

生成封面功能的業務流程:

業務流程主要分為兩個階段:用戶生成封面階段和封面打開階段。

  1. 生成階段主要是獲取商品相對應信息,來生成一張商品封面并引導用戶進行分享;
  2. 封面打開階段則主要是讓用戶得到相應的商品詳情并記錄一些統計數據,便于運營和產品效果分析。

生成封面功能的頁面流程:

而在有品app中,生成封面的功能主要是在商品詳情頁面中進行,需要通過分享功能選擇“生成封面”,獲取服務器端的封面后提供給用戶分享和保存的彈窗,引導用戶進行分享。

四、相關概念說明

生成封面與分享關系:

分享彈出頁中的原有分享路徑和功能不改變,只有當用戶生成封面后,才可以進行封面的分享。

商品封面與商品詳情關系:

商品封面中的信息主要來自于商品詳情,包括商品主圖、商品名稱、商品描述、商品價格和商品鏈接二維碼。

五、功能詳述

頁面分享彈出框

在商品詳情頁面通過已有的分享功能進入分享彈出框,彈出框新增生成封面選項,用戶點擊“生成封面”后,生成商品的封面,存入后跳轉到封面分享頁。若生成失敗則彈出提醒,成功進入下一頁面。

封面分享頁

封面分享頁可以從app原有的應用內截圖分享功能修改得來,截圖分享功能是在有品內進行截圖觸發的分享封面給好友功能,封面分享頁將借鑒這部分的頁面。用戶通過分享彈出框中的“生成封面”后觸發這個封面分享頁,其中包含“分享到”和“封面縮略圖”兩個部分。

  1. “分享到”可以將生成的封面分享到“微信好友”、“朋友圈”、“新浪微博”、“保存本地”,在用戶進行相應操作之后應彈出對應通知。
  2. “封面縮略圖”可以使用戶先看到封面的縮略圖,點擊后顯示完整封面,完整封面內容可以參看之后部分。

商品完整封面

商品完整封面由有品LOGO和商品詳情兩部分組成。其中商品詳情部分包含商品主圖、商品名稱、商品描述、商品價格和商品鏈接二維碼。

其中,商品主圖可以選用商品詳情中的第二張。商品描述部分暫定不能超過40字符,具體顯示方案還需和UI設計再商討進行。商品鏈接二維碼可以讓用戶識別后直接轉入移動端商品詳情。

六、簡單測試樣例

七、考核指標與計算方法

  1. 生成封面方法在總分享數中的占比:全商城商品生成封面次數/全商城商品總分享次數
  2. 生成封面后用戶打開率:全商城利用商品封面進入商品詳情的次數/全商城商品生成封面次數

八、功能區別分析

現在有品的版本是V1.17.3,可以對比一下已經推出的生成海報功能和我之前的練習“生成封面”的有什么樣的區別。

因為從流程上無法看出后臺進行的處理,主要就從交互的角度來分析一下:

1. 一些操作完成之后的文案角度

除了圖片上這些之外,還有在海報生成的時候有一個生成中的提示,但是時間太短沒截出來。具體的措辭就不再分析了,主要注意的是在文案的撰寫中可以引導用戶進一步的動作,或者讓用戶產生一定的滿足感,鼓勵用戶進行商品分享。

2. 分享彈出框的改動

彈出框的樣式沒有大的改變,但是由于生成海報的功能和復制鏈接的功能類似,而且海報對于商品的描述和展示更加清晰明了,所以就去除了原有的復制鏈接功能。

3. 海報分享頁

海報的分享頁面沒有使用已有的截圖分享功能,而是采用了與分享類似的樣式,這樣應該可以保證整個分享功能中樣式的統一。另外海報預覽也沒有將海報整體全部展示出來,而是將關鍵部分進行了展示,用戶可以點擊或保存本地進行查看。

4. 海報頁

海報部分不一樣的地方主要有三處:

  • 第一,海報主圖選擇了商品詳情第一張;
  • 第二,海報中添加了商品的優惠信息;
  • 第三,商品介紹的文字上限沒有搞清楚。

從圖上看應該支持比較長的文案,但是在家居套裝這個商品里也隱藏了一部分內容,我覺得背后還是有人為設置相應商品介紹的可能。

5. 其他

用戶登錄與未登錄是都可以在app內進行進行海報生成的,但是根據分享的文案和數據采集的角度來看,我覺得后臺在處理時還是會包含已登錄的用戶信息,作為分析用戶行為的數據,這對于電商平臺來講也是比較重要的。

 

本文由 @lianbo2006 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!