电子商店网页设计:为排版做一个案例

已发表: 2017-01-18

快速加载? 检查! 简单的导航? 检查! 有说服力的号召性用语按钮? 检查! 高质量的产品图片? 检查! 强大的产品内容? 检查! 安全的退房流程? 检查!

排版 真的?! 排版重要吗? – 许多电子商务企业家的脑海中都会出现一个问题,他们都准备在网上开设商店。

答案是“是”——本文将向您证明这一事实!

理想情况下,新的电子商店企业家充满热情和热情,将他们的实体店转变为有利可图的在线业务。 在急于看到他们的网站上线时,这些企业家中的许多人可能只关注更大更广泛的问题; 忽略一些小但影响很大的设计元素,如排版。

但是,事实是排版是最重要的网页设计元素之一,如果忽略它会严重影响收入。

因此,让我们深入了解排版的本质,了解它对电子商店销售的重要性和影响:

排版:到底是什么?

这是维基定义:

“排版是排列字体的艺术和技术,以使书面语言在展示时清晰易读和吸引人。 字体排列包括选择字体、磅值、行长、行间距(前导)和字母间距(跟踪),以及调整字母对之间的间距(字距调整)。”

排版对用户体验的影响

排版与您的访问者交谈。

人们会从整体上查看您的主页,扫描文本、字体类型、字母大小和行长。 现在,如果他们没有发现您的内容可读,他们将立即离开该站点并跳转到您的竞争对手的站点。 这不是一个有意识的决定。 但是网站设计(包括类型、字体大小、颜色和空白)提示他们这样做。

有一项研究证明,字体对我们处理信息的方式有很大影响。 奥斯卡奖得主纪录片制片人埃罗尔·莫里斯 (Errol Morris) 进行了一项研究,题为“你是乐观主义者还是悲观主义者?” 在这项有趣的研究中,他发现如果以 Baskerville 字体编写的声明比以 Georgia、Comic Sans、Computer Modern、Helvetica 或 Trebuchet 等任何其他字体呈现,读者更有可能相信声明。

从这项研究中可以清楚地看出,仅仅拥有关键字丰富的页面或高质量的内容(产品描述、产品图片和产品视频)不足以产生销售; 但同样重要的是在您的网上商店中设置正确的字体类型和大小。

Selecting the right typography

选择正确的排版将为您的访问者提供卓越的用户体验。 它将帮助您长时间吸引访客的注意力; 确保访问者完全专注于您提供的产品/服务。 集中注意力将帮助您提高销售额。

排版对谷歌排名的影响

谷歌的搜索排名算法考虑了近 200 个信号来对网站进行排名。 排版,目前还没有在这个排名因素列表中获得一席之地。 因此,选择正确的字体和字体大小不会直接帮助您在 SERP 中排名靠前。

然而,所有电子商店网页设计师都非常清楚,与提供糟糕网页体验的网站相比,为访问者提供良好的用户体验将有助于他们在 Google 中的排名更高。 从上述观点可以清楚地看出,排版在为用户提供良好的用户体验方面起着重要作用。 所以,现在的等式是:

Typography provides good user-experience to users

这是史蒂夫乔布斯对排版的看法

这就是史蒂夫·乔布斯(Steve Jobs),被誉为字体教父,在他在斯坦福大学发表的最鼓舞人心的毕业典礼演讲之一中谈到了排版:

Steve Jobs speech

选择排版之前要考虑的因素

现在,我们知道了排版对转化率的影响,让我们深入了解如何做出与排版相关的决定:

没有一个单一的排版公式可以适用于所有电子商店。 这取决于一些关键因素,例如目标受众、您的品牌形象、您的业务所属的行业、是 B2B 还是 B2C 公司、您想要销售的产品/服务以及您想要传达给访问者的信息。 对所有这些因素的批判性评估将帮助您为您的公司选择正确的排版。

例如,B2B 公司必须选择无衬线字体,以帮助他们在数字空间中赢得尊重和信任。 例如,在线支付服务提供商Yapstone使用 Gotham 字体,赋予品牌值得信赖的形象。 在 2008 年的总统选举中,哥谭甚至被用于巴拉克奥巴马的竞选材料。

Barack Obama in 2008 presidential elections
资料来源:Yapstone.com

