12个启发灵感的电子商务网站设计 / 木子杰软件教程

设计一个电子商务网站是一项很大的工作。对一个初创公司来说，现在推出网上商店比以前容易了。

像Shopify这样的软件，拥有令人惊叹的可定制模板库，可以轻松地打造漂亮而且高度沉浸式的电子商务网站体验。这里有12个吸引我们眼球的网站设计，你可以从中吸取顶级网页设计灵感。

01.Drybar

颜色和动画的巧妙运用

优秀的配色搭配微妙的动画让这个网站同时具有风格和个性。鼠标放在吹风机上，它会在绳子上弹跳；鼠标悬停到顶部的导航图标上时，一些小动画会给你提示和反馈。像这样的触控操作，会让访问这个网站变地有趣，而不会使人不知所措甚至感到厌烦。

启发点：在鼠标悬停触控设计时，恰当地运用颜色和动效会给用户提供良好的反馈并且让人感觉到生动有趣。

02.Northernism

极简设计让使得该网站对于用户的要求降低，易于浏览使用。

这个网站通过摈弃已建立的电子商务设计模式，将图像和文本放置在感觉不太熟悉的网格上，创造出了一个新的外观。网站上有大量的空留白并且每个页面包含几个简单的图像，让它看起来比其他大多数网站轻松易懂。

启发点：好的摄影作品的使用让产品感觉很奢侈

03.Bill Blass

很具创意的布局使得该网站脱颖而出

这家服装零售商通过把他们的产品放在首页瀑布流中，打破了在不同的盒子中展示产品的惯例，这让整个网站看起来像是一张大的图片。把这种新鲜的方法和好的配色方案以及漂亮的字体结合在一起，最后的结果是打造出一个让人看起来不可以思议的网站。

启发点：在产品中放一些有趣的物品，如在产品之间放一个煎鸡蛋。

04.The Practical Man

实用的UI设计给靠谱的男人

块状布局，粗体字体和强烈的色彩搭配让这个男士运动服零售商的网站呈现出一个独特的，易于被用户记忆的风格。

启发点：粗壮大块的菜单便于引导并满足使用。

05.PRESS

这个漂亮的网站可以让你体验到一个惬意舒适的书店

PRESSS是一个书籍物品商店，其网站利用美丽的摄影图片模仿打造出在一个宁静的书店里的气氛。当你向下滚动时，产品会出现在醒目的黑白格子中。

启发点：巨大的产品拍摄让你能感受到每本书。

06.A Book Apart

A Book Apart 的电商网站让书的封面成为网站的视觉特色

当许多电子商务网站依靠大型美丽的摄影图片来销售他们的产品时，A Book Apart而是使用块状的颜色封面来生动地展示他们的“为网站创建者提供书籍”系列。这在打包展示他们的整套书籍合集时尤其有效。

启发点：主页巧妙运用CSS过渡的方式处理主要书籍特点，调整屏幕大小来感受整个的效果。

07.Ada Blackjack

皮革商品电商网站Ada Blackjack很好地运用了以商品为主体，突出商品的头图。

Ada Blackjack是一个手工包和皮革制品的品牌。虽然这个网站虽然在设计和布局方面相对传统，但它擅长运用富有表现力的突出产品本身的头图和简单干净的产品摄影。

启发点：当你在某个产品详情页大版本的产品图时，设计师选择通过在页面中叠加大图像来摒弃传统弹出方式。单击加号图标可查看效果。

08.Bellroy

钱包制造者Bellory的电商网站用一个有趣的互动演示示范

当你登录钱包制造商Bellory的主页时，你会看到一个相对简单的布局。进一步深入探究这个电子商务网站，你会发现各种各样非常不同的突出单个产品的设计页面。

当在线展示您的产品时，整合有趣的演示视频方面，Bellroy网站是一个很好的例子来展示Shopify是何等的灵活（开篇提到过Shopify拥有可定制的网站模板库）

启发点：帮助钱包瘦身的教程对于不想让钱包鼓起膨胀的人来说，是一个有趣的并且有意思的指南。它在一些相当不错的产品照片方面做到了极致，并且链接到了他们所有的产品。

Slim your wallet的教程播放地址：https://bellroy.com/products/slim-sleeve-wallet/java

09.Best Made Company

Best Made Company的电商网站拥有一个干净极简的设计

一个充满了漂亮产品的电子商务网站，你从来不知道你想要什么，但是当你浏览Best Made Company的网站时，你会突然发现你自己需要的物品。因为它具有非常干净和极简的设计，该设计方式使得产品摄影，以及所有产品都显示在白色背景上，让产品真正成为了页面的中心部分。

启发点：页面顶部是有创新设计的菜单部分，当访问者访问网站的所有区域时，它是简单，干净，易于使用的。

10.Good as Gold

珠宝电商网站Good as Gold以超大的主页形象化表达来引诱用户

Good as Gold是一家总部设在新西兰惠灵顿的时尚商店。他们的电子商务网站是有名的和令人印象深刻的。大型首页图像会吸引你进入，同时还可以通过多种不同的方式浏览网站，例如：大的下拉菜单或者以按照A—Z列出的每个供应商为特点的品牌页面。

启发点：单击一个链接，观察logo是如何变成加载旋转器。考虑到许多页面是有很多图片的，这是一个很好的提示告诉你该页面正在加载。

11.Shwood

该网站运用的清晰地视频

这个完全响应的电子商务网站充分利用视频，诱使买家了解更多关于他们的太阳镜系列。当前主页具有不少于三个不同的视频可供选择。该网站还以具有高大上的摄影图为特点，使得其太阳镜产品更加闪亮。

启发点：当点击商店标签时，产品集合以条带格式显示。在这里，访客能够通过风格过滤，以便快速和容易的访问特定的风格，同时展示他们的范围类别。

12.FontShop

该网站的设计使用户参与下完成的

当FontShop决定在几年前进行再次设计时，他们在原始状态下采取了非常规的发布设计的路线，并邀请用户参与陪伴网站重新设计直至完成的旅程。

Fontshop项目经理Ivo Gabrowitsch希望客户测试驱动器，辩论以及与网站互动，而这些会影响再次设计将采取的方向。这样做的结果是呈现了一个能够极大程度满足用户的需求的梦幻般的网站。

启发点：产品试用环节是一个试验场，用于实时地测试网页字体，并针对你的产品与网站上的其他任何人自由协作交流，获得用户对产品的需求。

creativebloq

译者：学UI网翻译社－落幕；校对：鼹鼠

12个启发灵感的电子商务网站设计