淘寶裝修教程:2017淘寶手機(jī)詳情頁怎么裝修?

2017淘寶手機(jī)詳情頁怎么裝修?手機(jī)淘寶不斷升級(jí)優(yōu)化對(duì)手機(jī)詳情頁的要求也有了新變化。那么2017淘寶手機(jī)詳情頁怎么裝修?跟著裝修宅小編一起看看淘寶官方說的手機(jī)詳情頁要怎么做吧！

2017淘寶手機(jī)詳情頁怎么裝修?

一、2017手機(jī)詳情頁改版

打開一個(gè)電商應(yīng)用的首頁，我們隨處可見復(fù)雜的界面布局，眼花繚亂的商品圖和各式各樣的廣告文案，他們無時(shí)無刻爭(zhēng)先恐后的想要抓住你的眼球。而當(dāng)你打開一個(gè)聊天應(yīng)用的首頁，你看到的只有一個(gè)簡(jiǎn)單的聊天列表，他們只是靜靜地等待你作出選擇。這種狀況將在淘寶2017中得到改善，更有更多新功能的出現(xiàn)。

從根本上來說，決定你在一個(gè)產(chǎn)品中看到什么取決于產(chǎn)品策略上希望你看到什么，也就是我們通常所說的商業(yè)目的。對(duì)于電商類產(chǎn)品，把東西賣出去，是千古不變的真理，所以在界面上運(yùn)用豐富的內(nèi)容，商品圖和各種優(yōu)惠來引起你的注意。從產(chǎn)品原始目的差異出發(fā)，便會(huì)有完全不同的產(chǎn)品面貌。、

淘寶從老本行電商產(chǎn)品聊起，在把東西買出去這個(gè)大的原則下，細(xì)分的產(chǎn)品中又會(huì)承載不同場(chǎng)景的目的。比如說購(gòu)物車是一個(gè)效率型產(chǎn)品，存在的目的是為了讓用戶更便捷的批量購(gòu)物。而商品詳情則寄托了非常強(qiáng)的轉(zhuǎn)化目的，所做的一切都是要讓你在這里下單購(gòu)買。設(shè)計(jì)這些承載了不同商業(yè)目的的產(chǎn)品時(shí)，會(huì)需要不同的設(shè)計(jì)思路。在本次2017手機(jī)詳情的改版升級(jí)中淘寶嘗試從產(chǎn)品的本質(zhì)出發(fā)—從商業(yè)目標(biāo)維度去挖掘設(shè)計(jì)改進(jìn)方向。

二、手機(jī)詳情頁轉(zhuǎn)化率to使用效率

手機(jī)詳情作為手淘流量最大的產(chǎn)品之一，在整個(gè)電商產(chǎn)品體系中起到非常重要的作用。從細(xì)分的場(chǎng)景目的上來講，主要有兩方面考量：一是承載用戶最終的購(gòu)買轉(zhuǎn)化。二是當(dāng)用戶轉(zhuǎn)化不了的時(shí)候?qū)⒘髁恳龑?dǎo)分配給其他相似商品，也就是分流。拋開細(xì)分場(chǎng)景，從大的閉環(huán)來講，分流也是為了用戶最終找到感興趣的商品而促成轉(zhuǎn)化。

有了大的商業(yè)目標(biāo)，我們?cè)賮砜纯词痔栽斍槟壳鞍姹驹隗w驗(yàn)上與商業(yè)目標(biāo)的契合度如何。首先我們對(duì)手機(jī)詳情的整體數(shù)據(jù)進(jìn)行一次分析。

從數(shù)據(jù)上來看，用戶在手機(jī)詳情中點(diǎn)擊數(shù)據(jù)排名如上圖所示，其中我們可以看到紅色的三塊屬于商品自身內(nèi)容型元素，灰色的部分屬于平臺(tái)基礎(chǔ)功能型元素。而商品內(nèi)容的頭圖，圖文詳情，評(píng)價(jià)恰恰又在點(diǎn)擊率上要高出其他元素非常多，這說明用戶在手機(jī)詳情中對(duì)商品自身內(nèi)容，頭圖，圖文詳情，評(píng)價(jià)的關(guān)注度最高。那么這三者對(duì)轉(zhuǎn)化率的影響怎么樣呢?帶著這個(gè)疑問，我們拿到了另一組對(duì)比數(shù)據(jù)。

