木子素材 首页 大神 WEB网页 查看内容

做共赢的设计!社交登陆表单那点事

2014-2-21 00:55| 发布者: admin| 查看: 883| 评论: 0

摘要: 嗨!小伙伴们,今天我们要来探讨一下社交登录表单的那点事。 什么是社交登录表单? 和单纯的注册与登录不一样,现在是社会化的合作时代,一切都讲究共赢、高效!而社交登录表单正是为我们提供了一个快速进入网站的入 ...
二维码1

扫一扫
官方手机版

AI创作助手小程序

扫一扫
AI创作程序

木子官方公众号

扫一扫
木子公众号

木子AI官方公众号

扫一扫
AI公众号

做共赢的设计!社交登陆表单那点事

嗨!小伙伴们,今天我们要来探讨一下社交登录表单的那点事。

什么是社交登录表单?

和单纯的注册与登录不一样,现在是社会化的合作时代,一切都讲究共赢、高效!而社交登录表单正是为我们提供了一个快速进入网站的入口,通常包括注册和登录两部分。社交登录入口一般都是facebook、推特、新浪、qq等。
要想使用网站提供的社交登录表单功能,前提是你有那些社会化网站的帐号,不过这个时代,谁会木有QQ或者微博呢:)

话说国内的一些网站利用社交登录表单登录后,体验很不好,层层跳转,进入网站后,依然要填写一大堆个人资料。而且每次还不能记录登录状态!这哪里是提供便捷,分明只是一个噱头而已。

相关推荐:
网页与APP中那些优美的登陆表单
《实用资源!20个注册登录界面PSD免费下载》
拒绝平庸:优秀WEB登录页面设计

直观看一个例子 Wunderlist:

做共赢的设计!社交登陆表单那点事

该应用允许用户使用社交账号登录,也可以另外直接创建账号。
直白地说,社交登录表单就是一个进入某系统的入口,用户可以在这里注册账号,实现快速登录。

社交登录表单用例

例1:Pinterest

做共赢的设计!社交登陆表单那点事

(使用facebook账号或者邮箱链接到pinterest系统)

该应用是为用户提供图片分享的地方,用户可以在这里分享图片吸引关注。

例2、StumbleUpon

做共赢的设计!社交登陆表单那点事

(注册表单相对pinterest复杂得多,但是只需要填写一次就走完流程了,后续不必再填写)

如果用户选择用facebook链接进入系统,那么后续可能还要填写用户名、邮箱密码等一系列信息。当然也可以直接沿用facebook的昵称。

例3、Canva

做共赢的设计!社交登陆表单那点事

(这是一个在线设计协作网站,登录页面非常酷。)

由于该软件比较新,才刚开始和facebook建立链接关系,所以如果用户使用facebook链接登录的可能还需要另外填写注册信息。

还记得我们推荐过这个网站么《要失业了!在线图形设计平台Canva正式上线》

例4: RunKeeper

做共赢的设计!社交登陆表单那点事

许多研究表明社交登录表单是非常有益而便捷的。比如这个跑步应用,当你注册完毕后它会跟踪你的跑步活动。而你的登录方式可以直接使用第三方社交平台登录。

跑步结果你可以分享到社交平台,一来二去,互惠互利。

例5、Karma

做共赢的设计!社交登陆表单那点事

Karma是一个小小的wifi热点,用于小伙伴间共享网络。

登录Karma可以使用facebook链接,系统自动存储和使用用户来自facebook的资料。但是有个弊端,一些例如TechCrunch和Gizmodo等批判社交网站不实信息的新闻类、科技类公司会要求用户使用真实的Karma资料,所以facebook登录变成一个可选之项,并非完全必须的。

这个例子又给我们上了一课:在其他软件中,给用户一个是否愿意使用社交网站应用程序链接的选择。

例6、Airbnb

做共赢的设计!社交登陆表单那点事

在Airbnb上,用户使用facebook登陆本站的好处比不使用facebook登陆的多。包括添加信任、安全验证,和一些需要预定或托管的环节。

例7、Buffer

做共赢的设计!社交登陆表单那点事

在某些情况下使用社交账号登录是强制性的,适用于web应用程序。比如一些链接中间页强制要求你链接到社交账号用以管理自己的文章。

例8、Quora

做共赢的设计!社交登陆表单那点事

Quora要求每个用户都需要自创一个账户,不允许游客的存在。这使得有些记者和用户有点儿不舒服,但是它也提供了社交登录方式,至少减少了注册时填写表单的痛苦。

更多的例子:

