40個電商網(wǎng)站帶你走進“意想不到”的創(chuàng)意世界
時間:2023-03-29 17:58:01 | 來源:電子商務
時間:2023-03-29 17:58:01 來源:電子商務
作為圈內(nèi)最有影響力的優(yōu)秀網(wǎng)站推薦平臺
,Awwwards 手頭上匯集了世界上最全面、素質(zhì)最高的網(wǎng)站。
Awwwards 精選的一組在設計和體驗上都不走尋常路的網(wǎng)站,匯總到這個合集當中,給那些正在尋找獨特設計的電商設計師們。
如今的電商相關(guān)的設計師,也已經(jīng)是相當龐大的一個群體了。你是否也是其中之一呢?
可是當你想從一些原創(chuàng)的、優(yōu)質(zhì)的電商網(wǎng)站上獲取靈感的時候,最常碰到的問題,大概就是很難集中地看到這些網(wǎng)站,對吧?
這些獨立的在線電商網(wǎng)站大都不會采用 Prestashop、WooCommerce 和 Magento 等流行的平臺,也不會沿用這些平臺上經(jīng)典但是已經(jīng)「爛大街」的布局設計。
最先鋒、最獨特的東西,往往不會直接藏在人群當中,就是這樣的道理。
不過,現(xiàn)在的情況又發(fā)生了一些變化。最近兩年,當一個已有的品牌想要做一些更加有創(chuàng)意的事情的時候,它會盡量不在已有的網(wǎng)站的基礎(chǔ)上來進行創(chuàng)造,而是選擇一個獨立于現(xiàn)有體系之外的小電商網(wǎng)站,來承載這些東西。
這類網(wǎng)站會更加激進,比如在不影響導航的情況下,使用各種實驗性的全屏布局,各個功能在一個獨特的交互模式下匯集、切換。
這種情況很多,比如
http://Maradji.com 這個網(wǎng)站:
Maradji (https://maradji.com/)的過渡效果,網(wǎng)站被收錄到了 Image Galleries and SlideShows (https://www.awwwards.com/awwwards/collections/image-gallery-and-slideshows/)分類中。這些網(wǎng)站先鋒,它們確實為了追求獨創(chuàng)性而放棄了一些更為穩(wěn)妥的方案。
比如
http://Keus-store.com 這個網(wǎng)站,它們在設計上最激進的點就是在于放棄了傳統(tǒng)電商網(wǎng)站的導航規(guī)則,而是采用了橫向的導航模式,讓用戶在這種反常規(guī)的瀏覽機制下,以橫向展開的形式來了解產(chǎn)品的細節(jié)。
Keus(https://www.keus-store.com/),水平導航模式的電商網(wǎng)站, 網(wǎng)站被收錄到了 Image Galleries and SlideShows(https://www.awwwards.com/awwwards/collections/image-gallery-and-slideshows/) 分類下。此外,我們還在 Gucci Dècor 這個網(wǎng)站中,找到了高度主題化的設計,產(chǎn)品的細節(jié)非常到位,水平滾動式的交互以及超大的圖片讓所有細節(jié)一覽無遺。
△ Gucci Dècor(https://www.gucci.com/ca/en/ca/decor-c-decor)風格調(diào)性十足,微文案獨特考究,幽默風趣。
有一些獨特的電商網(wǎng)站,從頭到腳都是你從沒見過的樣子。
比如
Sea Harvest online shop 這個專營新鮮海鮮的電商網(wǎng)站,即使在電商發(fā)達的中國,也算得上是少見了,更加獨特的是在于網(wǎng)站的設計上同樣獨樹一幟,帶有十九世紀風情的插畫和布局,讓整個網(wǎng)站的個性從里到外透出來。
△ Sea Harvest online shop(https://www.seaharvest.net.au/)Studio Job 則將電商網(wǎng)站的體驗推到了另外一個極致。
極簡的布局之下,使用粗野主義的設計風格來呈現(xiàn)各種視覺元素,從動畫、微交互到幽默的文案,均是如此。
Studio Job(https://www.studio-job.com/),網(wǎng)站被收錄在 E-Commerce(https://www.awwwards.com/awwwards/collections/e-commerce/)分類之下。這兩個網(wǎng)站都使用了明確而激進的設計策略,用非常具體的設計語言來構(gòu)建網(wǎng)站的調(diào)性,賦予網(wǎng)站以足夠的個性,并且這種設計能夠和特定的用戶群體產(chǎn)生共鳴。
Femme&Fierce 則是另外一個充滿異國情調(diào)的網(wǎng)站設計實例,網(wǎng)站中包含了不少有趣的微交互,充滿有機感的動畫,以及有待用戶去發(fā)現(xiàn)的有趣細節(jié),除此之外,網(wǎng)站的微文案也以可愛和機智而著稱,口語化的表述方式在用戶那里圈粉無數(shù)。
Femme & fierce(https://femmeandfierce.nl/) 網(wǎng)站被劃分到了 E-Commerce(https://www.awwwards.com/awwwards/collections/e-commerce/)分類之下。不過,如果要說非常規(guī)的網(wǎng)頁設計,Balenciaga 這個電商網(wǎng)站也算得上是個中翹楚了,極簡到極致,網(wǎng)站首頁就是個導航,絕對少見,絕對反常規(guī)。
用戶體驗的新視野
實際上,如今的電商的大環(huán)境是非常令人振奮的,從創(chuàng)意上來說,設計師和品牌都在積極嘗試各種新穎大膽的方案。
而在技術(shù)上,視覺搜索、語音助理、預期設計、機器學習都具備良好的可實施性,讓電商網(wǎng)站具備更多可能性。
在這些技術(shù)當中,視覺搜索是最重要的趨勢之一,在電商網(wǎng)站當中,最典型的使用場景是「搜索類似產(chǎn)品」。
事實上,自從2016年開始,阿里巴巴旗下的
Aliexpress 就已經(jīng)開始應用功能完善的視覺搜索功能了,其中
Snapchat、Pinterest Lens、Google Lens 也是這個領(lǐng)域的先驅(qū)。
人工智能和機器學習正在為微零售商提供更加深入的導購服務和信息服務,旨在通過更強的相關(guān)性和可訪問性,來給用戶提供個性化的服務體驗,改進搜索結(jié)果,提供建議。
毫無疑問,新興的技術(shù)是改變用戶體驗最有力的基礎(chǔ),下面是我們專門搜集的,最具有創(chuàng)意的電商網(wǎng)站,希望它們能給你提供更多靈感,為創(chuàng)造更優(yōu)秀的電商網(wǎng)站而努力。
下面,就是這40個劍走偏鋒的電商網(wǎng)站,不要被它們樸素的截圖騙了,有空的時候可以逐個點開看看,或許某個獨特的設計會給你一些啟發(fā)。
△ Pastel Still Life Pictures for Coffee Online Shop (https://ceremonycoffee.com/) △ Buying experience(https://yelvy.com/)△ Street style sneaker product page(https://www.p448shoes.com/)△ Bartaile(http://www.bartaile.com/)△ Traditional fish ecommerce shop(http://seaharvest.net.au/)△ Only/Once Shop(http://onlyonceshop.com/)△ MoMA Design Store(https://store.moma.org/)△ Mendo – Shopping cart book store(https://www.mendo.nl/)△ Non-alcoholic spirits online store(https://seedlipdrinks.com/)△ etq store(http://etqstore.com/)△ Anna Clothing(https://www.shopatanna.com/)△ Drummonds product page(https://drummonds-uk.com/)△ adidas ZX Flux(http://www.adidas.co.uk/zx_flux)△ A-dam Underwear(https://www.adamunderwear.com/)△ Ode Cart(https://www.odegoods.com/shop/collection/waste-matters/)△ Protest Sportswear(https://www.protest.eu/)△ Fotonaut Shop(http://thefotonaut.com/en/eshop/)△ Cienneny(http://cienneny.com/)△ ETQ(http://www.etq-amsterdam.com/)△ Studio Job shopping cart(http://www.studio-job.com/)△ Glossier – Add to bag(https://www.glossier.com/)△ Minimal Shoes Online Shop(https://www.etq-amsterdam.com/)△ Scroll Triggered Horizontal Transition(https://charles-simon.com/)△ Homepage Product Filter(https://www.notanotherbill.com/)△ Nomos Glashütte Online Shop(https://nomos-glashuette.com/en)△ Star Wars Themed Online Shop(https://thecoolclub.co/)△ Search filter Nubikk webshop(https://www.nubikk.nl/)△ Subtle scroll triggered animation(https://www.abelodor.com/)△ Simply chocolate – e-commerce(https://simplychocolate.dk/)△ Shopskin: e-commerce website(https://www.shopskin.co.uk/)△ Everyday Needs Navigation Fade(https://www.everyday-needs.com/)△ Amaio – Distortion Effect(http://as.ouiwill.com/)△ Detailed product description(https://huru.rocks/)△ E-commerce Carbon Beauty(https://www.carbonbeauty.com/)△ Cantor Fine art(http://www.cantorfineart.com/product/after-angela/)△ Volta e-commerce(https://voltafootwear.com/)△ E-commerce – brutalist style(https://www.hangerinc.co.uk/collections/latex-1)△ Black and white e-commerce(https://www.4254sport.com/)△ Dr?le de Monsieur Carousel Gallery(https://droledemonsieur.com/)△ B&O PLAY Autumn/Winter 2016(http://www.beoplay.com/landingpages/aw16#intro)