摘要

最后修改：2020年8月27日阅读时间：观点随着时间和技术在我们身边流动，开设在线商店比以往任何时候都更加容易。人们倾向于将他们的业务在线上并赋予其电子商务网站的形式，以吸引吸引在线访问者并提高销售。成功的电子商务网站包含多个组成部分，其中网站设计是必不可少的部分。您的在线商店（包括您的产品，登陆页面，报价，等等。是一个关键因素，必须引起注意。在

• 电子商务的格式塔原理：

目录 最后修改： 2020年8月27日 阅读时间： 观点

随着时间和技术在我们身边流动， 开设在线商店比以往任何时候都更加容易。 人们倾向于将他们的业务在线上并赋予其电子商务网站的形式，以吸引吸引在线访问者并提高销售。

成功的电子商务网站包含多个组成部分，其中网站设计是必不可少的部分。 您的在线商店（包括您的产品， 登陆页面， 报价， 等等。 是一个关键因素，必须引起注意。

在本文中， 我将分享一些电子商务网站设计技巧，以提高您的转化率。 但是在那之前 让我告诉您为什么专注于独特的网站设计至关重要。

您是否知道网站的第一印象是与设计相关的94％，基于网站的整体美观度对网站信誉的判断是75％？

这证实了网站设计对信誉的影响， 转换， 以及您网站的成功。 您几乎没有时间给您的网站受众留下第一印象。 不仅如此 但是良好的网站设计还可以帮助您提高SEO并在SERP上对您的网站进行排名。 我们都知道这是我们不能忽视的一件事。

人们总是会在浏览您的网站时根据提供给他们的经验来判断您和您的业务。 在数字商业世界中， 您的网站设计是您的客户代表。

当您经营电子商务业务时， 客户在您的网站上执行交易。 如果他们不信任你 他们不会向您购买。

是的， 你没听错。

为了转换访客， 他们有必要相信你， 网站设计在其中起着至关重要的作用。

让我分享一些令人大开眼界的电子商务网站设计统计数据：

• 如果设计不当，会有57％的互联网用户不会向任何人推荐您的网站， 特别是在移动设备上。
• 38％的人将停止使用网站布局不吸引人的网站。
• 经历过悲伤的经历后，有88％的客户不太可能返回网站。
• 加载速度慢的网页损失了2美元。零售商每年损失60亿美元。
• 75％的人根据网站设计来估计在线业务的信誉。

到目前为止，您必须了解创建高度优化的网站设计的重要性。 所有这些都是为了使您了解，电子商务网站的设计将决定用户如何看待您的业务。 不良的网站设计可能会成为您企业信誉的潜在敌人。

现在进入文章最重要的部分。 让我们检查一些非常重要的电子商务网站提示，以提高转化次数并抓住潜在客户：

品牌对您的网站转化影响很大。 让我们来看看掌握了品牌塑造技巧的品牌， 苹果。

苹果公司在其整个页面上都很少使用该品牌。 如果您浏览他们的网站，就会发现他们在目标网页上巧妙地展示了品牌元素， 而不会使其用户感到不知所措。

因此，在这里，我想从Apple的示例中引起您注意的要点：

• 独特的徽标放置在可见的完美位置，同时又不至于压倒一切。
• 简短的文字，描述了组织的目标和目的，并将信息传达给他们的听众。
• 结合时尚的产品形象。

建立品牌就像讲一个经常被误解的故事。 品牌不仅仅是您的徽标， 设计美学， 或公司目标； 而是所有这三个元素的组合。 因此， 将您的业务发展成品牌需要告诉受众正确的故事， 听众想听和阅读的东西。

负空格在使您的网站看起来整洁的过程中起着重要作用。 但是，不应以使页面显得笨拙的空白的方式来实现空格。 反而， 专注于为您的网站元素提供一些空间。

在MakeWebBetter的主页上查看以下示例：

您可以看到使用了负空格，以便访客可以清晰地看到站点元素。 在设计电子商务网站时， 利用页边距和填充，让您的页面上的元素视觉上呼吸。

以下是将负空格视为获胜网站设计策略的重要组成部分的一些注意事项：

• 空格使访问者在创建页面中断时可以浏览您的页面。
• 负数的空间 用户可以磨练网站的特定项目。 您还可以突出显示网站的集中消息。
• 负空格使网站所有者可以巧妙地控制页面的流程。
• 最后也是最重要的 空白使您的重要站点元素（如CTA）看起来定义明确。

在电子商务网站设计中， 空格或负空格在影响用户体验方面起着重要作用，因此不宜过分考虑。

当用户访问您的网站时， 您希望他们采取快速行动。 但是许多网站所有者提供了很多选择，使他们的用户不知所措。

让我们借助希克-海曼定律（Hick-Hyman law）来理解这一理论，该定律描述了一个人由于可能的选择而做出决策所花费的时间。

根据法律， 我们为用户提供的选择更多； 他们决定的时间越长。 因此增加了他们放弃该网站的机会。 我们可以从这条定律得出另一个事实：

人们可以放弃。

是的， 你没看错。

