详细解析网页社交登陆表单的那点事

2016-02-16 23:11 5 1 收藏

今天图老师小编给大家精心推荐个详细解析网页社交登陆表单的那点事教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - 平面设计 】

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

什么是社交登录表单?

和单纯的注册与登录不一样,现在是社会化的合作时代,一切都讲究共赢、高效!而社交登录表单正是为我们提供了一个快速进入网站的入口,通常包括注册和登录两部分。社交登录入口一般都是facebook、推特、新浪、qq等。

要想使用网站提供的社交登录表单功能,前提是你有那些社会化网站的帐号,不过这个时代,谁会木有QQ或者微博呢。

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

直观看一个例子 Wunderlist:

详细解析网页社交登陆表单的那点事,PS教程,图老师教程网

该应用允许用户使用社交账号登录,也可以另外直接创建账号。

直白地说,社交登录表单就是一个进入某系统的入口,用户可以在这里注册账号,实现快速登录。

社交登录表单用例

例1:Pinterest

详细解析网页社交登陆表单的那点事,PS教程,图老师教程网

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

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

例2、StumbleUpon

详细解析网页社交登陆表单的那点事,PS教程,图老师教程网

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

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

例3、Canva

详细解析网页社交登陆表单的那点事,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

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

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

例4: RunKeeper

详细解析网页社交登陆表单的那点事,PS教程,图老师教程网

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

例5、Karma

详细解析网页社交登陆表单的那点事,PS教程,图老师教程网

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

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

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

例6、Airbnb

详细解析网页社交登陆表单的那点事,PS教程,图老师教程网

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

例7、Buffer

详细解析网页社交登陆表单的那点事,PS教程,图老师教程网

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

例8、Quora

详细解析网页社交登陆表单的那点事,PS教程,图老师教程网

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

更多的例子:

例9、Weebly

详细解析网页社交登陆表单的那点事,PS教程,图老师教程网

例10、Gumroad

详细解析网页社交登陆表单的那点事,PS教程,图老师教程网

例11、Asana

详细解析网页社交登陆表单的那点事,PS教程,图老师教程网

例12、 Foursquare

详细解析网页社交登陆表单的那点事,PS教程,图老师教程网

例13、Fitocracy

详细解析网页社交登陆表单的那点事,PS教程,图老师教程网

例14、hackpad

详细解析网页社交登陆表单的那点事,PS教程,图老师教程网

例15、Map your runs

详细解析网页社交登陆表单的那点事,PS教程,图老师教程网

使用社交账号登录的好处

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

其中,

1、给用户带来的好处:

更直接而迅速地登录网站(仅仅点击一下按钮就OK了);

可预测性的注册过程(这一方法在绝大多数用户心里都已成形,用在哪里都省时省力)

不需要管理多个账户(一个社交账号直接作为各类网站的账号登录,无需另外创建和管理)

信赖(其实大多数情况下用户在初始访问网站的时候都不是非常信赖该网站,于是采用社交账号登录会是较好的方法)

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

用户身份验证(使用社交账号登录可以直观地判断该用户是一个真实的人)

大多数情况下是免费的(使用社交API实现登录通常是自由免费的)

个性化的用户体验(由于便利,用户更经常光顾开发者的网站)

空白输入状态预填充(直接获取用户注册信息甚至更多的额外信息)

使自己的应用程序更加社会化(毫无疑问的,用户此举让你的应用程序和社交直接挂钩,更加社会化)

减少重新登录时的失败次数(使用此举直接不用再另外输入密码,省事儿省心)

垃圾邮件保护机制(使用社交账号登录直接减缓了垃圾邮件的产生,因为邮件的发送需要实现进行第三方验证)

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

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

详细解析网页社交登陆表单的那点事,PS教程,图老师教程网

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

依赖外部平台(使用社交账号登录使得用户随时都需要根据第三方服务的变化而变化。假如某个时刻网站再也不支持社交账号登录了,那么用户此刻会很烦恼)

隐私问题(事实表明社交平台使用API获取用户数据用在其他领域。比如facebook给用户提供一个社交账号链接窗口来了解人们的行为)

处理多账号类型(为了实现社交账号登录,开发者需要另外是设计系统来实现)

决策瘫痪(一些研究表明,太多的选择会影响转化率)

稀释自己的品牌标识(使用社交账号登录直接导致用户对该网站的印象降低)

不值得这么去做(并不是提供了该窗口用户就会自觉去使用,有时候用户看到该窗口甚至厌烦地直接关掉并且放弃登录网站,损失更大)

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

该选项是可选项而非必选项(用户有自由的选择权)

限制社交账号登录的数目(可选,但是限制数目,省去用户的大多数选择。可以坚持使用热门的社交账号登录方式,比如facebook、Twitter和google等)

有一个退出战略计划(社交平台登录的选择要时刻做好API的不支持)

来源:http://www.tulaoshi.com/n/20160216/1576285.html

延伸阅读
如何登陆微信网页版 微信网页版官方主页已经上线,域名为:wx.qq.com。这是微信首次进入PC电脑领域,微信手机版和网页版打通之后,就可以直接在网页浏览器里收发手机微信消息、甚至是在电脑和手机之间传输文件。   微信网页版曝光 我们曾经报道过腾讯绝对不会推出微信电脑版,因为这与腾讯的主营业务QQ冲突。真没想到...
禁用,顾名思义,代表不可用的意思。有一个禁用,就一定对应着一个可用。不论是表单,还是复杂性管理界面,抑或是分步引导,这些场景中都有可能出现禁用状态,而如何合理运用禁用状态,让它成为体验的加分项而不是减分项,正是设计师要不断思考、深入实践的。这里抛一些砖出来,希望和大家一起探讨。 这个不可点的按钮放在这里很鸡肋,我们是...
不显示密码容易输错,显示密码又会让用户感到不安全,两者如何权衡?有什么设计方法可以同时满足方便+安全的需求?今天网秦UEC同学给出一篇详实的分析,一起聊聊这个细节。 在2012年,我曾介绍过为什么要让大家在登陆应用,特别是移动设备应用时能够看到密码。现在,两年过去了,很多大规模的新设计也出现了,下面我就来概括一下显示密码的重要...
微信网页版怎么登陆   作为现在最常用的聊天工具之一,微信已经很好地融入了我们的生活。而现在,自从微信网页版推出后,大家发现微信网页版打字聊天比手机版的要方便。那么,微信网页版怎么登录呢?今天,小编带来微信网页版的两种登陆方式。 第一种:直接网页登陆 进入个人微信手机页面,点击进入底部菜单的我设置通用微信...
什么样的登录过程不会让人厌烦,今天ME网易移动设计的同学从手机码字这件小事上,聊聊他观察到的那些优雅的登录体验,以及一些反人类的糟心过程,以此对照。 如果说互联网改变了人类的生活,那么移动互联网则改变了人类的习惯,它让用户扔掉键盘和鼠标,随时随地在一个巴掌大的屏幕上聊天、视频、订机票酒店、购物等。如今的移动互联网已经...

经验教程

482

收藏

50
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部