山東網站建設

山東網站製作
當前位置: 首 頁 >> 新聞中心 >> 行業新聞

案例分析:商品列表頁應如何布局?

案例分析:商品列表頁應如何布局?

發布日期:2018-06-20 作者: 點擊:


相信大家在進行電商類產品設計的時候,肯定會有關於商品列表的相關頁麵,那麽本文主要講述我對待商品列表頁的看法,商品列表頁的框架如何選擇,如何設計。

很多產品經理在進行自己公司的產品設計時,很容易陷入“瞎姬霸抄”的情況,首先我並不反對“抄”,但是要知道為什麽抄,怎麽樣抄才是對的。

很多產品經理在進行產品方案構思的時候,往往緊盯大廠,或者盯著自己一直使用的某款產品,照搬過來,但是並沒有仔細思考別人為什麽要這麽做,AG平台這麽做是否適合?

首先統一一下名詞解釋,本文所闡述的列表,為固定列表項的樣式後,根據分頁數據顯示的多少,按照固定樣式依次展示的頁麵。【主要是區分列表頁和活動頁】,定製結構的活動頁不在此討論範圍。

一、商品列表頁的幾種常用元素

AG平台先看一下幾種電商類App是如何選擇其頁麵元素的:

二、關於頂部區域的分析

頂部區域的設計有一個很大的關係是:看用戶的前置行為是什麽?

如果用戶是點擊某一個分類進入,或者是進行了搜索,那麽用戶是有指定性的期望的,那麽這個時候就要思考,用戶此時想要什麽呢?

毫無疑問,對於有指向性質的,那麽就是篩選、排序、搜索等一係列能夠為用戶縮小範圍的產品功能。

淘寶搜索“女裝”時的列表頁

京東搜索“女裝”時的列表頁

如果用戶在進入一個列表頁麵時是沒有指向性需求的,此時列表頁麵要做的不是去滿足用戶需求,而是幫助用戶發現需求。可以通過切換TAB,提供新的承接版塊等方式來解決。

三、關於底部區域的分析

列表底部區域的設計比較簡單,目前就幾種方式:

  • 無限列表,始終沒有底;

  • 有限列表,到底後上滑切換TAB;

  • 有限列表,上滑後到底,提供提示;

  • 有限列表,上滑到底後,尾部使用其他模塊拚接。

如何選擇和使用還是要看用戶需求和業務現狀,幾種情況:

1. 用戶有一定指向性商品需求,但是平台的商品不多

這種情況,無限列表直接PASS掉,本來商品就不多,不可能使用無限列表。

一般情況下,如果是采用底部提示的情況,那麽會給用戶造成一種平台商品不足的情況(這種情況需要評估以目前的平台定位用戶是否會由此對平台產生負麵評價),一般來說,采用底部拚接其他模塊的方式,友好的告訴用戶:“你要找的商品沒有了,但是我給你推薦了一些別的,你再看看”的感覺,避免尷尬。

小米商城搜索手機,商品列表快結束後拚接了文章模塊和其他產品推薦模塊避免尷尬

2. 用戶有一定指向性商品需求,但是平台的商品很多

這種情況,可以考慮采用無限列表(可以理解為很長的有限列表),當然需要評估用戶平均滑動多少屏才能到達列表底部,那麽底部可以提供一個簡短的提示。

3. 用戶有無指向性商品需求,但是平台的商品很多

這種情況一般使用無限列表,此時用戶處於一種“逛”的心態,AG平台往往會分析用戶喜好給用戶推薦可能需要的產品,從而試圖讓用戶產生購買。

4. 用戶有無指向性商品需求,但是平台的商品不多

前提是平台商品不多,但是用戶很多時候進入商城是並沒有明確的購買東西,是帶有“逛”的因素來看商品,那麽這個時候怎麽樣解決這個問題呢?

一般情況下會在產品的首頁和活動遇到這個問題,在平台產品不多的情況下,往往采用分類TAB的形式,用戶產生滑動行為的時候,進行TAB定位給用戶一定的告知。

如果在該TAB所綁定的商品沒有對用戶產生吸引,在滑動的時候自動切換到下一個TAB,試圖通過其他的TAB中的產品讓用戶產生購買,同時TAB也能給用戶傳遞一定的認知。

5. 關於中間區域的分析

中間區域在我看來是最關鍵的區域,也是最能看出東西來的區域,首先如何進行中間區域的產品設計呢?在我看來有幾個核心原則:

  • 布局突出用戶需求,根據不同產品展示不同需求

  • 根據列表頁的商品數量進行列表頁的布局設計

  • 避免用戶的視覺疲勞

(1)布局突出用戶需求,根據不同產品展示不同需求

商品列表頁中間區域的布局主要有兩種:一種是左右區塊,一種是單行區塊。

那麽什麽情況下使用左右區塊,什麽情況下使用單行區塊這個問題不知道大家有沒有想過。

首先如果一個用戶去買衣服,那麽更加注重的是圖片;如果一個用戶去買電腦,那麽圖片其實對於給用戶的選擇參考就少了很多,更多的是依靠產品的參數特點。

那麽從布局的角度考慮,如果采用左右區塊,屏幕的大部分麵積將會被圖片占據,用戶的視覺聚焦將會很明顯的聚焦在圖片上。如果采用單行區塊,左圖右文或者右圖左文的形式,那麽用戶將會把視覺聚焦在某一個固定區域,不用來回轉移眼神就能清楚的看到產品的參數特點。

