轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   sillybuy.com  )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，   請(qǐng)點(diǎn)這里　

什么是社交登錄表單？

和單純的注冊(cè)與登錄不一樣，現(xiàn)在是社會(huì)化的合作時(shí)代，一切都講究共贏、！而社交登錄表單界面設(shè)計(jì)正是為我們提供了一個(gè)快速進(jìn)入網(wǎng)站的入口，通常包括注冊(cè)和登錄兩部分。社交登錄入口一般都是facebook、推特、新浪、qq等。
要想使用網(wǎng)站設(shè)計(jì)提供的社交登錄表單功能，前提是你有那些社會(huì)化網(wǎng)站的帳號(hào)，不過這個(gè)時(shí)代，誰會(huì)木有QQ或者微博呢：）話說國(guó)內(nèi)的一些網(wǎng)站利用社交登錄表單登錄后，體驗(yàn)很不好，層層跳轉(zhuǎn)，進(jìn)入網(wǎng)站后，依然要填寫一大堆個(gè)人資料。而且每次還不能記錄登錄狀態(tài)！這哪里是提供便捷，分明只是一個(gè)噱頭而已。

直觀看一個(gè)例子 Wunderlist：

該應(yīng)用允許用戶使用社交賬號(hào)登錄，也可以另外直接創(chuàng)建賬號(hào)。

直白地說，社交登錄表單就是一個(gè)進(jìn)入某系統(tǒng)的入口，用戶可以在這里注冊(cè)賬號(hào)，實(shí)現(xiàn)快速登錄。

社交登錄表單用例

例1：Pinterest

（使用facebook賬號(hào)或者郵箱鏈接到pinterest系統(tǒng)）

該應(yīng)用是為用戶提供圖片分享的地方，用戶可以在這里分享圖片吸引關(guān)注。

例2、StumbleUpon

（注冊(cè)表單相對(duì)pinterest復(fù)雜得多，但是只需要填寫一次就走完流程了，后續(xù)不必再填寫）

如果用戶選擇用facebook鏈接進(jìn)入系統(tǒng)，那么后續(xù)可能還要填寫用戶名、郵箱密碼等一系列信息。當(dāng)然也可以直接沿用facebook的昵稱。

例3、Canva

（這是一個(gè)在線設(shè)計(jì)協(xié)作網(wǎng)站，登錄頁面非?？帷＃?/p>

由于該軟件比較新，才剛開始和facebook建立鏈接關(guān)系，所以如果用戶使用facebook鏈接登錄的可能還需要另外填寫注冊(cè)信息。

還記得我們推薦過這個(gè)網(wǎng)站么《要失業(yè)了！在線圖形設(shè)計(jì)平臺(tái)Canva正式上線》

例4： RunKeeper

許多研究表明社交登錄表單是非常有益而便捷的。比如這個(gè)跑步應(yīng)用，當(dāng)你注冊(cè)完畢后它會(huì)跟蹤你的跑步活動(dòng)。而你的登錄方式可以直接使用第三方社交平臺(tái)登錄。

跑步結(jié)果你可以分享到社交平臺(tái)，一來二去，互惠互利。

例5、Karma

Karma是一個(gè)小小的wifi熱點(diǎn)，用于小伙伴間共享網(wǎng)絡(luò)。

登錄Karma可以使用facebook鏈接，系統(tǒng)自動(dòng)存儲(chǔ)和使用用戶來自facebook的資料。但是有個(gè)弊端，一些例如TechCrunch和Gizmodo等批判社交網(wǎng)站不實(shí)信息的新聞?lì)悺⒖萍碱惞緯?huì)要求用戶使用真實(shí)的Karma資料，所以facebook登錄變成一個(gè)可選之項(xiàng)，并非完全必須的。

這個(gè)例子又給我們上了一課：在其他軟件中，給用戶一個(gè)是否愿意使用社交網(wǎng)站應(yīng)用程序鏈接的選擇。

例6、Airbnb

在Airbnb上，用戶使用facebook登陸本站的好處比不使用facebook登陸的多。包括添加信任、安全驗(yàn)證，和一些需要預(yù)定或托管的環(huán)節(jié)。

例7、Buffer

在某些情況下使用社交賬號(hào)登錄是強(qiáng)制性的，適用于web應(yīng)用程序。比如一些鏈接中間頁強(qiáng)制要求你鏈接到社交賬號(hào)用以管理自己的文章。

例8、Quora

Quora要求每個(gè)用戶都需要自創(chuàng)一個(gè)賬戶，不允許游客的存在。這使得有些記者和用戶有點(diǎn)兒不舒服，但是它也提供了社交登錄方式，至少減少了注冊(cè)時(shí)填寫表單的痛苦。

