18个最佳的产品页面设计(上)

本文长度为2489字,预估阅读时间9分钟

引言:本文展示了如何让页面变得有趣个性化,展现更多细节和与众不同,让访问者轻松获得想要的信息,下面的18个产品页面设计的最佳案例不容错过。

译者|池金锐

审校|王楠楠

编辑|华 子

1. Bellroy

Bellroy主打薄款钱包。那么如何让消费者理解它的价值所在呢?

为了解答这个问题,Bellroy将其产品页面划分为买家必经的三个阶段 - 了解问题,一般钱包如何解决问题,以及Bellroy如何解决问题。

还有一个互动部分就是展示了与不同钱包相比,薄款钱包装满是什么样子的。当用户沿着一条线来回移动滑块时,两个钱包都装满了卡片和现金,很明显地展示了Bellroy的薄款钱包的好处。

Bellroy钱包的产品页面,带有“让你的钱包瘦下来”的字样。

2. Wistia

Wistia是一家视频托管和分析公司,为用户提供详细的视频性能分析。这乍听起来好像没什么了不起的,那就让我们真正深入了解下这个产品页面脱颖而出的原因吧。

首先,我们会看到五个解释各种工具内容的彩色图标。如果这正是用户需要的,就可以直接点击图标后面的两个’calls-to-action’按钮。

如果继续滚动鼠标,会看到一个包含Wistia功能信息视频,即 calls-to-action;电子邮件收集器;视频热图和观看趋势。

展示可视化平台功能的最佳方法之一是在产品页面上演示它们。这一页面向用户展示了Wistia的所有功能以及日常用途。

Wistia的产品页面

3. Square

Square是一家移动交易公司,商家只要拥有兼容的手机或平板电脑,就可以随时随地接收客户的付款。

产品营销难点是展示为什么Square更容易替代一般的收银机,其产品页面以一种可视化的吸引受众注意力的方式列举了所有原因。

产品描述

该产品页面的每个部分的主标题都是粗体,并且文案简洁:

“小信用卡读卡器,给你无限可能。”

页面的其余部分组织的很整齐 — 内容类型,比如常见问题的答案 —大量的空白区域,简短的文案和合适的图片。无论人们查看哪个部分,都可以准确理解Square在交易过程的每个阶段是如何工作的。

Square的产品页面

4. Rent the Runway

一些公司 ,尤其是电子商务公司, 至少拥有数千个产品页面。 其中有一家就是在线服饰租赁公司Rent the Runway。

Rent the Runway为其租赁的每件衣服设计一个单独的产品页面,其中包含客户可能想知道的所有信息 - 图像,尺寸,面料,价格和评价。到底是什么让他们如此与众不同呢? 那就是“造型记录”和“尺寸&大小”部分的特殊细节展示。

产品描述

这些细节由造型师和测评师精心策划。它们不仅仅解释了一件衣服是由什么制成的,它的外观如何 - 涵盖了它如何贴合身体的每个部位,应该搭配什么类型的内衣,以及最适合哪种身材。这种信息不仅能够吸引顾客并赢得他们的信任,而且还可以让他们的购买欲望更加强烈。

另外,请注意围绕产品图像和描述的大量留白。根据ConversionXL的研究,留白让顾客觉得产品更高级- 在该情况下,顾客会认为该产品的价格会更高一些,而且是合理的。

海军蓝色Badgley Mischka连衣裙的产品页面由Rent the Runway提供

5. Daily Harvest.

Daily Harvest以冰沙,汤水等形式制作超级食品,并快递到客户家门口。到底是什么让这些食品的产品页面如此出色呢?它们以清晰易懂的方式向你展示了超级食物的构成。

查看Daily Harvest的冰沙产品页面。你不仅可以看到冰沙的样子,还可以将鼠标悬停在主图像下方的左边预览图标上,它会向你展示用于制作此饮品的食材。向下滚动,你会看到每种成分及其简单描述。

产品描述

这款冰沙的产品描述与产品页面本身一样富有创意。

“把疲惫留给风儿,把炎热洒在尘埃,让腹胀成为过去。它如鸟儿一般,似飞机翱翔,这是Ginger + Greens!”

Ginger + Greens冰沙的产品登陆页面,可以看到每项成分列表

6. Oreo

如果你看过奥利奥的任一营销活动,那么对于他榜上有名就不会太惊讶。但有时候,产品已经众所周知反而不容易设计产品页面。那么他们是怎么做到的?

奥利奥产品页面的重点是这些简单而经典的饼干如何帮助人们释放他们的想象力,勇于质疑,并变得更加快乐。它有一系列视频,一个接着一个。其中一个伴有歌词:

“当你和奥利奥互动时,你的想象力将变得更加丰富”,这是对吃“它们”的“最佳”方式的致敬。该页面采用创新大胆的营销方式,宣传奥利奥是一种不普通的零食。

奥利奥也为这个页面采用了独特的设计。即使饼干本身是单色的,页面也非常丰富多彩,不管是视频还是背景还是图形。

奥利奥的产品页面如下

7. Fitbit Charge

当我着手写这篇文章时,我向几个人询问了他们最喜欢的产品页面。当很多人立即推荐Fitbit时,起初我有点诧异 - 但在查看它的网站后,我就明白原因了。

下方页面展示了最初版的Fitbit Charge - 现在已经是Fitbit 第三版了——一开始就阐述其产品的价值观念,而不是一系列功能。展示了一个登山人的英雄形象,我们可以想象他穿着Fitbits,文案是“让你每天都充满活力”。

当向下滚动页面时,它会通过四个快速步骤来说明产品的工作原理。更重要的是,其中很多都是互动的 - “所有你需要的,都在一个地方”功能允许用户将鼠标悬停在不同的功能上,查看它们在Fitbit的移动应用上的显示效果。

但该页面还解释了为什么这些功能很有价值。例如,一个功能跟踪散步,跑步以及睡觉等一切事情。为什么这些如此重要?因为,你可以随时掌握当前所有记录,并尝试突破它们。

知道用户在离开页面时可能不记得所有细节,但Fitbit抓住了这些功能如何真正改变访客的生活。很棒的设计!

Fitbit Charge蓝绿色的产品页面

8. Volkswagen

大众汽车采用互动方式进行产品营销。该公司没有列出汽车拥有的所有功能,而是介绍了完成实际制造汽车的过程。当你看完整个过程时,大众汽车会突出显示你可以选择的不同功能,然后让你预览汽车的外观以及这将如何影响价格。

即使目前没有新车上市,我个人也很乐意在页面上修改不同的自定义功能。我想要什么颜色?我想要高级音频吗? (是的。)通过允许用户独立了解和选择功能,该品牌通过一种有趣的方式消除了臭名昭著的“汽车销售员”的定义。

此外,还有一个显著的配对功能,让客户可以看到附近的哪家经销商车库里有满足其所有偏好的车辆。

(如果你想看到一个普通的产品页面,他们也有的。)

9. Seattle Cider

西雅图苹果酒的工作人员声称他们的苹果酒“不是普通的苹果酒”。那么,产品页面也不是普通的。它看起来像一个故事,故事从精选苹果酒的吸引人的高清图像开始,而这些高清图片恰好有很酷的标签设计。当你悬停鼠标时,会出现说明西雅图苹果酒产品与其他产品的区别,以及每种变量的特殊之处的说明。

但我最喜欢的部分是:当用户滚动鼠标时,会为用户展示一个非常酷的介绍苹果酒从开始酿造到最后完成的交互式视频。这是一个令人惊讶和愉快的用户体验,超越了典型的产品页面,因为它不仅仅展示产品。也显示了产品的来源和方式。

作者简介:

居住在美国波士顿。在hubspot从事营销类工作。本人是哈士奇爱好者,海洋和体育爱好者。

译者简介:

池金锐 跨境电商从业者,对网站运营及APP的运营,数据分析有多年的从业经验,喜爱研究数据,用户运营等。目前在一家大型上市公司从事中东的电商项目。

审校简介:

王楠楠,互联网数据分析从业者。

原文发布于微信公众号 - 互联网数据官(internetcdo)

原文发表时间:2018-12-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券