当人们对所提供的选择不知所措时， 他们倾向于放弃，这就是所谓的“分析瘫痪”。 如果您不想让访客陷入这种情况， 然后遵循以下技术：

• 限制选项的数量。
• 给出不同的选择。
• 提出个性化建议。
• 鼓励制定快速的决策策略。

《三分法则》是一种古老的技术，用于美术和摄影中，用于合成图像等视觉内容， 电影， 和照片。 但是如今，这些技术已在Web设计人员中变得极为流行。

这一切都始于在设计站点时叠加两条水平线和两条垂直线，这些线均匀地间隔开。

点是指观看场景时用户的眼睛自然发生漂移的点， 无论是景观还是网站。 现在，您知道了将重要的站点元素放置在何处，以便可以充分利用它们。

因此， 可以在任何类型的网站上实施这种组合策略。

组成是网站设计中的重要元素。 如果将字体和图像以凌乱的形式呈现给用户，那么您对字体和图像的创造性有多大无关紧要。 因此， 三分法则是组织网页总体布局的支持理论。

让我们看一下Adamas：

在上面的示例中， 主页和折页上方的部分是应用第三规则的关键区域。 其背后的原因-折叠上方的部分是站点主要信息的存储位置。

仅仅创建出色的网站设计还不够。 您不仅必须创建一个令人印象深刻的网站，而且还要关注其性能。 快速加载页面对于避免跳出率并允许访问者停留在您的网站上非常重要。

人们讨厌页面加载缓慢，并且观众对此类网站失去了兴趣。 因此， 让他们对您的销量下降负责。 您可以通过Google的Page Speed Insights了解您的网页效果。

电子商务网站的主要目标是促进转化，为此， 您需要减少页面加载时间。 诸如压缩图像之类的基本内容可能是一个很好的救星。

其他一些页面加载优化技术是：

• 投资快速，可靠的托管服务。
• 借助内容分发网络（CDN）分发您的内容负载。
• 在您的网站上使用最少的弹出窗口。
• 通过删除编码错误的HTML来最大限度地减少代码， CSS， 和您网页上的JavaScript
• 减少重定向和断开链接的数量。

始终在上载之前压缩图像，并使它们的大小不超过屏幕要求的大小。

您可以选择任何免费或高级轻量级插件。

您是否在邮件或地铁站中看到过招牌， 说“你在这里”？ 面包屑充当网站访问者的招牌。

面包屑是网站所有者使用的一种导航方案，用于显示访问者在网站中的位置。

面包屑使访问者可以根据到达的方式灵活地进入任何页面， 避免迷路的感觉。 电子商务网站通常有数十个甚至数百个嵌套类别，因此， 增加您的访客迷路的可能性。

面包屑还可以帮助用户有效浏览产品并最终进行购买。 面包屑通过跨不同的网页进行巨大的跳跃，可以使客户无缝地遍历。

颜色和对比度在使您的网站与其他网站区分开来方面起着重要作用。 对比确实对您的重要站点元素（例如CTA或徽标或什至是重要内容）具有公义。

查看以下示例：

MyProtein使用颜色和对比度的组合来突出显示重要元素，例如品牌徽标和产品上的重要优惠。

格式塔原理也被称为分组原理。 法律解释了这样一个论点，即头脑有一种天生的倾向，可以根据某些规则来感知刺激中的模式。 这仅表示人脑倾向于自动将相似的对象分组。

根据交互设计基金会的说法：

人眼倾向于将设计中的相似元素视为完整的图片， 形状， 或小组 即使这些元素是分开的。

因此，我们感知到关系中的元素， 将它们与其他设计元素分开。 因此， 人类非常擅长填补“空白”或连接“点”。

能力受大小影响， 形状， 和颜色。 该原理可以很容易地应用于电子商务网站。 让我们看看如何。

电子商务的格式塔原理：

在开始之前，让我告诉您，格式塔（Gestalt）是“表格”的德语。 格式塔原理基于人的思维如何感知您网站上的视觉组件，并让大脑创造出所感知视觉的图像。

要将这一原理应用于您的电子商务网站，我们需要仔细研究格式塔原理的每个类别：

1。 地图
人物是可以在视觉上与地面分离的物体。 图形和地面原理背后的想法是使两者在视觉上可区分，以避免永久性混淆。

让我们通过一个真实的例子来理解这一点。 严重不加糖 正确遵循了将人物与地面分开的原则。

为了突出他们的产品和内容，他们将它们涂成明亮的颜色并保持白色。 通过保持微妙的背景并突出显示重要元素，可以使您的在线商店的USP引人注目。

2。 接近
时间或空间上的接近度称为接近度。 在电子商务环境中， 我们将讨论不同元素的分组以创建更大的关联。 元素分组对于在元素和视觉体验之间建立无缝关系很重要。

在设计导航栏或您的网站时，邻近性非常方便， Mashable在其导航栏中所做的事情。

在上面的快照中， 您可以通过将菜单中相同类别元素的紧密排列方式进行分组来查看。

亚马逊是另一个完美的例子，可以将其元素正确地分组在一起。