另一方面,销售儿童用品(如衣服或玩具)的电子商店必须选择具有俏皮和有趣感觉的字体。 看看childrensplace是如何通过排版赢得我们的心的:

Fonts that give playful and fun feel
资料来源:Childrensplace.com

另一个需要考虑的重要因素是移动受众。 由于越来越多的人正在转向移动商务,因此在关注排版之前,您需要牢记移动受众。

简而言之,在彻底分析上述因素后,选择适合您品牌形象的排版。

排版元素

很明显,排版可以改善访问者的体验。 我在这里详细介绍了一些排版元素,以提高您网站的自然排名和用户体验:

颜色:

颜色是排版中最重要的元素之一。 正确的颜色会吸引访问者的注意力,同时主页上糟糕的颜色会增加您网站的跳出率。

许多流行的网站,如 Skype、WordPress、Twitter、LinkedIn,在其主页上使用蓝色。 这背后的主要原因之一是蓝色象征着可信赖和诚实。 因此,对于网页设计师来说,深入了解色彩心理学及其对电子商务转化的影响至关重要。 在一项实验中, Monetate发现蓝色 CTA 比橙色 CTA 高 9%。

Understanding of color psychology
资料来源:Monetate.com

但是,我们已经看到世界上最大的电子商务零售商亚马逊在其产品页面上使用橙色 CTA。 因此,建议不要进行任何笼统的实验并选择最适合您的品牌形象和转换的颜色。

行长和行距:

太长或太短的线条看起来都不美观。 平均行长为 45-90 个字符,其中包括空格。

行距是两行文本之间的距离。 推荐的行距在字体大小的 120% 到 145% 之间。

空白:

空白为您的网站布局提供优雅的外观。 与产品信息杂乱无章的产品页面相比,包含产品描述、图像、视频和 CTA 等所有产品信息的产品页面的转化率较低。 此外,它使在线购物者可以轻松找到有关产品的所需信息。

适当使用空白,使您的产品页面在视觉上令人惊叹。

字体大小和类型:

字体在内容的可读性中起着重要作用。 难以阅读的字体会吸引您的访问者。 或者,正确的字体将说服访问者采取所需的行动。

选择一种可读的、兼容所有浏览器和屏幕尺寸的,以及最适合您的品牌形象的。 不要使用超过 2 种字体。 为标题选择一种字体,为产品描述选择另一种字体。

小字体或小字体会消耗更多阅读时间,因此可能会立即赶走网站访问者。 因此,请确保字体大小足够大,以便网络访问者轻松阅读内容。

虽然电子商务设计没有理想的字体大小或字体,但经验法则是选择一种使其易于阅读、适合您的品牌形象并符合您销售的产品的字体。

例如,从以下 3 种字体中,您认为哪种字体会给在线医疗商店带来可靠和值得信赖的印象?

Reliable online medical store?

不难猜测,医疗电子商店的网页设计师会选择 Arial 字体。

评估您的排版性能

您已设置 CTA 的字体、字体大小、颜色以及排版的所有其他设计元素。 但它适用于您的电子商务网站吗?

了解所选字体是否适用于您的电子商店的最佳方法是进行一些 A/B 拆分测试。 很多电子商店老板声称他们没有时间进行排版测试。 是不是就像在说——“我忙着开车,没时间停下来加油”? (类比取自 Robin Sharma 的畅销书——《一个卖掉他的法拉利的僧侣》)最终你会为此付出代价; 受影响的指标是访问者数量、跳出率和转化率。

另一方面,测试会让您知道颜色、字体类型、字体大小、字体和空白的选择是否对您的销售产生了预期的影响。 进行实验,看看什么最适合您的目标受众!

把它包起来

排版是电子商务网页设计秘诀中的关键要素。 如果忽略了这个基本和关键的设计元素,一位电子商务企业家花费了数千美元聘请昂贵的开发机构来开发尖端电子商务平台,他可能会看到他的电子商务初创公司失败。

它需要足够简单,以使其具有可读性,同时又足够引人注目,以说服目标受众浏览并在网站上停留更长时间。

扎实的排版将建立强大的品牌形象,吸引新的访问者并吸引客户重新访问您的网站; 从而提高您的业务的销售额和利润。

您是否通过排版向潜在客户发送了正确的信息? 您为您的企业使用哪些字体以获得最大的转化率? 在下面的评论中与我们分享您的想法或问题。