电子商务主页设计的 12 条准则

如今，我们只在网上做所有事情——包括购物。 这就是为什么电子商务对客户很重要，对卖家更重要的原因。 因此，如果您在网上销售任何商品，无论是运动鞋、手机、服装还是介于两者之间的商品，您都应该准备好吸引顾客从您的商店购买商品。

主页是电子商务中最重要的部分，它的设计在转化客户方面起着巨大的作用。 它通常是任何电子商务商店的登陆页面，大多数用户从您电子商务之旅的主页开始他们的电子商务之旅。 因此，使用适当的元素集制作有吸引力的主页至关重要。

视觉层次结构在电子商务主页的成功设计中起着重要作用。 强大的视觉层次结构使您可以快速向客户传达您的品牌信息。 CTA（号召性用语）提供了一个明确的下一步，将用户导航到主页以外的产品列表、产品详细信息和其他重要页面。 在本文中，我们将讨论电子商务商店中最佳主页设计的 12 条重要准则。

首先关注目标

专注于您的业务目标。 根据目标考虑主页上元素的优先级。 以下是一些需要考虑的重要事项：

• 您希望用户点击主页上的哪些部分？
• 用户应该准备哪些信息？
• 您希望他们选择什么样的定价方案？

当您了解优先级时，您将能够正确设置视觉层次结构。 在层次结构中，主要目标是突出重要的东西，不太重要的元素应该放在较低的位置。

是的，有些元素或部分比其他元素更重要，例如表单、CTA、价值主张等。您需要让更多用户关注这些重要元素。

重要链接应该更突出

• 检查您的网站菜单上是否有超过 5 个项目，它们是否同样重要？
• 您希望用户点击哪里？
• 用户点击 CTA 的概率是多少？

这些问题应该在设置视觉层次结构时得到解决。 现在让我们来看看指南

电子商务商店主页设计的 12 条重要准则

1.避免增加页面加载的不必要的设计元素

根据谷歌的一项研究，用户只需1/50 到 1/20秒就可以判断您的网站是否漂亮。 此外，与简单的网站相比，视觉上复杂的网站被认为不那么漂亮。

此外，设计与站点类别相关且具有简单视觉设计的“原型”站点被认为是最漂亮的站点。 简而言之，设计越简单越好。 您也应该在电子商务主页设计中应用相同的发现。

用户认为复杂的网站越少越漂亮的主要原因是，低复杂性的网站不会对用户的大脑或眼睛造成任何压力来解码、存储和处理信息。 如果页面上的颜色和光线变化很大，我们的眼睛必须付出更多的努力来向大脑发送信息。 因此，重要的是，每个元素的配色方案也应该保持一致。

2.视觉层次必须遵循信息层次

内容的大小和位置应根据其相对重要性。 在尺寸方面，首页上较大的元素总是会受到最多的关注，而在位置方面，放置在顶部位置的元素会受到更多的关注。 这是视觉层次结构中的常见逻辑，您在设计主页时应该遵循相同的逻辑。

此外，在主页中，当用户登陆您的主页时，最先可见的顶部部分是最有价值的。 所有最重要的元素，如标志、CTA、价值主张、导航、菜单等，都应该放在这里。 不太重要的元素应该以相对较小的尺寸放置在页面下方，用户滚动页面后可以看到。

3. 交易菜单应该比内容菜单有更高的位置

暂时，将自己视为客户。 现在哪个部分对您来说更重要，常见问题解答（内容菜单）还是网站的产品列表（交易菜单）？ 答案显而易见，是后者。 由于与内容菜单相比，用户更频繁地访问事务菜单，因此它们应该在视觉层次结构中获得更高的位置。 按照以下提示确定交易菜单的正确位置：

• 交易菜单通常位于主页的正面和中央，但也可以在页面左侧的垂直菜单中找到。
• 事务菜单的大小应大于内容菜单
• 要获得更多关注，请将交易菜单放在与背景形成对比的彩色横幅中，或者您可以在菜单周围设计边框

4. 价值主张应该放在首页的“首屏”

“首屏”是用户无需滚动即可看到的主页部分。 这个词来自对折的报纸。 因此，报纸将所有重要的头条新闻和最重要的新闻放在了这一层之上。

