消費(fèi)電子產(chǎn)品的電子商務(wù)商店通常以其有趣的設(shè)計(jì)和 UX 解決方案脫穎而出。在本文中，設(shè)計(jì)將分享國外10個(gè)有吸引力的產(chǎn)品頁面示例，它們可以有效地鼓勵(lì)用戶購買新的電子設(shè)備。

goPro.com

獨(dú)特的動(dòng)畫

GoPro 是世界極客中家喻戶曉的名字。這家運(yùn)動(dòng)相機(jī)制造商多年來一直為活躍用戶設(shè)定標(biāo)準(zhǔn)，但他們每款產(chǎn)品的眾多功能使得銷售它們成為一項(xiàng)挑戰(zhàn)。如何全面展示海量功能？

對于其官方商店，GoPro 決定進(jìn)行廣泛的演示，其中充滿了動(dòng)畫和短片。這反過來又使產(chǎn)品頁面在視覺上具有吸引力和趣味性——盡管它相當(dāng)長。由于頁面上的多樣化內(nèi)容，該公司設(shè)法避免了無聊和單調(diào)。親眼看看：GoPro。

cowboy.com

有吸引力的排版

牛仔品牌提供以原創(chuàng)設(shè)計(jì)為特色的電動(dòng)自行車。您可以直接從制造商的網(wǎng)站上購買新自行車，該網(wǎng)站會(huì)通過動(dòng)畫和視頻向您展示您所獲得的內(nèi)容。

除了展示各種細(xì)節(jié)的精美照片和可視化效果外，設(shè)計(jì)師還采用了令人驚嘆的排版來詳細(xì)描述這輛自行車。那里幾乎沒有很多文字，但都很大而且很難錯(cuò)過。設(shè)計(jì)“迫使我們”閱讀描述。盡管頁面的高度相當(dāng)大，但找到“購買”按鈕并不難——它永久地附著在屏幕的頂部邊緣。

aiaaiai.audio

引人注目的產(chǎn)品展示

aiaiai.audio商店提供高品質(zhì)耳機(jī)，在產(chǎn)品頁面上以有趣的方式呈現(xiàn)。不尋常的標(biāo)題和文本布局以及原始顏色表明這是一種生活方式和獨(dú)特的產(chǎn)品。

該頁面包含大量描述和圖片，但瀏覽描述并不困難——屏幕頂部有一個(gè)帶有按鈕的菜單，用于將產(chǎn)品添加到購物車。產(chǎn)品圖片穿插人物圖片是最有趣的設(shè)計(jì)選擇之一。頁面設(shè)計(jì)考慮了網(wǎng)站上使用的每個(gè)圖像中的共享顏色。有什么不喜歡的？

choosemuse.com

原創(chuàng)產(chǎn)品，原創(chuàng)解決方案

choosemuse網(wǎng)站提供了一種不同尋常的產(chǎn)品，它需要一個(gè)廣泛的登錄頁面來告訴潛在買家該設(shè)備提供的功能。

“Muse S 是一款舒適的多傳感器冥想設(shè)備，可為您的大腦活動(dòng)、心率、呼吸和身體運(yùn)動(dòng)提供實(shí)時(shí)反饋，幫助您建立一致的冥想練習(xí)?！?整潔干凈的頁面極具吸引力地展示了該設(shè)備。這是使用靜態(tài)圖片、滑塊和簡單動(dòng)畫實(shí)現(xiàn)美觀設(shè)計(jì)的完美示例。

x-kom.pl

多款產(chǎn)品，極簡設(shè)計(jì)

x-kom.pl上提供的商品比上述示例中的要廣泛得多，因?yàn)樵撋痰晏峁?shù)百種產(chǎn)品。這需要使用適合單個(gè)頁面上大量產(chǎn)品選擇的通用解決方案。

盡管提供的商品種類繁多，但每一頁的布局都是一致的。這一結(jié)果得益于基于白色和灰色的極簡主義設(shè)計(jì)。除了產(chǎn)品圖片，“加入購物車”按鈕是頁面上最引人注目的功能之一。這個(gè) UX 技巧肯定要提高商店的轉(zhuǎn)化率——用戶立即知道點(diǎn)擊什么來獲得產(chǎn)品。

這家商店提供許多不同種類和類型的產(chǎn)品，其中一些需要更廣泛的描述。具有更多內(nèi)容的頁面可以輕松利用導(dǎo)航欄，其中包含指向各個(gè)描述部分的鏈接。滾動(dòng)時(shí)，該欄會(huì)貼在屏幕頂部，明顯改善了一個(gè)長產(chǎn)品頁面內(nèi)的導(dǎo)航。

bestbuy.com