典型例子1:淘寶的女裝列表頁和淘寶的電腦列表頁

當然了,淘寶也提供了用戶切換布局的功能,但是默認進來的布局就已經能夠說明大部分用戶的使用習慣了。

但是其實對於某一個具體商品列表頁,這樣的分析遠遠不夠,AG平台還要繼續深挖用戶的用戶進行布局。打一個比方:假設一個用戶買電腦,對於大部分用戶來說主要會考慮哪些因素?

大家看看那些手機廠商的發布會就知道用戶關心什麽了:屏幕大小邊框、拍照、電池、價格。很多時候是這個在這些問題上做文章。

那麽AG平台接下來看下,如何在列表頁突出用戶關心的信息的。

典型例子2:淘寶搜手機的列表頁和天貓搜手機的列表頁

那麽在這一步,天貓搜索手機的列表顯得更加突出產品特點,突出了大部分用戶關心的產品特性。更加符合用戶的體驗。

(2)根據列表頁的商品數量進行列表頁的布局設計

從用戶角度,AG平台可以根據產品對用戶的認知,進行左右布局或者單行布局,但是很多時候AG平台也要考慮平台的產品構成。假設對一個新興的電商平台而言,本身的商品數量不是很多的情況下,AG平台也要考慮不同的列表布局給用戶的感受。

一個很明顯的點就是數量的多少,假設一個平台的平均一個列表的商品隻有 20 個不到(這個跟平台的商品定位有比較大的關係),如果采用單行布局,用戶可能需要滑動 5 屏,可一定程度上降低對平台產品不足的心理認知。

如果采用左右布局,用戶將會很快的滑動至底部,此時用戶對平台的信任感很難提升,所以此時通常需要文字提示或者交互的方式來提示用戶。

典型例子:網易嚴選由於嚴選的定位,某一個類目的產品的確是較少的,但是在滑動至最底部的時候給了用戶文字提示-橫向滑動切換分類。

在這裏麵 其實遇到這種情況,有兩種方式:一種是提示用戶橫向切換,一種是直接向上滑動切換分類,我個人建議是提示用戶橫向切換更為合適。

打個比方:小A去商場買衣服,走著走了衣服快看完了都沒有中意的,這個時候如果小A再往前走就是褲子了,如果不告知一直讓小A往前走,小A會明顯的感到奇怪,我不是看的衣服嗎?怎麽到褲子了?

如果是在衣服的盡頭給一個標簽,上麵寫著【前方是褲子】小A就不會感覺到跳躍感,而是有準備的去瀏覽褲子,如果有了這個心理預期,也不準備買褲子,那麽可能會再回去看看衣服。

(3)避免用戶的視覺疲勞

這一點很好理解啦,在長列表的情況下,假設頁麵布局單一,很容易產生視覺疲勞,很多情況下,為了滑動而滑動。很多情況下容易遺漏很多不錯的商品,這種情況就要依靠布局來解決視覺疲勞的問題。

一個例子就足夠證明了,請看:

典型例子:淘寶的女裝列表頁和京東的女裝列表頁

四、案例分析

那麽我已經把我的觀點的想法表達完畢,接下來,AG平台通過幾個案例來分析其商品布局是否合理。

1 號店


1 號店可以看出商品的分頁頁數,可以看出商品絕對充足,但是不管是手機電腦,還是服飾鞋帽,都默認使用了單行的列表布局。從之前的分析看出,明顯是不適合的,對於服飾鞋帽這些商品而言,沒有突出圖片,文字占據了大部分區域。對於手機電腦,其產品本身的特點也沒有突出。

給用戶提供的視圖切換功能看似人性化,實則想的不夠周全並且太過明顯,為何不多做一步,給出最合適的視圖,弱化切換功能。

甘草醫生

甘草醫生商城的商品數量較少,從照片看出可能也是走精品路線,但是每個類目 10 個左右,總共商品相加 40 種不到,這裏麵存在三大問題:

  • 第一點:使用一個列表將不同分類的商品列表拚接,進入列表時不會感覺馬上到底,但是總體商品數不足,整體列表也會迅速到底,如果采用單行布局可以拉長整個列表長度,可能更為合適。

  • 第二點:從販賣的商品種類看,商品的圖片不是用戶購買的核心動力,核心動力還是在於產品的功效,但是左右布局無法將功效很好的透出,所以采用單行列表+功效標簽的形式可能會更加容易讓用戶找到滿意的產品。

  • 第三點:定位無效,當列表已經切換到其他分類時,頂部的分類還沒有切換。

拚多多

拚多多關於手機搜索的商品列表的這種產品設計方式,把滿足用戶需求的大部分工作交給了設計師。


本文網址:http://www.heimayibanjia.com/news/465.html

關鍵詞:營銷型網站建設,山東營銷型網站建設,山東營銷型網站製作

最近瀏覽:

  • 在線客服
  • 聯係電話
    18615652552
  • 在線留言
  • 關注AG平台
  • 在線谘詢
    歡迎給AG平台留言
    請在此輸入留言內容,AG平台會盡快與您聯係。
    姓名
    聯係人
    電話
    座機/手機號碼
    郵箱
    郵箱
    地址
    地址