抽取一批已成交的用戶去看他們對(duì)這三塊內(nèi)容的瀏覽行為。數(shù)據(jù)結(jié)果如上圖所示，在抽樣的已成交的用戶中，看過基礎(chǔ)信息+詳情+評(píng)價(jià)的用戶占比最高，且單獨(dú)看過詳情或評(píng)價(jià)的用戶會(huì)比只看基礎(chǔ)信息的用戶多很多，由此我們可以得出結(jié)論—基礎(chǔ)信息詳情和評(píng)價(jià)會(huì)直接影響用戶的購(gòu)買決策!

1、問題聚焦

發(fā)現(xiàn)了內(nèi)容與商業(yè)目標(biāo)的關(guān)聯(lián)，我們?cè)倩氐缴唐吩斍榈慕缑姹旧?，看看用戶在瀏覽這三大內(nèi)容時(shí)會(huì)遇到什么問題。拋開首屏無需操作就能直觀查看的基礎(chǔ)信息我們將圖文詳情與評(píng)價(jià)的入口一一羅列，并思考其中的問題所在。

※圖文詳情入口一

頭圖右滑至最后一張圖片，滑動(dòng)釋放進(jìn)入圖文詳情。

※優(yōu)點(diǎn)分析

詳情頭圖從數(shù)據(jù)上可看出具有很強(qiáng)的吸引力，用戶滑動(dòng)大圖也帶動(dòng)了這個(gè)入口進(jìn)入圖文詳情的數(shù)據(jù)，此入口數(shù)據(jù)狀況良好且建立了一定的操作心智。

※缺點(diǎn)分析

入口隱藏過深不能直接命中想要看圖文詳情的用戶，操作效率不高。

※圖文詳情入口二

滑動(dòng)頁面地2-3屏位置繼續(xù)拖動(dòng)釋放進(jìn)入圖文詳情。

※優(yōu)點(diǎn)分析

操作上屬于一個(gè)常規(guī)瀏覽方式，內(nèi)容瀏覽順序符合邏輯規(guī)律。

※缺點(diǎn)分析

上方業(yè)務(wù)接入過多，模塊展現(xiàn)雜亂，對(duì)于重要程度較高的內(nèi)容入口需要三屏才能觸達(dá)，操作效率不高。

※評(píng)價(jià)入口

頁面地2屏位置卡片

※優(yōu)點(diǎn)分析

卡片面積大，且透出了評(píng)價(jià)內(nèi)容，點(diǎn)擊效果不錯(cuò)

※缺點(diǎn)分析

內(nèi)容透出過少，評(píng)價(jià)作為商品最有參考價(jià)值的內(nèi)容往往給消費(fèi)者的購(gòu)買決策起很大的影響，用戶在瀏覽頁面的時(shí)候有隨時(shí)查看的需求。且用戶在查看圖文詳情時(shí)想要快速查看評(píng)價(jià)需要不斷往上滑動(dòng)頁面。

綜合上面羅列的線上版本優(yōu)劣，我們可以看出目前線上版本三大內(nèi)容之間存在的問題，如上圖所示，用戶在瀏覽基礎(chǔ)信息，評(píng)價(jià)，圖文詳情的瀏覽效率較低。且基礎(chǔ)信息，圖文詳情，評(píng)價(jià)對(duì)用戶的購(gòu)買決策有強(qiáng)影響，也是用戶最關(guān)注的內(nèi)容，提升這三塊內(nèi)容之間的使用效率能夠?qū)ι虡I(yè)目標(biāo)轉(zhuǎn)化率產(chǎn)生積極的作用。

※設(shè)計(jì)目標(biāo)

結(jié)合以上分析，我們得到了這次的改版的設(shè)計(jì)方向--提升用戶在基礎(chǔ)信息，圖文詳情，評(píng)價(jià)三者之間的使用效率。

