|
內容目錄 |
就像實體店一樣，我們的電子商務網站也需要透過精心策劃得以吸引買家的光顧，它不僅僅是一個圖形和移動特效的呈現結果，而是您的設計需要採用 UX 原理來創造天衣無縫的購物體驗，在最後的結帳上也不會遇到任何困難阻擋。
除了降低矛盾，我們的網站應該以簡潔有力的方式來呈現品牌的價值，以專業的〝外觀〞，買家不僅清楚了解您業務內容，也樹立了產品的價值。
提高轉化率的一個方法，就是在你的網站與顧客之間創造情感體驗與連接。顧客先以自身情感購買，然後用邏輯證明。一個出色的商店設計，與顧客在情感層面上連接，遠比在網站上做再多的變化還要來的多。
為了幫助您與客戶建立連接，我們收集了50 種最好的電子商務網頁設計來供參考並提供靈感。這些網站在他們自己的品牌裡，用吸引人舒適的 UX 設計來抓住顧客並引導他們進行購買。
1. Allbirds
環保鞋類公司Allbirds 使用顏色和空間來突顯產品的價值。以柔和的黃色為背景對比突出紅色的鞋子，使顧客馬上注意到此產品。除此之外，該品牌以自然舒適為核心價值，所以顧客馬上明白為什麼他們應該買一雙。
2. Everlane
服飾店Everlane使用高質量的攝影技術來向顧客證實他們服飾所要傳達的。首先，顧客會讀到這些短袖襯衫的價值在——你可以"穿上一件就出門"。鮮明簡單的圖像透過展示連衣裙的小紐扣，同時又呈現不皺、俐落感來捍衛這承諾。在看到服裝是多麼簡單和吸引人後，顧客便可以直接"shop now"進行購買。
3. MeUndies
內衣公司MeUndies用顏色來展示他們的產品。網站設計多採用黑白配色，讓他們充滿活力的產品照片跳脫出來，並吸引顧客眼光。
4. Knotty Tie Co.
領帶公司Knotty Tie Co.其獨特價值是提供顧客訂製。為確保顧客能夠馬上體會到這一價值，Knotty Tie Co.讓人們能在不註冊的情況下填寫定製設計服務。這項服務的設計，消除摩擦，也讓更多顧客去探索他們的產品。
5. Outdoor Voices
活動服裝公司Outdoor Voices將圖片延伸到選單中，而不是將兩者分開。這使得照片更加身臨其境，因此消費者可以直接想像自己穿著這項產品在外面跑的樣子。當消費者準備瀏覽，也可以很容易地找到CTA，因為它以白色突出呈現且位在正中央。
7. Hardgraft
這家豪華男士時裝公司透過文字向消費者表達他們的信念風格，以推銷自己的品牌。大膽的語言在產品說明中放大，以引起消費者注意，讓他們覺得服裝是精心製作的。
8. Chubbies
泳裝公司Chubbies運用鮮豔的顏色和照片，讓消費者彷彿在一個有趣的度假心情中，激發購買慾望。例如，在他們的主頁上，以熱帶叢林環境來展示充滿活力的泳褲。
9. Alice + Whittles
該產品公司用簡潔的設計，凸顯自己的產品價值：極簡，但高品質的。就像該品牌的小選擇黑色靴子，照片導向的網站感覺整潔，但卻做得很好。設計的裸骨感吸引消費者的注意“他們正在尋找”基本的，永恆的鞋。
10. Fiercely
Fiercely公司使用產品照片和文字來突出他們T恤的獨特：復古設計與現代資訊的傳達。消費者在主頁上可以馬上知道這價值以一種突出的"復古氛"文本和簡潔圖片的形象T恤的訊息。
11. Solstice Intimates
與大多數網站不同，這間泳衣和內衣的公司透過低質量的照片吸引消費者的注意力。他們將產品圖像都稍微模糊，來創造一種復古，堅毅的感覺他們的目標買家正在尋找。當然，外賣不是使用低品質的照片，它是用來抓住品牌風格的目標關鍵客戶，甚至意味著打破傳統的設計原則。
珠寶、手錶及配飾
簡潔的品牌設計不僅喚起了極簡主義風個的買家，也使網站能輕鬆的瀏覽。網站以白色為背景，便於查找米色選單來瀏覽。與大多數網站不同，很有野心的在頂部的黃金搜索欄周圍留下了很多空白，使其更容易看到。
13. Away
行李公司Away 透過戰略風格的圖像展示其產品價值。除了高解析度，照片上產品看起來很棒，因為模特兒的穿著與手提箱非常協調，如上面的例子。看起來美麗、合適的調色，讓消費者更加驚豔。
14. Skagen
手錶公司Skagen使用特寫、高解析度的圖像來展示其產品的價值。例如，照片的清晰品質可以捕捉到金屬錶戴的光澤、數位錶屏的清晰度以及腕帶的複雜編織。
15. MVMT Watches
MVMT 手錶網站的最小功能表欄使網站更具吸引力，更易於流覽。只有三個功能表選項-男士、女士、品牌-用很多空白在每個網頁間來突顯華麗的產品照片。擁有少量的功能表選項也使訪問者更容易選擇功能表選項，因此他們更有可能開始購物。
16. Miansai
Miansai 珠寶店將大部分照片有的邊框；有的沒有邊框，使他們感覺更加身臨其境。圖片周圍缺乏空白，很容易忘記網站是一個商店，所以消費者可以很容易地想像自己穿戴著、使用著該產品，消費者更可能會開始購物。
17. Warby Parker
Warby Parker將簡潔風格與有趣的粉彩巧妙地結合，以吸引他們的目標消費群。極簡風格的網站吸引了他們的關鍵消費者'誰需要薄邊、光滑的眼鏡。同時，粉彩的使用賦予了品牌一種創意、藝術感，是WP眾多客戶所看重的。
18. Stay Home Club
結合空白與顏色提示，該公司網站很易於瀏覽，但也不失休閒，也悠閒地像他們的客戶一樣。他們的顧客可以很容易地找到每個產品類別，因為他們的功能表是整潔的。同時，雅緻大爆發的顏色對比一個簡潔的設計，顯示出他們的主要買家，商店也並沒有很看重那些。
19. Herschel
在Herschel的網站，視頻被戰略性地放置公司的主頁上，作為最吸引人的媒介之一，以吸引新的顧客。該視頻不僅用簡潔的細節來吸引觀看者，還透過展示很酷的特效來吸引觀看產品，使之看起來有趣。
20. Goorin Bros.
伴隨著帽子公司Goorin Bros.的網站設計「高品質，清晰的圖像」佔用了大部分的螢幕空間。這種放置讓消費者能夠全神貫注於照片，並沉浸在檢查產品中。
21. Diff Eyewear
Diff 眼鏡的設計類比了購物者有了他們的產品後會興奮的生活方式。促銷圖片中使用大膽、充滿活力的顏色，提醒顧客：他們的品牌很有趣。他們的網站也致力於呈現太陽鏡在戶外佩戴的照片，消費者可以很容易地想像自己穿戴著產品的樣子。
電子
22. LOU Board
滑板公司Lou Board使用黑色配色設計來對比動作包裝的產品照片，以激發遊客對他們的產品。黑色有一種前衛的感覺來吸引他們的滑板觀眾也使產品感覺更電影化和吸引力。
23. Beats by Dre
耳機不是很容易能在視覺上推廣的產品，畢竟，對於消費者來說，聲音的品質很重要。Beats by Dre仍然設法使他們的網站用明亮的紅色來變得有趣。該公司將明亮的色調與其他視覺元素相結合，引導消費者'購買。例如，上面照片中的白色條紋在"探索"按鈕下劃線與紅色呈現對比。
24. Simplisafe
與服裝店不同，安全產品的電子商務商店更注重傳達其信譽，而不是風格。SimpliSafe公司透過在主頁上突顯他們的代言和評論來實現這一點。他們網站用白色和藍色協調配色，消費者的注意力更容易被這些代言和評論所吸引。
25. Nest
家庭設備公司Nest用大膽的顏色和令人驚嘆的產品照片抓住消費者的注意力。在他們當前的主頁上，新產品以明亮的藍色背景突出顯示。被顏色迷住了，消費主繼續看門鈴的高品質照片，發現這產品是多麼小、時尚和簡單。
26. Bose
耳機公司Bose網站設計是給產品照片提供大量空間來吸引網站消費者。從主頁到產品頁面，有大量的大型高品質圖像來顯示產品本身以及照片與模型。這些大圖像讓消費者迷失在產品中，並很容易想像自己使用它，並有望驅使他們購買。
27. Oculus
VR公司Oculus的網站是為不熟悉的產品設計商店的一課。知道 VR 耳機不是常用產品，該網站直接凸顯使用的產品的圖像和價格點。如果沒有這種程度的透明度，許多消費者可能會感到困惑並離開網站。VR令人興奮的前景，Oculus消費者可以很容易地找到藍色的"SHOP NOW"。
28. Peloton
擁有不太傳統產品的公司需要清楚地向網站消費者清楚呈現產品的工作原理，以便他們能夠欣賞其價值。自行車公司Peloton以一進入主頁便播放視頻的放是做到了。視頻顯示使用者在私人住宅騎自行車，同時觀看現場教練視頻。邊看邊學習運動，引起消費者興趣，並想瞭解更多關於該產品訊息。
29. Birdi
煙霧探測器公司Birdi在他們的主頁上使用文本和視頻的結合來快速顯示他們的產品價值。沒有無關的字，主頁表示它是煙霧，一氧化碳和空氣質量的探測器。在文本後面播放視頻，展示產品如何通過智能手機使用。這種通過視頻和文字直接解釋產品有助於消費者理解為什麼 Birdi 值得購買。
鮮花、問候和禮物
30. ProFlowers
禮品和花卉公司ProFlowers擁有種類繁多的產品目錄，消費者有很多的選擇。為了維持商店對使用者友善性，該網站功能表中只有五個類別，每個類別都連接特定客戶的需求。這種設計可以讓消費者更易於尋找所需要的東西，而不會迷失在其他產品中。
31. The Bouqs Co
在網路上買花有個小矛盾——大多數人希望能親自看過後購買花束，因為這需要一些藝術感。Bouqs Co 以優雅、甜美的網頁設計，看起來就好比花店一樣漂亮，取得消費者信任。產品圖像清晰明亮，網站上用許多漂亮的柔和的顏色來調色。
32. Leaf & Clay
植栽公司Leaf & Clay網站可以簡易地流覽與獨特的主頁設計。相較於只放一張照片，該網站以顯示多張照片來指示商店的不同類別。作為一個消費者在瀏覽時，植物是如此多樣，而這個設計是非常有幫助的。看到圖片會使消費者更好決定是否想要該產品。
33. Simone LeBlanc
禮品盒商店Simone LeBlanc用一個可愛的象牙配色方案，以吸引那些喜歡優雅、經典風格的目標買家。簡單的顏色也使得在商店瀏覽時充滿愉快、平靜的體驗。沒有任何分散注意力的元素，消費者可以全神貫注在產品照片上。
34. FoxBlossom
婚禮和禮品公司Foxblossom使用創新的照片代替選項來吸引他們的消費者，鼓勵購買。照片比大多數電子商務商店的照片大，許多產品的照片在滾動時會顯示備用圖像。健康、美容和自我護理
35. Ritual
婦女維他命公司Ritual在主頁上以亮黃色背景來吸引消費者。顏色不只是醒目的，它也給消費者一種充滿活力的感覺，藉此希望人們聯想到他們的多種維生素。建立這種正向積極的情感連結，讓消費者更趨向點擊CTA和瞭解更多。
36. Curology
護膚公司Curology知道，只有當他們的產品能幫助他們解決問題，才能贏得消費者的青睞。為了向消費者展示他們的產品是多麼有用，在主頁可以切換顯示不同的皮膚問題，以及修復後，例如：黑頭、青春痘、皮疹等等。這種方式可以吸引消費者注意力於該公司的解決方案上。
37. Glossier
和任何電子商務商店一樣，美容公司 Glossier也希望消費者能深入探訪他們的網站，並翻閱他們的類別，找到他們想要的產品。傳統的網站功能表只顯示文本，所以消費者並不怎麼有動力繼續點擊。Glosier 鼓勵消費者使用圖片導向的功能表探索類別。每個類別都包含上次點擊過的產品圖像。
38. Hairstory
頭髮產品公司Hairstory在他們的主頁上以獨特的測驗脫穎而出。可以立即向消費者展示其品牌的價值，測驗結果讓 Hairstory 做出產品推薦。這種個人化測驗的設計讓消費者在一 進入網站後留下了正面的第一印象。
39. Native Deodorant
當網站提供太多的產品頁面時，UX 就會變得混淆。為了打造簡單、天衣無縫的購物體驗，Native Deodorant將其產品整合成三個產品頁面：女性、男性和敏感產品頁面。在每個頁面上，遊客可以看到不同的香味和種類。只有三個選項，使商店變得很容易瀏覽。
40. Harry’s
刮鬍刀公司Har harry's使用色彩和高品質的圖像來展示其品牌的價值。整個網站的大膽色調（如經典的橙色Harry's手柄）使產品引人注目。同時，清晰的圖像也展示了刮鬍刀刀片的精細細節，消費者可以看的到其中的高質量。
41. Quip
牙刷公司Quip的網站採用清晰、簡單的方式在引導消費者購買。主頁兩個迷人的視覺效果 - 產品的高解析度照片和霓虹燈綠色CTA – 形成一個十字架在中心吸引消費者。他們的眼睛自然會向下移動擊中CTA，確切地知道在哪裡購買。
42. Dollar Shave Club
在網頁設計中，增加人臉照片為網站帶來個人感覺，便於與消費者建立信任。Dollar Shave Club利用這一原則以一組人們使用公司產品的圖像作為循環顯示。這種方式和大膽的顏色已經很吸引人，但它還顯示不同的使用者的概念，增加了人性供消費者欣賞。
43. Volition
美容公司Volition有一個獨特的價值主張——他們的使用者可以提供產品建議，投票和創作來溝通，這個過程能帶來創新的創造。他們突顯這一價值並用動畫在他們的主頁上，顯示有多少加入這創作溝通中。消費者被這個舉止吸引就可能會深入網站，瞭解更多。
44. Julep
美容公司Juep（Julep）運用有趣的點擊鈕吸引消費者，而不再只是標準的CTA——learn more、shop now。在鮮明的紫色裡，點擊方格提供獨家優惠「輸入其電子郵件地址，可獲得 25% 的折扣」給消費者。點擊的訪問者如果。這種方式對有些消費者來說似乎太唐突了，但還是有些人會喜歡，並開始購物兌換這獎勵。
45. Billie
女性剃鬚公司Billie以主頁視頻吸引消費者的注意力，該視頻是最吸引人的媒體之一。採用女性粉色濾鏡，讓女性對品牌表示歡迎。如果消費者對視頻非常感興趣，那麼在中心有一個白色方格- CTA 購物可以進入。
餐飲
46. Winc
葡萄酒公司Winc用最小的功能表類別來簡化網站瀏覽。網站消費者只能在"葡萄酒"、"禮物"和"發現"之間進行選擇，他們可以輕鬆地決定他們需要去哪裡完成自己想要的，無論是為自己購買葡萄酒還是更瞭解有關公司的。
47. NatureBox
小點心公司NatureBox鼓勵消費者以多種途徑到達類別來探索他們的網站。消費者可以經由上方功能表單擊類別，也可以在主頁上運用圖像的功能表瀏覽這些類別。提供兩種瀏覽方式給消費者，使他們更有可能開始購物。
48. Blue Bottle Coffee
咖啡公司Blue Bottle Coffee運用攝影來強調產品的異國、豪華的品質。公司不只是展示他們的咖啡豆的圖像，也使用產品來源地的華麗的照片讓消費者更興奮。
49. Crema
咖啡訂閱公司Crema使消費者透過產品訪問、調查來與產品進行互動。單擊主頁上的「開始」CTA 後，消費者將定向到3 個圖片的問題調查。此調查很簡單，非常適合鼓勵消費者參與。
50. Soylent
Soylent公司網站運用產品頁面上的文字來分解其對消費者獨特的價值。不只列出產品數量和價格，還包括每400卡路里的重要性以及訂購能省下多少。
讓設計吸引您的客戶
電子商務商店的網頁設計塑造了客戶完整的購物體驗。正如它可以鼓勵購買；也可以導致客戶放棄他們的購物車。要推動訂單，您的設計應考慮UX原則和品牌風格。考慮到兩者將促使遊客瞭解您的品牌的價值，沒有太多的猶豫來結帳。
希望上面這五十個精彩案例能幫您在電商設計版面時會有很棒的靈感，有什麼問題或是指教，都可以隨時加fanny的line喔~ID是fanny-fu,謝謝
文章來源:50 Best Ecommerce Website Designs to Learn From
留言列表