同样，在设计您的商店主页时，您应该决定内容的优先级。 应先提供重要信息，然后再提供其他信息。 价值主张是任何主页的核心组成部分。 它显示了该站点的目的以及该公司的独特之处。

5.通过使其清晰可见来关注导航菜单

导航菜单是主页的一个非常关键的元素。 许多知道他们想要什么的用户，例如他们想购买 T 恤，他们会直接转到服装标签，然后在子类别中转到 T 恤部分。 许多网页设计师正在试验是使用隐藏的导航菜单还是部分可见的菜单。 发现隐藏的导航菜单会阻碍用户体验和内容的可发现性。

除非您希望访问者采取任何特定操作（登陆页面），否则导航菜单应该是主页上一个显眼的部分。

6.如果您有空间，则显示产品类别的图片或缩略图

我们的眼睛比阅读文本更能适应理解图像。 眼睛理解图像比理解文本容易100 倍以上。 此外，网页上的图像比文本获得的浏览量高94% 。 在电子商务商店中，图像是最重要的构建块。 它也是用户100%关注的唯一元素。

图像比文本更自然、更快捷。 在产品类别旁边显示缩略图将改善搜索流程并提供更好的用户体验。

7. 使用空白分隔内容块

内容应该以用户可以识别重要和不重要的方式分开。 在电子商务主页上，您不应该在页面上使用过多的内容来压倒用户。 有多种方法可以分离内容并使其看起来“整洁” ：

空白通常被视为负空间。 它是网站上未标记的部分，如边距、排水沟等。如果您想让某些内容看起来清晰且独立，请确保其周围有足够的空白空间，从而消除分心和沟通不畅的威胁。

线条、边框和网格之间也可以分隔内容块而不会显得突兀。

8. 不要将促销活动放在产品列表的正上方

就像上述指南一样，本指南还着重于在区分页面元素的同时消除任何混淆。 如果您在产品列表上方显示网站促销，则用户可能会将促销视为列表的一部分。

例如，如果您在所有 T 恤的产品列表上方放置了“精选 T 恤 20% 折扣”的促销信息，那么用户会认为列表中的所有 T 恤都在打折。 基本上，这取决于元素的设计方式。 如果容易区分，您可以在产品列表上方显示促销。

9. CTA 应该在视觉上突出

CTA 在主页层次结构中占据更高的位置，应该是色彩对比的，周围有大量的空白。 它是主页上最重要的元素之一。 要设计大多数用户点击的 CTA，请将其设计为不容错过的方式。 为了制作一个容易引人注意的 CTA，这里有一些提示：

• CTA 应放置在折叠上方并使其尺寸更大。
• 将 CTA 与背景颜色形成对比，并用空白包围它

避免占用大量空间的竞争图形、分散注意力的字体和颜色、移动图像、其他具有高合同颜色的 CTA。

10. CTA 比链接更好

这里我们指的是超链接。 CTA 按钮总是比链接更受关注。 事实上，按钮的动机是被点击。 由于 CTA 是您主页上的一个想要的操作，因此将其作为按钮将是一个好方法。 特别是，如果页面上没有其他可见的按钮。

11.如果有次要的CTA，应该不太明显

CTA 的目的是让注意力集中在页面上最想要的操作上。 如果主页上有多个 CTA，用户将分心于该重要操作。 确定 CTA 之间的差异成为他们的职责。

你必须让重要的动作最引人注目。 您不应避免使用次要 CTA，而应将其置于视觉层次结构中的第二优先级。

12.使用视觉提示突出CTA

视觉提示有助于引起对 CTA 的注意。 根据研究，手绘箭头最能引起 CTA 的关注。 另一种方法是画一条指向 CTA 的线。 其他视觉提示是：

• 一个人在看 CTA
• 任何指向 CTA 的图形（如各种形状）
• CTA 周围的边框或框

包起来

在这篇文章中，我们经历了十二 正确设计主页的重要指南。 在最好的电子商务开发公司 Emizentech，我们拥有从头开始设计和构建电子商务商店以及实施各种特性和功能的专业知识。 我们的构建商店非常直观、有吸引力、安全且快速。 让我们知道您的要求。