更多的例子：

例9、Weebly

例10、Gumroad

例11、Asana

例12、 Foursquare

例13、Fitocracy

例14、hackpad

例15、Map your runs

使用社交賬號(hào)登錄的好處

從上面的例子可以看出，使用社交賬號(hào)登錄實(shí)現(xiàn)了用戶和開發(fā)者的雙贏。

其中，

1、給用戶帶來的好處：

• 更直接而迅速地登錄網(wǎng)站（僅僅點(diǎn)擊一下按鈕就OK了）；
• 可預(yù)測(cè)性的注冊(cè)過程（這一方法在絕大多數(shù)用戶心里都已成形，用在哪里都省時(shí)省力）
• 不需要管理多個(gè)賬戶（一個(gè)社交賬號(hào)直接作為各類網(wǎng)站界面設(shè)計(jì)的賬號(hào)登錄，無需另外創(chuàng)建和管理）
• 信賴（其實(shí)大多數(shù)情況下用戶在初始訪問網(wǎng)站的時(shí)候都不是非常信賴該網(wǎng)站，于是采用社交賬號(hào)登錄會(huì)是較好的方法）

2、為開發(fā)人員帶來的好處：

• 用戶身份驗(yàn)證（使用社交賬號(hào)登錄可以直觀地判斷該用戶是一個(gè)真實(shí)的人）
• 大多數(shù)情況下是免費(fèi)的（使用社交API實(shí)現(xiàn)登錄通常是自由免費(fèi)的）
• 個(gè)性化的用戶體驗(yàn)（由于便利，用戶更經(jīng)常光顧開發(fā)者的網(wǎng)站）
• 空白輸入狀態(tài)預(yù)填充（直接獲取用戶注冊(cè)信息甚至更多的額外信息）
• 使自己的應(yīng)用程序更加社會(huì)化（毫無疑問的，用戶此舉讓你的應(yīng)用程序和社交直接掛鉤，更加社會(huì)化）
• 減少重新登錄時(shí)的失敗次數(shù)（使用此舉直接不用再另外輸入密碼，省事兒省心）
• 垃圾郵件保護(hù)機(jī)制（使用社交賬號(hào)登錄直接減緩了垃圾郵件的產(chǎn)生，因?yàn)猷]件的發(fā)送需要實(shí)現(xiàn)進(jìn)行第三方驗(yàn)證）

 

僅允許使用社交賬號(hào)登錄的情況

有時(shí)候某些網(wǎng)站僅允許用戶使用社交賬號(hào)登錄。這些工具是用來幫助用戶管理自己的社交賬號(hào)的。

為什么不使用社交賬號(hào)登錄

• 依賴外部平臺(tái)（使用社交賬號(hào)登錄使得用戶隨時(shí)都需要根據(jù)第三方服務(wù)的變化而變化。假如某個(gè)時(shí)刻網(wǎng)站再也不支持社交賬號(hào)登錄了，那么用戶此刻會(huì)很煩惱）
• 隱私問題（事實(shí)表明社交平臺(tái)使用API獲取用戶數(shù)據(jù)用在其他領(lǐng)域。比如facebook給用戶提供一個(gè)社交賬號(hào)鏈接窗口來了解人們的行為）
• 處理多賬號(hào)類型（為了實(shí)現(xiàn)社交賬號(hào)登錄，開發(fā)者需要另外是設(shè)計(jì)系統(tǒng)來實(shí)現(xiàn)）
• 決策癱瘓（一些研究表明,太多的選擇會(huì)影響轉(zhuǎn)化率）
• 稀釋自己的品牌標(biāo)識(shí)（使用社交賬號(hào)登錄直接導(dǎo)致用戶對(duì)該網(wǎng)站的印象降低）
• 不值得這么去做（并不是提供了該窗口用戶就會(huì)自覺去使用，有時(shí)候用戶看到該窗口甚至厭煩地直接關(guān)掉并且放棄登錄網(wǎng)站，損失更大）

 

為什么要使用社交賬號(hào)登錄

•  該選項(xiàng)是可選項(xiàng)而非必選項(xiàng)（用戶有自由的選擇權(quán)）
• 限制社交賬號(hào)登錄的數(shù)目（可選，但是限制數(shù)目，省去用戶的大多數(shù)選擇。可以堅(jiān)持使用熱門的社交賬號(hào)登錄方式，比如facebook、Twitter和google等）
• 有一個(gè)退出戰(zhàn)略計(jì)劃（社交平臺(tái)登錄的選擇要時(shí)刻做好API的不支持）

熱門社交賬號(hào)登錄API文檔

有的須自備梯子。

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