通过分析最好的案例来帮助改进你的登陆页面

前言: 分析SaaS登陆页面的最新趋势并且学习如何运用在你的设计中。 目前已经有许多关于登陆页面最佳设计的资料。在此指南中,将向你展示如何找到让您产生灵感的网站 […]

2018年5月9日

前言:

分析SaaS登陆页面的最新趋势并且学习如何运用在你的设计中。

目前已经有许多关于登陆页面最佳设计的资料。在此指南中,将向你展示如何找到让您产生灵感的网站。然后我们将通过三个示例的详细分析来教你如何学习他们的设计理念。

                            ———-作者:Alexander Handley

目录

  • 如何找到网站去学习。 🔎
  • 三个例子的详细分析。 👀
  • 将所学知识应用于你的网站。 🎉

 

寻找灵感的最佳方式是寻找那些正在为你解决同类问题的公司。

那么,你试图解决的大概的问题是什么?请记住,这是一个品牌活动,而不是产品开发:想一想!

图:问,你正在解决什么问题?

我们在解决沟通的问题。在开发、设计和市场之间没有一个沟通的工具或通用的语言。

很好,那么哪些公司正在解决这个问题?找到那些和你有共同抱负和志向的公司。

图:问,哪三个公司和你有共同的抱负和志向呢?

Airtable,Intercom,和 Slack.

我选择了三家公司,Airtable,Intercom,和 Slack,他们和我的公司Reqfire差不多。

这些公司正在拓展业务范围,并希望以漂亮的设计和丰富的色彩来吸引用户。

着陆页的新趋势

在未来的2018年,每个人都会记得在2017年底,超大图片和自动播放的视频被选为主题区域的形式。

Slack制作了一个通信工具,因此他们的2016年的网站显示了火星漫游者的“酷”形象。

还有什么比交互式数据库更可爱?小朋友和交互数据库:

现在你打开了面向未来的一扇窗:

Airtable2018年2月5日的发布

Intercom 2018年2月5日的发布

Slack2017年8月的发布

从他们的设计中获取灵感

如何制作出一个优秀的页面呢?我相信没有简单的公式或答案。

我敢肯定的是,在我们的三个例子中,他们拥有由天才设计师组成的团队来完善他们的工作,并且用户研究员来优化他们的功能。

我们来看看构成“主题区域”的四个主要元素。

1.标题栏

  • 简洁、宽敞。
  • 置于页面顶部。
  • 5-6个链接。
  • 一个CTA,通过注册按钮来获取您的电子邮件地址。

2.标题和副标题

Slack的字体Slack-Tiempos中的第一个’W’非常有趣,它让我想要继续阅读。

  • 短标题:3-5个字。
  • 标题粗体、清晰、深色。
  • 副标题遵循方案:他们是谁,他们能做什么,他们的作用是什么。

3.主题图片

让我们来欢迎有趣的插画吧!

Airtable  – 作者:Ally Jaye Reeves

  • 弹簧门和桌上植物 – 一定很酷。
  • 艺术家和笔记本电脑 – 新时代的团队。
  • 正方形,三角形和圆形 – 一个有点悠闲但仍然是技术性产品的组件。

    Intercom – 作者:https://dribbble.com/Intercom。

不是我的风格,但它显示被链接的消息和和被打开的信件。

(这是我最喜欢的插图)

Slack  – 作者: Alice Lee

  • 展示了抽象的想法,如共享文件。
  • 在不使用开放式办公室的情况下进行协作。
  • 简单明了。

4.优化CTA(Call to action召唤行动按钮)以注册

我喜欢这种方法。它展示了创建一个帐户有多简单,并为用户加快进程。

我特别喜欢Intercom在电子邮件输入框下面显示一些提示信息。

主题区域下方的其他内容

我专注于“网页上方”的区域。但是这里有一些值得一提的其他功能。

  • 他们都很短! (查看tMonday.com-这只是主题图像)。
  • 灰色的客户标志。
  • 两个类似的用于注册的CTA。
  • 大的页脚。
  • 把它们都放在一起。

以下是我们从上述设计中得到的收获:

  • 标题栏:类似设计,但我们需要更多的空间。
  • 标题:我们选择了华丽而稳重的Libre Baskerville作为我们的标题字体。
  • 英雄形象:我们从Slack插画学到了很多东西,因此试图在没有屏幕截图的情况诠释我们应用的作用。
  • 额外的视频福利:我们通过Framer的视频得到了的想法(上周他们更新了网站-这是新的网站节点。)

赞扬、模仿和更好的转换指标

自实施新设计以来,我们看到我们的转换指标得到了改善,人们观看插图和视频的时间更长。 

您是否想要创建包含数据,逻辑和用户的交互式用户流?

如果是的话,我们的应用程序Reqfire就是为你而制作的。

责编:洪宇轩(文字)     翻译:金毅     编辑:季佳宁

原文:通过学习最好的案例来帮助改进你的登陆页面