基本电子商务网站功能:提示和例子

WebFX总统。Bill在互联网营销行业拥有超过25年的经验,专长于搜索引擎优化、用户体验、信息架构、营销自动化等。William在Shippensburg和MIT的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研究和开发项目提供了基础。

基本电子商务网站功能:提示和例子在设计电子商店时,您可以采用许多不同的方法。但是,您可能会注意到,有效的电子商务网站具有某些站点特性,这些特性对购物者的体验绝对至关重要。我们将看看这些几乎在所有电子商务网站都能找到的常见特征。

产品导航

也许在线商店最重要的部分是它的导航系统。好网站导航对于任何网站都是必不可少的,对于电子商务网站更是如此。用户需要能够通过直观的导航系统快速浏览不同类别和产品。

投资信息架构对一个电子商务网站的成功至关重要。亚马逊亚马逊有一个设计最好(也最广泛)的导航系统。可以在站点上找到的产品类别组织得很好,使用户能够在不同的产品类别之间快速导航。

正如你将在前面的例子中看到的,左侧垂直导航菜单很流行,因为它允许我们包含更多的链接,而不是水平导航菜单。亚马逊库存过剩Overstock以垂直菜单栏的形式展示了其全面的初级产品导航系统。除了网站的主要导航菜单,Overstock还有一个强大的导航菜单页脚

库存过剩库存过剩橄榄和桃金娘这个电子商务网站销售环保产品。它的左侧有一个垂直导航菜单。他们选择了“销售”链接的样式,所以它是粗体和红色的,以使它更突出。

橄榄和桃金娘通过Snella当一个电子商店有少量的产品或产品类别时,一个水平的菜单栏可以是所有需要的产品导航。在下面的例子中,你可以看到Via Snella,一家2006年才开始经营的男性时尚公司,可以通过一个简单的横向排列的过滤器导航来获得成功。第四街饼干公司第四街饼干公司主要是一家实体店。

然而,他们通过网上商店补充了实体店的销售。在这种情况下,产品导航不需要像Amazon.com这样的商店那样广泛,因为cookie公司只提供少数独特的产品。他们使用缩略图导航来导航产品页面。

第四街饼干公司Mozilla商店Mozilla商店使用一个左侧垂直导航菜单,显示站点中的产品类别。Mozilla商店etnies这家电子商店为购物者提供了两种浏览产品的方式:垂直导航菜单和当你将鼠标悬停在网站水平菜单栏的“商店”菜单项上时出现的下拉菜单。呢帽的凤凰在这个电子商店中,您可以使用左侧垂直导航菜单浏览产品。

菜单被细分为三个主要类别。单击其中一个主要类别会显示更多链接。帝国庭院覆盖帝国天井覆盖使用水平导航菜单。

为了解决与固定水平导航菜单相关的空间不足的问题,子菜单项是逐步披露使用下拉菜单。帝国庭院覆盖OneHorseShy这个电子商店的产品导航系统很简单。您可以按主题或按产品浏览。

OneHorseShy

搜索框

对于电子商务网站来说,拥有一个清晰且定位良好的搜索框是至关重要的。搜索电子商务网站的能力是非常重要的,因为许多在线买家有一个特定的项目,他们正在寻找。搜索框是一个强大的网站功能,可以提高搜索和导航能力。

通常,电子商务商店中的搜索框都位于非常突出的位置,在布局的高处,诱使用户搜索他们想要的产品。EtsyEtsy的搜索框是该网站设计的一个突出部分。它还允许您将搜索限制在特定类别内。

EtsyTasteBook这个电子商务网站有一个高度可见的搜索框,放置在一个高价值的位置。它有占位符文本,让用户知道他们可以搜索什么。TasteBookCosmicsodaCosmicsoda的搜索框位于右边栏。

其独特的造型和醒目的设计可以吸引网站用户的注意。CosmicsodaThinkGeekThinkGeek将其搜索框放在垂直产品导航菜单的顶部,以便于搜索。此外,将搜索框和产品导航菜单分组也是有意义的,因为它们是两个可以同时使用的站点功能。

ThinkGeekAirfixAirfix有一个搜索框小部件,它有高级搜索条件过滤选项。这个例子展示了一种很好的方法来提供一个紧凑的持久高级搜索特性。Airfix

购物车

