中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

?文章京東商城 iPad 4.0 商品詳情頁(yè)改版設(shè)計(jì)的總結(jié)，希望能夠給你帶來(lái)一些啟發(fā)思考。

京東iPad作為一個(gè)獨(dú)立的客戶端app，在外界看來(lái)一直處于一個(gè)比較尷尬的境地。

一方面對(duì)標(biāo)的電商類競(jìng)品們大都放棄了Pad陣地，基本放棄了原生界面的開(kāi)發(fā)；一方面在京東內(nèi)部，相對(duì)于其他的客戶端，Pad的體量也一直占比不高。

但作為以品質(zhì)保證、用心服務(wù)為價(jià)值觀的一款京東產(chǎn)品，我們依然希望為Pad端用戶設(shè)計(jì)最好的購(gòu)物體驗(yàn),這也是京東人自上而下達(dá)成的共識(shí)與默契。因此，作為負(fù)責(zé)京東商城iPad端產(chǎn)品設(shè)計(jì)的上海設(shè)計(jì)部創(chuàng)新設(shè)計(jì)組，經(jīng)過(guò)大量的目標(biāo)用戶研究、商業(yè)邏輯梳理、前后臺(tái)研發(fā)溝通等工作后，于17年的春季上線了4.0版本。

改版方向思考

在4.0改版立項(xiàng)之初，創(chuàng)新設(shè)計(jì)組與負(fù)責(zé)Pad的產(chǎn)品團(tuán)隊(duì)做了多次頭腦風(fēng)暴，除了新增業(yè)務(wù)之外，我們還應(yīng)從哪些方面提高用戶的購(gòu)物體驗(yàn)？

我們最終決定返璞歸真，回溯Pad端京東商城最初的目的是什么？我們需要服務(wù)的用戶有什么樣的特點(diǎn)和需求？其次，分析目前整個(gè)大的購(gòu)物環(huán)境發(fā)生了哪些變化？用戶在京東的購(gòu)物心理發(fā)生了哪些變化？Pad客戶端的性能和使用習(xí)慣發(fā)生了哪些變化？結(jié)合這些因素，我們最終定稿了4.0的改版方向，而商品詳情頁(yè)的改版方向也隨之確定下來(lái)。

設(shè)計(jì)服務(wù)于商業(yè)目的

在商業(yè)大背景下，任何決策都是服務(wù)于商業(yè)目的的，包括用戶體驗(yàn)設(shè)計(jì)。

京東商城Pad端的商業(yè)目的就是讓使用Pad端京東的用戶更方便、高效的購(gòu)買ta喜愛(ài)的商品。?體驗(yàn)設(shè)計(jì)可以賦能商業(yè)，為了最大化的實(shí)現(xiàn)商業(yè)目的，我們要做的就是發(fā)現(xiàn)Pad用戶的購(gòu)物方式、喜好、需求特點(diǎn)，為他們定制最好的購(gòu)物體驗(yàn)。

Pad大屏的特點(diǎn)

要想為Pad端用戶設(shè)計(jì)更好的購(gòu)物體驗(yàn)，首先要了解Pad端的特點(diǎn)。Pad作為一款大屏的移動(dòng)端設(shè)備，它和手機(jī)相比有以下幾個(gè)特點(diǎn)：

1. 屏幕比一般的手機(jī)更大些，便于查看圖片、視頻等富媒體內(nèi)容
2. 一般需要雙手操作；
3. 使用橫、豎屏的用戶都占一定的比重；
4. 性能的更新速度沒(méi)有手機(jī)快，很多用戶還在使用很老舊的設(shè)備；
5. Pad一般作為”共享設(shè)備“和家人共同使用；
6. Pad的使用時(shí)間不如手機(jī)碎片化，一般集中在中午、夜間、周末等空閑時(shí)間；
7. 一般在有wifi的環(huán)境下才能使用；

Pad的這些特點(diǎn)也為我們刻畫(huà)了一副P(pán)ad用戶的粗略畫(huà)像。那么除了硬件設(shè)備帶來(lái)的使用習(xí)慣特點(diǎn)之外，在Pad京東的商品詳情頁(yè)，用戶又有哪些使用習(xí)慣和痛點(diǎn)呢？我們對(duì)改版前的商祥頁(yè)做了對(duì)比分析。

老版商品詳情頁(yè)的體驗(yàn)分析

