2023 年五个以转化为中心的电子商务设计示例

在5G互联网时代，网购快节奏，购物者的选择无穷无尽，您的电子商务网站只需不超过50毫秒就能给人留下良好的第一印象。 不可避免地要关注以转化为中心的设计元素，以确保您的业务实现有意义的增长。

以转化为中心的设计专注于创造具有单一目标的体验。 它使用有说服力的设计和心理触发作为转换技术来迫使访问者采取某一特定行动。

根据大多数网页设计师的说法，当您采用非响应式设计时，大多数访问者都会离开您的网站。 那么，您如何使用设计来说服访问者完成您的转化目标呢？ 为了将访问者的注意力集中在交互的目标区域上，可以使用多种设计方面。 心理援助也有助于提高参与度。 以下是一些以无缝方式完成这项工作的电子商务品牌。

1. 不和谐

Discord 是一款专为在线流媒体和游戏行业打造的音频和消息应用程序。 它允许用户创建与世界各地任何人联系的渠道。 该应用程序在最短的时间内获得了很高的人气，并已成为 Z 世代和游戏玩家社区中不可或缺的一部分。 这很容易归因于网站和应用程序的出色设计和完美的用户体验。

主页找到了所有可以吸引目标受众并鼓励他们尝试的正确位置。 他们有一个简单的导航栏，突出显示平台的功能，如高级（Nitro）版本和服务提供的安全性。 这些页面有一个清晰的副本，传达了应用程序的价值主张，并通过策略性放置的对比性号召性用语 (CTA) 来吸引用户。

该设计时尚，有大量的空白，以及快速的加载时间、高响应能力和直观的导航，使其成为最好的网站设计之一。 从视觉上看，该网站通过有趣的主页插图以及登陆页面立即吸引了访问者的兴趣。

2.极乐

Bliss 是一个很棒的电子商务网站，具有柔和的色彩电子商务设计。 该网站是眼睛的棉花糖。 为了在视觉上吸引其主要买家群体，这家护肤公司使用了三种主要颜色：千禧粉红、淡蓝色和 Z 世代黄色。

Bliss 的营销和品牌推广，包括他们的网站，都散发着一种俏皮的感觉。 浏览该网站就足以让浏览者充满幸福感。 他们也擅长拍​​摄电子商务产品。 大照片、绚丽的色彩和易于使用的按钮都有助于打造一个视觉上有吸引力且组织良好的网站。

该公司生产和分销各种护肤产品，例如面膜和洗面奶等。 Microcopy进一步强化了该品牌独特且平易近人的态度。 按钮内容、部分标题和表单描述的编写方式让您感觉像是在与好友讨论您的护肤程序。

除此之外，他们还在网站上显示用户生成的内容，这些内容看起来更真实，并且受到大多数受众的青睐。 参观者可以看到真人使用这些产品，并立即在他们的脑海中建立起一种值得信赖的融洽关系。

3. 松弛

Slack 是以转化为中心的网站设计的另一个很好的例子。 该页面试图建立焦点并推动潜在客户一次完成一个目标。 这很神奇，因为用户不会因下载应用程序、订阅时事通讯以及关注电子商务企业的社交媒体页面等多种号召性用语而感到困惑和不知所措。 此类设计通常会导致跳出率增加，而不是提高转化率。

Slack 的设计团队因其教科书和优雅实现的结构而赢得了加分。 他们的主页遵循 Z 型布局，战略性地将 CTA 放置在用户有意识或无意识地容易注意到的地方。

当您创建的电子商务网站的文案较少但有更多的英雄图像、视频或插图时，这是最好的选择。 开发人员通常遵循的这种模式的本质是，左对齐和右对齐内容块之间的交替有助于以吸引人的方式构建页面。 当访问者向下滚动页面时，这种模式会产生自然的流动。

Slack 在桌面设备和移动设备上的响应能力相同。 他们利用流体网格，将两列桌面布局转换为单列智能手机样式。 此外，他们还使用轮播来呈现图形，以节省空间并防止页面变得太长。 每个数据块都展示了 Slack 可以为其用户提供的好处。 Slack 的网站因其简单性而成为有效网页设计的绝佳示例。

4.家得宝

大多数人想象亲自去实体店查看可用于下一个 DIY 项目的所有有用工具、硬件和材料。 家得宝网站的显着优势在于它能够在线传播这种体验。 家得宝在其网站上以一些引人注目的方式具体化了对其客户的深刻见解。

视觉效果，无论是图像、插图还是颜色，是访问者首先注意到的东西。 家得宝通过使用描绘其工具运行情况的图像以及主页和登陆页面的相关图像来解决这一问题。 这就像目标受众的一面理想镜子，反映了客户希望达到的情感状态。 此外，显示及时促销的横幅会给访问者带来紧迫感。

搜索栏位于顶部，可供那些想要快速找到所需内容的人使用。 顶级子类别菜单使您可以快速访问更精确的产品类别。 当访问者向下滚动时，文本密度会增加。 这为页面提供了整洁、信息丰富的外观。

您可以像在商店中一样按房屋或项目的房间进行搜索，而不是像许多其他电子商务网站那样按产品类别进行搜索。 与许多其他电子商务巨头一样，家得宝主要依靠通过先进的订单履行技术实现快速、免费送货来抵消其优势。

5. 色彩流行

在 ColourPop 的网站上，搜索模式位于右上角，与大多数网站一样。 当您单击通用放大镜图标时，会出现一个巨大的搜索栏，以及一些巧妙的微型文本，上面写着“告诉我们您想要什么”。 这种模式为常见的设计模式添加了一些品牌风格，但这种设计模式不一定令人愉快。

ColorPop 网站上的表格简单明了。 输入字段可扫描并正确标记。 没有多余的视觉样式或分散注意力的信息。 此外，黑色的“输入”按钮在白色背景的衬托下显得格外醒目，很难被忽视。

产品网格具有清晰且恒定的视觉层次结构，使其成为 ColourPop 网站上最基本的模式之一。 主要焦点是产品照片，其次是号召性用语按钮和基于文本的产品信息。 这些图像不仅引人注目（我们敢说很神奇），而且文本也以结构化且清晰的方式组织，使该模式成为一种高效的解决方案。 由于 85% 的购物者认为产品信息和图片在做出购买决定时非常重要，因此该部门对 ColourPop 有利。

加起来

书中关于创建更好的登陆页面的每一个提示和技巧都是基于这些想法。 将它们与您的下一次营销工作一起使用，您会立即注意到页面的外观和感觉有所不同。 即使是你办公桌上放着色轮的设计师朋友也会被震撼到。

• 创建焦点和框架
• 保持一致性
• 展示优势，吸引品牌关注
• 减少摩擦力

但是，仍然有很多方法可以在这些原则内发挥创意并测试新概念，那么如何确定您的设计是否真正有助于提高转化率？ 那就是事情开始变得有趣的时候。 不存在能够吸引所有人的完美设计。 您必须进行实验和测试，直到您的网站具备吸引目标受众的所有元素。