2、設(shè)計(jì)方案

好了，既然有了目標(biāo)，那么事情就不再盲目，我們將本次商品詳情的改版定義在結(jié)構(gòu)升級(jí)上，從體驗(yàn)路徑角度去改造詳情框架，提升用戶對(duì)基礎(chǔ)信息，評(píng)價(jià)，圖文詳情的使用效率。

A、內(nèi)容聚焦

首先，我們按照用戶關(guān)注度排序?qū)⒒A(chǔ)信息，圖文詳情，評(píng)價(jià)，入口聚合，整合到導(dǎo)航欄中，并在導(dǎo)航的最末端給出推薦的入口，讓那些對(duì)當(dāng)前商品并不滿意的用戶能有更便捷的引導(dǎo)方式分流到其他商品去，從而將流量流轉(zhuǎn)起來。導(dǎo)航欄在滑動(dòng)過頭圖后出現(xiàn)，給用戶高效定位想要內(nèi)容的便捷方式。頭圖用戶關(guān)注度非常高，也整合到全局導(dǎo)航中給出縮略圖展示，不管瀏覽到哪一屏都可以高效進(jìn)入頭圖查看。

B、內(nèi)容扁平化

既然是結(jié)構(gòu)升級(jí)，那么什么樣的結(jié)構(gòu)是效率最高的?解決效率問題，最關(guān)鍵的是縮短體驗(yàn)路徑，在有了導(dǎo)航能夠快速查看內(nèi)容的前提下，我們又將原先大部分的需跳轉(zhuǎn)頁面內(nèi)容直接平鋪在詳情首頁，讓瀏覽路徑能夠以一條直線進(jìn)行到底。這個(gè)時(shí)候，導(dǎo)航的功能就不再是常規(guī)的tab形式，而是更高效的頁面定位形式。

當(dāng)然，現(xiàn)實(shí)的方案推進(jìn)中總會(huì)產(chǎn)生新的問題，在最初的設(shè)計(jì)方案中，我們堅(jiān)持這個(gè)扁平的初衷將評(píng)價(jià)的內(nèi)容也直接平鋪在詳情首頁，但一個(gè)爆款商品多則上萬的評(píng)價(jià)內(nèi)容讓我們不得不放棄了這個(gè)念頭。

做完上面兩個(gè)改進(jìn)，在整個(gè)手機(jī)詳情的結(jié)構(gòu)上有了比較清晰的內(nèi)容構(gòu)成。體驗(yàn)效率已經(jīng)得到解決。那么還有什么是我們可以做的更好的?

C、更多擴(kuò)展可能性

通常情況下用戶在購(gòu)買不同類目的商品時(shí)，所需要的決策參考內(nèi)容是不一樣的。比如說你去買一件衣服，或許你更看重穿上的效果和質(zhì)量，這個(gè)時(shí)候你會(huì)需要看圖文詳情和最好有買家秀或者評(píng)價(jià)的內(nèi)容。你在買一臺(tái)電腦時(shí)或許會(huì)更關(guān)注電腦的性能，這個(gè)時(shí)候你更需要詳細(xì)的配置參數(shù)和評(píng)測(cè)的內(nèi)容。

基于這個(gè)差異，我們可以提供在導(dǎo)航上進(jìn)行內(nèi)容的擴(kuò)展的可能性，比如對(duì)于服裝商品我們可以額外穿透買家秀的內(nèi)容，給用戶更多中立的參考。對(duì)于電子產(chǎn)品也可以穿透評(píng)測(cè)內(nèi)容。

我們從設(shè)計(jì)上對(duì)導(dǎo)航的擴(kuò)展位進(jìn)行了定義，作為定制提升充內(nèi)容，我們將它的位置排在推薦前，詳情后，不管擴(kuò)展出來的是轉(zhuǎn)化型內(nèi)容還是分流型內(nèi)容，都能有比較符合邏輯的定位，同時(shí)也不干擾基礎(chǔ)信息，評(píng)價(jià)、圖文詳情三塊主體內(nèi)容。