商品詳情頁(yè)作為承載商品介紹信息的主要頁(yè)面，對(duì)于引導(dǎo)用戶購(gòu)買商品，提高“下單轉(zhuǎn)化率”至關(guān)重要。因此，商品詳情頁(yè)信息展示要做到足夠簡(jiǎn)潔、易懂、易查找、易操作。

運(yùn)營(yíng)目的制約易讀性

電商運(yùn)營(yíng)團(tuán)隊(duì)為了吸引用戶下單，往往會(huì)發(fā)明許多促銷、活動(dòng)、服務(wù)等業(yè)務(wù)，這些信息都需要展示在商品詳情頁(yè)中。而屏幕的尺寸是固定的，用戶的信息接收載荷有限，這就需要設(shè)計(jì)師通過(guò)轉(zhuǎn)移、隱藏、分類等手段將信息更好地組織起來(lái)，讓信息變得更加易讀。

老版商祥豎屏

老版商祥橫版

上圖是老版商品詳情頁(yè)的橫豎屏截圖，可以看出，在橫豎屏兩種模式下，內(nèi)容的排版是不一樣的。這其中的原因是為了在兩種屏幕模式下展示全部的內(nèi)容。

Pad大屏幕的優(yōu)勢(shì)是可以展示商品大圖，而清晰的大圖/視頻是吸引用戶對(duì)商品感興趣的第一因素。促銷信息也很重要！對(duì)于大量的追求性價(jià)比的用戶來(lái)說(shuō)，折扣、優(yōu)惠券、活動(dòng)等促銷信息可以幫助他們從感興趣的多個(gè)商品中選擇一個(gè)性價(jià)比最高的商品。

而規(guī)格、地址等信息又是用戶下單所必須選擇操作的信息。因此，為了服務(wù)于商業(yè)目的，老版的商品詳情頁(yè)將這些“重要內(nèi)容”統(tǒng)統(tǒng)擺在了首屏。

舊框架不再兼容新內(nèi)容

將繁雜的“重要信息”放在首屏變成了一項(xiàng)“政治任務(wù)”，為了完成這個(gè)任務(wù)，Pad京東商城在很長(zhǎng)一段時(shí)間里不斷地對(duì)商詳首屏做細(xì)節(jié)的優(yōu)化，還要滿足業(yè)務(wù)方不斷的新需求。

比如促銷活動(dòng)的不斷豐富（滿減、滿贈(zèng)等業(yè)務(wù)的增多），京東物流業(yè)務(wù)的不斷增多（運(yùn)費(fèi)規(guī)則的不斷細(xì)化），這些都導(dǎo)致了商詳首屏在閱讀體驗(yàn)方面的不堪負(fù)荷。不僅僅在設(shè)計(jì)層面，研發(fā)層面本來(lái)對(duì)同時(shí)維護(hù)橫豎屏兩套框架就有不同的看法，新業(yè)務(wù)的不斷增加也加重了研發(fā)團(tuán)隊(duì)的維護(hù)壓力。這些原因都促使了商詳頁(yè)面的重新設(shè)計(jì)。

內(nèi)容動(dòng)線割裂

用戶在電商購(gòu)物已基本上養(yǎng)成了一條主要?jiǎng)泳€：商品圖-價(jià)格優(yōu)惠-評(píng)價(jià)-圖文介紹-相似好貨。因此，主要?jiǎng)泳€內(nèi)容的關(guān)聯(lián)性很重要。舊版商詳在第一屏展示了商品圖和價(jià)格優(yōu)惠信息，但在評(píng)價(jià)，圖文介紹和相似好貨的展示方式卻有所割裂。

推薦套裝，相似好貨等導(dǎo)流內(nèi)容以tab形式展示在第二屏，很容易被用戶忽略。購(gòu)物動(dòng)線有所割裂

新版商品詳情頁(yè)的改進(jìn)方案分析

針對(duì)老版本商品詳情頁(yè)的一系列體驗(yàn)問(wèn)題，我們通過(guò)與產(chǎn)品、研發(fā)以及業(yè)務(wù)方的多輪溝通，確定了方案的優(yōu)先級(jí)與可行性，新版商品詳情頁(yè)主要從以下幾個(gè)維度來(lái)優(yōu)化的。

易讀性為先

4.0版商品詳情頁(yè)-豎版

為了保證信息的簡(jiǎn)潔易讀，新版的商品詳情頁(yè)不再將價(jià)格優(yōu)惠等運(yùn)營(yíng)相關(guān)內(nèi)容局限在第一屏，通過(guò)對(duì)內(nèi)容歸類，利用間距、分割線等視覺(jué)手段將內(nèi)容重新組織起來(lái)。

