14

少见的合集!40个剑走偏锋但创意爆棚的电商网站

 5 years ago
source link: https://www.uisdc.com/creative-and-unusual-e-commerce?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

ruuiYjn.jpg!web

编者按:作为圈内最有影响力的优秀网站推荐平台,Awwwards 手头上汇集了世界上最全面、素质最高的网站。Awwwards 精选的一组在设计和体验上都不走寻常路的网站,汇总到这个合集当中,给那些正在寻找独特设计的电商设计师们。

如今的电商相关的设计师,也已经是相当庞大的一个群体了。你是否也是其中之一呢?可是当你想从一些原创的、优质的电商网站上获取灵感的时候,最常碰到的问题,大概就是很难集中地看到这些网站,对吧?这些独立的在线电商网站大都不会采用 Prestashop、WooCommerce 和 Magento 等流行的平台,也不会沿用这些平台上经典但是已经「烂大街」的布局设计。最先锋、最独特的东西,往往不会直接藏在人群当中,就是这样的道理。

不过,现在的情况又发生了一些变化。最近两年,当一个已有的品牌想要做一些更加有创意的事情的时候,它会尽量不在已有的网站的基础上来进行创造,而是选择一个独立于现有体系之外的小电商网站,来承载这些东西。这类网站会更加激进,比如在不影响导航的情况下,使用各种实验性的全屏布局,各个功能在一个独特的交互模式下汇集、切换。这种情况很多,比如 Maradji.com 这个网站:

ENz6Rvv.gif

Maradji 的过渡效果,网站被收录到了  Image Galleries and SlideShows 分类中。

这些网站先锋,它们确实为了追求独创性而放弃了一些更为稳妥的方案。比如 Keus-store.com 这个网站,它们在设计上最激进的点就是在于放弃了传统电商网站的导航规则,而是采用了横向的导航模式,让用户在这种反常规的浏览机制下,以横向展开的形式来了解产品的细节。

3qAVBfY.gif

Keus ,水平导航模式的电商网站, 网站被收录到了  Image Galleries and SlideShows 分类下。

此外,我们还在 Gucci Dècor 这个网站中,找到了高度主题化的设计,产品的细节非常到位,水平滚动式的交互以及超大的图片让所有细节一览无遗。

iEnQJ3n.jpg!web

Gucci Dècor

风格调性十足,微文案独特考究,幽默风趣

有一些独特的电商网站,从头到脚都是你从没见过的样子。比如 Sea Harvest online shop 这个专营新鲜海鲜的电商网站,即使在电商发达的中国,也算得上是少见了,更加独特的是在于网站的设计上同样独树一帜,带有十九世纪风情的插画和布局,让整个网站的个性从里到外透出来。

FzqMren.jpg!web

Sea Harvest online shop

Studio Job 则将电商网站的体验推到了另外一个极致。极简的布局之下,使用粗野主义的设计风格来呈现各种视觉元素,从动画、微交互到幽默的文案,均是如此。

viyyUzV.gif

Studio Job ,网站被收录在 E-Commerce 分类之下。

这两个网站都使用了明确而激进的设计策略,用非常具体的设计语言来构建网站的调性,赋予网站以足够的个性,并且这种设计能够和特定的用户群体产生共鸣。

Femme&Fierce 则是另外一个充满异国情调的网站设计实例,网站中包含了不少有趣的微交互,充满有机感的动画,以及有待用户去发现的有趣细节,除此之外,网站的微文案也以可爱和机智而著称,口语化的表述方式在用户那里圈粉无数。

BbEjqaj.gif

Femme & fierce 网站被划分到了 E-Commerce 分类之下。

不过,如果要说非常规的网页设计,Balenciaga 这个电商网站也算得上是个中翘楚了,极简到极致,网站首页就是个导航,绝对少见,绝对反常规。

用户体验的新视野

实际上,如今的电商的大环境是非常令人振奋的,从创意上来说,设计师和品牌都在积极尝试各种新颖大胆的方案,而在技术上,视觉搜索、语音助理、预期设计、机器学习都具备良好的可实施性,让电商网站具备更多可能性。

在这些技术当中,视觉搜索是最重要的趋势之一,在电商网站当中,最典型的使用场景是「搜索类似产品」。事实上,自从2016年开始,阿里巴巴旗下的 Aliexpress 就已经开始应用功能完善的视觉搜索功能了,其中 Snapchat、Pinterest Lens、Google Lens 也是这个领域的先驱。

人工智能和机器学习正在为微零售商提供更加深入的导购服务和信息服务,旨在通过更强的相关性和可访问性,来给用户提供个性化的服务体验,改进搜索结果,提供建议。

毫无疑问,新兴的技术是改变用户体验最有力的基础,下面是我们专门搜集的,最具有创意的电商网站,希望它们能给你提供更多灵感,为创造更优秀的电商网站而努力。

下面,就是这40个剑走偏锋的电商网站,不要被它们朴素的截图骗了,有空的时候可以逐个点开看看,或许某个独特的设计会给你一些启发。

当然,如果你希望作出在视觉上更贴合主流的电商网站,不要错过优设的 电商导航 ~

fUNrUfj.png!web

Pastel Still Life Pictures for Coffee Online Shop

qauiemF.png!web

Buying experience

I3UJVbf.png!web

Street style sneaker product page

Fzmyuiv.jpg!web

Bartaile

uAjaiea.jpg!web

Traditional fish ecommerce shop

6bieIn6.jpg!web

Only/Once Shop

UNFjIzj.jpg!web

MoMA Design Store

vQr6Rje.jpg!web

Mendo – Shopping cart book store

FN3YFvJ.jpg!web

Non-alcoholic spirits online store

iYrQ3yB.png!web

etq store

Nfqiiyr.jpg!web

Anna Clothing

ZzAva27.jpg!web

Drummonds product page

vuMfYvN.jpg!web

adidas ZX Flux

aqYfYbv.jpg!web

A-dam Underwear

yQ3YR3I.jpg!web

Ode Cart

bI3MVrq.jpg!web

Protest Sportswear

BNZfAnj.jpg!web

Fotonaut Shop

2amuUzY.jpg!web

Cienneny

b2yYfuV.jpg!web

ETQ

YNbeUnm.png!web

Studio Job shopping cart

iUFvaer.png!web

Glossier – Add to bag

mQZJFfF.png!web

Minimal Shoes Online Shop

YVziaeq.png!web

Scroll Triggered Horizontal Transition

yIrmeij.png!web

Homepage Product Filter

bAjma2y.png!web

Nomos Glashütte Online Shop

Fjq2aeJ.png!web

Star Wars Themed Online Shop

7RbAvqb.png!web

Search filter Nubikk webshop

jqeEvef.png!web

Subtle scroll triggered animation

2YRZnm7.png!web

Simply chocolate – e-commerce

QziIFzA.png!web

Shopskin: e-commerce website

yi2q6fY.png!web

Everyday Needs Navigation Fade

I77BbyQ.png!web

Amaio – Distortion Effect

J3QzEbQ.png!web

Detailed product description

ziQzIfB.png!web

E-commerce Carbon Beauty

VzMVfan.png!web

Cantor Fine art

Z3Y7Rfb.png!web

Volta e-commerce

nMzmqmb.png!web

E-commerce – brutalist style

jUFZZze.png!web

Black and white e-commerce

ZrY7fyZ.png!web

Drôle de Monsieur Carousel Gallery

RBVFN3I.jpg!web

B&O PLAY Autumn/Winter 2016

a22emi2.jpg!web


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK