订阅摹客文章

免费获取优质的设计资讯!

文章分类
Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用
2020,都在用摹客了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用
【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多
入门教程 了解更多

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > 网页设计 > 转化低?价格页面原来需要这样设计 ——上篇

转化低?价格页面原来需要这样设计 ——上篇

Snow
2020-02-24
3932

现今,电商销售日益火爆。 好的在线网站或App设计,已然成为电商产品能否大卖的必备条件。 而价格页面,作为在线网页或App设计的重要组成部分,不仅需要一目了然地呈现各个价格方案和对应功能,还需要有针对性地对用户注册和购买行为进行引导,以有效提升产品销量。 

但高效实用的价格页面究竟长什么样?如何才能成功设计出具有高转化率的价格页面设计?

本篇文章为大家收集了40个最新、最高效的价格页面设计案例和免费素材模板,并分享10个价格页面设计相关原则和技巧,和大家一起探讨:如何才能成功打造高会话数和转化率的价格页面。 

文章主要包括三个部分: 

  • 第一部分:最新、最优的价格页面设计案例分享

  • 第二部分:最优免费价格页面设计模板素材分享

  • 第三部分:如何快速设计最优价格页面

最新、最优的价格页面设计案例分享

1. Slack 

Slack

亮点: 直观易读的标签设计

Slack是一款十分常用的在线聊天和协作工具。支持不同规模的公司和部门,通过设立多个公开或私密频道,毫无干扰地在线沟通和协作。

作为一款在线办公和协作工具,为满足不同规模公司和部门的购买需求,Slack专为用户提供了团队和企业两个购买版本。不同购买版本下又划分更多细小的购买方案,提供不同付费标准和服务。

这样的设定,对于设计师而言,最大的挑战就在于:如何才能够更加直观地呈现两个购买版本的同时,清晰展示下一级别的购买方案和服务细节。

好在Slack团队轻松解决这一问题。通过添加直观易用的标签设计,用户点击团队版标签,即可查看团队版本的三种购买方案和功能详情。点击企业版本标签,即可查看企业定制详情。 简洁高效, 逻辑清晰。 

紧接着添加的表单布局设计,不仅清晰明了的对比了各个购买方案下的功能细节,还为用户快速扫描和查找所需功能提供了可能。 

2. Detectify 

Detectify

亮点: 清晰的布局设计;实用的FAQ设计

Detectify是一款基于SaaS的网站安全扫描工具, 能够帮助各个公司或企业快速发现网站漏洞,并及时应对处理,提升网站的安全性。 

该产品的价格页面布局清晰、直观易读,非常适合需要打造类似价格购买页面的设计师学习和效仿。

它的价格页面,设计师首先在副标题就加入14天免费试用的文案设计,吸引和激励用户直接下载或使用。 然后,通过醒目的价格、按钮引导和功能细节列表等设计,向用户清晰的展示各个价格方案, 引导用户购买。 最后,设计师还额外添加了“常见问题”部分,第一时间消除用户的疑虑,大大提升了销售的成功几率。

3. BombBomb 

BombBomb

亮点: 标签设计;企业版购买引导

BombBomb是一款高效的视频通信工具。支持用户通过发送视频邮件的方式,实现与客户“面对面”交流。 

它的价格页面也通过采用直观易读的标签设计,为用户提供了个人、团队和企业三个版本的购买方案。用户可轻松切换标签,查看不同版本下的价格方案和功能列表。 此外,每个标签下都添加了“Most popular”的字样设计,以引导用户快速做出选择。

此外,为帮助用户快速打造定制方案,企业标签下, 设计师还提供了详细的定制流程(细化到每个操作步骤),以引导用户,促进定制购买的实现。

4. Zendesk 

Zendesk

亮点: 醒目易读的卡片式设计

Zendesk是一款基于SaaS的客户服务和支持管理软件, 能够帮助用户更加轻松的管理客户相关服务和支持需求。 

该产品价格页面的最大特色就是:选用了醒目直观的卡片式设计。  

它的购买页面首先通过副标题突出“价格低至5美元/人起”的优惠, 以吸引和鼓励用户继续查看页面。然后, 通过两种类型的卡片式设计,直观地展示它的多种购买方案和其它产品服务。功能列表清晰易读,层级清晰,简洁而高效。 

底部的“常见问题”部分,用户也可按需展开或收起,用户体验杠杠的。

5. TunnelBear

TunnelBear

亮点: 个性化插图设计;醒目的折扣标签;知名企业点评设计

TunnelBear是一款高效的网络工具软件, 能够加密用户的网络连接,方便他们更加安全地浏览网页。 

它的价格页面,简约、直观、高效而极赋个性。除了了卡片式设计,设计师还添加极为吸睛的个性插画,有效吸引用户驻足的同时,也加深了用户对品牌的印象。希望快速进行品牌建设的设计师可以拿小本本记一下。  

界面红色的折扣标签,醒目吸睛,能够轻松将用户注意吸引到推荐的价格方案,即“Unlimited”方案,有效提升该方案的销售量。 

此外,最后紧跟的用户点评, 来自世界知名的纽约时报公司,能够快速获取用户对产品的信任,帮助他们更快决策、下单并购买。 

6. Mockplus 

TunnelBear

亮点: 标签设计;价格卡片设计;表单功能对比

Mockplus是一个全面、在线的产品协作设计平台。支持设计师、产品经理以及开发人员在线协作和交付,完成网页或App原型制作和演示、设计稿在线评论和反馈收集、设计资源在线预览和管理等等。

最近更新的“柔性工作流”, “设计版本多样对比”以及“产品文档在线编辑和审阅”等功能,都极大地简化了整个设计流程,大大提升整个产品团队的设计和协作效率。  

它的产品价格界面通过简洁干练的标签设计,为用户提供了包年和终身两个购买选择。紧接着的卡片式设计,价格醒目,特色功能和服务列表清晰易读。底部购买方案功能对比的表单设计, 简单清晰,非常易于用户快速扫描和查看所需功能。

整个页面大量留白的使用,也使界面文本和图表内容更加突出。 

总之,Mockplus的价格页面, 简约干练,高效实用,是一款非常典型的网页价格或购买页面设计。如果你正在寻找一款简约高效的价格页设计,建议点击链接查看详情。

7. HubSpot

TunnelBear

亮点: 两级导航;侧边栏货币切换设计

HubSpot是一款典型的B2B的SaaS产品,为用户提供CRM管理、市场营销、客户服务和支持等多种服务。

用户选购的服务不同,付费金额也会相应变化。 所以,为方便用户根据各自需求定制购买,设计师在其价格页面的顶部添加了两级导航设计。第一级导航提供宏观的付费选择, 方便用户快速确定购买方案, 例如“Products & Plans”, “Growth Suite(with a 25% off discount)” 以及 “Create a Bundle”。 之后,用户即可通过二级导航,按需搭配各项服务,下单并快速支付。 

左侧悬浮的货币切换设计, 也极大的方便了用户更加准确的计算付费金额。

总之,这款产品的价格页面设计,尤其值得需要加入货币换算功能的设计师参考。

8. Ticket Leap

Ticket Leap

亮点: 特殊布局;吸睛的着陆页设计;费用自动计算

Ticket Leap是一个在线的票务平台, 可以帮助任何公司或企业轻松在线进行票务售卖、营销, 并管理各种票务促销和优惠活动。

它的价格页面,首先在着陆页选用了高清吸睛的背景大图设计,快速吸引用户停留驻足。之后,添加“No contracts, no fees, no worries”之类的文本设计,激发用户继续阅读的兴趣。 

然后,紧接着利用特殊页面布局,为用户详细分析产品的费用的具体计算方式,并逐一介绍着陆页中“No contracts, no fees, no worries”标题的含义。 

Alt: 设计师逐一解释No contracts, no fees, no worries的标题含义

此外,如若用户还是无法理解应该如何计算费用的话,不用担心,设计师还在页面底部添加了特制的交互式表单设计。用户输入票务单价,表单即会自动计算相关费用,操作简单,极其贴心实用。

Alt: 提供自动计算功能的交互式表单设计

9. Adobe 

Adobe

亮点: 直观的标签导航设计;产品卡片式设计

大家都知道,Adobe为设计师们提供非常丰富的网页和App设计工具。

