概念和;现代电子商务网站设计趋势



电子商务网站尤其独特,因为设计师必须专注于布局内的产品展示。用户界面并不复杂,但它们确实需要很多额外的元数据,如价格、数量和项目类型。

在本文中,我想介绍一些相对通用的电子商务网站主题。许多网站布局可以在互联网上找到,这可能会成为年轻艺术家的榜样。但是,经验丰富的web开发人员也可能喜欢本文,以更深入地了解新兴的用户界面趋势。一定要查看下面的几个链接,并通过尽可能多地练习新技术来保持最新状态。

动画页面元素

现在我承认,我只见过少数电子商务网站制作出优雅的动画。如果操作不当,很容易吓跑游客。但是,当您在布局的重要部分上创建有用的动画时,动画样式通常可以提高可用性。菜单和产品标题只是隐藏内容的几个示例,这些内容可能会被动画化到页面中。

Threadless Beta website layout design dropdown navigation menu

Threadless正在推出一个新的测试版布局,该布局具有这些效果。对于熟悉旧布局的购物者来说,这是一个相当大的调整。但是,通过将鼠标悬停在任何顶部链接上,可以查看他们新推出的非常酷的子导航弹出菜单。小块容器将从页面中显示动画。你会注意到主题标题以及相关的缩略图。

Threadless photo thumbnails products category shopping

如果你开始向下滚动页面,你会注意到页面上散落着一大块带字幕的照片。这些图像块分别针对不同的产品类别。当你将鼠标悬停在照片上时,会出现一个新的子链接列表。这是一种独特的设计风格,你不可能在许多其他电子商务布局中找到。

深度嵌套导航

提供店面和;产品在组织所有这些数据时必须小心。典型的网站导航菜单通常包含一小部分链接,其中还包含一些潜在的子菜单项。

但电子商务网站通常需要多级嵌套菜单链接。可能有太多的关卡,你不可能一次全部显示出来!当用户浏览任何产品类别时,导航菜单应打开以显示更多选项。但这些链接仅对当前选定的主题可见。你可以在Newegg上看到这种导航风格的一个极好的例子。

Newegg homepage flyout navigation menu sidebar

当您将鼠标悬停在左侧的每个菜单项上时,将出现一个弹出菜单,其中包含其他链接。然后,当您选择其中一个选项时,左侧会出现一个新的更新导航菜单。这些提供了额外的属性可供选择,如品牌、尺寸、类型和价格范围。

Guess website navigation products layout design

你可以在Guess网站上看到另一个典型的例子。通过选择顶部导航项目之一,您将在左侧边栏中获得一个小导航菜单。选择这些类别中的另一个类别将在父类别下附加更多子链接。

Guess网站界面易于准备,并且非常易于导航。大多数典型的用户不会在任何有这么多导航选项的页面上迷路。这也是非常简单的遍历返回顶部导航类别。

产品放大率

在线销售产品就是要吸引你的观众。你想提供最好的观看体验,这样他们就会把钱花在你提供的东西上。这可以通过发布高质量的图像来实现,但你也需要给用户一个良好的观看设置。

Bohemia eCommerce website layout zoom magnify products photo

请注意,在波西米亚产品信息页面上,您可以将鼠标悬停在图像上以获得更大的放大视图。更大的缩放框将出现在产品内容上,因此用户无需滚动到任何地方。该解决方案由JavaScript处理,JavaScript可以提供一种简单的回退方法,在新窗口中打开更大的图像。

77kids shop store clothes website interface zoom effect

虽然在我看来,强迫图片在新窗口中打开可能会变得过时,现在感觉有点过时。与您编写代码的最简单解决方案相比,用户通常会寻找最简单的解决方案。如果你需要一个快速的JS解决方案,请通过谷歌查看jQuery图像放大脚本。我确信在开源开发人员中有很多解决方案,通过对堆栈溢出的问题。

建议的产品

一些客户会访问您的电子商务网站,清楚地知道他们想要购买什么。其他客户将出现浏览项目,并可能发现自己被转移到其他领域。这些是你应该以相关产品结果为目标的人。

Lacoste Image interface screenshot related products

我们可以看看Lacoste上的一个示例,它在侧边栏中列出了几个项目。标题用粗体字写着“你可能也喜欢”。它在所有其他文本中脱颖而出,用户可以通过巨大的缩略图判断这些是进一步的产品列表。

Michael Kors website layout suggested related products eCommerce

令人惊讶的是,有大量的网站整合了这个相关的产品小部件。电子商务系统通常具有内置插件或模板功能,可以将这些相关产品放入您的网站。任何WordPress粉丝都可以查看WPEC相关产品,这是一个免费的WP电子商务插件。

客户评论和;评级

网上购物通常会引起新用户的焦虑。不愿意分享信用卡信息的人很难跳入网上购物的狂热。减少这种不确定性的一种简单方法是提供用户反馈和自定义评级。

Marbles the brain store website eCommerce layout design

许多技术人员应该从流行的iOS应用商店中识别出这种评级和评论系统。但它也可以在真实的实体网店中找到,比如销售有趣的思考游戏和玩具的弹珠。用户可以购买商品,并留下他们自己对产品的看法。评论中附有一些文字和1-5级的星级。

用户反馈评论和评分是通用的,因为每个人都知道它们的意思。人们可以阅读评论,并对产品质量得出自己的结论。人们也可以根据平均星级快速确定自己的观点。这是一个优雅的系统,还涉及直接的用户反馈。

设计师展示

除了这里介绍的所有想法外,我还想提供一些令人愉快的最后润色。我们已经把这个简短的设计画廊充分设计良好的电子商务网站布局。您会注意到,前面提到的许多界面趋势出现在大多数示例中。深入研究这个系列,看看你能找到什么风格的灵感。

来源:https://speckyboy.com/modern-ecommerce-web-design/

0

上一篇:设计趋势:现在、未来和你
下一篇:页脚设计趋势
[按键盘← → 左右方向键也可以翻页哦~]