京東iPad作為一個獨(dú)立的客戶端app，在外界看來一直處于一個比較尷尬的境地。一方面對標(biāo)的電商類競品們大都放棄了Pad陣地，基本放棄了原生界面的開發(fā);一方面在京東內(nèi)部，相對于其他的客戶端，Pad的體量也一直占比不高。但作為以品質(zhì)保證、用心服務(wù)為價值觀的一款京東產(chǎn)品，我們依然希望為Pad端用戶設(shè)計最好的購物體驗(yàn),這也是京東人自上而下達(dá)成的共識與默契。因此，作為負(fù)責(zé)京東商城iPad端產(chǎn)品設(shè)計的上海設(shè)計部創(chuàng)新設(shè)計組，經(jīng)過大量的目標(biāo)用戶研究、商業(yè)邏輯梳理、前后臺研發(fā)溝通等工作后，于17年的春季上線了4.0版本。
在4.0改版立項(xiàng)之初，創(chuàng)新設(shè)計組與負(fù)責(zé)Pad的產(chǎn)品團(tuán)隊做了多次頭腦風(fēng)暴，除了新增業(yè)務(wù)之外，我們還應(yīng)從哪些方面提高用戶的購物體驗(yàn)?我們最終決定返璞歸真，回溯Pad端京東商城最初的目的是什么?我們需要服務(wù)的用戶有什么樣的特點(diǎn)和需求?其次，分析目前整個大的購物環(huán)境發(fā)生了哪些變化?用戶在京東的購物心理發(fā)生了哪些變化?Pad客戶端的性能和使用習(xí)慣發(fā)生了哪些變化?結(jié)合這些因素，我們最終定稿了4.0的改版方向，而商品詳情頁的改版方向也隨之確定下來。
在商業(yè)大背景下，任何決策都是服務(wù)于商業(yè)目的的，包括用戶體驗(yàn)設(shè)計。京東商城Pad端的商業(yè)目的就是讓使用Pad端京東的用戶更方便、高效的購買ta喜愛的商品。 體驗(yàn)設(shè)計可以賦能商業(yè)，為了最大化的實(shí)現(xiàn)商業(yè)目的，我們要做的就是發(fā)現(xiàn)Pad用戶的購物方式、喜好、需求特點(diǎn)，為他們定制最好的購物體驗(yàn)。
要想為Pad端用戶設(shè)計更好的購物體驗(yàn)，首先要了解Pad端的特點(diǎn)。Pad作為一款大屏的移動端設(shè)備，它和手機(jī)相比有以下幾個特點(diǎn)：
屏幕比一般的手機(jī)更大些，便于查看圖片、視頻等富媒體內(nèi)容
一般需要雙手操作
使用橫、豎屏的用戶都占一定的比重
性能的更新速度沒有手機(jī)快，很多用戶還在使用很老舊的設(shè)備
Pad一般作為”共享設(shè)備“和家人共同使用
Pad的使用時間不如手機(jī)碎片化，一般集中在中午、夜間、周末等空閑時間
一般在有wifi的環(huán)境下才能使用
Pad的這些特點(diǎn)也為我們刻畫了一副Pad用戶的粗略畫像。那么除了硬件設(shè)備帶來的使用習(xí)慣特點(diǎn)之外，在Pad京東的商品詳情頁，用戶又有哪些使用習(xí)慣和痛點(diǎn)呢?我們對改版前的商詳頁做了對比分析。
商品詳情頁作為承載商品介紹信息的主要頁面，對于引導(dǎo)用戶購買商品，提高“下單轉(zhuǎn)化率”至關(guān)重要。因此，商品詳情頁信息展示要做到足夠簡潔、易懂、易查找、易操作。
運(yùn)營目的制約易讀性
電商運(yùn)營團(tuán)隊為了吸引用戶下單，往往會發(fā)明許多促銷、活動、服務(wù)等業(yè)務(wù)，這些信息都需要展示在商品詳情頁中。而屏幕的尺寸是固定的，用戶的信息接收載荷有限，這就需要設(shè)計師通過轉(zhuǎn)移、隱藏、分類等手段將信息更好地組織起來，讓信息變得更加易讀。
△ 老版商詳豎屏
△ 老版商詳橫版
上圖是老版商品詳情頁的橫豎屏截圖，可以看出，在橫豎屏兩種模式下，內(nèi)容的排版是不一樣的。這其中的原因是為了在兩種屏幕模式下展示全部的內(nèi)容。Pad大屏幕的優(yōu)勢是可以展示商品大圖，而清晰的大圖/視頻是吸引用戶對商品感興趣的第一因素。促銷信息也很重要!對于大量的追求性價比的用戶來說，折扣、優(yōu)惠券、活動等促銷信息可以幫助他們從感興趣的多個商品中選擇一個性價比最高的商品。而規(guī)格、地址等信息又是用戶下單所必須選擇操作的信息。因此，為了服務(wù)于商業(yè)目的，老版的商品詳情頁將這些“重要內(nèi)容”統(tǒng)統(tǒng)擺在了首屏。
將繁雜的“重要信息”放在首屏變成了一項(xiàng)“政治任務(wù)”，為了完成這個任務(wù)，Pad京東商城在很長一段時間里不斷地對商詳首屏做細(xì)節(jié)的優(yōu)化，還要滿足業(yè)務(wù)方不斷的新需求。比如促銷活動的不斷豐富(滿減、滿贈等業(yè)務(wù)的增多)，京東物流業(yè)務(wù)的不斷增多(運(yùn)費(fèi)規(guī)則的不斷細(xì)化)，這些都導(dǎo)致了商詳首屏在閱讀體驗(yàn)方面的不堪負(fù)荷。不僅僅在設(shè)計層面，研發(fā)層面本來對同時維護(hù)橫豎屏兩套框架就有不同的看法，新業(yè)務(wù)的不斷增加也加重了研發(fā)團(tuán)隊的維護(hù)壓力。這些原因都促使了商詳頁面的重新設(shè)計。
內(nèi)容動線割裂
用戶在電商購物已基本上養(yǎng)成了一條主要動線：商品圖-價格優(yōu)惠-評價-圖文介紹-相似好貨。因此，主要動線內(nèi)容的關(guān)聯(lián)性很重要。舊版商詳在第一屏展示了商品圖和價格優(yōu)惠信息，但在評價，圖文介紹和相似好貨的展示方式卻有所割裂。
推薦套裝，相似好貨等導(dǎo)流內(nèi)容以tab形式展示在第二屏，很容易被用戶忽略。購物動線有所割裂。
針對老版本商品詳情頁的一系列體驗(yàn)問題，我們通過與產(chǎn)品、研發(fā)以及業(yè)務(wù)方的多輪溝通，確定了方案的優(yōu)先級與可行性，新版商品詳情頁主要從以下幾個維度來優(yōu)化的。
△ 4.0版商品詳情頁-豎版
為了保證信息的簡潔易讀，新版的商品詳情頁不再將價格優(yōu)惠等運(yùn)營相關(guān)內(nèi)容局限在第一屏，通過對內(nèi)容歸類，利用間距、分割線等視覺手段將內(nèi)容重新組織起來。卡片式設(shè)計有利于內(nèi)容的閱讀性，通過陰影層級將大篇幅的商品圖片置于文字內(nèi)容后方，又利用了漸變錯位動效讓用戶在瀏覽文字信息時逐漸隱去圖片的干擾。
京東的商品購買類型是多種多樣的，并且隨著運(yùn)營業(yè)務(wù)的拓展，商品購買類型會越來愈多，這就為商品詳情頁的展示框架設(shè)計帶來了挑戰(zhàn)。要設(shè)計一種可拓展兼容的標(biāo)準(zhǔn)化框架，且不僅僅滿足現(xiàn)有類型，還要兼顧以后可能的商品類型。了解業(yè)務(wù)邏輯是做好設(shè)計的前提，在于產(chǎn)品與業(yè)務(wù)方多方溝通后，經(jīng)過多輪的方案評審，我們采用了垂直式的樓層設(shè)計方案。將各類信息匯總分類，并歸屬于相應(yīng)的樓層模塊，并根據(jù)不同的商品購買類型，有后臺控制展示樓層信息。比如最重要的商品名稱和價格樓層，普通商品、全球購、山姆商品、秒殺商品等各自展示的信息都不相同。我們預(yù)先設(shè)計了最復(fù)雜商品類型的信息展示框架，并預(yù)留了未來可能增加的信息展示位。標(biāo)準(zhǔn)化框架有利于內(nèi)容的一致性，增強(qiáng)了易讀性，同時也降低了研發(fā)和維護(hù)成本。
△ 預(yù)售、全球購、秒殺商品的信息展示框架是一致的
彈框是另外一個例子，在4.0之前，Pad京東商城的彈框有很多種，在不同頁面場景下使用的彈框并沒有被統(tǒng)一。隨著4.0大改版的設(shè)計梳理，我們與研發(fā)同學(xué)一道梳理了彈框、toast、alert等組件的使用規(guī)范。商品詳情頁有很多的內(nèi)容是通過彈框展示的，我們使用新規(guī)范的彈框來為用戶營造了一致性的體驗(yàn)，降低了用戶的學(xué)習(xí)成本，提高了閱讀性。
△ 4.0商品詳情頁的彈框
用戶通過前期的搜索挑選，當(dāng)進(jìn)入商品詳情頁的時候，通常已經(jīng)對該商品產(chǎn)生了興趣，接下來需要全方位的了解商品，從而決定是否購買。在Pad這個大屏的移動設(shè)備下，用戶更容易產(chǎn)生沉浸式的閱讀體驗(yàn)。因此，新版商品詳情頁在內(nèi)容的布局分布上做了充分的引導(dǎo)。
△ 動圖演示
頂部的TAB式導(dǎo)航確保用戶在第一眼就了解信息的整體分布，側(cè)滑切換相比點(diǎn)擊切換則更加平順流暢。下拉首屏伴隨著圖片的放大，則可以暗示與引導(dǎo)用戶查看大圖。評論信息是大多用戶判斷是否下單前一定會看的，而將評論信息入口放在導(dǎo)航的最后位置有些過深，增加了觸達(dá)成本。因此，我們在商詳首頁第二屏的位置增加了評論的快捷入口，外露部分評論信息讓用戶能夠快速發(fā)現(xiàn)。
(因完整演示會導(dǎo)致圖片過大，想完整了解的同學(xué)可以打開京東App For iPad體驗(yàn))
一個完整的商品瀏覽閉環(huán)是從閱讀詳情到下單購買，但同時我們也要考慮到用戶對該商品不感興趣的情況，“相似好貨”是目前最主流的“閉環(huán)兜底方案”。相似好貨可以引導(dǎo)用戶繼續(xù)查看相似的品類，進(jìn)入下一段商品瀏覽閉環(huán)流程。就像我們在菜市場買菜，我們在一個攤位看了一圈發(fā)現(xiàn)沒有新鮮或者想要的菜品時，我們會很自然的查看下一個攤位。因此，“相似好貨”應(yīng)該放置在用戶接近離開頁面之前的位置，也就是商詳首頁的最底部，這符合了自然場景下的挑選商品動線。
樓層的框架形式有利于商品詳情頁的內(nèi)容可擴(kuò)展性。通過前后端的樓層框架設(shè)計，當(dāng)新的運(yùn)營內(nèi)容需要展示時，只需要選擇一個樓層位置，將該樓層的內(nèi)容展示進(jìn)行設(shè)計和實(shí)現(xiàn)即可，更有利于整個頁面的維護(hù)和整體感的統(tǒng)一。
△ 禮物購、優(yōu)惠套裝作為單獨(dú)的樓層展示
樓層框架的優(yōu)勢不僅僅表現(xiàn)在商品內(nèi)容的可擴(kuò)展性上，在一些運(yùn)營維度的頁面氛圍表現(xiàn)上也更加高效。京東商城經(jīng)常會有一些超級品牌日、超級品類日的促銷活動，在活動當(dāng)天，商城首頁通常會展示一些banner、皮膚之類的氛圍視覺優(yōu)化，以營造促銷場景。
△ 手機(jī)京東首頁-榮耀8超級品牌日
為了營造購物場景，商品詳情頁也增加了“氛圍樓層”，當(dāng)大促活動時，詳情頁會展示相應(yīng)的大促氛圍，營造一種促銷場景。氛圍樓層統(tǒng)一了大促活動的頁面布局，設(shè)計只需要針對氛圍樓層進(jìn)行設(shè)計，研發(fā)也只需要在活動當(dāng)日打開氛圍樓層開關(guān)，節(jié)省了部署和維護(hù)成本。
從4.0上線初的數(shù)據(jù)來看，新版商詳頁通過對整個購物動線的引導(dǎo)式梳理，內(nèi)容框架的易讀性優(yōu)化，用戶從進(jìn)入商品詳情頁到加入購物車的“提袋率”有了進(jìn)一步的提升，并間接拉升了商詳-結(jié)算的訂單轉(zhuǎn)化率，針對Pad端總體的用戶使用情況來講，這次的商詳改版是成功的。更重要的是，此次4.0的整體改版為商品詳情頁，乃至整個核心流程的頁面進(jìn)行了結(jié)構(gòu)化梳理，通過樓層框架的擴(kuò)展性設(shè)計，為以后新業(yè)務(wù)、新內(nèi)容的拓展提供了標(biāo)準(zhǔn)化的設(shè)計規(guī)范和理念。
Pad京東商城4.0此次的改版不僅僅是設(shè)計層面的，通過與目標(biāo)用戶的進(jìn)一步溝通交流，我們對于未來Pad端京東商城的內(nèi)容運(yùn)營上面也有了新的認(rèn)識，在不久的將來，我們將為我們的用戶提供更加優(yōu)質(zhì)的、更有針對性的內(nèi)容，讓用戶享受到更加個性化的“逛”體驗(yàn)。
以上就是上海網(wǎng)站設(shè)計提供的內(nèi)容，如果想要了解關(guān)于時代光華教育培訓(xùn)網(wǎng)站制作案例及自媒體運(yùn)營，可直接點(diǎn)擊查看