例9、Weebly

做共赢的设计!社交登陆表单那点事

例10、Gumroad

做共赢的设计!社交登陆表单那点事

例11、Asana

做共赢的设计!社交登陆表单那点事

例12、 Foursquare

做共赢的设计!社交登陆表单那点事

例13、Fitocracy

做共赢的设计!社交登陆表单那点事

例14、hackpad

做共赢的设计!社交登陆表单那点事

例15、Map your runs

做共赢的设计!社交登陆表单那点事

使用社交账号登录的好处

从上面的例子可以看出,使用社交账号登录实现了用户和开发者的双赢。

其中,

1、给用户带来的好处:

  • 更直接而迅速地登录网站(仅仅点击一下按钮就OK了);
  • 可预测性的注册过程(这一方法在绝大多数用户心里都已成形,用在哪里都省时省力)
  • 不需要管理多个账户(一个社交账号直接作为各类网站的账号登录,无需另外创建和管理)
  • 信赖(其实大多数情况下用户在初始访问网站的时候都不是非常信赖该网站,于是采用社交账号登录会是较好的方法)

2、为开发人员带来的好处:

  • 用户身份验证(使用社交账号登录可以直观地判断该用户是一个真实的人)
  • 大多数情况下是免费的(使用社交API实现登录通常是自由免费的)
  • 个性化的用户体验(由于便利,用户更经常光顾开发者的网站)
  • 空白输入状态预填充(直接获取用户注册信息甚至更多的额外信息)
  • 使自己的应用程序更加社会化(毫无疑问的,用户此举让你的应用程序和社交直接挂钩,更加社会化)
  • 减少重新登录时的失败次数(使用此举直接不用再另外输入密码,省事儿省心)
  • 垃圾邮件保护机制(使用社交账号登录直接减缓了垃圾邮件的产生,因为邮件的发送需要实现进行第三方验证)

 

仅允许使用社交账号登录的情况

有时候某些网站仅允许用户使用社交账号登录。这些工具是用来帮助用户管理自己的社交账号的。

做共赢的设计!社交登陆表单那点事

为什么不使用社交账号登录

  • 依赖外部平台(使用社交账号登录使得用户随时都需要根据第三方服务的变化而变化。假如某个时刻网站再也不支持社交账号登录了,那么用户此刻会很烦恼)
  • 隐私问题(事实表明社交平台使用API获取用户数据用在其他领域。比如facebook给用户提供一个社交账号链接窗口来了解人们的行为)
  • 处理多账号类型(为了实现社交账号登录,开发者需要另外是设计系统来实现)
  • 决策瘫痪(一些研究表明,太多的选择会影响转化率)
  • 稀释自己的品牌标识(使用社交账号登录直接导致用户对该网站的印象降低)
  • 不值得这么去做(并不是提供了该窗口用户就会自觉去使用,有时候用户看到该窗口甚至厌烦地直接关掉并且放弃登录网站,损失更大)

 

为什么要使用社交账号登录

  •  该选项是可选项而非必选项(用户有自由的选择权)
  • 限制社交账号登录的数目(可选,但是限制数目,省去用户的大多数选择。可以坚持使用热门的社交账号登录方式,比如facebook、Twitter和google等)
  • 有一个退出战略计划(社交平台登录的选择要时刻做好API的不支持)

热门社交账号登录API文档

有的须自备梯子。

Platform Link to API documentation
Facebook Facebook Login
Google Google+ Sign-In
Instagram Authentication
LinkedIn Authentication
Twitter Application-only authentication

原文地址:sixrevisions
木子设计网翻译:@sheisjane

本文由木子设计网原创翻译,转摘请注明木子设计网译文出处,谢谢各位小编。

【木子设计网 原创文章 投稿邮箱:13671295@qq.com】
 
================关于木子设计网================
"木子设计网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册:网页设计师必须修炼的内功技法,更是不可或缺的WEB设计指南https://www.muzisucai.com//ps/。
设计微博:拥有粉丝量63万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材
设计导航:全球顶尖设计网站推荐,设计师必备导航:https://www.muzisucai.com/
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗?
添加 优秀网页设计 微信号:【muzisucai_com】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

做共赢的设计!社交登陆表单那点事
 

手机扫一扫,阅读下载更方便˃ʍ˂

@版权声明

1、本网站文章、帖子等仅代表作者本人的观点,与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样,并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络,仅用作展示,如有侵权请联系站长!QQ: 13671295。


路过

雷人

握手

鲜花

鸡蛋

最新评论

广告图片
悬浮图片
×