为帮助用户快速选择和支付一个或多个设计工具,Adobe的价格页面提供了极为丰富的优质设计。 例如,顶部直观高效的标签导航,提供“Individuals”, "Business",  "Students & Teachers"以及“Schools & Universities”标签设计,方便用户根据各自需求快速定位。紧接着的一系列tag设计,也为用户快速搜索和查找所需工具提供了可能。 

而作为页面主题部分的产品卡片式设计,包含价格、功能简介、购买按钮以及对应产品图标等多种信息,小巧全面, 美观而不失实用性。

此外,设计师还添加多选下单和购买的设计,方便用户按需一次性定制多种购买方案。

10. Ready Mag

Ready Mag

亮点: 清晰整洁的卡片式布局;创意的“隐身”设计;醒目的定制图标

Ready May是一款在线的网页生成工具,可以帮助设计师(尤其是初学者)在线快速地制作各类网页。 

它的在线价格页面也选用了标签导航设计,为用户提供按年和按月支付两个选择。每个标签下, 不同的购买方案的细节展示,设计师则选择了卡片式设计,更加整洁清晰地呈现各个购买方案的实际价格和特色功能。 

此外,当用户选择按年付费时,由于"定制"方案的价格并不固定,为了避免造成不必要的误会或麻烦,设计师则直接添加了特制的“星星”图标进行占位,从视觉上更加直观醒目地提醒用户:该方案的价格是不确定的。 

另外,当用户选择按月支付时,该产品并不提供任何定制方案。 为了不影响整体的界面布局,设计师直接通过降低该方案整体透明度的方式,将其“隐身”, 以避免给用户造成任何干扰。这样的设计,实用而创意,设计师们可以学起来。 

11. Semplice 

Semplice

亮点: 高清工具图片;用户推荐;选中特效

Semplice是一款基于WordPress的在线网页生成工具。

不同于大多电商价格页面,只选用文本和数字之类的枯燥设计,Semplice在其的价格页面加入了吸睛的产品图片设计,轻松吸引用户注意的同时,也能打破整个界面的枯燥乏味之感。 

此外,为方便用户更加准确的查看不同购买方案,设计师还为各个价格方案添加了选中特效。当用户鼠标悬浮在某个购买方案上方时,该购买方案的背景色就会相应变换,让他们更佳准确、专注的查看相应的价格和功能详情。 

12. Big Cartel

Big Cartel

亮点: 特色的背景图片设计

Big Cartel是一个非常实用的在线电商平台,可以帮助各类设计师、艺术家以及手工艺者们快速搭建在线商店,并售卖他们的设计或手工艺作品。 

它的价格页面, 除了简洁醒目的价格和按钮设计,最大的特点就是:选用了现代感十足的背景图片设计,以快速吸引用户进入并购买 。 

希望打造简约或现代风价格页面的设计师,可以了解一下。 

13. Onfleet

Onfleet

亮点: 定制插画;清新高级的配色

Onfleet是一款能够帮助用户高效追踪、分析和管理车队的工具。它的价格页面添加了极具特色的车辆插画,搭配清新的流行色,整个界面美观高级而不失趣味性。 

14. Spotify

Spotify

Spotify是一款网页端的音乐播放器。

不同于一般价格页面开头(利用卡片或表单设计)直接展示各种购买方案和特色功能,Spotify的价格页面,首先简单介绍了3个月付费版本的免费试用福利,以吸引用户直接试用,亲身体验付费版本的优缺点。然后,紧接着介绍为什么需要付费使用,从官方的角度更进一步确认其付费版本的优点。最后,才利用卡片设计,直接展示出各种购买方案和特色功能。

整个介绍过程,流畅而极富逻辑性和说服力。即使是对它的付费版本毫无兴趣的用户,比如小编,也忍不住想要购买看看。当然,直接免费试用3个月,也是不错的选择。你觉得呢?

15. Freshdesk

Freshdesk

亮点: 清新自然的插画和动画设计

Freshdesk是一款基于云端的在线客户服务工具,能够帮助用户通过电子邮件、社交平台、手机客户端等渠道,实现在线客户服务和支持。 

客户服务和支持工作,大都以客户的满意度和舒适度为核心。而为实现这一点,Freshdesk的价格页面的每个细节(包括舒适的配色、圆角的CTA按钮、贴心的鼠标悬浮提示、易读的文本设计等)都透露着设计师的“良苦用心”。 

