UI界面設計

電商類app詳情頁設計分析

14311

詳情頁通常是電商類app流量最大的頁面，承載決定用戶是否購買商品的關鍵決策信息。該頁面的功能、布局、交互設計對用戶購買轉(zhuǎn)化意義至關重要。

今天來看看天貓、京東、蘇寧等的電商app詳情頁是怎么設計的。并分析詳情頁的細節(jié)設計。

一、天貓

布局為頂部快捷導航標題區(qū)、核心內(nèi)容區(qū)、底部操作區(qū)。

快捷導航標題區(qū)包括內(nèi)容區(qū)切換，購物車鏈接（方便用戶隨時去購物車完成后續(xù)購買），以及“更多”。分享、刷新、收藏等操作，首頁、搜索等鏈接，以及一些卡券活動、推薦商品都在“更多”里包含。

內(nèi)容區(qū)分三部分。商品、詳情、評價三部分。

1，商品，從整體上讓顧客了解商品情況。

第一屏：包括一組大圖（通常是2張整體效果圖，3張局部細節(jié)大圖，均鋪滿屏幕），價格與已售賣數(shù)量（顯示歷史價滿足顧客比價心理）與售賣時限（如果有則顯示，有暗示趕快下單否則就沒了的效果）。由于上方分享功能隱藏在了“更多”操作中，此處還顯示“分享”功能。

第二屏：首先是商品參加的活動，返積分、可增送的優(yōu)惠券等促銷說明。然后是產(chǎn)品參數(shù)介紹鏈接（放在這里貌似略混亂）、下單選擇鏈接：點擊彈配送區(qū)域、以及型號、數(shù)量等介紹選擇框。然后是商品評價信息的概述。最下是商家的信息與鏈接（大約在第2.5屏）。

在商品部分左滑或繼續(xù)上滑，進入圖文詳情部分。

2，圖文詳情：購買決策的詳細專業(yè)信息

天貓的商品圖文詳情頁首先是三款賣家推薦、可領優(yōu)惠券、店家活動。

然后是各種圖文的商品介紹：近20張圖片介紹，足以充分展示商品的各種特質(zhì)，讓用戶產(chǎn)生購買沖動（最近一些電商嘗試使用視頻展示商品、未來甚至使用vr，新技術(shù)形式的采用應該能增強用戶身臨其境感）。最后是推薦類似商品的列表：最多24款，有效提高商品曝光、以及產(chǎn)生更多購買可能。

繼續(xù)左滑進入評價部分。

3，評價部分：商品及商家的口碑

口碑評價部分在移動互聯(lián)網(wǎng)時代對用戶購買決策有相當大的影響。

天貓的評價部分首先是總體的評價數(shù)、典型分類數(shù)，這里都可以作為查看評價列表的篩選。

下面是具體的評價列表，包括用戶名（用*替換部分），內(nèi)容（包括圖片，如果有圖片可查看評論詳情可看大圖），評價與收貨時間，購買商品型號。

底部操作區(qū)包括客服（咨詢是購買中重要服務），商家店鋪（決策依據(jù)之一），收藏（后續(xù)再買），加購物車（可繼續(xù)買更多），馬上搶（直接買下當前商品）。

缺點：上滑、左滑進入詳情區(qū)結(jié)果相同，但顯示標題不同、后續(xù)操作也略有不同，造成用戶一些小凌亂。

二、京東

總體布局與天貓非常接近，分頂部標題與操作區(qū)，中間核心內(nèi)容區(qū)、底部操作區(qū)。

頂部操作區(qū)，京東放置的不是購物車鏈接而是分享按鈕與“更多”（購物車鏈接放到底部操作區(qū)了）?！案唷敝幸仓挥惺醉摗⑾?、搜索、我的關注、瀏覽記錄幾個鏈接。

內(nèi)容區(qū)包括商品信息區(qū)、圖文詳情區(qū)、評論區(qū)。

商品信息區(qū)與天貓也極為類似，除下單選擇處顯示配送到達時間以突出京東物流特色外，還有一些微小變化。另外推薦商品功能也放在了這個區(qū)域底部，除當前商品類似品推薦，還包括排行榜推薦。

圖文詳情區(qū)，京東做了左、中、右三欄拆分，分別顯示圖片、表格（規(guī)格參數(shù)）、文字（包裝售后）。相比天貓垂直展示，更清晰易讀。

底部操作區(qū)，京東相比天貓少了直接購買項。因此放置了購物車鏈接。

整體看，京東相比天貓詳情頁布局設置更簡潔有效。但功能稍弱，例如缺少直接購買等方便用戶快速下單功能。

另外，天貓、京東詳情頁在某些垂直品類例如食品領域，還缺少一些個性化適合該類商品的屬性展示：人們在購買食品時，對加工方法、營養(yǎng)健康等也比較關注。目前的詳情頁并沒有直接顯示，需要商家在圖文中去描述，其實如果針對不同類別商品做差異性標準化用戶感受會更好。

三、蘇寧

蘇寧app詳情頁中，操作區(qū)之外看起來只有一個內(nèi)容區(qū)，但實際上不缺少前面天貓與京東的圖文詳情、評價。但要么垂直在下方，要么需要點擊某個鏈接進入。這里的布局相對凌亂，沒有有效利用手機端用戶更喜歡滑動這個特征，不利于用戶快速方便找到所需信息。