3、體驗(yàn)改進(jìn)對(duì)商業(yè)指標(biāo)的正反饋

回到主題本身，我們從商業(yè)的目標(biāo)著手，對(duì)產(chǎn)品進(jìn)行數(shù)據(jù)分析與佐證，并最終推導(dǎo)出設(shè)計(jì)目標(biāo)。

正反饋

在上線前期，我們抽取一定體量的用戶進(jìn)行了灰度測(cè)試，從一周的數(shù)據(jù)來看，圖文詳情，推薦，評(píng)價(jià)的點(diǎn)擊率均有不錯(cuò)的提升，其中圖文詳情打開率更是翻倍增長(zhǎng)。強(qiáng)化推薦后用戶的體驗(yàn)鏈路上有了更符合行為邏輯的分流陣地，這也帶來了一個(gè)新的可以思考的點(diǎn)——推薦作為商家私域?qū)傩粤髁?，如何幫助商家更高效的玩轉(zhuǎn)起來?這個(gè)課題將成為我們接下去工作的重點(diǎn)。

當(dāng)然，產(chǎn)品設(shè)計(jì)僅僅是商業(yè)世界中的一小部分，很多時(shí)候設(shè)計(jì)的優(yōu)化甚至不能帶來明確的反饋。對(duì)于成交轉(zhuǎn)化率來講，商品自身的影響因素或許更加重要。但把思考的格局放大，從最本質(zhì)的目的著手，運(yùn)用設(shè)計(jì)的手段引導(dǎo)和改善用戶的體驗(yàn)，一定會(huì)對(duì)商業(yè)目標(biāo)產(chǎn)生正向的作用。

三、手機(jī)詳情頁新玩法

隨著互聯(lián)網(wǎng)互動(dòng)方式的發(fā)展，直播，互動(dòng)游戲越來越多的出現(xiàn)在各類app中。對(duì)于商品的展示，我們同樣可以提供多元化的呈現(xiàn)形式來引起用戶的注意，同時(shí)豐富商家的運(yùn)營(yíng)手段。商品詳情在過去的2016年有了越來越豐富的商品呈現(xiàn)形式，這些呈現(xiàn)形式也對(duì)我們的商業(yè)目標(biāo)產(chǎn)生著積極的影響。

全景主圖普通使用方式

全景圖作為一種全新的呈現(xiàn)形式最終的展現(xiàn)效果很大程度上取決于商家的創(chuàng)意。上圖中模特的搖擺方式是較為普通的呈現(xiàn)形式。下圖中的商家則將圖片左右搖擺的手勢(shì)與產(chǎn)品創(chuàng)意結(jié)合，更好的通過全景圖的能力展現(xiàn)自己的商品，成為全景圖項(xiàng)目中的一個(gè)經(jīng)典案例。對(duì)于不同的商家創(chuàng)意，商品的呈現(xiàn)也會(huì)多種多樣。

全景圖經(jīng)典呈現(xiàn)案例

ar試妝

全景圖，ar試妝等新形式在手機(jī)詳情上的試水，針對(duì)不同品類的商品提供了更多更新潮的商品呈現(xiàn)方式，取得了非常不錯(cuò)的效果。也許在幾年內(nèi)，商品的呈現(xiàn)形式將發(fā)生更大的變化，這也將成為淘寶手機(jī)詳情的挑戰(zhàn)與機(jī)遇。

2017淘寶手機(jī)詳情頁怎么裝修小編就講到這里了，希望這些手機(jī)詳情頁的新功能大家能多多嘗試。更多關(guān)于淘寶店鋪裝修的內(nèi)容可以在裝修宅學(xué)習(xí)！

這個(gè)問題還有疑問的話，可以加幕.思.城火星老師免費(fèi)咨詢，微.信號(hào)是為: msc496。

推薦閱讀：

Wish去年GMV增幅100%,今年還有這些大變化

商品顯示“排查中”的相關(guān)咨詢Q&A

天貓扣12分會(huì)如何樣？扣分原因有什么

更多資訊請(qǐng)關(guān)注幕 思 城。