“隱藏”的產(chǎn)品描述

美國領(lǐng)先的電子產(chǎn)品商店bestbuy.com就是一個(gè)提供各種產(chǎn)品的網(wǎng)站的例子——很明顯，他們在設(shè)計(jì)上付出了很多努力。

百思買使用經(jīng)過驗(yàn)證的用戶體驗(yàn)解決方案。盡管內(nèi)容豐富，但該網(wǎng)站似乎很輕松，并沒有壓倒讀者。清晰的布局使內(nèi)容易于理解。描述和評論已被“隱藏”在可擴(kuò)展選項(xiàng)卡下，從而有效地隔離了網(wǎng)站上的內(nèi)容。

hhgregg.com

簡單有效

百思買的競爭對手hhgregg.com有不同的產(chǎn)品展示方法。你不會(huì)在那里找到廣泛的描述。頁面布局僅提供足夠的空間用于簡要說明。該頁面的其余部分包括有關(guān)價(jià)格、運(yùn)費(fèi)和購買按鈕的信息，并輔以“相關(guān)產(chǎn)品”部分。Hhgregg.com 最有可能通過向他們提供報(bào)價(jià)和價(jià)格的簡單消息來定位知道他們正在尋找什么的客戶。

appliancesonline.com

豐富的菜單

Applianceonline.com上的產(chǎn)品頁面以視覺上吸引人的方式展示了家用電器產(chǎn)品。除了清晰且視覺上令人愉悅的設(shè)計(jì)外，該網(wǎng)站還提供了一個(gè)豐富的菜單，該菜單使用圖標(biāo)直觀地列出了可用的類別。在子頁面上，除了關(guān)鍵元素之外，評論和反饋部分占據(jù)了很大一部分空間。可以假設(shè)用戶的反饋對于使用商店的客戶很重要。

發(fā)布有關(guān)產(chǎn)品的問題和答案的方式本身也很有趣。所有的問題和回答都是公開的——任何人都可以閱讀它們。這反過來會(huì)產(chǎn)生原始內(nèi)容，從而提高特定產(chǎn)品頁面的價(jià)值。

energysistem.com

功能性

energisystem.com上提供的音頻設(shè)備通過有吸引力的產(chǎn)品頁面展示。在這種情況下，開發(fā)人員實(shí)現(xiàn)了出色設(shè)計(jì)和功能的完美結(jié)合。最值得注意的功能之一是一個(gè)經(jīng)過深思熟慮且?guī)в匈徺I按鈕的清晰欄，該按鈕在滾動(dòng)過程中仍附著在屏幕的底部邊緣。

samsung.com

根據(jù)個(gè)人需求選擇

如果您想購買三星設(shè)備，您可以直接從公司的官方商店購買。該公司提供獨(dú)特的產(chǎn)品頁面，您可以在其中購買新手機(jī)和移動(dòng)套餐。

他們特別強(qiáng)調(diào)為您的需求選擇正確的解決方案。您可以方便地選擇設(shè)備并添加正確的移動(dòng)計(jì)劃。反過來，產(chǎn)品描述被降級到頁面底部，隱藏在其中一個(gè)選項(xiàng)卡上。當(dāng)網(wǎng)站提供的產(chǎn)品具有共同的特征和特性并且可以從其他網(wǎng)站輕松獲得時(shí)，這樣的解決方案才有意義。

結(jié)論

電子商務(wù)商店中的產(chǎn)品頁面總是具有相似的組件。由于用戶的習(xí)慣，一個(gè)好的頁面總是根據(jù)經(jīng)過驗(yàn)證的設(shè)計(jì)來構(gòu)建的；然而，這并不意味著設(shè)計(jì)師沒有展示創(chuàng)意的空間。設(shè)計(jì)出色產(chǎn)品頁面的關(guān)鍵方面之一是將其布局和結(jié)構(gòu)與所提供的產(chǎn)品相匹配。

除了提供咨詢服務(wù)或網(wǎng)站技術(shù)支持外，在設(shè)計(jì)的設(shè)計(jì)機(jī)構(gòu)中，我們還著眼于設(shè)計(jì)/UX領(lǐng)域的所有有趣的解決方案，在電子領(lǐng)域，產(chǎn)品頁面上充滿了精美渲染的模型、照片，在某些情況下 -產(chǎn)品動(dòng)畫和短片。使此類頁面成功的關(guān)鍵挑戰(zhàn)之一是以一種使用戶易于閱讀設(shè)備描述并了解更多詳細(xì)信息的方式呈現(xiàn)產(chǎn)品描述。閱讀內(nèi)容后，客戶應(yīng)該覺得產(chǎn)品觸手可及，購買簡單直觀。