亚马逊在网格框架中列出其产品，其中使用狭窄的空白分隔产品， 微妙而深刻。

邻近度对于导航栏非常重要， 列出产品， 甚至将信息从最低重要性到最高重要性进行分组，反之亦然。

3。 对称
人类发现对称性在美学上令人愉悦。 向您的网站元素添加对称性可以创造和谐，并使访客在查看对象时感到舒适。

这是网站对称排列的一个很好的例子， HvD字体：

该页面将其业务特征分解为相等的一半，并使用相同的灰度主题以相同的字体书写。 该页面不仅包含了图形和地面原理。

尽管对称是取悦观众的完美而简单的方法， 您还可以不对称地抓住用户。 许多网站使用不对称性作为平衡所有空白的元素。 类似于Xplode Marketing所做的事情：

Xplode以独特的方式使用了不对称性，以非常令人愉悦的方式展现了美学。

4， 相似
接近工作更接近相似性原理。 要么是为了形状， 颜色， 尺寸， 方向， 或任何其他财产。 在同一附近显示的对象之间应该具有连接性。

查看Influenster登陆页面的以下示例：

通过清晰对齐的框可以轻松看到相似之处。 我知道， 每个框中的产品都不同，但是概念是通过整个页面上一致的文本字段传达的。

5， 关闭
对人脑进行训练以填补不完整物体中的空白，因此， 直观地完成该图并将其视为一个整体。 这就是所谓的封闭原理。 正负空间接近一个，并形成一个整体。

让我们通过一个例子来理解这个概念， 崇拜：

即使文字拼写不清楚，但人脑仍可以轻松感知所写内容。 由于封闭中文本的排列和对齐，即使字母不完整，也很容易解密。

6， 连续性
最终格式塔原理是连续性原理。 连续性对于生成可被裸眼跟随并导致一致路径的图案是必不可少的。

让我们看一下OscilloScope网站：

它使用连续性原理为网络访问者提供360度的视角，以便访问者可以导航到所需部分。

我们作为人类有期望。 还， 有时，在某些情况下或某些地方，我们会有一些明显的期望。 例如， 当您去餐厅时， 您期望获得一些好食物来满足您的饥饿感。

相似地， 消费者期望您的在线商店的某些页面元素。 简单的“立即购买产品页面上的按钮或价格。

尝试使用您的CTA一直被认为是一种好习惯，但是在保持网页相关性时要遵循基本原则。 它会影响您的访客的购买决定。

创建登录页面时， 首先想到的是：

“用户背景及其目标是什么？”

每个互联网搜索者都是不同的，并且具有不同的搜索意图和目标。 他们可能正在网上搜索相同的产品，但一个人可能有购买的目标，而另一个人则想探索并了解它。

推荐的技巧之一是针对具有不同目标网页的付费访问者和自然访问者。

让我给你看一个保险公司的例子：

您在下面看到的第一个屏幕截图是由于搜索广告而为访问者创建的登录页面。

现在，这是来自同一域但针对不同受众群体的另一个屏幕截图。

付费受众的内容要简短明了， 以直接转换为目标。 在第二个示例中 您会看到单词数增加了， 打算对该页面进行排名并吸引自然访问者。

记住： 为您启动的每个广告系列设置不同的着陆页。 这将为目标用户创建唯一的上下文。

没有满意的访问者，创建成功的网站设计策略是不完整的。 为了提高转化率， 您需要给听众他们想要的东西。

以上几点只是创建不违反任何规则的网页的开始步骤。 但是，只有与真正的访问者一起测试，才能确定成功。

为了创建用户友好的页面， 开始从访问者及其行为数据中学习。 热图之类的基本工具可以使您了解用户如何使用内容。

借助HotJar之类的工具， 您可以轻松地收集访问者数据，例如点击次数， 卷轴， 并移动。 您甚至可以直观地查看访问者在访问您的电子商务商店时执行的活动。

记住， 您的电子商务结帐设计和流程也非常关键。 您应遵循电子商务结帐优化的最佳做法，以获得最佳结果。

因此，这些是创建电子商务网站设计以在2020年促进转化的一些基本技巧。 这些提示可以帮助您了解网页设计的精髓，这是不可忽视的。 但是请记住，这些是通用步骤； 为制定最适合您的在线商店的特定策略， 您必须开始分析用户行为。

这些提示可以为您提供一个起点，但涵盖了整个旅程， 必须进行定期测试。 在我的经验中， 通过测试和学习得出的观察结果可以帮助您验证自己的直觉并以指数方式提高转化率。

客座作者

Himanshu Rauthan是一位企业家， MakeWebBetter的联合创始人， BotMyWork， 以及CEDCOSS技术总监。 他在职业生涯中曾戴过许多帽子-程序员， 研究员， 作家， 和战略家。 因此， 他具有管理多学科项目和应对复杂挑战的独特能力。 浏览更多：询问您的代理商

为DevriX博客写作 我们的博客现在有800多个帖子，并且其受众正在增长。 Here are our blog post submission guidelines[link] Contact us to propose your posts, 如果符合这些准则，我们将很高兴发布您的内容。