[ 網頁設計教程 ] 京東與新蛋的產品頁面對比- 其他教程 - 骨子愛創意

教學主題: 京東與新蛋的產品頁面對比

大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

今天的這個教學主題是: 京東與新蛋的產品頁面對比

這教學的重點為這幾點 [ 對比,頁面,產品,用戶,京東,框架,內容,信息,類別,導航, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

京東與新蛋的頂部鏈接區別在於京東底層鏈接是該產品的品牌，而新蛋則是產品的細分類別。我們考慮潛在的2種 用戶特性，當用戶是在認準了品牌去挑產品時，那底層鏈接適合用品牌，但當用戶是認準了類別去挑產品時，那底層鏈接適合用細分類別。

上次說了京東與新蛋的首頁用戶體驗，這次說說產品頁面的用戶體驗。

京東產品頁面頂部鏈接：

新蛋產品頁面頂部鏈接：

評價：京東與新蛋的頂部鏈接區別在於京東底層鏈接是該產品的品牌，而新蛋則是產品的細分類別。我們考慮潛在的2種 用戶特性，當用戶是在認準了品牌去挑產品時，那底層鏈接適合用品牌，但當用戶是認準了類別去挑產品時，那底層鏈接適合用細分類別。假如用京東的模式，那當 第二種用戶想返回產品類別時需要跳躍性點擊類別鏈接。假如用新蛋模式，那需要通過產品類別鏈接進入上層頁面，然後再通過上層頁面進入品牌頁面。這個操作成 本是大幅增加，顯然不合適。所以綜合來講，我認為京東的模式比較合適，不過話說，從技術上，可否做到個性化呢，如果用戶是從品牌頁面進入產品頁面的話，那 採用京東模式，如果是從類別頁面進入產品的話，那就採用新蛋模式，這樣矛盾是解決了，但又有個疑問，用戶需求和行為是多變的，這樣個性化的切換是否會使得 用戶操作上混亂?這也是一個要考慮的風險。最後不知道新蛋那產品編號有啥作用，不知道有哪些人會去記那一大串數字?

京東的產品頁面布局：

新蛋的產品頁面布局：

 

評價：這是京東和新蛋的產品頁面的布局。從布局上看京東和新蛋的產品頁面屬於兩種風格，最大的區別在於，京東設置了左側導航欄，而新蛋則把側導航給省略了(所以新蛋不把sidebar放 到了右邊)。那麼產品頁面的左側導航欄是否需要呢?我們考慮用戶進入產品頁面看產品時用戶會有哪些關注點?假設性用戶有產品類別，產品品牌，產品自身信 息，產品優惠增值，產品的口碑等等，那麼用戶關注點的橫向偏移是在產品類別這個方向，而縱向偏移則是在產品品牌這個方向上。如何保證當用戶關注點發生偏移 時，依舊可以快速的找到落腳點?鄙人以為之側導航是一個不錯的選擇。按京東的模式，用戶可以很順利的完成此操作，但按新蛋的頁面布局，用戶需要返回上層頁 面操作，顯然京東用戶的操作成本要低於新蛋。但新蛋棄用了側導航后，讓用戶對產品主體框架的觀察視角更加開闊，這是優勢。權衡利弊，我以為側導航在中國是 適用的，從整個大環境上看，中國多數電子商務網站培養了用戶的這種操作習慣，從用戶角度看，中國用戶的品牌忠實度不夠，在選擇產品時還是很容易發生品牌切 換的。總的來說，新蛋的產品頁面布局很歐美化，重在產品框架，而京東則比較中式化，重在整體布局。

京東的側邊欄：

以上京東側邊欄的內容框架。分別是1個產品類別導航，1個品牌類別導航，一個同類熱賣商品內容框架與一個最近瀏覽過的商品內容框架組成。訴求的核心點非常明確，以產品頁面的具體產品為中心輻射內容。

新蛋的側邊欄：

這是新蛋的側邊欄的內容框架，分別是1個優惠信息框架，一個熱銷排行榜，1個瀏覽記錄，和一個商品搭配框架。就內容上要比京東的模式來的更加豐富，但其內容的訴求點並非完全圍繞着產品頁面的具體產品，顯得不夠聚焦。

評價：側導航功能是否必要的問題已經在上面論述過了，現在就不再贅述了。現在對此一下京東和新蛋的側邊欄內容框架，我們發現兩者有1個共同的內容框架：瀏覽記錄，於是這點上就可以確定其存在必要性。再看新蛋把優惠信息放在了側導航top地 帶。據我觀察，該框架內的優惠信息是根據用戶瀏覽產品類別而動態變化的，但涉及到具體產品時，優惠信息的匹配度並不高，比如無法匹配該產品的優惠信息，比 如我看上網本時匹配的優惠信息卻並延伸到筆記本。雖然尚不知具體效果，但理論上優惠信息與用戶需求匹配度不高導致的後果是信息利用率低下，雖然網購人群是 很喜歡優惠的。所以我更傾向於把該塊內容去掉，或者調整位置。京東的同類熱賣PK新蛋的熱銷排行榜，也是存在同樣的問題，京東的同類熱賣與具體產品的匹配度要高於新蛋的熱銷排行榜，我要是去買一款商用筆記本，那過程中很難會對一款上網本感興趣，哪怕你是熱銷排行榜第一。最值得懷疑的是，新蛋把“購買本品的顧客還買過“這個內容框架放在右側導航bottom地 帶，這塊內容本質上是反映產品的搭配。搭配這個概念對於有消費力的人而言是個大眾消費品(別以為只有女人樂於去消費”搭配“這個概念)，合理的產品搭配能 對整體銷量起很大的作用，這點無論是在網上和網下都是被論證的。新蛋此舉把如此重要的內容框架放在側邊欄底部，個人認為其在不妥。

京東的產品標題：

華碩（ASUS）EeePC 1000HE 10.1英寸上網本[N280凌動平台]160G硬盤XP系統版本（白色）

LED背光，8700毫安9.5小時超長待機(電池不突出工業設計)

新蛋的產品標題：

ASUS 華碩 EeePC 1000HE【有藍牙】 XP 10寸寬屏筆記本 粉色

9小時續航時間，超長待機！靚麗粉色，更顯時尚尊貴！

 

評價：這是京東與新蛋在產品頁面的產品標題。京東的大標題比較詳細，小標題理性;新蛋的大標題比較簡述，小標題感性。個人覺得京東和新蛋的受眾都是白領和互聯網精英群體，他們對數碼產品的了解已經相對全面，所以標題的描述重在點到為止，注重整體美感。如XP系統版本簡約成XP也不會引起任何歧義，比如既然處理器和硬盤是衡量電腦好壞的基本標準，那最好在標題上就突出。再比如藍牙是賣點的話，

如果這麼寫如何：

華碩（ASUS）EeePC 1000HE 10寸上網本【N280凌動】 160G硬盤 XP粉色

藍牙，9小時超長待機，靚麗粉色，時尚尊貴!

京東的產品圖框架：

貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

新蛋產品圖片框架：

貼心提醒: 使用選框工具( Marquee Tools )的時候，按住Shift鍵可以劃出 正方形和正圓
的選區；按住Alt鍵將從起始點為中心勾劃選區。

評價：京 東的產品圖片要比新蛋的產品圖片大氣的多，從視覺角度講，京東在產品圖片上的的用戶體驗要比新蛋來的更出色。很不明白，新蛋與其讓該框架內右部空間多餘也 不調整下產品圖片大小。不得不說，京東夠狠的，在價格旁邊還添加了一個“降價通知“的鏈接，對用戶的心理暗示是京東的價格是最低的，側面也反應了電子商務 競爭的激烈。至於”製造廠商“”產品型號“要不要，個人認為還是需要的，就像產品的標單一樣，顯個正規。最後來看購物車一欄，京東和新蛋的區別在於，京東 的排版是”放入購物車“，”信用卡分期付款“”收藏此商品“，而新蛋則是”放入購物車“，”收藏此商品“，”信用卡分期付款“，哪個合適?我的理解是放入 購物車和分期付款時是消費層面的行為，區別於收藏行為，所以邏輯上我認為優先順序是”放入購物車“，”信用卡分期付款“”收藏此商品“。

京東產品搭配推薦內容：

京東的頁面“推薦配件“欄目在產品具體信息框架之上，而”優惠套餐“欄目在產品具體信息框架之下。

新蛋產品搭配推薦內容：

新蛋頁面則反之，“優惠套餐“欄目在產品具體信息框架之上，而”推薦配件“欄目在產品的具體信息框架之下。值得一提的是，新蛋產品延保服務覆蓋面要比京東大很多。

評價：在這塊，京東和新蛋的主要差異點在於“套餐“和“推薦配件”位置問題。我以為這裡要考慮這兩個欄目哪個與產品的關聯度更大。我以為是套餐，因為套餐對於用戶購買產品時有提示和促進作用的。比如對於有KFC消 費慾望的用戶而言，肯德基的套餐因為性價比高就很具有誘惑性，而配件這則不然，配件存在的意義是建立在用戶已經購買了此產品的基礎上的，所以優先級別要低 於“套餐”，於是我認為新蛋的選擇更合適，只不過新蛋是否可以學習京東把“套餐“欄目做的更加感性呢。其實可以用一個簡單的邏輯來理清整個產品頁面的主題 框架：整體印象—鼓勵—詳細介紹—搭配。

京東用戶評價：

新蛋用戶評價：

評價：京東的評分體系包括：好評，中評和差評。新蛋的評分體系包括：很好，還好，一般，不好，極差。具體哪個好?我覺得是各有利弊，暫不做討論了。統計或者均分是必要的，因為這給了用戶直觀的印象。涉及到具體評論，京東需要用戶在3個點進行評論：優點，不足，總結;而新蛋則是一把抓，用戶直接整體評論產品即可。看似京東的評論更加的細緻，但我不得不提出三個疑問：第一，用戶評論對產品銷售的影響之大不可不提，既然你突出了不足是用戶評論的要點，那怎麼著也會給你寫上幾句，哪怕這是個99.9分的產品，瀏覽用戶看了這麼多可能是雞蛋裡挑骨頭的不足，總會心理掂量掂量了。第二，你把3個要點一羅列，用戶寫評價時還要分類總結歸納，一下子成本就高了，這並不是什麼好的用戶體驗，更何況，評論本身就是有整體性的。第三，一個京東的評論存在時頁面還是整體清晰的，但10個評論出現在用戶眼前的時候，那視覺體驗相當的負責糟糕，密麻麻的閱讀起來特別吃力。反觀新蛋的用戶評論，頁面整潔清晰，評論整體性強，閱讀輕鬆，何樂而不為。

好了，京東和新蛋在產品頁面的用戶體驗就說到這了，鄙人不才，多歧為貴，重在交流。

看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

希望我們所介紹的 京東與新蛋的產品頁面對比 這教學會喜歡

文章標題: 骨子愛創意- 京東與新蛋的產品頁面對比–轉載請註明來源處

本教學分類為網頁設計教程中的 其他教程相關教學

文章相關關鍵字為: 對比,頁面,產品,用戶,京東,框架,內容,信息,類別,導航,

本文永久連結 :京東與新蛋的產品頁面對比

本文轉載自 :VIA