在电子商务商店中,购物车几乎总是存在的。购物车通常是结帐过程中的第一个屏幕。用户购物车中的产品通常以表/矩阵格式显示。

它的目的是显示用户决定购买的商品。这是一个功能非常强大的功能,可以让你对你所购买的东西进行总结。购物车页面的常见元素有:

  • 产品名称
  • 短产品描述(如果产品名称需要进一步说明)
  • 产品的价格
  • 总成本购物车里的商品
  • 产品图片缩略图显示项目预览的
  • 数量的盒子这允许用户修改他们想要购买的物品数量

DesignByHumansDesignByHumans的购物车清晰且实用。DesignByHumans布朗公司这个示例显示了我们在购物车页面中反复看到的大多数常见特性:数量框、成本汇总、删除产品或修改您想购买的数量的功能,等等。布朗公司BustedTeesbustedtee的购物车会根据你购物车里的商品,为你提供你可能想购买的其他东西的建议。

BustedTees原子的自行车当您将鼠标悬停在这个电子商务网站上的购物车图标上时,它将显示您购物车中项目的简短摘要,而不是直接进入购物车页面。这是一种方便的方式,购物者可以快速看到他们在购物车中放置了什么,而不必等待另一个网页加载。原子的自行车无线的Threadless的购物车干净而直接。

无线的

主打产品

通常,电子商务商店都有他们想要突出的产品。这些产品经常出现在网站的首页上。这些产品通常是正在打折/清仓的商品,或者是最近添加到库存中的新商品。

有很多方法可以把特色产品放在舞台中央。一种流行的方法是在主页布局的顶部有一个图像幻灯片。Alexandalexa这个电子商务网站的图片幻灯片占据了中心舞台。

在设定的时间间隔内,它会改变幻灯片,以显示特色产品和新闻。Alexandalexa步枪纸有限公司来福纸业的特色产品。

网站显示在一个图像幻灯片,以及在3列缩略图安排下面的主要幻灯片。步枪纸有限公司河岛在这个电子商务网站可以看到一个很大的特色区域。它占用了大量的主页空间。

河岛芝加哥L-Shirts在这个电子商务网站的特色项目显示为网站的背景。当您使用左侧的左箭头和右箭头浏览项目时,背景图像会发生变化。芝加哥L-Shirts

产品视图过滤和排序

在显示产品类别或搜索查询结果列表时,对产品进行过滤或排序的能力可以极大地增强用户找到她所寻找的东西的能力。Crate&Barrel板条箱&桶让您过滤产品的价格,类型和更多。电子商店还允许你按字母顺序或价格对商品进行分类。

Crate&Barrel十只小猴子销售儿童名牌服装的电子商务网站“十个小猴子”(Ten Little Monkeys)让购物者可以选择按时间顺序或按价格对商品进行分类。十只小猴子Bridge55Bridge55有一个产品属性的垂直检查表,可以帮助您筛选产品,以便找到符合您的标准的产品。Bridge55

产品图片

与传统实体零售商店相比,电子商务网站的主要缺点是,网站不能让购物者接触和看到产品。因此,销售产品的图像必须包括和展示在一个诱人的方式。图片必须足够大,以便看到产品的细节和功能。

自由人服饰精品店这家服装电子商店有高清图像。浏览产品照片为购物者提供了一个有趣的用户界面,允许他们将鼠标拖动到照片区域,以查看该区域的更详细/分辨率。自由人服饰精品店Storenvy许多电子商店将其他产品图像的缩略图放在当前图像的下方。

然而,在本例中,它们被垂直地排列在正在查看的当前产品图像的右侧,使用户非常容易看到它们。朱尔斯这个网站上的产品图片是美丽和大。它们与产品页面的其他内容集成得很好。

朱尔斯黑色房地产葡萄园在这个电子商店出售的葡萄酒的照片被巧妙地安排,以补充网站的设计。黑色房地产葡萄园Jax葡萄园大的产品图片是这家电子商店网页设计的次要审美诉求。

相关内容

穆罕默德Moradi是计算机工程专业的本科生。他利用业余时间研究和研究语义网和搜索引擎等与网络相关的话题。此外,他还是一名网页/平面设计师。

联系他通过(电子邮件保护)(他最喜欢的就是电子邮件!)

WebFX职业

加入我们的使命,为全球企业提供行业领先的数字营销服务——同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!