而整个界面最大的特点就是:其顶部清新而自然的插画设计。搭配恰到好处的动画设计,让整个页面给人一种很舒适、自然的感觉,无论视觉还是交互体验都是一流的。 

16. Hello Fresh

Hello Fresh

亮点: 交互式表单设计

Hello Fresh是一款来自海外的美食指南app,提供各式菜谱和配套食材配送服务。 

为方便用户快速填写配送信息并及时计算费用,设计师在Hello Fresh的价格页面直接添加了交互式表单设计。用户轻松点击或输入,即可根据自身喜好选择或预约各种配送服务, 十分高效易用。 

17. MailChimp

MailChip

亮点: 个性化插图设计;清晰整洁的价格表单设计

MailChip是一款高效的邮箱营销工具。

它的价格页面,除了醒目的标题设计, 最大的特点就是添加了很多极具特色的插画设计,吸睛而极赋个性。简洁直观、整洁高效的价格表单设计,也极大便利了用户查看和购买的过程。

18. Intercom

Intercom

Intercom是一个为企业提供销售、市场、产品和售后等服务的客户沟通系统,支持通过网页、手机端应用以及Email等方式为客户提供服务。

它的价格页面也选用了高效直观的标签导航设计。 而且,为方便用户快速选择和购买价格方案,设计师还特意添加“一体化客户沟通服务方案”和“定制服务方案”等字样设计, 并指向对应的导航标签,以引导用户快速查找和选择。

有类似需求的设计师可以参考看看。 

更多创意价格页面设计案例分享:

19. Gradient Responsive Price Tables

Gradient Responsive Price Tables

利用渐变色打造更加美观吸睛的价格表单设计

20. Hosting Price Table

Hosting Price Table

高清的产品图片设计,也是提升价格页面视觉吸引力的重要方式。 

21. Pricing table with illustrations

Pricing table with illustrations

利用特色插图和简洁干练的标题设计,打造更加直观易读的价格页面。 

22. Price Page Plan

Price Page Plan

水彩风格的背景设计,也能帮助设计师轻松打造清新、时髦、优雅的价格页面。

具体设计案例中,设计师们也可轻松添加其它设计风格,例如常见的现代简约风、优雅复古风、清新自然田园风等。 

23. Pricing page 

Pricing page

利用圣诞树等特色插画或元素,打造吸睛的圣诞节特卖设计。

24. Funny Pricing Tables

Funny Pricing Tables

利用小图标,打造与众不同的价格页面。 

25. Website Price Page

Website Price Page

26. Pricing Page Design

Pricing Page Design

利用各类中式元素,例如梅、兰、竹、菊、松等绘画, 打造独特的中式设计。 

27. Pricing Page Sinitic

Pricing Page Sinitic

此款价格页面采用了特色的“进度条”式设计。用户从左向右拖动滑块,选择合适的人数,对应的付费价格也会相应变化。非常适合需要根据人数调整付费金额的产品或服务使用。 

28. Online Movie Stream Site Pricing Table

Online Movie Stream Site Pricing Table

利用高清背景大图, 轻松打造沉浸式价格页面设计。 

29. Pricing Page with Dark Theme

Pricing Page with Dark Theme

漂亮的星球插画,搭配深蓝色的背景和星空,创造出层次感丰富的价格页面。采用星球的卫星数量来区别Plan的等级,也极具创意。

30. Netflix Price Page

Netflix Price Page

如图,动态背景,也可以帮助设计师快速打造更加吸睛的价格界面。 

以上就是我们为大家收集的30款最优的价格购买页面设计案例。

不久就会为大家推出《转化低?价格页面原来需要这样设计 —— 下篇》。价格页面免费模板素材和如何设计最优价格页面的相关信息,都会在下篇中为大家一一介绍。感兴趣的朋友请继续关注。 

上一篇
摹客X飞书直播圆满结束,一起回顾精彩瞬间!

Mockplus   02/28

【配色不再难】40款炫彩网页设计分享(附模板和配色方案)

Snow   02/21

下一篇
需要帮助?

摹客产品顾问为你服务

我是Thomas,立即扫码加我吧!

帮助群:834699541

服务邮箱:service@jongde.com