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

京東iPad作為一個獨立的客戶端app，在外界看來一直處于一個比較尷尬的境地。

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

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

改版方向思考

在4.0改版立項之初，創(chuàng)新設計組與負責Pad的產(chǎn)品團隊做了多次頭腦風暴，除了新增業(yè)務之外，我們還應從哪些方面提高用戶的購物體驗？

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

設計服務于商業(yè)目的

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

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

Pad大屏的特點

要想為Pad端用戶設計更好的購物體驗，首先要了解Pad端的特點。Pad作為一款大屏的移動端設備，它和手機相比有以下幾個特點：

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

Pad的這些特點也為我們刻畫了一副Pad用戶的粗略畫像。那么除了硬件設備帶來的使用習慣特點之外，在Pad京東的商品詳情頁，用戶又有哪些使用習慣和痛點呢？我們對改版前的商祥頁做了對比分析。

老版商品詳情頁的體驗分析

商品詳情頁作為承載商品介紹信息的主要頁面，對于引導用戶購買商品，提高“下單轉化率”至關重要。因此，商品詳情頁信息展示要做到足夠簡潔、易懂、易查找、易操作。

運營目的制約易讀性

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

老版商祥豎屏

老版商祥橫版

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

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

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

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

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

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

內(nèi)容動線割裂

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

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

新版商品詳情頁的改進方案分析

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

易讀性為先

4.0版商品詳情頁-豎版

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

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

標準化框架的一致性和可擴展性

京東的商品購買類型是多種多樣的，并且隨著運營業(yè)務的拓展，商品購買類型會越來愈多，這就為商品詳情頁的展示框架設計帶來了挑戰(zhàn)。要設計一種可拓展兼容的標準化框架，且不僅僅滿足現(xiàn)有類型，還要兼顧以后可能的商品類型。

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

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

預售、全球購、秒殺商品的信息展示框架是一致的

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

4.0商品詳情頁的彈框

場景化的內(nèi)容動線

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

下載文件

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

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

相似好貨可以引導用戶繼續(xù)查看相似的品類，進入下一段商品瀏覽閉環(huán)流程。就像我們在菜市場買菜，我們在一個攤位看了一圈發(fā)現(xiàn)沒有新鮮或者想要的菜品時，我們會很自然的查看下一個攤位。因此，“相似好貨”應該放置在用戶接近離開頁面之前的位置，也就是商詳首頁的最底部，這符合了自然場景下的挑選商品動線。

樓層框架的擴展性分析

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

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

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

手機京東首頁-榮耀8超級品牌日

為了營造購物場景，商品詳情頁也增加了“氛圍樓層”，當大促活動時，詳情頁會展示相應的大促氛圍，營造一種促銷場景。氛圍樓層統(tǒng)一了大促活動的頁面布局，設計只需要針對氛圍樓層進行設計，研發(fā)也只需要在活動當日打開氛圍樓層開關，節(jié)省了部署和維護成本。

新版商品詳情頁上線情況總結

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

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

作者：薛斯塔

來源：http://jdc.jd.com/archives/3982

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