卡片式設(shè)計(jì)有利于內(nèi)容的閱讀性，通過(guò)陰影層級(jí)將大篇幅的商品圖片置于文字內(nèi)容后方，又利用了漸變錯(cuò)位動(dòng)效讓用戶在瀏覽文字信息時(shí)逐漸隱去圖片的干擾。

標(biāo)準(zhǔn)化框架的一致性和可擴(kuò)展性

京東的商品購(gòu)買類型是多種多樣的，并且隨著運(yùn)營(yíng)業(yè)務(wù)的拓展，商品購(gòu)買類型會(huì)越來(lái)愈多，這就為商品詳情頁(yè)的展示框架設(shè)計(jì)帶來(lái)了挑戰(zhàn)。要設(shè)計(jì)一種可拓展兼容的標(biāo)準(zhǔn)化框架，且不僅僅滿足現(xiàn)有類型，還要兼顧以后可能的商品類型。

了解業(yè)務(wù)邏輯是做好設(shè)計(jì)的前提，在于產(chǎn)品與業(yè)務(wù)方多方溝通后，經(jīng)過(guò)多輪的方案評(píng)審，我們采用了垂直式的樓層設(shè)計(jì)方案。將各類信息匯總分類，并歸屬于相應(yīng)的樓層模塊，并根據(jù)不同的商品購(gòu)買類型，有后臺(tái)控制展示樓層信息。

比如最重要的商品名稱和價(jià)格樓層，普通商品、全球購(gòu)、山姆商品、秒殺商品等各自展示的信息都不相同。我們預(yù)先設(shè)計(jì)了最復(fù)雜商品類型的信息展示框架，并預(yù)留了未來(lái)可能增加的信息展示位。標(biāo)準(zhǔn)化框架有利于內(nèi)容的一致性，增強(qiáng)了易讀性，同時(shí)也降低了研發(fā)和維護(hù)成本。

預(yù)售、全球購(gòu)、秒殺商品的信息展示框架是一致的

彈框是另外一個(gè)例子，在4.0之前，Pad京東商城的彈框有很多種，在不同頁(yè)面場(chǎng)景下使用的彈框并沒(méi)有被統(tǒng)一。隨著4.0大改版的設(shè)計(jì)梳理，我們與研發(fā)同學(xué)一道梳理了彈框、toast、alert等組件的使用規(guī)范。商品詳情頁(yè)有很多的內(nèi)容是通過(guò)彈框展示的，我們使用新規(guī)范的彈框來(lái)為用戶營(yíng)造了一致性的體驗(yàn)，降低了用戶的學(xué)習(xí)成本，提高了閱讀性。

4.0商品詳情頁(yè)的彈框

場(chǎng)景化的內(nèi)容動(dòng)線

用戶通過(guò)前期的搜索挑選，當(dāng)進(jìn)入商品詳情頁(yè)的時(shí)候，通常已經(jīng)對(duì)該商品產(chǎn)生了興趣，接下來(lái)需要全方位的了解商品，從而決定是否購(gòu)買。在Pad這個(gè)大屏的移動(dòng)設(shè)備下，用戶更容易產(chǎn)生沉浸式的閱讀體驗(yàn)。因此，新版商品詳情頁(yè)在內(nèi)容的布局分布上做了充分的引導(dǎo)。

下載文件

頂部的TAB式導(dǎo)航確保用戶在第一眼就了解信息的整體分布，側(cè)滑切換相比點(diǎn)擊切換則更加平順流暢。下拉首屏伴隨著圖片的放大，則可以暗示與引導(dǎo)用戶查看大圖。評(píng)論信息是大多用戶判斷是否下單前一定會(huì)看的，而將評(píng)論信息入口放在導(dǎo)航的最后位置有些過(guò)深，增加了觸達(dá)成本。因此，我們?cè)谏淘斒醉?yè)第二屏的位置增加了評(píng)論的快捷入口，外露部分評(píng)論信息讓用戶能夠快速發(fā)現(xiàn)。

一個(gè)完整的商品瀏覽閉環(huán)是從閱讀詳情到下單購(gòu)買，但同時(shí)我們也要考慮到用戶對(duì)該商品不感興趣的情況，“相似好貨”是目前最主流的“閉環(huán)兜底方案”。