蘇寧的猜你喜歡固定推薦9個品，看起來應該還比較早期和簡單的推薦模式。

蘇寧詳情頁的另一個小欠缺是分享藏在了“更多”里面，天貓與京東則都放在外面顯眼處，略微影響社交分享。此外，蘇寧的商品信息區(qū)大圖尺寸有時會鋪滿手機標題欄也略欠。

四、詳情頁細節(jié)設計分析

下面來分析優(yōu)秀的商品詳情頁是從哪些方面打動用戶刺激用戶購買的。

當我們在設計一個商品詳情頁時候，要把用戶當成我們的男女朋友來對待，整個設計流程分為四步：

用戶購買商品其實就是這個過程，首先認識商品（1米8大個又帥）隨后信任商品（人品還好）從而產(chǎn)生購買價值（跟他戀愛不錯）最終購買轉(zhuǎn)化（相守結(jié)婚）！

分析兩個賣奢侈品的app商品詳情頁：

用戶認識商品的過程其實是非常短暫的可能就是幾秒鐘。米蘭的頁面設計，第一眼并沒有讓用戶感知到商品，也沒有突出奢侈品最關鍵的點，品牌！標題字行間距不易閱讀，整體UI界面的設計給人很強的淘寶風！

寺庫很好的做了區(qū)別于淘寶京東的差異化設計，建立自己的品牌認知，首屏高清大圖牢牢抓住用戶，突出了品牌TUPLUS/途加，整體給人信任感?。ㄖ皇且驗樵谌巳褐卸嗫戳四阋谎?，再也不能忘掉你容顏）

用戶快速認識了解商品是遠遠不夠的，下面來看兩款產(chǎn)品向上滑動屏幕給用戶的信息和感受，這里就要跟用戶建立信任了！

沒錯米蘭并沒有評論和商品詳情，真的要命，滑動不夠一屏就推薦相關產(chǎn)品了，這時候很多用戶早已逃之夭夭了，沒有建立信任基礎很難有結(jié)果。

評論功能往往可以創(chuàng)造熱銷的氛圍，根據(jù)從眾效應其它用戶的評價能夠引導用戶作出判斷，指引用戶的心理和行為。例如一個女孩子認識一個男孩子，女孩子身邊的人朋友閨蜜都說這個男孩子不錯！好！值得托付！女孩子可能就會聽從她們的話，至少能增強對這個男孩子的好感！所以追女孩要先搞定她的閨蜜，不然閨蜜說一句“我覺得這個人不怎么樣”你就完了！握草，有點跑題了！總之評價是能夠建立基礎信任感的！

寺庫的頁面交互是非常符合用戶心理的，一直向上滑動的流程：商品－評論－詳情－推薦。

評價沒有完全打動用戶，建立信任，那么詳情頁就得發(fā)大招了，產(chǎn)品的詳情能不能走進用戶心里，了解用戶，解決用戶痛點是非常之關鍵！

想象一下用戶買奢侈品都會關注哪些點，整個購買流程會有什么擔憂，當然也要突出產(chǎn)品的核心賣點。

TUPLUS/途加這款產(chǎn)品詳情頁是這樣的流程：介紹此產(chǎn)品斬獲兩項國際大獎，之后產(chǎn)品功能細節(jié)介紹，中間加了購買奢侈品形象人群使用場景，（打造一個好的人像使用場景，會讓用戶聯(lián)想到自己使用時形象氣質(zhì)），后面詳細介紹產(chǎn)品的權(quán)威性，正品保證，資質(zhì)證書，這都能很有力的解決用戶的擔憂和痛點！

詳情頁解決用戶的擔憂和痛點體現(xiàn)產(chǎn)品價值。商品權(quán)威鑒定詳細介紹有圖有真相，點擊進入“寺庫鑒定”頁面，首先視頻介紹，教你怎么辨別產(chǎn)品的真?zhèn)?，我們有專業(yè)的鑒定產(chǎn)品真?zhèn)螆F隊、團隊發(fā)展歷程、行業(yè)的資質(zhì)證書等等信息都傳遞給用戶，產(chǎn)品的安全保障，是值得購買的，這就會讓用戶從基礎信任到有價值認可。

當用戶下單后，用戶會有“損失規(guī)避”效應，（意指人們獲得損失時產(chǎn)生的痛苦遠大于獲得收益時所帶來的快樂），這個時候下單成功頁面如果就提示“購買成功”的字樣，用戶就不會感受到剛剛損失的心理安慰，弄不好用戶意識到自己沖動消費，馬上就退單了！

所以這里可以用到一些，一語雙關的文案，例如：“恭喜你成為第xxx個有品味的人”，“恭喜你即將擁有給你帶來美好生活的xxxx產(chǎn)品”，總之即說明了我們的產(chǎn)品好，又夸了用戶有品位，或者描繪產(chǎn)品給用戶帶來什么好的體驗場景，這樣就大大降低了“損失規(guī)避”效應帶來的痛點！

最后總結(jié)一下，設計app商品詳情頁的四個步驟：

第一讓用戶快速了解認識產(chǎn)品；

第二取得用戶對產(chǎn)品的信任；

第三讓用戶產(chǎn)生價值感受（走心、解決用戶痛點與擔憂）；

第四最終實現(xiàn)產(chǎn)品購買的轉(zhuǎn)化（售后良好體驗、形成口碑、促進二次購買）。