获取用户最关键一步——注册登录页面如何设计?

获取用户有多难,相信每个人互联网人都深有体会,一定要非常努力优化产品的每一个体验步骤,才能吸引别人的注册。

注册登录页面就是让路人变成用户的最后一步,也是最关键的一步。


一个出彩的登录页面,可以吸引住用户,让他成为你的注册用户,也能够体现产品的质感和品牌的特性,甚至能提升用户体验,拉近与用户的距离。
Mailchimp 登录页

为此,本期「素材播报」上架了一些关于登录的页面和组件,都是根据网上 100+ 的优秀登录页面设计作品总结而来。
接下来,请看详细报道:

Web 登录页面之大图背景

大图背景的登录页面,是最为常见的页面设计之一。这样的设计不仅会让人有一种沉浸式的体验,图片的选择也会体现产品气质。

通常,大图背景的登录页面会搭配大卡片、小卡片,当然也会有人选择无卡片的形式。

比如,outlook 的登录页面就是大图+小卡片的形式。图片背景与系统的保护程序的风格相呼应。邮件作为工作的工具,采用风景的照片,给人以冷静的感觉。
更典型的是《华盛顿邮报》,直接用华盛顿特区的实景图片作为背景,可供选择的三种登录方式,也与图片中的颜色吻合,一切都是那么的和谐。

还有哪些经典样式呢?请看素材广场本期上架的 7 款大图背景 Web 登录页面。

Web 登录页面之纯色背景

纯色背景的 Web 登录页面应用范围更广。因为设计简洁的产品,即使是登录页也会一以贯之。

比如  Linkedin ,就没有任何背景图片或动画。毕竟我们不需要在登录页面显示有趣,简洁明了的展示就是完美的页面了。

还有些会选择在突出自己特质的颜色上搭配一些图片。

像 Shopify ,用沉静的蓝色作为自己的底色,注册表单旁只是一个简单的图片:一位眼神坚定的女性,却传递出了所有人都可以在这里创建店铺,并获得成功的讯息。

 Dribbble 也是采用这样的形式:左边用户制作的插图,颜色丰富且极具设计感,直接表达出 Dribbble 本身的概念。
纯色背景能做的也不止这些。在素材广场中,我们例举出了 13 种纯色背景登录页面的样式,包含了大卡片、小卡片、插画+卡片、无卡片、插画+卡片的类型。

Web 登录页面之拼色背景

如果觉得纯色和图片过于普通,你可以尝试带有更多产品原色的拼色背景。
Uber 就是一个很好的范本,在纯色的背景添加了条纹图文和插画,增加了视觉趣味,体现出了生机感。

也可以学 Diprella, 在拼色的背景上玩一些简单的交互,让注册、登录变得好玩了起来。


上面两种样式,都属于对拼色背景基础版的优化升级,素材广场提供了更多的样式,等着产品经理和设计师前去探索。

Web 登录页面组件

这次的组件素材都是常见的 Web 登录组件,依据尺寸划分了大、中、小三类,每一类又根据组件的设计样式(方形、圆形、线性)以及登录方式(账号密码登录、第三方登录、扫码登录…)分类。

本套组件既可以单独使用,也可以配合上面的登录页面使用哦~

相信刀友们都看出来了,本次的素材无论是对设计师还是产品经理,都是非常有用的。
设计师可以从相关版式设计中获取设计灵感,产品经理则可以直接使用这些版式和组件,快速搭建一个美观且符合需求的 Web 登录页面。

有没有感受到我们满满的诚意呢?!

如果你喜欢这次的素材请点个赞吧~关于本期的素材,你有任何的想法也可以留言告诉我们哦~或者,你有什么急切需要我们上架的素材,也可以留言说出来。

Powered by Froala Editor