相似好貨可以引導(dǎo)用戶繼續(xù)查看相似的品類，進(jìn)入下一段商品瀏覽閉環(huán)流程。就像我們?cè)诓耸袌?chǎng)買菜，我們?cè)谝粋€(gè)攤位看了一圈發(fā)現(xiàn)沒(méi)有新鮮或者想要的菜品時(shí)，我們會(huì)很自然的查看下一個(gè)攤位。因此，“相似好貨”應(yīng)該放置在用戶接近離開(kāi)頁(yè)面之前的位置，也就是商詳首頁(yè)的最底部，這符合了自然場(chǎng)景下的挑選商品動(dòng)線。

樓層框架的擴(kuò)展性分析

樓層的框架形式有利于商品詳情頁(yè)的內(nèi)容可擴(kuò)展性。通過(guò)前后端的樓層框架設(shè)計(jì)，當(dāng)新的運(yùn)營(yíng)內(nèi)容需要展示時(shí)，只需要選擇一個(gè)樓層位置，將該樓層的內(nèi)容展示進(jìn)行設(shè)計(jì)和實(shí)現(xiàn)即可，更有利于整個(gè)頁(yè)面的維護(hù)和整體感的統(tǒng)一。

禮物購(gòu)、優(yōu)惠套裝作為單獨(dú)的樓層展示

樓層框架的優(yōu)勢(shì)不僅僅表現(xiàn)在商品內(nèi)容的可擴(kuò)展性上，在一些運(yùn)營(yíng)維度的頁(yè)面氛圍表現(xiàn)上也更加高效。京東商城經(jīng)常會(huì)有一些超級(jí)品牌日、超級(jí)品類日的促銷活動(dòng)，在活動(dòng)當(dāng)天，商城首頁(yè)通常會(huì)展示一些banner、皮膚之類的氛圍視覺(jué)優(yōu)化，以營(yíng)造促銷場(chǎng)景。

手機(jī)京東首頁(yè)-榮耀8超級(jí)品牌日

為了營(yíng)造購(gòu)物場(chǎng)景，商品詳情頁(yè)也增加了“氛圍樓層”，當(dāng)大促活動(dòng)時(shí)，詳情頁(yè)會(huì)展示相應(yīng)的大促氛圍，營(yíng)造一種促銷場(chǎng)景。氛圍樓層統(tǒng)一了大促活動(dòng)的頁(yè)面布局，設(shè)計(jì)只需要針對(duì)氛圍樓層進(jìn)行設(shè)計(jì)，研發(fā)也只需要在活動(dòng)當(dāng)日打開(kāi)氛圍樓層開(kāi)關(guān)，節(jié)省了部署和維護(hù)成本。

新版商品詳情頁(yè)上線情況總結(jié)

從4.0上線初的數(shù)據(jù)來(lái)看，新版商詳頁(yè)通過(guò)對(duì)整個(gè)購(gòu)物動(dòng)線的引導(dǎo)式梳理，內(nèi)容框架的易讀性優(yōu)化，用戶從進(jìn)入商品詳情頁(yè)到加入購(gòu)物車的“提袋率”有了進(jìn)一步的提升，并間接拉升了商詳-結(jié)算的訂單轉(zhuǎn)化率，針對(duì)Pad端總體的用戶使用情況來(lái)講，這次的商詳改版是成功的。更重要的是，此次4.0的整體改版為商品詳情頁(yè)，乃至整個(gè)核心流程的頁(yè)面進(jìn)行了結(jié)構(gòu)化梳理，通過(guò)樓層框架的擴(kuò)展性設(shè)計(jì)，為以后新業(yè)務(wù)、新內(nèi)容的拓展提供了標(biāo)準(zhǔn)化的設(shè)計(jì)規(guī)范和理念。

Pad京東商城4.0此次的改版不僅僅是設(shè)計(jì)層面的，通過(guò)與目標(biāo)用戶的進(jìn)一步溝通交流，我們對(duì)于未來(lái)Pad端京東商城的內(nèi)容運(yùn)營(yíng)上面也有了新的認(rèn)識(shí)，在不久的將來(lái)，我們將為我們的用戶提供更加優(yōu)質(zhì)的、更有針對(duì)性的內(nèi)容，讓用戶享受到更加個(gè)性化的“逛”體驗(yàn)。

作者：薛斯塔

來(lái)源：http://jdc.jd.com/archives/3982

題圖來(lái)自PEXELS，基于CC0協(xié)議